/* home-2026.css — scoped to the Home 2026 template only (see header.php's conditional enqueue).
   Do not merge into global.css/style.css — see docs/superpowers/specs/2026-09-04-homepage-facelift-design.md */

@font-face {
  font-family: 'Bebas Neue 2026';
  src: url('../fonts/bebas-neue/bebasneue-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter 2026';
  src: url('../fonts/inter/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter 2026';
  src: url('../fonts/inter/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter 2026';
  src: url('../fonts/inter/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter 2026';
  src: url('../fonts/inter/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter 2026';
  src: url('../fonts/inter/inter-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

body.page-template-home-2026 {
  --color-primary: #A6501C;
  --color-gold: #B5812E;
  --color-green: #1F7A4C;
  --color-blue: #3D6FD9;
  --color-purple: #8451D1;
  --color-bg: #FFFFFF;
  --color-text: #14161B;
  --color-text-secondary: #575D68;
  --font-heading: 'Bebas Neue 2026', Impact, sans-serif;
  --font-body: 'Inter 2026', -apple-system, sans-serif;

  color: var(--color-text);
  font-family: var(--font-body);
  background-color: var(--color-bg);
}

/* "Premium version" (2026-09-14) — replaces the one continuous "Brushed Arcs" swirl background
   that used to run the full height of the page with a *per-section* panel treatment instead: the
   page canvas itself is flat white (set above), and each content section below carries its own
   alternating tint + a faint dot texture + a thin colored top rule (see the
   ".h26-section, .video-block, #ori-testimonial-7, #ori-seven-contact" block and the per-section
   --panel-bg/--panel-accent assignments right after it). To bring the old swirl background back,
   it's checkpointed at git tag `colorful-swirl-version`:
   `git show colorful-swirl-version:"wp-content/themes/winmedia/assets/css/home-2026.css"`.
   Chosen after 3 comparison mockups built for review (`docs/mockups/premium-concept-1/2/3.html`,
   also copied to the user's Downloads folder) — this is "Concept 2, Subtle Textured Panels" from
   that review, now wired up with the page's real content (the mockups used placeholder copy),
   deliberately NOT applied to the hero (full-bleed video section stays exactly as it was), and
   with no eyebrow/kicker micro-labels — the mockups had a small "WHO WE ARE"-style overline above
   each heading; cut per explicit user feedback ("kill this 'Who We Are' micro titles and stuff"),
   headings stand alone here same as they always have on this page.
   Scroll-reveal (text fading/sliding in per section) and the count-up stat numbers — the other
   two things asked for alongside this panel restyle, inspired by a reference site the user liked
   parts of (marketone.ca) while explicitly rejecting its scroll-linked layout changes — are NOT
   implemented here: reveal reuses the theme's existing WOW.js + animate.css (already enqueued in
   footer.php, already used by the Testimonial section) via `wow fadeInUp/fadeInLeft/fadeInRight/
   fadeIn` classes added directly in home-2026.php; count-up is a small vanilla IntersectionObserver
   script at the bottom of that same file, since animate.css has no number-counting effect. Neither
   changes the page's structure/flow as the user scrolls (everything settles into its final state
   once and stays there) — the specific behavior the user said they disliked about marketone.ca. */
body.page-template-home-2026 .h26-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Panel background system — see the "Premium version" comment above. Every panel gets a flat tint
   (--panel-bg), the same quiet dot texture (opacity low enough to read as paper grain, never as a
   shape), and a thin colored top rule (--panel-accent, cycling the same 5 brand colors used
   everywhere else on this page). Defaults (white background, transparent rule) apply to any
   current or future `.h26-section` that doesn't get its own --panel-bg/--panel-accent below, so
   this never silently breaks if a new section is added without updating that list. Padding is
   normalized to a uniform 64px so every panel keeps the same vertical rhythm — this intentionally
   overrides the Testimonial/Contact sections' own larger stock padding (140/120px, 100/120px) for
   a more consistent "clearly separated, evenly spaced blocks" feel (the thing the user liked about
   marketone.ca); the video section's old inline `style="padding:0"` was removed from the markup so
   this rule can reach it too.
   margin: 0 is required here too — TwentyTwentyOne core's `.site-main > *` rule (style.css) puts a
   60px top+bottom margin on every direct child of the main content column, which otherwise shows
   as a blank white gap above each panel's colored top rule (most visible right under the hero,
   since that's dark video against white margin, but the same 60px gap silently sits between every
   other panel too — invisible there only because most panels are white-on-white). Zeroing it here
   lets each panel's own background/border-top sit flush against the section before it. */
body.page-template-home-2026 .h26-section,
body.page-template-home-2026 .video-block,
body.page-template-home-2026 #ori-testimonial-7,
body.page-template-home-2026 #ori-seven-contact {
  position: relative;
  margin: 0;
  padding: 64px 0;
  background-color: var(--panel-bg, #FFFFFF);
  background-image: radial-gradient(circle, rgba(20, 22, 27, 0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  border-top: 3px solid var(--panel-accent, transparent);
}

body.page-template-home-2026 #h26-story         { --panel-bg: #F7F5F1; --panel-accent: var(--color-primary); }
body.page-template-home-2026 #h26-harness       { --panel-bg: #FFFFFF; --panel-accent: var(--color-blue); }
body.page-template-home-2026 #h26-market        { --panel-bg: #FFFFFF; --panel-accent: var(--color-green); }
body.page-template-home-2026 #h26-positioning   { --panel-bg: #F7F5F1; --panel-accent: var(--color-purple); }
body.page-template-home-2026 #h26-advantages    { --panel-bg: #FFFFFF; --panel-accent: var(--color-gold); }
body.page-template-home-2026 #ori-service-6     { --panel-bg: #F7F5F1; --panel-accent: var(--color-primary); }
body.page-template-home-2026 .video-block       { --panel-bg: #FFFFFF; --panel-accent: var(--color-blue); }
body.page-template-home-2026 #h26-clients       { --panel-bg: #F7F5F1; --panel-accent: var(--color-green); }
body.page-template-home-2026 #ori-testimonial-7 { --panel-bg: #FFFFFF; --panel-accent: var(--color-purple); }
body.page-template-home-2026 #h26-team          { --panel-bg: #F7F5F1; --panel-accent: var(--color-gold); }
body.page-template-home-2026 #ori-seven-contact { --panel-bg: #FFFFFF; --panel-accent: var(--color-primary); }

/* One-page nav: the primary menu (Home/About/Services/Clients/Team/Contact) now links here with
   #anchors instead of to separate pages — see the "Top Menu" items, converted to custom links
   pointing at these section ids. scroll-margin-top keeps the sticky header (.sticky-on, ~90px
   tall on desktop) from covering the top of whichever section is jumped to. */
html {
  scroll-behavior: smooth;
}
#h26-hero,
#h26-story,
#ori-service-6,
#h26-clients,
#h26-team,
#ori-seven-contact {
  scroll-margin-top: 100px;
}
@media (max-width: 768px) {
  #h26-hero,
  #h26-story,
  #ori-service-6,
  #h26-clients,
  #h26-team,
  #ori-seven-contact {
    scroll-margin-top: 76px;
  }
}

body.page-template-home-2026 h1,
body.page-template-home-2026 h2,
body.page-template-home-2026 h3 {
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
  color: var(--color-text);
}

/* Site header/mobile nav are shared markup (template-parts/header/site-header.php) that still
   ships the stock Century Gothic font — scope Inter onto them here rather than touching the
   shared header, so every other page keeps its existing typography untouched. */
body.page-template-home-2026 #main-nav a,
body.page-template-home-2026 #m-main-nav a {
  font-family: var(--font-body);
}

/* Same reasoning for a handful of other shared/plugin-rendered bits on this page that still
   default to Century Gothic: the WPBakery "Media" post-grid Read More links, the testimonial
   carousel's slick pagination dots, the CF7 phone-field country dropdown (intl-tel-input), and
   the shared site footer. None of these carry icon fonts, so a plain font-family override is
   safe (no icon-glyph selectors touched). */
body.page-template-home-2026 .read-more,
body.page-template-home-2026 .read-more span,
body.page-template-home-2026 .slick-dots button,
body.page-template-home-2026 .intl-tel-input .country-list,
body.page-template-home-2026 #ori-footer,
body.page-template-home-2026 #ori-footer a,
body.page-template-home-2026 #ori-footer p,
body.page-template-home-2026 #ori-footer li {
  font-family: var(--font-body);
}

/* Testimonial section title — match the size/line-height every other section title on this page
   uses (set by the "Harness the Power" h2, 46px/1.08), overriding the stock 48px .ori-section-
   title-7 h2 rule. Also fixes a real left-indent mismatch: this section still sits inside the
   stock Bootstrap `.container` (12px gutter, not centered at this page's 1200px content width),
   so its text started ~60px further left than every `.h26-container`-based section next to it.
   Matching that same box model here re-aligns it with the rest of the page's content column. */
body.page-template-home-2026 #ori-testimonial-7 .container {
  max-width: 1200px;
  padding: 0 24px;
}
body.page-template-home-2026 .ori-section-title-7 h2 {
  font-size: 46px;
  line-height: 1.08;
}

/* Hero — full-bleed background video, single layer, no blur anywhere.
   Height is driven by aspect-ratio, not a fixed min-height: the hero-globe-v3.mp4 source
   (1672x920 after cropping its own baked-in letterbox bars, see docs/working-log.md 2026-09-21/22)
   is matched here so the section is always exactly as tall as the video wants to render at the
   current width. A fixed min-height (960px, previously) doesn't track a video's real aspect ratio,
   so object-fit:cover has to crop — at some viewport widths that crop stops short of the video's
   baked-in edges and exposes them as black bars top/bottom (reported 2026-09-21). Matching the
   aspect ratio means cover never actually needs to crop, so this can't recur even if the video is
   swapped again, as long as the ratio here is updated to match.
   Text needs guaranteed contrast against whatever the video happens to be showing at any rotation
   frame, so a dark gradient (not a flat tint) sits behind the text column only, fading out to
   fully clear video by ~60% width. Text switches to white to read against that gradient instead
   of the page background. */
/* width:100% is load-bearing, not decorative: with both aspect-ratio and min-height set and
   width left auto, Chromium computes a "transferred" preferred width from min-height via the
   aspect ratio instead of filling the containing block — on any viewport narrower than that, the
   section rendered wider than the page and pushed the hero text/buttons into horizontal overflow
   (reported 2026-09-22, repro'd down to 390px). Pinning width:100% forces normal block sizing and
   stops the aspect-ratio math from fighting it. */
body.page-template-home-2026 .h26-hero {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1672 / 920;
  min-height: 640px;
  padding: 140px 0 72px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
body.page-template-home-2026 .h26-hero .h-video-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  z-index: 0;
  filter: brightness(1.35) contrast(1.05) saturate(1.1);
}
body.page-template-home-2026 .h26-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 10, 20, 0.8) 0%, rgba(6, 10, 20, 0.55) 35%, rgba(6, 10, 20, 0) 62%);
  z-index: 1;
}
body.page-template-home-2026 .h26-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-40px);
}
body.page-template-home-2026 .h26-hero-content h1 {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  font-size: 74px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin: 0;
}
body.page-template-home-2026 .h26-hero-line {
  display: block;
  white-space: nowrap;
}
body.page-template-home-2026 .h26-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 46px;
}
body.page-template-home-2026 .h26-btn-primary,
body.page-template-home-2026 .h26-btn-secondary {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 6px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body.page-template-home-2026 .h26-btn-primary {
  background: var(--color-primary);
  color: #fff;
}
body.page-template-home-2026 .h26-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
/* Widened to 1138px (= min-height:640px floor above * the 1672/940 video aspect ratio): below that
   width the hero's height is pinned to the 640px floor rather than following the video's aspect
   ratio (see .h26-hero above), so it's too short for the desktop translateY(-140px) heading lift —
   same overlap-with-sticky-header problem the mobile query below already works around, just at a
   wider range. Let flex centering place the content instead, same fix as mobile. */
@media (max-width: 1138px) and (min-width: 769px) {
  body.page-template-home-2026 .h26-hero-content h1 {
    font-size: 46px;
  }
  body.page-template-home-2026 .h26-hero-content {
    transform: none;
  }
}
@media (max-width: 768px) {
  body.page-template-home-2026 .h26-hero {
    min-height: 520px;
  }
  body.page-template-home-2026 .h26-hero::before {
    background: linear-gradient(180deg, rgba(6, 10, 20, 0.55) 0%, rgba(6, 10, 20, 0.75) 100%);
  }
  body.page-template-home-2026 .h26-hero-content h1 {
    font-size: 36px;
  }
  body.page-template-home-2026 .h26-hero-line {
    white-space: normal;
  }
  /* The desktop translateY(-180px) lift is meant for the 960px-tall hero; on the ~520px mobile
     hero it shoved the heading up under the sticky header, overlapping the logo (boss feedback,
     2026-09-21). Let flex centering place the content instead. */
  body.page-template-home-2026 .h26-hero-content {
    transform: none;
  }
  body.page-template-home-2026 .h26-hero-actions {
    margin-top: 32px;
  }
  body.page-template-home-2026 .h26-btn-primary,
  body.page-template-home-2026 .h26-btn-secondary {
    font-size: 14px;
    padding: 14px 16px;
    white-space: nowrap;
  }
}

/* Harness the Power of Digital Marketing (replaces the old standalone Key Stats bar).
   No card border/background — text and photo sit directly on the page's patterned canvas, the
   grid just controls their two-column position. */
body.page-template-home-2026 .h26-harness-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
body.page-template-home-2026 .h26-harness-text {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.page-template-home-2026 .h26-harness-text h2 {
  font-size: 46px;
  line-height: 1.08;
}
body.page-template-home-2026 .h26-harness-rule {
  width: 56px;
  height: 3px;
  background: var(--color-primary);
  border: none;
  margin: 24px 0;
}
body.page-template-home-2026 .h26-harness-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 46ch;
}
body.page-template-home-2026 .h26-harness-stat-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 36px;
  margin-top: 48px;
  padding-top: 32px;
}
body.page-template-home-2026 .h26-harness-stat-rail::before {
  content: '';
  grid-column: 1 / -1;
  height: 2px;
  width: 56px;
  background: var(--color-primary);
  margin-bottom: 4px;
}
body.page-template-home-2026 .h26-harness-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-harness-stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 1.35;
}
body.page-template-home-2026 .h26-harness-orange { color: var(--color-primary); }
body.page-template-home-2026 .h26-harness-gold { color: var(--color-gold); }
body.page-template-home-2026 .h26-harness-green { color: var(--color-green); }
body.page-template-home-2026 .h26-harness-blue { color: var(--color-blue); }

