/* ==========================================================================
   Frame — the page below the stage lives in one framed column.
   Hairline borders down both sides (aligned to the original page rails),
   sections stacked inside as panels, compact rhythm, registration marks
   where the frame meets each section. Loaded last on index + SCM page.
   ========================================================================== */

body.home,
body.scm-page {
  --page-rail: 12px;
  --frame: rgba(11, 143, 168, 0.14);
  --frame-pad: clamp(20px, 3.4vw, 52px);
  background-color: #eef5f6 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(11, 143, 168, 0.06) 1px, transparent 0) !important;
  background-size: 18px 18px !important;
  background-attachment: scroll !important;
}
@media (min-width: 640px) { body.home, body.scm-page { --page-rail: 24px; } }
@media (min-width: 1024px) { body.home, body.scm-page { --page-rail: 40px; } }
@media (min-width: 1440px) { body.home, body.scm-page { --page-rail: max(56px, calc((100vw - 1440px) / 2)); } }

/* ---- The framed column */
body.home main > section:not(#top),
body.home main > nav.s-index + section,
body.scm-page main > section,
body.home .site-footer,
body.scm-page .site-footer {
  margin-left: var(--page-rail) !important;
  margin-right: var(--page-rail) !important;
  border-left: 1px solid var(--frame) !important;
  border-right: 1px solid var(--frame) !important;
}
body.home main > section:not(#top) + section,
body.scm-page main > section + section { border-top: 1px solid var(--frame) !important; }
body.home main > section:not(#top),
body.scm-page main > section { position: relative; }
/* fh-page-hero gives #top width:100%; with the frame margins that overflowed the viewport */
body.scm-page main > section#top { width: auto !important; }

/* Inside the frame the content runs to the frame, with even padding */
body.home .s__wrap,
body.scm-page .s__wrap {
  max-width: none !important;
  padding-left: var(--frame-pad) !important;
  padding-right: var(--frame-pad) !important;
}

/* ---- Registration marks: a cross where each section meets the frame */
body.home main > section:not(#top)::after,
body.scm-page main > section::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3;
  top: -1px !important;
  bottom: auto !important;
  left: -10px !important;
  right: -10px !important;
  width: auto !important;
  height: 9px !important;
  transform: none !important;
  pointer-events: none;
  background:
    linear-gradient(#048eaa, #048eaa) no-repeat 0 0 / 19px 1px,
    linear-gradient(#048eaa, #048eaa) no-repeat 100% 0 / 19px 1px,
    linear-gradient(#048eaa, #048eaa) no-repeat 9px 0 / 1px 9px,
    linear-gradient(#048eaa, #048eaa) no-repeat calc(100% - 9px) 0 / 1px 9px !important;
}
body.scm-page main > section.scm-stage::after { display: none !important; }

/* ---- Compact rhythm */
body.home .s,
body.scm-page .s { padding-top: clamp(48px, 5.6vw, 84px) !important; padding-bottom: clamp(48px, 5.6vw, 84px) !important; }
body.home .s-head,
body.scm-page .s-head { margin-bottom: clamp(26px, 3.2vw, 44px) !important; }
body.home .s-title,
body.scm-page .s-title { font-size: clamp(28px, 3.2vw, 44px) !important; line-height: 1.08 !important; }
body.scm-page .scm-stage .s-title { font-size: clamp(34px, 4vw, 54px) !important; }
body.home .s-lede,
body.scm-page .s-lede { font-size: clamp(15.5px, 1.15vw, 17px) !important; }
body.home .s-eyebrow,
body.scm-page .s-eyebrow { margin-bottom: 14px !important; }
body.home .s-more { margin-top: 24px !important; }
body.home .s-proof__stats li { padding-top: clamp(22px, 3vw, 34px) !important; padding-bottom: clamp(22px, 3vw, 34px) !important; }
body.home .s-proof__stats b { font-size: clamp(28px, 2.8vw, 40px) !important; }
body.home .s-contact { padding-bottom: clamp(56px, 6vw, 96px) !important; }
body.scm-page .scm-stage { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(48px, 5.6vw, 80px) !important; }

/* ---- Tiles on thin gutters (a wall, not floating cards) */
body.home .sigs,
body.home .inds,
body.home .s-grid,
body.home .steps,
body.home .vs { gap: 2px !important; }
body.home .sigs,
body.home .inds { background: transparent; }
body.home .sig { min-height: 250px !important; padding: 24px 22px !important; }
body.home .sig__n { margin-top: 32px !important; }
body.home .ind a { min-height: 240px !important; padding: 20px !important; }
@media (min-width: 1080px) { body.home .inds { grid-auto-rows: 256px !important; } }
body.home .steps { margin-bottom: clamp(32px, 4vw, 48px) !important; }
body.home .steps li { padding: 0 20px 20px 0 !important; }
body.home .steps b { width: 52px !important; height: 52px !important; margin-bottom: 20px !important; }
body.home .steps h3 { font-size: 24px !important; }
body.home .vs__card { padding: clamp(24px, 3vw, 36px) !important; }
body.home .s-memory .nm__layers { margin-top: 24px !important; }
body.home .tw__stage { height: clamp(520px, 72vh, 720px); }

/* Notches stay only on hero-like cards; tiles go square for a clean wall */
body.home .sig,
body.home .ind a,
body.home .s-grid .fh-card { clip-path: none !important; }

/* Logos strip sits as one framed band */
body.home .s-logos__row { padding-top: 18px !important; padding-bottom: 18px !important; }

/* Floating index sits just outside the frame */
@media (min-width: 1200px) { body.home .s-index { right: max(8px, calc(var(--page-rail) - 44px)); } }

/* Footer closes the frame */
body.home .site-footer,
body.scm-page .site-footer { border-top: 1px solid var(--frame) !important; }

@media (max-width: 639px) {
  body.home main > section:not(#top)::after,
  body.scm-page main > section::after { left: -6px !important; right: -6px !important; }
}