/* ---------------------------------------------------------------
   site-fixes.css — post-export corrections layered over the Framer
   build. Additive and revertible: delete this file and its <link>
   tags to return to stock behaviour.

   NOTE: an earlier "Edge/Echo cards are clipped on mobile" rule was
   removed. The 700px child inside those 550px cards is
   data-framer-name="Black Fader" — an empty decorative tint
   (background:#000, opacity:.2) with inset:0 0 -150px, intentionally
   oversized and clipped by overflow:hidden. Nothing is hidden, and
   forcing overflow:visible spilled the tint over the next section.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Interactive plan map (Edge / Echo) — selection state.
   Wired by plan-map.js. Only one hotspot can be active at a time;
   when one is active the rest recede rather than disappear, so the
   plan stays readable.
   --------------------------------------------------------------- */
.cc-spot {
  cursor: pointer;
  transition: opacity .22s ease, filter .22s ease;
}
.cc-spot:focus-visible {
  outline: 2px solid #97a97f;
  outline-offset: 2px;
}
/* dim the unselected hotspots only while something is selected */
.cc-map-has-active .cc-spot:not(.cc-spot-active) { opacity: .35; }
.cc-map-has-active .cc-spot-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cc-spot { transition: none; }
}

/* ---------------------------------------------------------------
   Plan Card white space (Edge + Echo).
   The "Plans" column is locked to height:700px with
   justify-content:center while its content is only ~400-450px, so
   ~100-160px of dead space sits above AND below the group. On desktop
   the 700px pairs with the plan image beside it, so there we only
   tighten the internal rhythm. Stacked layouts have nothing to pair
   with, so the fixed height is dropped entirely.
   --------------------------------------------------------------- */