/* Media panel: real GME stock-surge photo (also used on the live site's About section).
   The cut-corner clip lives on the photo itself, not a card wrapper behind it — there's no
   boxed panel here at all, just the image floating on the page's patterned canvas, so nothing
   creates a hard seam against that background. */
body.page-template-home-2026 .h26-harness-media {
  display: flex;
  align-items: center;
  min-height: 420px;
}
body.page-template-home-2026 .h26-harness-photo {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  box-shadow: 0 24px 48px -12px rgba(20, 22, 27, 0.22);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 56px));
}

@media (max-width: 768px) {
  body.page-template-home-2026 .h26-harness-inner {
    grid-template-columns: 1fr;
  }
  body.page-template-home-2026 .h26-harness-text {
    padding: 8px 0 32px;
  }
  body.page-template-home-2026 .h26-harness-text h2 {
    font-size: 30px;
  }
  body.page-template-home-2026 .h26-harness-media {
    min-height: 0;
  }
  body.page-template-home-2026 .h26-harness-photo {
    height: 320px;
    clip-path: none;
    border-radius: 8px;
  }
}
@media (max-width: 480px) {
  body.page-template-home-2026 .h26-harness-stat-rail {
    grid-template-columns: 1fr;
  }
}

/* "What Winning Media Does" (new, not in the deck) — same split-frame convention as Harness
   above, but mirrored (photo on the left) so the two adjacent sections don't read identically.
   Same un-boxed treatment as Harness: no card border/background, clip-path lives on the photo
   itself so the image just floats on the page's patterned canvas. */
