/*
Theme Name:   Optimo360
Theme URI:    https://optimo360.com
Description:  Blocksy child theme for the Optimo360 website.
Author:       CoReCo Technologies
Version:      1.3.4
Template:     blocksy
Text Domain:  optimo360
*/

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype");
}

:root {
  --o360-navy: #0b2733;
  --o360-navy-raised: #103746;
  --o360-paper: #f7f8f6;
  --o360-blue-tint: #dff2f7;
  --o360-blue: #1897c0;
  --o360-blue-deep: #0b607b;
  /* Accessible text variant of --o360-blue. The brand blue reaches only 2.92:1
     on --o360-blue-tint, below the 4.5:1 WCAG 1.4.3 minimum for small text.
     Use this wherever the blue carries words rather than surface. */
  --o360-blue-ink: #0f6e8c;
  --o360-orange: #ff6d00;
  /* Border companion for --o360-orange. Brand orange reaches only 2.82:1
     against white, so a button filled with it fails WCAG 1.4.11 (3:1 for
     non-text component boundaries) on light sections no matter what colour
     its label is. This edge carries the boundary; the brand fill is unchanged. */
  --o360-orange-edge: #b84a00;
  --o360-ink: #15252c;
  --o360-muted: #5b6b72;
  --o360-rule: #d9e2e5;
  --o360-white: #ffffff;
  --o360-radius: 16px;
  --o360-shadow: 0 22px 60px rgba(11, 39, 51, 0.12);
  --o360-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--o360-paper);
  color: var(--o360-ink);
  font-family: var(--o360-font);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.site-title {
  color: var(--o360-navy);
  font-family: var(--o360-font);
  font-weight: 750;
  letter-spacing: -0.035em;
}

.site-logo-container + .site-title-container,
.home .hero-section {
  display: none;
}

/* The homepage supplies its own full-bleed section spacing. */
.home .site-main {
  --theme-content-vertical-spacing: 0px;
}

.home [data-vertical-spacing*="top"] {
  padding-top: 0;
}

.site-logo-container img {
  max-height: 46px;
  width: auto;
}

a { text-underline-offset: 0.15em; }

:focus-visible {
  outline: 3px solid var(--o360-orange);
  outline-offset: 3px;
}

/* Blocksy's skip link renders its own link blue on the near-white page, which
   measures 4.16:1 -- under the 4.5:1 minimum. A skip link is the first control
   a keyboard user meets, so it should not be the marginal one. Restyled here
   rather than in the parent theme, which must not be edited. */
.skip-link.screen-reader-text:focus {
  background: var(--o360-white);
  border: 2px solid var(--o360-navy);
  border-radius: 8px;
  box-shadow: var(--o360-shadow);
  color: var(--o360-navy);
  font-weight: 700;
  padding: 0.75rem 1.1rem;
  text-decoration: underline;
}