@media (max-width: 1199px) {
  [data-framer-name="Plans"] {
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 24px !important;
  }
  /* the card shell and its sibling column are pinned to 700px too */
  [data-framer-name="Plan Card"],
  [data-framer-name="Plan Card"] > *,
  [data-framer-name="Features"] {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Desktop (>=1200px) is deliberately left alone. Tightening the 48px
   gaps there does NOT reduce white space: the column stays pinned to
   700px to pair with the plan image beside it and is centre-justified,
   so shrinking the gaps just moves the same slack to the top and bottom
   (measured: dead space 159px -> 191px). Reducing it there means
   unpinning the 700px height, which breaks the pairing — a design call,
   not a CSS one. */

/* ---------------------------------------------------------------
   Plan-map overlay nudge.
   The hotspot layer and the plan image share one rectangle (the image
   is set to fill its box in plan-map.js), so alignment holds
   proportionally at every screen size. If the authored hotspot
   positions still sit slightly off the drawing, correct the whole
   overlay ONCE here — values are in % of the map box, so the
   correction scales with the map and stays right at all sizes.
   Default is no offset.
   --------------------------------------------------------------- */
.cc-spot {
  translate: var(--cc-spot-dx, 0) var(--cc-spot-dy, 0);
}

/* ---------------------------------------------------------------
   Orphans ("tail words") — a single word stranded on the last line.
   NOTE the longhand. Framer sets `white-space: pre-wrap` on its text
   elements, and `white-space` is a shorthand that resets
   `text-wrap-style` back to `auto` — so a `text-wrap: pretty`
   declaration is silently discarded. `text-wrap-style` survives.
   Headings get `balance` (evens the lines); body copy gets `pretty`
   (specifically avoids a one-word last line).
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  text-wrap-style: balance;
}
p, li, blockquote, figcaption {
  text-wrap-style: pretty;
}

/* ---------------------------------------------------------------
   Suite tab group jumps when the FIRST tab is selected (Edge/Echo).

   Two of the three variants size the tabs as equal thirds
   (flex: 1 0 0px -> 99px each, group 296px). The first-tab variant
   instead sizes them to their content (flex: 0 0 auto -> ~116px each,
   group 346px). The group is centre-aligned, so that 50px growth pushes
   it 25px to the left — which reads as "the other tabs shift" and only
   happens on that one tab.

   Pinning the tabs to equal thirds in every state keeps the group a
   constant width, so nothing moves when the selection changes. The
   Marker is absolutely positioned and unaffected by flex, but it is
   excluded for clarity.
   --------------------------------------------------------------- */
/* Structural, not name-based: Edge calls the group "Plan Switch", Echo calls it
   "Suite 1" and its tabs "1"/"2"/"4". Both put an absolutely-positioned
   [data-framer-name="Marker"] as a direct child, so :has() targets the pattern
   rather than the names. Verified to match exactly one group per page. */
*:has(> [data-framer-name="Marker"]) > *:not([data-framer-name="Marker"]) {
  flex: 1 0 0px !important;
}

/* ---------------------------------------------------------------
   Remove the fade-in-up on tab content (Edge + Echo).

   Switching suite tabs re-runs Framer's variant transition, so the whole
   panel fades and slides up each time — which makes the content feel slow
   to arrive when you are comparing suites.

   Motion writes opacity/transform as INLINE styles, so a stylesheet
   `!important` overrides it and the panel simply appears in its final
   state. Verified safe first: in the settled state 0 of the 112 elements
   inside the card use a transform, and only "Pro Image 2" is intentionally
   below full opacity (0.9) — which is excluded.

   `transition` is deliberately NOT disabled: the tab Marker slides via
   `left`, and killing transitions would make the indicator jump.
   --------------------------------------------------------------- */
/* The card root differs per page (Edge: "Plan Card", Echo:
   "Suite 01 - 02 / Echo"), so match the element that OWNS the Plans column
   instead. Verified to match exactly one card per page. */
*:has(> [data-framer-name="Plans"]) *:not([data-framer-name="Pro Image 2"]) {
  opacity: 1 !important;
  transform: none !important;
}

/* Headline blocks that Framer zooms in on scroll (scale .2 -> 1) above the
   phone breakpoint only. Pinned to their final size so tablet and desktop
   agree, and so the section never renders shrunken with oversized gaps. */
.cc-no-zoom { transform: none !important; }

/* ---------------------------------------------------------------
   Desktop spacing scale (>=1200px).

   The site is built on a spacing scale of 24 / 32 / 40 / 48 / 56 /
   60 / 80. A handful of blocks carry authored values that sit just
   off it — 30, 37, 41, 50, 52, 54, 88 — and one desktop rule uses
   the *tablet* horizontal inset. Individually each is a few pixels;
   together they are why sections do not line up down the page.

   Same rule as the earlier type pass: a value within a few px of a
   neighbouring value on the scale is drift, not design. Each entry
   below moves to the nearest scale value and nothing else.

   Desktop only. The 810-1199 and 0-809 rules are untouched, so
   tablet and phone render exactly as before.

   NOTE: these are Framer build hashes. A re-export from Framer
   regenerates them and this block silently stops matching — re-derive
   it rather than assuming it still applies.
   --------------------------------------------------------------- */
@media (min-width: 1200px) {

  /* -- horizontal inset ------------------------------------------
     /the-district: this section's desktop rule is padding:80px 32px 60px.
     32px is the TABLET inset — every other desktop section on the site
     insets 40px, so this one section starts its content at x=32 while
     its sibling Achievements block starts at x=40. Visible as an 8px
     step in the content column. Vertical padding is left as authored
     (80/60 matches this block's own phone rule, so it is deliberate). */
  .framer-feg810 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* -- vertical padding off the scale ----------------------------- */

  /* /the-district "Master Plan": padding 40px 40px 37px -> square it off */
  .framer-4s3kue { padding-bottom: 40px !important; }

  /* / "Container": 50px top / 41px bottom */
  .framer-1sw1yo3 {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }

  /* /explore "Achievements": 54px top and bottom. This block's own
     tablet AND phone rules both say 60px, so desktop was the outlier
     (and was tighter than tablet, which is backwards). */
  .framer-onl1ge {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* /explore inner "Container": 88px top */
  .framer-ypfgkj { padding-top: 80px !important; }

  /* /the-district inner "Container": 50px top */
  .framer-1krvigb { padding-top: 48px !important; }

  /* /vision: 52px top */
  .framer-162zdpy,
  .framer-jbz8y4 { padding-top: 48px !important; }

  /* /edge + /echo, the block above each plan card: 50px bottom */
  .framer-15x4m1k,
  .framer-6xl1il { padding-bottom: 48px !important; }

  /* -- gaps off the scale ----------------------------------------- */

  /* "Statistics" row, 52px between columns (/, /vision, /the-district x2) */
  .framer-1sbpxdp,
  .framer-17i0qec,
  .framer-c3e56r,
  .framer-17j9q9e { column-gap: 48px !important; }

  /* /echo "Suite 01 - 02": 50px between columns */
  .framer-ewpji { column-gap: 48px !important; }

  /* /the-district "Achievements": 30px between columns */
  .framer-q78xu0 { column-gap: 32px !important; }

  /* / "Services Cards": 14px */
  .framer-rwll9j { gap: 16px !important; }
}

/* Deliberately NOT changed, so the next pass does not "fix" them again:

   - rowGap 28px on "Right" (/, /explore) and "Zone" (/echo). 28 sits
     exactly between 24 and 32; picking one is a design call, not a
     drift correction.
   - padding-right: 0 on the Achievements carousels (/the-district,
     /echo) and the Echo suite row. Those tracks bleed off the right
     edge on purpose — measured content runs to x=4128 in a 1440 viewport.
   - The 60px inset on "Hero Content" and "Header Layout". That is a
     second, consistently-applied inset for full-bleed headers, not drift.
   - padding-top: 40px on "Built by Adept" (/) while the rest of that
     page opens at 80px. Its tablet and phone rules are both 0, so the
     desktop 40 is monotonic and reads as intentional. Worth a design
     decision, not a drift fix.
   - The 140px paddings on /vision. On-scale and used twice.
*/