body.page-template-home-2026 .h26-story-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 32px;
  align-items: center;
}
body.page-template-home-2026 .h26-story-media {
  display: flex;
  align-items: center;
  min-height: 420px;
}
body.page-template-home-2026 .h26-story-photo {
  display: block;
  width: 100%;
  height: 600px;
  object-fit: cover;
  box-shadow: 0 24px 48px -12px rgba(20, 22, 27, 0.22);
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
body.page-template-home-2026 .h26-story-text {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.page-template-home-2026 .h26-story-text h2 {
  font-size: 46px;
  line-height: 1.08;
}
body.page-template-home-2026 .h26-story-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0 0 20px;
}
body.page-template-home-2026 .h26-story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
body.page-template-home-2026 .h26-story-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--badge-color);
  border: 1.5px solid var(--badge-color);
  border-radius: 999px;
  padding: 7px 14px;
}
@media (max-width: 768px) {
  body.page-template-home-2026 .h26-story-inner {
    grid-template-columns: 1fr;
  }
  body.page-template-home-2026 .h26-story-media {
    min-height: 0;
    order: -1;
  }
  body.page-template-home-2026 .h26-story-photo {
    height: 340px;
    clip-path: none;
    border-radius: 8px;
  }
  body.page-template-home-2026 .h26-story-text {
    padding: 32px 0;
  }
  body.page-template-home-2026 .h26-story-text h2 {
    font-size: 28px;
  }
}

/* Importance of Retail Investors (Slide 4) — market-opportunity stats + trend line */
body.page-template-home-2026 .h26-market-headline {
  font-size: 46px;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 40px;
}
body.page-template-home-2026 .h26-market-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
body.page-template-home-2026 .h26-market-stat {
  text-align: center;
  padding: 8px 16px;
}
body.page-template-home-2026 .h26-market-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-market-stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
}
/* "Aurora" chart card (2026-09-14) — a full-width glass card on a blurred glow-blob backdrop,
   a gradient hero number in place of the old colored callout, per-year dot markers (blue for
   2022-2025, gold on the current 2026 endpoint), and a hover-triggered shine sweep across the
   whole card. This card is intentionally fixed/always-light regardless of the viewer's OS theme,
   matching the rest of this page (which never toggles dark mode) — approved via a standalone
   comparison Artifact after several rounds of visual iteration, see working log. */
body.page-template-home-2026 .h26-market-shell {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 34px 64px -34px rgba(31, 122, 76, 0.28), 0 0 0 1px rgba(20, 22, 27, 0.05) inset;
}
body.page-template-home-2026 .h26-market-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
body.page-template-home-2026 .h26-market-blob.b1 {
  width: 360px;
  height: 360px;
  top: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(31, 122, 76, 0.32), transparent 70%);
}
body.page-template-home-2026 .h26-market-blob.b2 {
  width: 320px;
  height: 320px;
  bottom: -180px;
  right: -80px;
  background: radial-gradient(circle, rgba(181, 129, 46, 0.26), transparent 70%);
}
body.page-template-home-2026 .h26-market-glass {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(20, 22, 27, 0.06);
  border-radius: 26px;
  padding: 38px 38px 24px;
}

/* single shine layer spanning the whole card, triggered by hovering/focusing the chart —
   subtle, one-shot sweep, not a constant loop */
body.page-template-home-2026 .h26-market-shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-radius: 26px;
}
body.page-template-home-2026 .h26-market-shine::before {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -38%;
  width: 24%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), rgba(181, 129, 46, 0.20), rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-190%) rotate(6deg);
  mix-blend-mode: plus-lighter;
}
@media (prefers-reduced-motion: no-preference) {
  body.page-template-home-2026 .h26-market-shine.is-active::before {
    animation: h26MarketSweep 1.1s cubic-bezier(.2, .7, .3, 1);
  }
}
@keyframes h26MarketSweep {
  from { transform: translateX(-190%) rotate(6deg); }
  to { transform: translateX(500%) rotate(6deg); }
}