.o360-eyebrow {
  color: var(--o360-blue-ink);
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.45;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.o360-eyebrow + :is(h1, h2, h3, .o360-display-heading, .o360-lead-title) {
  margin-top: 0;
}

.o360-shell > .o360-display-heading {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.o360-coreco-page .o360-eyebrow {
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
}

.o360-fullbleed {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  width: 100vw;
}

.o360-shell {
  margin-inline: auto;
  max-width: 1180px;
  padding-inline: clamp(22px, 4vw, 48px);
}

.o360-section {
  padding-block: clamp(72px, 10vw, 128px);
}

.o360-section--tint { background: var(--o360-blue-tint); }

.home .o360-home-catalogue {
  padding-bottom: clamp(64px, 6vw, 84px);
}

.home .o360-home-compliance {
  padding-top: clamp(72px, 7vw, 96px);
}

.o360-hero {
  background:
    radial-gradient(circle at 78% 46%, rgba(24, 151, 192, 0.2), transparent 34%),
    linear-gradient(135deg, #081f29 0%, var(--o360-navy) 58%, #0d3341 100%);
  color: rgba(255, 255, 255, 0.78);
  min-height: min(760px, 88vh);
  overflow: hidden;
  padding-block: clamp(88px, 12vw, 150px);
  position: relative;
}

.o360-hero::before {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to right, transparent, black 45%, black);
  pointer-events: none;
  position: absolute;
}

.o360-hero h1,
.o360-hero h2 { color: var(--o360-white); }

.o360-hero h1 {
  font-size: clamp(3.15rem, 7vw, 6.6rem);
  line-height: 0.93;
  margin-bottom: 28px;
  max-width: 850px;
}

.o360-hero .o360-eyebrow { color: #69c7e4; }

.o360-hero__copy {
  /* Carries the explanation, so it should look like it. Previously styled as
     body text under a very large H1, which meant the two competed and the H1
     won. The H1 itself is deliberately unchanged. */
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.65;
  max-width: 620px;
}

/* ---------------------------------------------------------------------------
   Orbit component
   Geometry and behaviour follow content-drafts/orbit-reference.html, which is
   authoritative for both. Do not re-derive these numbers.

   The radii are ONE chain. --o360-orbit-r is the only value set by hand; the
   ring diameter and the label radius are computed from it, so they cannot drift
   the way two independent values did (r was 130 against a 320px ring, leaving
   the nodes orbiting 30px inside their own ring).

   Labels sit OUTSIDE the ring at R + 50. That needs roughly 460px of panel
   width; below it the container query at the foot of this block pulls them in
   and shrinks them rather than letting them collide.
   --------------------------------------------------------------------------- */

/* Smallest rung of the ladder; the container queries at the foot of this block
   step it up. --o360-label-r stays derived because LABEL_R = R + 50 holds at
   every rung: 95/145, 110/160, 120/170. */
.o360-orbit {
  --o360-orbit-r: 95px;                                    /* R */
  --o360-ring-d: calc(var(--o360-orbit-r) * 2);            /* RING_D = 2R */
  --o360-label-r: calc(var(--o360-orbit-r) + 50px);        /* labels outside the ring */
  --o360-stage-h: 330px;
  --o360-label-w: 80px;
  --o360-label-size: 11px;
  --o360-node: 14px;
  --o360-hit: 40px;
  --o360-green: #3fd99b;
  margin: 0;
  position: relative;
  width: 100%;
}

/* The queries below size .o360-orbit, so the container has to be an ancestor of
   it -- an element cannot respond to its own container query.

   The shell spans the panel's BORDER box, not its content box. The width budget
   is 2 * (LABEL_R + LABEL_W / 2) = 2 * (170 + 44) = 428px; the hero panel is
   435px border-box but only 371px of content after 32px padding each side.
   Measured against the content box the full geometry does not fit and the
   component drops to a 190px ring, which is what made it look cramped. Labels
   are text on a flat surface with nothing beside them, so the label layer can
   overflow that padding without colliding with anything. Bleeding the shell
   across it recovers the 64px and buys R=120 with the hero grid untouched. */
.o360-orbit-shell {
  --o360-bleed: 0px;
  container-type: inline-size;
  margin-inline: calc(-1 * var(--o360-bleed));
  width: calc(100% + var(--o360-bleed) * 2);
}

.o360-visual-panel--orbit > .o360-orbit-shell { --o360-bleed: 32px; }

/* Only the stage bleeds. The text slots are put back inside the padding. */
.o360-orbit__head,
.o360-orbit__summary,
.o360-orbit__readout,
.o360-orbit__sub { padding-inline: var(--o360-bleed); }

/* Panel padding is part of the spec. The cramped feel came from the component
   filling its container. Compound selector because the base .o360-visual-panel
   rule is declared later in this file and would otherwise win on order. */
.o360-visual-panel.o360-visual-panel--orbit {
  display: block;
  min-height: 0;
  padding: 26px 32px 30px;
}

/* The pause control belongs in the header row, not over the visual. */
.o360-orbit__head {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.o360-orbit__eyebrow {
  color: #69c7e4;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.16em;
  margin: 0;
  min-height: 1.4em;
  text-transform: uppercase;
}

.o360-orbit__pause {
  background: transparent;
  border: 1px solid rgba(105, 199, 228, 0.4);
  border-radius: 999px;
  color: #69c7e4;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 750;
  height: 34px;
  letter-spacing: 0.08em;
  padding: 0 14px;
  text-transform: uppercase;
}

.o360-orbit__pause:hover { background: rgba(105, 199, 228, 0.14); }

/* Permanent headline. It never swaps -- the per-node phrase changes below it.
   As the readout's default state it was almost never on screen, because the
   tour is nearly always holding on a node. */
.o360-orbit__summary {
  color: var(--o360-white);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 4px;
  max-width: 22ch;
}

.o360-orbit__stage {
  height: var(--o360-stage-h);
  margin: 8px 0 4px;
  overflow: visible;
  position: relative;
  width: 100%;
}

.o360-orbit__ring,
.o360-orbit__inner {
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.o360-orbit__ring {
  border: 1px solid rgba(105, 199, 228, 0.3);
  height: var(--o360-ring-d);
  width: var(--o360-ring-d);
}

.o360-orbit__inner {
  border: 1px solid rgba(255, 255, 255, 0.11);
  height: 136px;
  width: 136px;
}

.o360-orbit__mark {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 106px;
}

.o360-orbit__mark svg { display: block; height: auto; width: 100%; }

/* Dark-background variant of the mark, approved 6 August 2026 and scoped to
   this component only. The source file is unmodified and still carries
   #1897c0, which stays correct on light backgrounds. Do not propagate
   #69c7e4 to the logo anywhere else. */
.o360-orbit__mark [stroke="#1897c0"] { stroke: #69c7e4; }
.o360-orbit__mark [fill="#1897c0"] { fill: #69c7e4; }

/* Nodes, labels, the dot and every trail dot are placed on the same polar
   chain, so they always agree with the ring. */
.o360-orbit__node,
.o360-orbit__label,
.o360-orbit__arm,
.o360-orbit__trail-arm {
  left: 50%;
  position: absolute;
  top: 50%;
}

.o360-orbit__node {
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: var(--o360-hit);
  margin: calc(var(--o360-hit) / -2) 0 0 calc(var(--o360-hit) / -2);
  padding: 0;
  transform:
    rotate(var(--o360-node-angle))
    translateX(var(--o360-orbit-r))
    rotate(calc(-1 * var(--o360-node-angle)));
  width: var(--o360-hit);
}

.o360-orbit__node-dot {
  background: rgba(105, 199, 228, 0.8);
  border: 2px solid var(--o360-navy);
  border-radius: 50%;
  display: block;
  height: var(--o360-node);
  margin: 0 auto;
  transition: background 160ms, box-shadow 200ms, transform 180ms;
  width: var(--o360-node);
}

/* Two separate states. Hover is feedback on your input: colour and a small
   swell, no glow. Arrival is the dot landing: glow and full swell. Merging
   them makes either hover feel laggy or arrival stop registering. */
.o360-orbit__node:hover .o360-orbit__node-dot,
.o360-orbit__node:focus-visible .o360-orbit__node-dot,
.o360-orbit__node.is-hovered .o360-orbit__node-dot {
  background: var(--o360-green);
  box-shadow: none;
  transform: scale(1.22);
}

.o360-orbit__node.is-arrived .o360-orbit__node-dot {
  background: var(--o360-green);
  box-shadow: 0 0 0 5px rgba(63, 217, 155, 0.22);
  transform: scale(1.55);
}

.o360-orbit__label {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--o360-label-size);
  font-weight: 750;
  line-height: 1.3;
  /* Centred by its own box, not by a fixed em offset. A -0.65em margin assumes
     one line, so two-line labels sat off the radius -- measured 162 and 178
     against a nominal 170 on the compliance page. */
  margin: 0;
  pointer-events: none;
  text-align: center;
  transition: color 160ms;
  transform:
    rotate(var(--o360-node-angle))
    translateX(var(--o360-label-r))
    rotate(calc(-1 * var(--o360-node-angle)))
    translate(-50%, -50%);
  width: var(--o360-label-w);
}

.o360-orbit__label.is-lit { color: var(--o360-white); }

.o360-orbit__arm,
.o360-orbit__trail-arm { height: 0; pointer-events: none; width: 0; }

.o360-orbit__dot {
  background: var(--o360-orange);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 109, 0, 0.16);
  height: 14px;
  left: -7px;
  position: absolute;
  top: -7px;
  width: 14px;
}

.o360-orbit__trail-dot {
  background: var(--o360-orange);
  border-radius: 50%;
  opacity: 0;
  position: absolute;
}

/* Reserved heights, so swapping content never reflows or overlaps. */
.o360-orbit__readout {
  align-items: center;
  color: var(--o360-white);
  display: flex;
  font-size: 17px;
  font-weight: 750;
  justify-content: center;
  line-height: 1.35;
  margin: 0 0 4px;
  min-height: 54px;
  text-align: center;
}

.o360-orbit__sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 460px;
  min-height: 72px;
  text-align: center;
}

/* The ladder is label-aware, and keyed to the component's own width rather
   than the viewport -- the constraint is the panel, and a viewport query never
   fires where it bites.

   The 428px budget exists ONLY to fit labels outside the ring. A bare orbit has
   none, so its width need is just the node hit targets overhanging the ring:
   2 * (R + 20) = 280px at R = 120. Keying both variants to the same thresholds
   made a module page in a 406px column drop to R 110 for a constraint that does
   not apply to it.

     labelled:  >= 428px  R 120 | >= 398px  R 110 | else R 95, 11px type
     bare:      >= 280px  R 120 | >= 260px  R 110 | else R 95            */

@container (min-width: 398px) {
  .o360-orbit--labelled {
    --o360-orbit-r: 110px;
    --o360-stage-h: 360px;
    --o360-label-w: 88px;
    --o360-label-size: 13px;
  }
  .o360-orbit--labelled .o360-orbit__summary { font-size: 27px; }
  .o360-orbit--labelled .o360-orbit__readout { font-size: 20px; }
}

@container (min-width: 428px) {
  .o360-orbit--labelled {
    --o360-orbit-r: 120px;
    --o360-stage-h: 400px;
  }
}

@container (min-width: 260px) {
  .o360-orbit--bare {
    --o360-orbit-r: 110px;
    --o360-stage-h: 360px;
  }
  .o360-orbit--bare .o360-orbit__summary { font-size: 27px; }
  .o360-orbit--bare .o360-orbit__readout { font-size: 20px; }
}

@container (min-width: 280px) {
  .o360-orbit--bare {
    --o360-orbit-r: 120px;
    --o360-stage-h: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .o360-orbit__trail { display: none; }
  .o360-orbit__node-dot { transition: none; }
}

/* ---------------------------------------------------------------------------
   Screenshot slot -- VISUAL-SPEC.md section 4

   Designed now so that dropping product screenshots in later is a swap rather
   than a redesign. The slot renders NOTHING while empty: :has(img) gates the
   whole section, so there is no empty frame and no placeholder box. An empty
   device frame reads as broken, not as "coming soon", and the section collapses
   cleanly so the site is shippable today.

   The frame carries an explicit aspect-ratio and the image explicit width and
   height, so a screenshot arriving cannot shift the page around it. Anything
   below the fold is lazy-loaded. Size images at source: a full-resolution
   screenshot scaled down in the browser is the single biggest performance risk
   this site can acquire, and right now it is almost entirely CSS.
   --------------------------------------------------------------------------- */

.o360-shot { display: none; }
.o360-shot:has(img) { display: block; }

.o360-shot__frame {
  aspect-ratio: 16 / 9;
  background: #061a23;
  border: 1px solid rgba(105, 199, 228, 0.22);
  border-radius: 14px;
  margin-inline: auto;
  max-width: 1040px;
  overflow: hidden;
  position: relative;
}

.o360-shot__frame img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.o360-shot__caption {
  color: var(--o360-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 720px;
  text-align: center;
}

.o360-section--tint .o360-shot__caption { color: var(--o360-navy); }

.o360-button .wp-block-button__link,
.wp-block-button.o360-button .wp-block-button__link {
  background: var(--o360-orange);
  border: 1px solid var(--o360-orange-edge);
  border-radius: 999px;
  color: var(--o360-navy);
  font-weight: 700;
  padding: 0.9rem 1.4rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.o360-button .wp-block-button__link:hover,
.wp-block-button.o360-button .wp-block-button__link:hover {
  box-shadow: 0 14px 32px rgba(255, 109, 0, 0.25);
  transform: translateY(-2px);
}

.o360-button--ghost .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--o360-white);
}

.o360-card {
  background: var(--o360-white);
  border: 1px solid var(--o360-rule);
  border-radius: var(--o360-radius);
  box-shadow: 0 8px 28px rgba(11,39,51,.05);
  height: 100%;
  padding: clamp(24px, 3vw, 36px);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.o360-card:hover {
  border-color: rgba(24,151,192,.48);
  box-shadow: var(--o360-shadow);
  transform: translateY(-5px);
}

.o360-number {
  color: var(--o360-orange);
  display: block;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}

.o360-cta {
  background: linear-gradient(130deg, var(--o360-blue-deep), var(--o360-blue));
  border-radius: clamp(18px, 3vw, 30px);
  box-shadow: var(--o360-shadow);
  color: rgba(255,255,255,.82);
  overflow: hidden;
  padding: clamp(38px, 7vw, 76px);
  position: relative;
}

.o360-cta h2 { color: var(--o360-white); }

.o360-cta::after {
  border: 42px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
  height: 260px;
  position: absolute;
  right: -80px;
  top: -110px;
  width: 260px;
}

.o360-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.o360-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.o360-entry-card {
  background: var(--o360-white);
  border: 1px solid var(--o360-rule);
  border-radius: var(--o360-radius);
  overflow: hidden;
}

.o360-entry-card__body { padding: 24px; }
.o360-entry-card__media { aspect-ratio: 4 / 3; background: var(--o360-blue-tint); overflow: hidden; }
.o360-entry-card__media img { height: 100%; object-fit: cover; width: 100%; }
.o360-entry-card h3 { font-size: 1.25rem; margin: 0 0 8px; }
.o360-entry-card p:last-child { margin-bottom: 0; }

.o360-meta {
  color: var(--o360-blue-deep);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.o360-quote {
  border-left: 4px solid var(--o360-orange);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 22px;
  padding-left: 20px;
}

.o360-empty {
  background: var(--o360-blue-tint);
  border-radius: var(--o360-radius);
  color: var(--o360-blue-deep);
  padding: 24px;
}

@media (max-width: 900px) {
  .o360-grid,
  .o360-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .o360-grid,
  .o360-grid--four { grid-template-columns: 1fr; }
  .o360-hero { min-height: auto; }
  .o360-hero h1 { font-size: clamp(2.8rem, 15vw, 4.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Phase 4 site system ----------------------------------------------------- */

.page .hero-section,
.single-o360_system .hero-section {
  display: none;
}

.page .site-main,
.single-o360_system .site-main {
  --theme-content-vertical-spacing: 0px;
}

.page [data-vertical-spacing*="top"],
.single-o360_system [data-vertical-spacing*="top"] {
  padding-top: 0;
}

[data-header*="type-1"] .ct-header [data-row*="middle"] {
  backdrop-filter: blur(18px);
  background: rgba(247, 248, 246, 0.92);
  border-bottom: 1px solid rgba(11, 39, 51, 0.08);
}

.menu-item > a.o360-demo-trigger,
.menu-item.o360-menu-cta > a {
  background: var(--o360-orange);
  border: 1px solid var(--o360-orange-edge);
  border-radius: 999px;
  color: var(--o360-navy) !important;
  font-weight: 750;
  padding: 0.65rem 1.05rem !important;
}

@media (min-width: 1000px) {
  .menu-item > a.o360-demo-trigger,
  .menu-item.o360-menu-cta > a {
    align-self: center;
    height: 46px;
    padding: 0 1.15rem !important;
  }

  .ct-header .sub-menu {
    min-width: 270px;
  }

  .ct-header .sub-menu .sub-menu {
    left: 100% !important;
    max-height: min(70vh, 640px);
    min-width: 340px;
    overflow-y: auto;
  }

  .ct-header .sub-menu .menu-item-has-children {
    position: relative;
  }

  .ct-header .sub-menu .menu-item-has-children::after {
    content: "";
    height: 100%;
    position: absolute;
    right: -10px;
    top: 0;
    width: 10px;
  }

  .ct-header .sub-menu .menu-item > a {
    line-height: 1.35;
    white-space: normal;
  }
}

.o360-page-hero {
  background:
    radial-gradient(circle at 84% 24%, rgba(24, 151, 192, 0.28), transparent 27%),
    linear-gradient(135deg, #081f29 0%, var(--o360-navy) 66%, #0c3645 100%);
  color: rgba(255,255,255,.76);
  overflow: hidden;
  padding-block: clamp(82px, 11vw, 142px);
  position: relative;
}

.o360-page-hero::before,
.o360-system-hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent 5%, black 55%);
  pointer-events: none;
  position: absolute;
}

.o360-page-hero h1,
.o360-page-hero h2 {
  color: var(--o360-white);
}

.o360-page-hero h1 {
  font-size: clamp(3rem, 7vw, 6.25rem);
  line-height: .95;
  margin-bottom: 26px;
  max-width: 900px;
}

/* The third hero-copy class. .o360-hero__copy, .o360-system-hero__copy and this
   one all style the same thing on different templates; this is the one the
   homepage actually uses, and it was missed in the first pass of the section 3
   typography change. All three now carry the same scale. */
.o360-page-hero__copy {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.65;
  max-width: 680px;
}

.o360-split {
  align-items: center;
  display: grid;
  gap: clamp(42px, 7vw, 96px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
}

.o360-split--reverse > :first-child { order: 2; }

.o360-display-heading {
  font-size: clamp(2.3rem, 5vw, 4.7rem);
  line-height: 1;
  max-width: 880px;
}

.o360-lead {
  color: var(--o360-muted);
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.75;
}

.o360-visual-panel {
  background: var(--o360-navy);
  border-radius: clamp(18px, 3vw, 32px);
  box-shadow: var(--o360-shadow);
  color: rgba(255,255,255,.75);
  min-height: 420px;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  position: relative;
}

.o360-visual-panel h3 { color: var(--o360-white); }

/* Lead lines that read as headings but are not section headings. Each was an
   h3 sitting directly beneath the page h1 with no h2 between, so every page
   skipped a level. They are <p> now. These rules reproduce the h3 rendering
   exactly, including the different margins each context had. */
.o360-lead-title {
  color: var(--o360-navy);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 45px;
}

.o360-visual-panel .o360-lead-title { color: var(--o360-white); margin: 0 0 19px; }
.o360-card .o360-lead-title { margin: 45px 0 0; }

.o360-flow-visual {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
}

.o360-flow-visual li {
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  gap: 14px;
  grid-template-columns: 34px 1fr auto;
  padding: 17px 0;
}

.o360-flow-visual li::before {
  background: var(--o360-blue);
  border: 4px solid var(--o360-navy-raised);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(105,199,228,.48);
  content: "";
  height: 14px;
  width: 14px;
}

.o360-flow-visual small {
  color: #69c7e4;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.o360-stat-strip {
  border-bottom: 1px solid var(--o360-rule);
  border-top: 1px solid var(--o360-rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 42px;
}

.o360-stat-strip > div { padding: 24px 28px; }
.o360-stat-strip > div + div { border-left: 1px solid var(--o360-rule); }
.o360-stat-strip strong { color: var(--o360-navy); display: block; font-size: 2.2rem; }
.o360-stat-strip span { color: var(--o360-muted); font-size: .82rem; }

.o360-group-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 48px;
  background: var(--o360-rule);
  border: 1px solid var(--o360-rule);
}

.o360-group-card {
  background: var(--o360-white);
  color: var(--o360-ink);
  min-height: 330px;
  padding: clamp(26px, 4vw, 42px);
  position: relative;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.o360-group-card:hover {
  background: var(--o360-navy);
  color: rgba(255,255,255,.75);
  transform: translateY(-4px);
  z-index: 2;
}

.o360-group-card h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); }
.o360-group-card:hover h3 { color: var(--o360-white); }
.o360-group-card__index { color: var(--o360-orange); font-weight: 800; }
.o360-group-card__count { color: var(--o360-blue-deep); float: right; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.o360-group-card:hover .o360-group-card__count { color: #69c7e4; }

.o360-text-link {
  color: var(--o360-blue-deep);
  display: inline-flex;
  font-weight: 750;
  gap: 8px;
  margin-top: 12px;
  text-decoration: none;
}

.o360-group-card:hover .o360-text-link { color: var(--o360-white); }

.o360-featured-rail {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 46px;
}

.o360-featured-card {
  background: var(--o360-white);
  border: 1px solid var(--o360-rule);
  border-radius: var(--o360-radius);
  min-height: 280px;
  padding: 26px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.o360-featured-card:hover { box-shadow: var(--o360-shadow); transform: translateY(-5px); }
.o360-featured-card__top { color: var(--o360-orange); display: flex; font-size: .72rem; font-weight: 800; justify-content: space-between; letter-spacing: .1em; }
.o360-featured-card h3 { font-size: 1.3rem; margin-top: 45px; }
.o360-featured-card h3 a { color: inherit; text-decoration: none; }
.o360-featured-card p { color: var(--o360-muted); font-size: .94rem; }

.o360-directory__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 42px;
}

.o360-directory__filters button {
  background: transparent;
  border: 1px solid var(--o360-rule);
  border-radius: 999px;
  color: var(--o360-navy);
  cursor: pointer;
  font: 700 .84rem/1 var(--o360-font);
  padding: .78rem 1rem;
}

.o360-directory__filters button:hover,
.o360-directory__filters button.is-active {
  background: var(--o360-navy);
  border-color: var(--o360-navy);
  color: var(--o360-white);
}

.o360-directory__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.o360-system-card {
  background: var(--o360-white);
  border: 1px solid var(--o360-rule);
  border-radius: var(--o360-radius);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(24px, 3vw, 34px);
}

.o360-system-card[hidden] { display: none; }
.o360-system-card__meta { color: var(--o360-blue-deep); display: flex; font-size: .68rem; font-weight: 800; justify-content: space-between; letter-spacing: .09em; text-transform: uppercase; }
.o360-system-card h2 { font-size: 1.5rem; margin-top: 42px; }
.o360-system-card h2 a { color: inherit; text-decoration: none; }
.o360-system-card p { color: var(--o360-muted); }
.o360-system-card > .o360-text-link { margin-top: auto; }

.o360-check-visual {
  display: grid;
  gap: 14px;
  margin-top: 38px;
}

.o360-check-visual > div {
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  display: grid;
  gap: 16px;
  grid-template-columns: 40px 1fr auto;
  padding: 18px;
}

.o360-check-visual b { color: var(--o360-white); }
.o360-check-visual span:first-child { color: var(--o360-orange); font-weight: 850; }
.o360-check-visual small { color: #69c7e4; font-size: .65rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.o360-service-grid,
.o360-contact-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 42px;
}

.o360-service-card,
.o360-contact-card {
  background: var(--o360-white);
  border: 1px solid var(--o360-rule);
  border-radius: var(--o360-radius);
  padding: 30px;
}

.o360-service-card span { color: var(--o360-orange); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.o360-contact-card a { color: var(--o360-navy); font-size: clamp(1rem, 1.6vw, 1.22rem); font-weight: 750; overflow-wrap: anywhere; text-decoration: none; }

.o360-coreco-logo { height: auto; max-width: 420px; width: 100%; }

/* CoReCo brand panels ---------------------------------------------------- */

.o360-coreco-home {
  padding-block: clamp(72px, 8vw, 112px);
}

.o360-contact-hero__copy {
  max-width: 760px;
}

.o360-contact-hero__copy > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.o360-directory__filters button[id] {
  scroll-margin-top: 150px;
}

.ct-header .o360-menu-view-all > a {
  color: var(--o360-orange) !important;
  font-weight: 800;
}

.o360-coreco-home__grid {
  align-items: center;
  display: grid;
  gap: clamp(48px, 8vw, 112px);
  grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr);
}

.o360-coreco-logo-panel {
  align-items: center;
  aspect-ratio: 5 / 4;
  background: var(--o360-white);
  border: 1px solid rgba(24, 151, 192, .42);
  border-radius: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 26px 70px rgba(11, 39, 51, .12);
  display: flex;
  justify-content: center;
  padding: clamp(42px, 6vw, 76px);
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.o360-coreco-logo-panel:hover {
  border-color: var(--o360-blue);
  box-shadow: 0 30px 80px rgba(11, 39, 51, .17);
  transform: translateY(-4px);
}

.o360-coreco-logo-panel:focus-visible {
  outline: 3px solid var(--o360-orange);
  outline-offset: 5px;
}

.o360-coreco-logo-panel .o360-coreco-logo {
  display: block;
  margin: 0;
  max-width: min(100%, 460px);
}

.o360-coreco-home__copy {
  max-width: 690px;
}

.o360-coreco-home__title {
  font-size: clamp(2.75rem, 4.2vw, 4.4rem);
  line-height: .98;
  margin: 0 0 28px;
  max-width: 15ch;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.o360-coreco-home__title span {
  display: block;
  white-space: nowrap;
}

.o360-coreco-home__copy .o360-lead {
  max-width: 620px;
}

.o360-coreco-page {
  align-items: center;
  display: grid;
  min-height: calc(100svh - 120px);
  padding-block: clamp(44px, 6vh, 72px);
}

.o360-coreco-page__grid {
  align-items: center;
  display: grid;
  gap: clamp(52px, 7vw, 104px);
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .82fr);
}

.o360-coreco-page__copy {
  max-width: 690px;
}

.o360-coreco-page__title {
  color: var(--o360-white);
  font-size: clamp(3.6rem, 5.7vw, 5.7rem);
  letter-spacing: -.055em;
  line-height: .92;
  margin: 0 0 28px;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.o360-coreco-page__title span {
  display: block;
  white-space: nowrap;
}

.o360-coreco-page__copy .o360-page-hero__copy {
  margin-bottom: 26px;
  max-width: 640px;
}

.o360-coreco-cert {
  border-left: 3px solid var(--o360-blue);
  display: grid;
  gap: 3px;
  margin: 28px 0 30px;
  padding: 3px 0 3px 18px;
}

.o360-coreco-cert strong {
  color: var(--o360-navy);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.o360-coreco-cert span {
  color: var(--o360-muted);
  font-size: .92rem;
}

.o360-coreco-page .o360-coreco-cert {
  border-left-color: var(--o360-orange);
}

.o360-coreco-page .o360-coreco-cert strong {
  color: var(--o360-white);
}

.o360-coreco-page .o360-coreco-cert span {
  color: rgba(255, 255, 255, .7);
}

.o360-coreco-page__logo {
  aspect-ratio: 4 / 5;
  max-height: min(590px, 64vh);
  min-height: 420px;
}

.o360-coreco-page__logo .o360-coreco-logo {
  max-width: min(82%, 430px);
}

.o360-built-by-page .o360-mega-footer,
.o360-built-by-page .site-footer {
  display: none;
}

@media (min-width: 861px) {
  body.o360-built-by-page {
    overflow: hidden;
  }
}

@media (min-width: 861px) and (max-height: 820px) {
  .o360-coreco-page {
    height: calc(100svh - 120px);
    min-height: 0;
    padding-block: 28px;
  }

  .o360-coreco-page__grid {
    gap: clamp(42px, 6vw, 82px);
  }

  .o360-coreco-page__title {
    font-size: clamp(3.7rem, 5.2vw, 4.45rem);
    margin-bottom: 18px;
  }

  .o360-coreco-page__copy .o360-page-hero__copy {
    font-size: 1.08rem;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .o360-coreco-page .o360-coreco-cert {
    margin: 18px 0 20px;
  }

  .o360-coreco-page__logo {
    max-height: calc(100svh - 190px);
    min-height: 0;
  }
}

.o360-disclaimer {
  background: #fff6ed;
  border-left: 4px solid var(--o360-orange);
  color: #66401f;
  font-size: .92rem;
  line-height: 1.65;
  margin: 0;
  padding: 20px 24px;
}

.o360-topic-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.o360-topic-card {
  background: var(--o360-white);
  border: 1px solid var(--o360-rule);
  border-radius: var(--o360-radius);
  padding: clamp(28px, 4vw, 42px);
}

.o360-topic-card h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
.o360-topic-card__systems { border-top: 1px solid var(--o360-rule); color: var(--o360-blue-deep); font-size: .85rem; margin-top: 24px; padding-top: 18px; }

.o360-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}

.o360-reveal.is-visible { opacity: 1; transform: none; }

/* System template */
.o360-system-hero {
  background: linear-gradient(135deg, #081f29 0%, var(--o360-navy) 64%, #0c3645 100%);
  color: rgba(255,255,255,.78);
  overflow: hidden;
  padding-block: clamp(88px, 12vw, 148px);
  position: relative;
}

.o360-system-hero__grid { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
.o360-system-hero h1 { color: var(--o360-white); font-size: clamp(3rem, 7vw, 6.2rem); line-height: .94; }
.o360-system-hero__copy { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.65; max-width: 680px; }

/* The hero CTA group is rendered as raw markup by single-o360_system.php, so it
   never receives the is-layout-flex class the block editor would normally add.
   Without this rule the buttons stack full-width and overlap. */
.o360-system-hero .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.o360-system-hero .wp-block-buttons > .wp-block-button { margin: 0; }

/* width is required: the auto side margins below make this a shrink-to-fit box,
   and every child is absolutely positioned, so without it the circle collapses
   to the width of its own border and the nodes pile up in the centre. */
.o360-system-radar {
  aspect-ratio: 1;
  border: 1px solid rgba(105,199,228,.36);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(24,151,192,.07), 0 0 0 104px rgba(24,151,192,.035);
  margin: 70px auto;
  position: relative;
  width: min(330px, 100%);
}

.o360-system-radar::before { border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; inset: 22%; position: absolute; }
.o360-system-radar__core { align-items: center; display: flex; flex-direction: column; gap: 6px; inset: 28%; justify-content: center; position: absolute; text-align: center; }
.o360-system-radar__core strong { color: var(--o360-white); font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1; }
.o360-system-radar__core span { color: #69c7e4; font-size: .64rem; font-weight: 750; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }

/* Nodes sit on the outer ring. left/top place the node's centre on a point of
   the circle; the translate re-centres the node on that point. */
.o360-system-radar__node {
  background: var(--o360-orange);
  border: 5px solid var(--o360-navy);
  border-radius: 50%;
  height: 24px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
}
.o360-system-radar__node--one { left: 6.7%; top: 25%; }
.o360-system-radar__node--two { left: 100%; top: 50%; }
.o360-system-radar__node--three { left: 32.9%; top: 97%; }

.o360-system-body { align-items: start; display: grid; gap: clamp(42px, 8vw, 100px); grid-template-columns: minmax(0, 1.18fr) minmax(300px, .72fr); }
.o360-system-content > p:first-child { color: var(--o360-blue-deep); font-size: 1.16rem; font-weight: 650; }
.o360-system-content h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-top: 1.6em; }
.o360-system-content h3 { font-size: 1.25rem; margin-top: 2em; }
.o360-system-content ul { border-left: 2px solid var(--o360-blue); padding-left: 28px; }

.o360-system-proof { background: var(--o360-navy); border-radius: 24px; color: rgba(255,255,255,.72); padding: 34px; position: sticky; top: 120px; }
.o360-system-proof h2 { color: var(--o360-white); font-size: 2rem; }
.o360-system-proof ol { list-style: none; margin: 30px 0 0; padding: 0; }
.o360-system-proof li { border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 5px 14px; grid-template-columns: 34px 1fr; padding: 19px 0; }
.o360-system-proof li span { color: var(--o360-orange); font-size: .7rem; font-weight: 800; grid-row: 1 / 3; }
.o360-system-proof li strong { color: var(--o360-white); }
.o360-system-proof li small { color: rgba(255,255,255,.6); }

.o360-module-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 45px; }
.o360-module-card { background: var(--o360-white); border: 1px solid var(--o360-rule); border-radius: 14px; min-height: 175px; padding: 24px; }
.o360-module-card span { color: var(--o360-orange); font-size: .72rem; font-weight: 850; }
.o360-module-card h3 { font-size: 1.1rem; margin-top: 35px; }
.o360-cta--split { align-items: end; display: grid; gap: 52px; grid-template-columns: 1.2fr .8fr; }

/* Footer and dialog */
.o360-mega-footer { background: #071b24; color: rgba(255,255,255,.68); padding-block: 72px; }
.o360-mega-footer__grid { display: grid; gap: 48px; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; }
.o360-mega-footer h2 { color: var(--o360-white); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.o360-mega-footer ul { list-style: none; margin: 24px 0 0; padding: 0; }
.o360-mega-footer li + li { margin-top: 10px; }
.o360-mega-footer a { color: rgba(255,255,255,.74); text-decoration: none; }
.o360-mega-footer a:hover { color: var(--o360-white); }
.o360-mega-footer__brand > img { filter: brightness(0) invert(1); max-width: 230px; }
.o360-mega-footer__brand p { max-width: 290px; }
.o360-coreco-footer-link { display: inline-block; margin-top: 18px; }
.o360-coreco-footer-link img { filter: grayscale(1) brightness(1.7); height: auto; max-width: 170px; opacity: .78; }
.o360-footer-demo { background: var(--o360-orange); border: 1px solid var(--o360-orange-edge); border-radius: 999px; color: var(--o360-navy) !important; display: inline-flex; font-weight: 750; margin-top: 24px; padding: .85rem 1.15rem; }
.site-footer { background: #05161d; }

.o360-demo-dialog {
  background: transparent;
  border: 0;
  border-radius: 26px;
  box-shadow: 0 35px 100px rgba(0,0,0,.38);
  color: var(--o360-ink);
  max-height: min(850px, 92vh);
  max-width: min(1040px, 92vw);
  opacity: 0;
  overflow: auto;
  padding: 0;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, calc(-50% + 18px)) scale(.985);
  transition: opacity 220ms ease, transform 220ms ease, display 220ms allow-discrete;
  width: 100%;
  z-index: 100002;
}

.o360-demo-dialog[open] { opacity: 1; transform: translate(-50%, -50%); }
@starting-style { .o360-demo-dialog[open] { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(.985); } }
.o360-demo-dialog::backdrop { backdrop-filter: blur(8px); background: rgba(4,20,28,.72); }
.o360-dialog-open { overflow: hidden; }
.o360-dialog-open body::before { background: rgba(4,20,28,.72); content: ""; inset: 0; position: fixed; z-index: 100001; }
.o360-demo-dialog__layout { display: grid; grid-template-columns: .82fr 1.18fr; }
.o360-demo-dialog__intro { background: var(--o360-navy); color: rgba(255,255,255,.74); padding: clamp(34px, 5vw, 62px); }
.o360-demo-dialog__intro h2 { color: var(--o360-white); font-size: clamp(2rem, 4vw, 3.3rem); }
.o360-demo-dialog__form { background: var(--o360-white); padding: clamp(32px, 5vw, 58px); position: relative; }
.o360-demo-dialog__close { background: transparent; border: 0; color: var(--o360-navy); cursor: pointer; font: 400 2rem/1 var(--o360-font); position: absolute; right: 20px; top: 16px; }
.o360-demo-dialog__signal { align-items: end; display: flex; gap: 8px; height: 95px; margin-top: 50px; }
.o360-demo-dialog__signal span { animation: o360-signal 2.2s ease-in-out infinite alternate; background: var(--o360-blue); border-radius: 999px; height: 35%; width: 11px; }
.o360-demo-dialog__signal span:nth-child(2) { animation-delay: -.6s; height: 75%; }
.o360-demo-dialog__signal span:nth-child(3) { animation-delay: -1.1s; height: 52%; }
.o360-demo-dialog__signal span:nth-child(4) { animation-delay: -1.6s; height: 92%; }
@keyframes o360-signal { to { height: 95%; } }

.o360-form-wrap .ff-el-group { margin-bottom: 16px; }
.o360-form-wrap .ff-el-form-control { border: 1px solid var(--o360-rule); border-radius: 9px; min-height: 48px; }
.o360-form-wrap textarea.ff-el-form-control { min-height: 112px; }
.o360-form-wrap .ff-btn-submit { background: var(--o360-orange) !important; border: 1px solid var(--o360-orange-edge) !important; border-radius: 999px !important; color: var(--o360-navy) !important; font-weight: 750 !important; padding: .9rem 1.35rem !important; width: 100%; }
.o360-form-notice { color: var(--o360-muted); font-size: .82rem; }

@media (max-width: 1050px) {
  .o360-featured-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o360-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o360-mega-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .o360-split,
  .o360-system-hero__grid,
  .o360-system-body,
  .o360-cta--split,
  .o360-demo-dialog__layout { grid-template-columns: 1fr; }
  .o360-split--reverse > :first-child { order: 0; }
  .o360-group-grid,
  .o360-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o360-system-proof { position: static; }
  .o360-demo-dialog__intro { display: none; }
  .o360-coreco-home__grid,
  .o360-coreco-page__grid { grid-template-columns: 1fr; }
  .o360-coreco-page { min-height: auto; }
  .o360-coreco-page__logo { aspect-ratio: 5 / 3; min-height: 300px; order: -1; }
  .o360-coreco-home__title span,
  .o360-coreco-page__title span { white-space: normal; }
}

@media (max-width: 620px) {
  .o360-group-grid,
  .o360-featured-rail,
  .o360-directory__grid,
  .o360-topic-grid,
  .o360-service-grid,
  .o360-contact-grid,
  .o360-module-grid,
  .o360-mega-footer__grid,
  .o360-stat-strip { grid-template-columns: 1fr; }
  .o360-stat-strip > div + div { border-left: 0; border-top: 1px solid var(--o360-rule); }
  .o360-page-hero h1,
  .o360-system-hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .o360-visual-panel { min-height: 350px; }
  .o360-system-radar { box-shadow: 0 0 0 30px rgba(24,151,192,.07), 0 0 0 60px rgba(24,151,192,.035); margin: 44px auto; width: min(220px, 72%); }
  .o360-system-radar__core { background: rgba(24,151,192,.08); border: 1px solid rgba(105,199,228,.22); border-radius: 50%; inset: 22%; }
  .o360-system-radar__core strong { font-size: 2.25rem; }
  .o360-system-radar__core span { font-size: .58rem; line-height: 1.25; }
  .o360-system-radar__node { display: none; }
  .o360-directory__filters { flex-wrap: nowrap; margin-inline: -22px; overflow-x: auto; padding-inline: 22px; }
  .o360-directory__filters button { flex: 0 0 auto; }
  .o360-coreco-home__grid { gap: 42px; }
  .o360-coreco-logo-panel { padding: 34px; }
  .o360-coreco-home__title { font-size: clamp(2.55rem, 12vw, 3.5rem); max-width: none; }
  .o360-coreco-page { padding-block: 54px 64px; }
  .o360-coreco-page__title { font-size: clamp(3rem, 15vw, 4rem); }
  .o360-coreco-page__logo { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .o360-reveal { opacity: 1; transform: none; }
}