/* Start custom CSS *//* Traffic Partners page (49). Page-only states. Behaviour comes from scripts/kopou-sitewide.js (footer HTML widget); coded graphics carry their own CSS (script block 11). */

/* 1. Coded graphics are drawn by the script; without it, leave no empty boxes. */
html:not(.kopou-js) body .elementor .tp-tile-visual,
html:not(.kopou-js) body .elementor .tp-gate,
html:not(.kopou-js) body .elementor .tp-icon { display: none; }

/* 2. Hero background: quieter on phones, where it sits closer to the text. */
@media (max-width: 767px) { body .elementor .tp-hero-bg { opacity: 0.45; } }

/* 3. In-page anchor targets get tabindex -1 from the script; no focus ring on the whole section. */
body .elementor section[tabindex='-1']:focus { outline: none; }

/* 4. Reduced motion: no card lift. */
@media (prefers-reduced-motion: reduce) { body .elementor .tp-type-card { transition: none; } body .elementor .tp-type-card:hover, body .elementor .tp-type-card:focus-within { transform: none; } }

/* 5. Hero spacing, desktop only. The match-engine node (unlabelled since round 31) is anchored to the hero's bottom edge;
      the bottom padding leaves about 64px between the button and the node. Round 31 (proof line and label removed):
      220 -> 172px, and 200 -> 160px on short laptop screens. #hero outranks the header template's first-section padding rule.
      Tablet and mobile padding is the hero's own style (144px / 140px). */
@media (min-width: 1025px) { body #hero { padding-top: 144px; padding-bottom: 172px; } }
@media (min-width: 1025px) and (max-height: 860px) { body #hero { padding-top: 104px; padding-bottom: 160px; } body #hero .tp-hero-body { gap: var(--space-3); } }

/* Satin inner hero (kopou-ihero.css): the hero runs under the floating header like Home's hero, so the header
   template's in-flow spacer (.kp-nav-spacer, 120px / 152px with the admin bar, added for v1 heroes and hidden
   only on Home by kopou-header-v3.css) must not push it down. */
body .kp-nav-spacer { display: none; }/* End custom CSS */