body.page-template-home-2026 .h26-market-chart-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}
body.page-template-home-2026 .h26-market-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 26px;
  margin-bottom: 22px;
}
body.page-template-home-2026 .h26-market-hero-num {
  font-family: var(--font-heading);
  font-size: clamp(56px, 10vw, 84px);
  line-height: 0.88;
  background-image: linear-gradient(95deg, var(--color-green) 0%, #3FA36E 45%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(31, 122, 76, 0.22));
}
body.page-template-home-2026 .h26-market-hero-cap {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: #1F6B49;
  max-width: 30ch;
  padding-bottom: 8px;
}

body.page-template-home-2026 .h26-market-chart-visual {
  position: relative;
}
body.page-template-home-2026 .h26-market-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  position: relative;
  z-index: 1;
}
body.page-template-home-2026 .h26-market-gridline {
  stroke: rgba(20, 22, 27, 0.09);
  stroke-width: 1;
}
body.page-template-home-2026 .h26-market-axis-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  fill: #1F6B49;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-market-area {
  fill: url(#h26-market-area-grad);
  stroke: none;
}
body.page-template-home-2026 .h26-market-line-glow {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 8;
  opacity: 0.22;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#h26-market-glow);
}
body.page-template-home-2026 .h26-market-line {
  fill: none;
  stroke: url(#h26-market-line-grad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-template-home-2026 .h26-market-dot {
  stroke: #FFFFFF;
  stroke-width: 2;
  transition: r .12s ease;
}
body.page-template-home-2026 .h26-market-dot.is-active {
  r: 7.5;
}
body.page-template-home-2026 .h26-market-dot-early {
  fill: var(--color-blue);
}
body.page-template-home-2026 .h26-market-dot-current {
  fill: var(--color-gold);
}
body.page-template-home-2026 .h26-market-dot-glow {
  fill: var(--color-gold);
  opacity: 0.3;
}
body.page-template-home-2026 .h26-market-crosshair {
  stroke: var(--color-text-secondary);
  stroke-width: 1;
  opacity: 0;
  transition: opacity .1s ease;
  pointer-events: none;
}
body.page-template-home-2026 .h26-market-hit {
  fill: transparent;
  cursor: crosshair;
}
body.page-template-home-2026 .h26-market-hit:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
}
body.page-template-home-2026 .h26-market-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-text);
  color: #FAF8F5;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 8px;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity .1s ease;
  white-space: nowrap;
  z-index: 6;
}
body.page-template-home-2026 .h26-market-tooltip.is-visible {
  opacity: 1;
}
body.page-template-home-2026 .h26-market-tooltip strong {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  body.page-template-home-2026 .h26-market-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.page-template-home-2026 .h26-market-glass {
    padding: 28px 22px 20px;
  }
}

/* Positioning */
body.page-template-home-2026 .h26-positioning-headline {
  font-size: 46px;
  line-height: 1.08;
  text-align: center;
  margin-bottom: 40px;
}
body.page-template-home-2026 .h26-positioning-neg {
  color: #C00000;
}
/* "Stamp Wall" (2026-09-14) — replaces the old Without/With Awareness two-column split. Each
   struggle is a crossed-out sticker in a loose, rotated cluster; one big tilted "solved" stamp
   underneath carries the shared resolution. See the comment above this section's markup in
   home-2026.php for why wow entrance classes sit on the two wrapper divs, not the rotated
   chips/stamp themselves. */
body.page-template-home-2026 .h26-stamp-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
  justify-content: center;
  padding: 6px 4px 36px;
}
body.page-template-home-2026 .h26-stamp-chip {
  background: #fff;
  border: 2.5px solid #14161B;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.32;
  color: #14161B;
  max-width: 270px;
  box-shadow: 4px 4px 0 #14161B;
  text-decoration: line-through;
  text-decoration-color: #C00000;
  text-decoration-thickness: 1px;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.page-template-home-2026 .h26-stamp-chip:hover {
  transform: translate(-2px, -2px) rotate(0deg) !important;
  box-shadow: 6px 6px 0 #14161B;
}
body.page-template-home-2026 .h26-stamp-r1 { transform: rotate(-3deg); }
body.page-template-home-2026 .h26-stamp-r2 { transform: rotate(2.2deg); }
body.page-template-home-2026 .h26-stamp-r3 { transform: rotate(-1.5deg); }
body.page-template-home-2026 .h26-stamp-r4 { transform: rotate(3deg); }

body.page-template-home-2026 .h26-stamp-solved {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(155deg, #BE6528, var(--color-primary) 62%);
  border: 3px solid #14161B;
  border-radius: 20px;
  padding: 38px 40px 34px;
  box-shadow: 8px 8px 0 #14161B;
  transform: rotate(-0.6deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.page-template-home-2026 .h26-stamp-solved:hover {
  transform: rotate(-0.6deg) translate(-3px, -3px) scale(1.03);
  box-shadow: 11px 11px 0 #14161B;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-home-2026 .h26-stamp-solved {
    transition: none;
  }
  body.page-template-home-2026 .h26-stamp-solved:hover {
    transform: rotate(-0.6deg);
  }
}
body.page-template-home-2026 .h26-stamp-solved-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  font-size: 22px;
  margin-bottom: 14px;
}
body.page-template-home-2026 .h26-stamp-solved h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 10px;
}
body.page-template-home-2026 .h26-stamp-solved p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 auto;
  max-width: 40ch;
}

/* .h26-badge-<color>: a shared color token exposed as --badge-color, consumed by every colored
   accent on the page (story tags, market stat numbers, team photo rings, chart dots) so the
   5-color cycle stays defined in exactly one place. */
body.page-template-home-2026 .h26-badge-orange { --badge-color: var(--color-primary); }
body.page-template-home-2026 .h26-badge-blue { --badge-color: var(--color-blue); }
body.page-template-home-2026 .h26-badge-purple { --badge-color: var(--color-purple); }
body.page-template-home-2026 .h26-badge-green { --badge-color: var(--color-green); }
body.page-template-home-2026 .h26-badge-gold { --badge-color: var(--color-gold); }
body.page-template-home-2026 .h26-market-stat .h26-market-stat-num { color: var(--badge-color); }

/* Unfair Advantages — "Editorial Bleed" (2026-09-14): went through a plain 3-card grid, then a
   card-fan/stamp/schematic/ticket round (all rejected as too plain or not photo-led), before
   landing here. Full-width photo bands with the stat set directly on the image, alternating
   left/right, hover "bulges" the whole band toward the viewer. Per-band accent uses brightened
   tints (not the standard --color-* tokens) because the standard tokens are tuned for text on a
   white background and read muddy against the dark photo scrim here — scoped to this section
   only, same precedent as the Aurora chart's deep-green axis-label override. */
body.page-template-home-2026 .h26-advantages h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 46px;
  line-height: 1.08;
}
body.page-template-home-2026 .h26-advantages-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
body.page-template-home-2026 .h26-adv-band {
  position: relative;
  min-height: 340px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 26px -10px rgba(20, 22, 27, 0.35);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  will-change: transform;
}
body.page-template-home-2026 .h26-adv-band:hover {
  transform: scale(1.03);
  box-shadow: 0 26px 50px -12px rgba(20, 22, 27, 0.5);
  z-index: 2;
}
body.page-template-home-2026 .h26-adv-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-template-home-2026 .h26-adv-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.86) 0%, rgba(10, 8, 6, 0.55) 42%, rgba(10, 8, 6, 0.08) 68%);
}
body.page-template-home-2026 .h26-adv-align-right .h26-adv-scrim {
  background: linear-gradient(270deg, rgba(10, 8, 6, 0.86) 0%, rgba(10, 8, 6, 0.55) 42%, rgba(10, 8, 6, 0.08) 68%);
}
body.page-template-home-2026 .h26-adv-content {
  position: relative;
  z-index: 2;
  padding: 40px 48px;
  max-width: 520px;
  color: #fff;
}
body.page-template-home-2026 .h26-adv-align-right .h26-adv-content {
  margin-left: auto;
  text-align: right;
}
body.page-template-home-2026 .h26-adv-num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(42px, 6.5vw, 72px);
  line-height: 0.9;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-adv-primary .h26-adv-num { color: #FF9D5C; }
body.page-template-home-2026 .h26-adv-blue .h26-adv-num    { color: #8FB3FF; }
body.page-template-home-2026 .h26-adv-green .h26-adv-num   { color: #7EE0B0; }
body.page-template-home-2026 .h26-adv-content h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
body.page-template-home-2026 .h26-adv-content p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
body.page-template-home-2026 .h26-adv-align-right .h26-adv-content p {
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-home-2026 .h26-adv-band {
    transition: none;
  }
  body.page-template-home-2026 .h26-adv-band:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  body.page-template-home-2026 .h26-adv-band {
    min-height: 280px;
  }
  body.page-template-home-2026 .h26-adv-scrim,
  body.page-template-home-2026 .h26-adv-align-right .h26-adv-scrim {
    background: linear-gradient(0deg, rgba(10, 8, 6, 0.85) 40%, rgba(10, 8, 6, 0.25) 100%);
  }
  body.page-template-home-2026 .h26-adv-band {
    align-items: flex-end;
  }
  body.page-template-home-2026 .h26-adv-content,
  body.page-template-home-2026 .h26-adv-align-right .h26-adv-content {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
    padding: 28px 24px;
  }
  body.page-template-home-2026 .h26-adv-align-right .h26-adv-content p {
    margin-left: 0;
  }
  /* stamp chips keep their rotation at mobile width (matches the approved mockup) — just stop
     forcing a max-width so long struggle text doesn't get squeezed */
  body.page-template-home-2026 .h26-stamp-chip {
    max-width: 100%;
  }
}

/* Services section (Slide 8's 7 items — see the "Start of Services Section" comment in
   home-2026.php for why this replaced the old shared-widget reskin) — "Venetian Index" treatment
   (2026-09-14, replaced an earlier plain 4-col photo-tile grid). Seven flex panels sit closed,
   each tinted with a per-item --row-accent and showing only a rotated vertical label; hovering
   one grows its flex-grow (widens it) while its neighbors shrink to compensate, and the label
   fades out as the full photo + a numbered detail block fades in. Deliberately a width-reveal
   hover, not the scale/shine hovers already used on Advantages/Market. */
body.page-template-home-2026 .h26-services h2 {
  text-align: center;
  font-size: 46px;
  line-height: 1.08;
  margin-bottom: 40px;
}
body.page-template-home-2026 .h26-blinds {
  display: flex;
  gap: 3px;
  height: 460px;
  border-radius: 4px;
  overflow: hidden;
}
body.page-template-home-2026 .h26-blind {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  cursor: default;
  background-size: cover;
  background-position: center;
  transition: flex-grow .5s cubic-bezier(.22, .61, .36, 1);
}
body.page-template-home-2026 .h26-blind:hover,
body.page-template-home-2026 .h26-blind:focus-within {
  flex-grow: 3.4;
}
body.page-template-home-2026 .h26-blind-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--row-accent, var(--color-primary)) 0%, rgba(20, 22, 27, .82) 100%);
  opacity: .86;
  transition: opacity .4s ease;
}
body.page-template-home-2026 .h26-blind:hover .h26-blind-overlay,
body.page-template-home-2026 .h26-blind:focus-within .h26-blind-overlay {
  opacity: .4;
}
body.page-template-home-2026 .h26-blind-vert {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  transition: opacity .3s ease;
}
body.page-template-home-2026 .h26-blind:hover .h26-blind-vert,
body.page-template-home-2026 .h26-blind:focus-within .h26-blind-vert {
  opacity: 0;
}
body.page-template-home-2026 .h26-blind-vert span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 22px;
  letter-spacing: 2px;
  white-space: nowrap;
}
body.page-template-home-2026 .h26-blind-detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity .35s ease .05s;
}
body.page-template-home-2026 .h26-blind:hover .h26-blind-detail,
body.page-template-home-2026 .h26-blind:focus-within .h26-blind-detail {
  opacity: 1;
}
body.page-template-home-2026 .h26-blind-num {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 15px;
  opacity: .75;
  margin-bottom: 4px;
}
body.page-template-home-2026 .h26-blind-detail h3 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 26px;
  margin: 0 0 6px;
  letter-spacing: .3px;
}
body.page-template-home-2026 .h26-blind-detail p {
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
body.page-template-home-2026 .h26-blind:focus {
  outline: none;
}
body.page-template-home-2026 .h26-blind:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

@media (max-width: 900px) {
  body.page-template-home-2026 .h26-blinds {
    height: 420px;
  }
}
@media (max-width: 768px) {
  body.page-template-home-2026 .h26-blinds {
    flex-direction: column;
    height: 620px;
    gap: 2px;
  }
  body.page-template-home-2026 .h26-blind-vert span {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 19px;
    letter-spacing: 1.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-home-2026 .h26-blind,
  body.page-template-home-2026 .h26-blind-overlay,
  body.page-template-home-2026 .h26-blind-vert,
  body.page-template-home-2026 .h26-blind-detail {
    transition: none;
  }
}

/* Media/video section reskin */
body.page-template-home-2026 .video-block h2 {
  text-align: center;
  font-family: var(--font-heading);
  /* Stock `.ori-section-title-5 h2` sets font-weight: 600 — every other section title on this
     page resolves to 500 (the shared h1,h2,h3 rule doesn't set a weight, so the font's own
     default wins), which is why this title alone read visibly bolder/thicker. */
  font-weight: 500;
  font-size: 46px;
  line-height: 1.08;
  margin-bottom: 24px;
}
body.page-template-home-2026 .video-block .container {
  max-width: 1200px;
  padding: 0 24px;
}
/* The bare iframe used to sit directly on the section's white panel background — a stark black
   rectangle with no relationship to the rest of the page's card/panel language. Framed it in a
   tinted, bordered, shadowed card (same tone as the alternating --panel-bg used elsewhere) so the
   video reads as an intentional on-brand media card instead of a floating black box. */
body.page-template-home-2026 .h26-media-frame {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px;
  background: #F7F5F1;
  border: 1px solid rgba(20, 22, 27, .08);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(20, 22, 27, .10);
}
body.page-template-home-2026 .h26-media-frame iframe {
  display: block;
  width: 100%;
  height: 600px;
  border-radius: 12px;
}
@media (max-width: 768px) {
  body.page-template-home-2026 .h26-media-frame {
    padding: 8px;
    border-radius: 16px;
  }
  body.page-template-home-2026 .h26-media-frame iframe {
    height: 320px;
    border-radius: 10px;
  }
}

/* Client Examples + Proven Success section */
body.page-template-home-2026 .h26-clients h2 {
  text-align: center;
  font-size: 46px;
  line-height: 1.08;
  margin-bottom: 32px;
}
/* Continuous-scroll logo marquee (replaces the old static 3-col grid) — the track holds the 9
   logos twice back to back and translates exactly -50% on a loop, so it reads as endless with no
   visible seam. Pauses on hover/focus so a visitor can actually read a logo. */
body.page-template-home-2026 .h26-logo-marquee {
  overflow: hidden;
  margin-bottom: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.page-template-home-2026 .h26-logo-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: h26-marquee 34s linear infinite;
}
body.page-template-home-2026 .h26-logo-marquee:hover .h26-logo-track,
body.page-template-home-2026 .h26-logo-marquee:focus-within .h26-logo-track {
  animation-play-state: paused;
}
body.page-template-home-2026 .h26-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  width: 220px;
}
body.page-template-home-2026 .h26-logo-item img {
  max-height: 104px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* A few source logo files (more internal padding / lower visual weight, or the reverse) read a
   different size than the rest at the default box — bumped/trimmed individually by ID rather than
   resizing the whole marquee. */
body.page-template-home-2026 .h26-logo-item--large {
  height: 160px;
  width: 260px;
}
body.page-template-home-2026 .h26-logo-item--large img {
  max-height: 138px;
}
body.page-template-home-2026 .h26-logo-item--xlarge {
  height: 190px;
  width: 300px;
}
body.page-template-home-2026 .h26-logo-item--xlarge img {
  max-height: 168px;
}
body.page-template-home-2026 .h26-logo-item--xxlarge {
  height: 236px;
  width: 364px;
}
body.page-template-home-2026 .h26-logo-item--xxlarge img {
  max-height: 210px;
}
body.page-template-home-2026 .h26-logo-item--small {
  height: 115px;
  width: 195px;
}
body.page-template-home-2026 .h26-logo-item--small img {
  max-height: 88px;
}
@keyframes h26-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-home-2026 .h26-logo-track {
    animation: none;
  }
}

body.page-template-home-2026 .h26-proven-success-heading {
  margin-top: 24px;
}
/* Single "As of" line shared by all 3 cards (2026-09-19) — replaces a per-card line, which read
   as redundant repeated 3x in a row all showing the same date. Left-justified + sized up
   (2026-09-19 follow-up) so it reads as a real caption instead of small print in the corner. */
body.page-template-home-2026 .h26-charts-asof {
  text-align: left;
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}
body.page-template-home-2026 .h26-charts-asof strong {
  color: var(--color-text);
  font-weight: 700;
}
body.page-template-home-2026 .h26-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* "Reserved Band" chart card (2026-09-19), replacing "Gilded Frame" (2026-09-15) — a solid text
   zone (ticker, live quote, return headline) sits above the live chart instead of overlapping it,
   so neither ever fights the chart line for legibility. */
body.page-template-home-2026 .h26-chart-card {
  border-radius: 10px;
  overflow: hidden;
  background: #FFFDF8;
  border: 1px solid rgba(20, 22, 27, 0.06);
  box-shadow: 0 18px 36px -16px rgba(20, 22, 27, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Lift + shadow/border only on hover — deliberately NOT the crosshair/tooltip/shine-sweep
   treatment used by .h26-market-shell/.h26-market-shine in the Market section above; this
   section's interactivity is subtle-only by design. */
body.page-template-home-2026 .h26-chart-card:hover,
body.page-template-home-2026 .h26-chart-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -18px rgba(20, 22, 27, 0.28);
  border-color: var(--badge-color);
}
body.page-template-home-2026 .h26-chart-textzone {
  padding: 28px 20px 14px;
}
body.page-template-home-2026 .h26-chart-card-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
/* Column stack, not a row — the per-ticker color dot that used to sit beside this was removed
   (2026-09-19, user feedback: "don't like the circles"), so the exchange tag now sits directly
   above the ticker name instead of beside a dot. */
body.page-template-home-2026 .h26-chart-card-head-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-template-home-2026 .h26-chart-card-head-id h3 {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 24px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-chart-exchange-tag {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
/* Replaced the live TradingView "Single Ticker" quote widget (2026-09-19) — its cross-origin
   iframe chrome (a grey dot, a round TradingView-branded icon button, a cryptic "D" interval
   superscript) wasn't stylable from here and read as cluttered. This is our own markup: the same
   real logo already used in Client Examples above, plus a clearly-labeled price — the number
   itself is still live (fetched server-side via h26_fetch_live_quote() in home-2026.php), just
   rendered with our own styling instead of TradingView's widget chrome. */
body.page-template-home-2026 .h26-chart-quote {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* height-constrained, not a fixed square — these logos are wide/horizontal (same files used in
   the Client Examples marquee above), so a square box would squeeze them down to near-illegible;
   letting width float keeps them at a readable size. */
body.page-template-home-2026 .h26-chart-logo {
  height: 30px;
  width: auto;
  max-width: 92px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Trident Resources' and U.S. Gold Corp's logo files render smaller than TLG.TO at the same
   height (more internal padding in the source PNGs), so they get their own larger boxes to read
   at the same visual weight — bumped again 2026-09-18 per explicit user ask to size them up
   further still. */
body.page-template-home-2026 .h26-chart-logo--trident {
  height: 58px;
  max-width: 160px;
}
body.page-template-home-2026 .h26-chart-logo--usau {
  height: 50px;
  max-width: 140px;
}
body.page-template-home-2026 .h26-chart-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
body.page-template-home-2026 .h26-chart-price-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
body.page-template-home-2026 .h26-chart-price {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-chart-return {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 48px);
  line-height: 1;
  color: var(--badge-color);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-chart-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  border: 1.5px solid var(--badge-color);
  border-radius: 999px;
  color: var(--badge-color);
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
body.page-template-home-2026 .h26-chart-period-arrow {
  font-size: 12px;
}
body.page-template-home-2026 .h26-chart-embed {
  padding-top: 4px;
  line-height: 0;
}

@media (max-width: 900px) {
  body.page-template-home-2026 .h26-charts-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-home-2026 .h26-chart-card {
    transition: none;
  }
  body.page-template-home-2026 .h26-chart-card:hover,
  body.page-template-home-2026 .h26-chart-card:focus-within {
    transform: none;
  }
}

body.page-template-home-2026 .h26-testimonial-header {
  justify-content: space-between;
  margin-bottom: 12px;
}
body.page-template-home-2026 .h26-testimonial-role {
  display: block;
  font-size: 12px;
  color: var(--color-text-secondary);
}
body.page-template-home-2026 .h26-testimonial-logo-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
body.page-template-home-2026 .h26-testimonial-logo {
  max-height: 56px;
  width: auto;
}
body.page-template-home-2026 .h26-testimonial-logo--large {
  max-height: 76px;
}
/* Stock .slick-dots max-width (225px) fits ~7 dots before wrapping; this
   template has 8 testimonials, so the pager wraps onto a second line and
   overlaps the arrow row below it. Scoped to this template only — the same
   slider markup on home.php/testimoniallist.php keeps the stock behavior. */
body.page-template-home-2026 .ori-testimonial-slider-area-7 .slick-dots {
  max-width: none;
  width: 100%;
  white-space: nowrap;
}
/* Stock arrow spacing is a per-button margin (margin: 2px 90px) — each
   button reserves that margin on BOTH sides, so widening it to clear the
   8-dot row (tried: 140px) made each button need 312px of horizontal box
   (140+32+140), 624px for the pair, which overflowed this card's actual
   width and wrapped the second button onto its own line. Fixed by turning
   .carousel_nav into a flex row with a fixed width instead: the buttons sit
   at the row's own left/right edges (margin: 0, justify-content:
   space-between) and the row's width is sized to be exactly the 8-dot row's
   240px width plus a small fixed gap (20px) on each side of it, so the
   arrows land close to the dots with no risk of the container overflowing.
   Scoped to min-width:481px — below that, style.css's own
   @media(max-width:480px) block already hides .slick-dots and centers the
   arrows on their own (stock mobile margin: 0px 8px), untouched here. */
@media (min-width: 481px) {
  body.page-template-home-2026 .ori-testimonial-slider-area-7 .carousel_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 376px;
    margin: 0 auto;
  }
  body.page-template-home-2026 .ori-testimonial-slider-area-7 .carousel_nav button {
    margin: 0;
    flex-shrink: 0;
  }
}

body.page-template-home-2026 .h26-team h2 {
  text-align: center;
  font-size: 46px;
  line-height: 1.08;
  margin-bottom: 40px;
}
body.page-template-home-2026 .h26-team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 40px;
}
body.page-template-home-2026 .h26-team-card {
  text-align: center;
}
body.page-template-home-2026 .h26-team-photo-ring {
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  border-radius: 50%;
}
body.page-template-home-2026 .h26-team-card img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
body.page-template-home-2026 .h26-team-card h3 {
  font-size: 19px;
  margin-bottom: 4px;
}
body.page-template-home-2026 .h26-team-card span {
  font-size: 15px;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  body.page-template-home-2026 .h26-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* "Open Door" contact redesign (2026-09-19) — split-frame: a warm color-block "left column"
   (the ::before below, painted behind the heading/map/cards cells only) plus a plain white
   "right column" holding the form. Both `.od-contact-widgets` and `.od-contact-map` are
   `display: contents` — their real children (the WP widgets from the two dynamic_sidebar()
   calls in home-2026.php) become direct grid items of `.od-contact-grid` and get placed by
   `grid-area`, selected by the widget classes WordPress already outputs (`.widget_custom_html`
   for the "Let's talk" heading widget vs. plain `.widget_text` for the CF7 form widget) rather
   than by auto-incrementing widget IDs, which differ between environments/DB states. This means
   neither widget's own saved content is touched — only restyled. */
body.page-template-home-2026 .od-contact h2 {
  text-align: center;
  font-size: 46px;
  line-height: 1.08;
  margin-bottom: 40px;
}
body.page-template-home-2026 .od-contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: 42% 58%;
  /* Row 1 is pinned to 56px (the empty "heading" widget's own intrinsic height) rather than
     left as `auto` — with `auto`, row 1's track height was driven by whichever of the two
     row-1 cells was taller (the "Send a Message" label, ~65px including its h3's line-height),
     which pushed row 2 down and broke the even 24px gap above the map card even after each
     cell's own padding was tuned. Pinning the track keeps that gap exact regardless of label
     content height. */
  grid-template-rows: 56px auto auto;
  grid-template-areas:
    "heading label"
    "map     form"
    "cards   form";
  column-gap: 64px;
}
body.page-template-home-2026 .od-contact-grid::before {
  content: "";
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  margin: 32px;
  background: linear-gradient(150deg, #A6501C 0%, #7A3A14 100%);
  border-radius: 16px;
  z-index: 0;
}
body.page-template-home-2026 .od-contact-widgets,
body.page-template-home-2026 .od-contact-map {
  display: contents;
}
body.page-template-home-2026 .od-contact-widgets > .widget_custom_html {
  grid-area: heading;
  position: relative;
  z-index: 1;
  padding: 56px 48px 0;
  /* Grid items stretch to fill their row by default — since this widget is empty (see the
     2026-09-19 "Let's talk" removal note below), it would otherwise stretch down to match
     row 1's height (driven by the taller "Send a Message" label cell next to it) and inflate
     the visible gap above the map card. Pin it to its own intrinsic (padding-only) height. */
  align-self: start;
}
body.page-template-home-2026 .od-contact-widgets > .widget_text:not(.widget_custom_html) {
  grid-area: form;
}
body.page-template-home-2026 .od-contact-map > .widget_custom_html {
  grid-area: map;
  position: relative;
  z-index: 1;
  padding: 0 48px 24px;
}
body.page-template-home-2026 .h26-contact-cards {
  grid-area: cards;
  position: relative;
  z-index: 1;
  padding: 0 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.page-template-home-2026 .od-contact-form-label {
  grid-area: label;
}

/* Left column, cell 1 — "Let's talk" heading widget (`.ori-seven-section-title`, stock markup,
   normally centered black text; recolored/left-aligned for the dark panel). */
body.page-template-home-2026 .od-contact-widgets .ori-seven-section-title {
  text-align: left;
}
body.page-template-home-2026 .od-contact-widgets .ori-seven-section-title h2 {
  font-family: var(--font-heading);
  font-size: 44px;
  letter-spacing: .5px;
  color: #fff;
  margin: 0 0 14px;
  text-transform: uppercase;
}
body.page-template-home-2026 .od-contact-widgets .ori-seven-section-title p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  max-width: 380px;
  margin: 0;
}

/* Left column, cell 2 — "Visit Us" chip: the real map/address/WhatsApp widget, compacted into
   one glass card instead of its stock full-width map + divider-separated info row. */
body.page-template-home-2026 .od-contact-map .textwidget {
  background: rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 20px;
}
body.page-template-home-2026 #ori-seven-map {
  height: 260px;
  margin-top: 0;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
}
body.page-template-home-2026 #ori-seven-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  filter: grayscale(1) invert(.9) contrast(1.05) brightness(.9);
}
body.page-template-home-2026 .od-contact-map .ori-seven-contact-info {
  padding-top: 16px;
  flex-direction: column;
  gap: 6px;
}
body.page-template-home-2026 .od-contact-map .ori-seven-contact-info-item {
  margin-right: 0;
}
body.page-template-home-2026 .od-contact-map .ori-seven-contact-info-item::after {
  display: none;
}
body.page-template-home-2026 .od-contact-map .ori-seven-contact-info-item h3 {
  display: inline;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  padding-bottom: 0;
}
body.page-template-home-2026 .od-contact-map .ori-seven-contact-info-item p {
  display: inline;
  max-width: none;
  font-size: 13px;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 0 4px;
}
body.page-template-home-2026 .od-contact-map .ori-whatsapp {
  margin-top: 14px;
}
body.page-template-home-2026 .od-contact-map .ori-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
body.page-template-home-2026 .od-contact-map .ori-whatsapp img {
  width: 22px;
  height: 22px;
  margin-right: 0;
}

/* Left column, cell 3 — the two team contact chips, restyled from the old light-panel
   top-border-only treatment to a glass chip matching the map card above. Each chip is a flex row
   (headshot + text) rather than text-only, reusing the same photo the Team section already has
   seeded for these two people (`team_1_photo`/`team_2_photo`, home-2026.php) instead of a new
   asset. */
body.page-template-home-2026 .h26-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 14px 20px;
}
body.page-template-home-2026 .h26-contact-card:nth-child(1) { --badge-color: #F2A65A; }
body.page-template-home-2026 .h26-contact-card:nth-child(2) { --badge-color: #8FB3FF; }
body.page-template-home-2026 .h26-contact-card-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
body.page-template-home-2026 .h26-contact-card-body {
  min-width: 0;
}
body.page-template-home-2026 .h26-contact-card h3 {
  font-family: var(--font-heading);
  font-size: 19px;
  letter-spacing: .5px;
  color: #fff;
  margin-bottom: 4px;
  text-transform: uppercase;
}
body.page-template-home-2026 .h26-contact-card span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 10px;
}
body.page-template-home-2026 .h26-contact-card a {
  display: block;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 4px;
}

/* Right column — the "Send a Message" label plus the real CF7 form widget, restyled from the
   stock boxed/shadowed white card + icon-pill inputs into plain underline fields. */
body.page-template-home-2026 .od-contact-form-label {
  /* Top edge matches the orange box's own top edge (32px grid-cell inset from
     `.od-contact-grid::before`'s margin) rather than the heading widget's 56px padding. */
  padding: 32px 0 0;
}
body.page-template-home-2026 .od-contact-form-label h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  letter-spacing: .5px;
  color: var(--color-text);
  margin: 0;
  text-transform: uppercase;
}
body.page-template-home-2026 .od-contact-widgets .ori-seven-contact-form-wrap {
  padding: 0;
  /* Stock style.css sets `.ori-seven-contact-form-wrap { margin-top: 25px; }` — that's the real
     source of the gap under the "Send a Message" heading, not this template's own grid/padding
     values. Scoped down here rather than touched at the source, since that stock rule still
     backs the form on other pages/templates. Kept slightly larger than the original 8px override
     (a little breathing room before "Name") without touching `.od-contact-form-label`'s own
     padding, which is what keeps the heading's top edge aligned with the orange box's top edge. */
  margin-top: 20px;
}
body.page-template-home-2026 .od-contact-widgets .ori-seven-section-title + .textwidget,
body.page-template-home-2026 .od-contact-widgets .input-info {
  background: none;
}
body.page-template-home-2026 .od-contact-widgets .input-info {
  margin-bottom: 18px;
}
body.page-template-home-2026 .od-contact-widgets .input-info label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
body.page-template-home-2026 .od-contact-widgets .input-info input,
body.page-template-home-2026 .od-contact-widgets .input-info textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid #E4E1DA;
  border-radius: 0;
  padding: 10px 2px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  transition: border-color .2s ease;
}
body.page-template-home-2026 .od-contact-widgets .input-info input:focus,
body.page-template-home-2026 .od-contact-widgets .input-info textarea:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
body.page-template-home-2026 .od-contact-widgets .input-info i {
  display: none;
}
/* the international-telephone-input plugin's own flag/dial-code dropdown needs its usual
   left padding preserved — the generic underline-input rule above zeroes it out otherwise,
   letting the flag icon sit on top of the placeholder text. */
body.page-template-home-2026 .od-contact-widgets .input-info input.wpcf7-intl-tel {
  padding-left: 52px;
}
body.page-template-home-2026 .od-contact-widgets .ori-seven-contact-form-wrap button {
  /* Stock `.ori-seven-contact-form-wrap button` fixes width:215px/height:55px — too small for
     the larger font-size below (the "→" icon was getting squeezed off), so both are freed to
     auto and sized by padding instead. */
  width: auto;
  height: auto;
  background: var(--color-primary);
  border-radius: 8px;
  padding: 19px 44px;
  font-family: var(--font-heading);
  font-size: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background .18s ease;
}
body.page-template-home-2026 .od-contact-widgets .ori-seven-contact-form-wrap button:hover {
  background: #8B4318;
}
/* "Message us on WhatsApp" moved here (2026-09-19, DB-only widget-content edit — see
   home-2026.php's Contact-section comment) from the map/address widget, to sit beneath the
   "Become a Client" submit button. Same pill treatment as the map panel's version
   (`.od-contact-map .ori-whatsapp` above), just re-scoped to the white form column. */
body.page-template-home-2026 .od-contact-widgets .ori-whatsapp {
  margin-top: 22px;
}
body.page-template-home-2026 .od-contact-widgets .ori-whatsapp a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 34px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
body.page-template-home-2026 .od-contact-widgets .ori-whatsapp img {
  width: 27px;
  height: 27px;
  margin-right: 0;
}

@media (max-width: 900px) {
  body.page-template-home-2026 .od-contact-grid {
    grid-template-columns: 1fr;
    /* Undo the desktop rule's fixed 56px row 1 track — mobile stacks all 5 areas into their
       own auto-height rows, so nothing should be pinned. */
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "heading"
      "map"
      "cards"
      "label"
      "form";
    row-gap: 32px;
  }
  body.page-template-home-2026 .od-contact-grid::before {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
  }
  body.page-template-home-2026 .od-contact-widgets > .widget_custom_html,
  body.page-template-home-2026 .od-contact-map > .widget_custom_html,
  body.page-template-home-2026 .h26-contact-cards {
    padding-left: 28px;
    padding-right: 28px;
  }
  body.page-template-home-2026 .od-contact-widgets > .widget_custom_html {
    padding-top: 40px;
  }
  body.page-template-home-2026 .h26-contact-cards {
    padding-bottom: 40px;
  }
  body.page-template-home-2026 .od-contact-form-label {
    padding-top: 0;
  }
}