/*
Theme Name: Universal Bowling
Description: Brand child theme for Astra — dark UI structure from the client template, recolored with the brand's own logo-derived green palette.
Template: astra
Version: 2.56.0
Text Domain: universal-bowling
*/

/* ============ Brand tokens ============ */
:root {
  --black:      #12160F;
  --deep:       #171B10;
  --dark:       #1C2113;
  --panel:      #242B18;
  --panel2:     #2C341D;

  --green:      #3D7A17;
  --green2:     #8FC31F;
  --green-glow: rgba(61,122,23,.15);
  --green-dim:  rgba(61,122,23,.55);
  --green-faint:rgba(61,122,23,.08);
  --green-border:rgba(61,122,23,.2);
  --forest:     #1F4A0D;  /* the globe's shadow side — deeper background tints, hover washes */
  --forest-wash:rgba(31,74,13,.2);
  --steel:      #5C6868;  /* the ball's metal gradient — quiet secondary marks, index numbers */
  --orange:     #FF6040;  /* warm second accent — warnings, awards, "in progress" status. Used sparingly, never for primary CTAs */
  --orange-wash:rgba(255,96,64,.1);
  --orange-border:rgba(255,96,64,.32);

  /* ---- Light-surface variant (test: hybrid dark/light layout) ---- */
  --light-bg:     #EAEDED;  /* light silver — a tint of --steel, the ball's own metal tone */
  --light-panel:  #E1E5E5;
  --light-ink:    #12160F;
  --light-muted:  #3F4B4B;  /* darkened from #5C6868 (2026-09-03) — that value read as too low-contrast on light-bg/white cards for anything smaller than large body text */
  --light-border: rgba(18,32,32,.12);

  --white:      #f2f2f2;
  --muted:      rgba(242,242,242,.6);
  --faint:      rgba(242,242,242,.32);

  --border:     rgba(255,255,255,.07);
  --border2:    rgba(255,255,255,.04);

  --f-display: 'Barlow Condensed', sans-serif;
  --f-ui:      'Barlow Condensed', sans-serif;
  --f-body:    'Barlow', sans-serif;

  --trans: .38s cubic-bezier(.4,0,.2,1);
  --section: 100px;

  /* ---- Type scale: a disciplined set, not one-off values ----
     Labels (uppercase, letter-spaced UI text) get exactly two sizes.
     Body copy gets three. Numbers get three roles. Nothing outside this list. */
  --fs-label-sm: 0.9375rem;  /* 15px — dense chips: port-tag, ticker, form-label */
  --fs-label:    1.0625rem;  /* 17px — card/step/fact titles, table-head, sub-labels */
  --fs-body-sm:  1.0625rem;  /* 17px — secondary/description copy */
  --fs-body:     1.125rem;   /* 18px — base paragraph, inputs */
  --fs-body-lg:  1.1875rem;  /* 19px — lede/intro paragraphs */
  --fs-stat:     clamp(2.25rem, 4vw, 2.75rem);  /* adv-num, mstat-n, hstat-num */
  --fs-stat-hero:clamp(5rem, 10vw, 8.5rem);     /* the one hero showcase number */
  --fs-ghost:    clamp(2.5rem, 5vw, 3.5rem);    /* decorative background numbers */
}

/* ============ Self-hosted fonts ============ */
@font-face { font-family:'Barlow'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/barlow/barlow-300.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/barlow/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/barlow/barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/barlow/barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/barlow/barlowcond-300.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/barlow/barlowcond-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/barlow/barlowcond-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/barlow/barlowcond-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/barlow/barlowcond-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/barlow/barlowcond-800.woff2') format('woff2'); }

/* ============ Reset / base ============ */
.ub-page, .ub-page *, .ub-page *::before, .ub-page *::after { box-sizing: border-box; }
.ub-page {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  background: var(--black);
  color: var(--white);
  margin: -1px 0 0; /* pull up under Astra's content padding */
}
.ub-page img { display: block; max-width: 100%; }
.ub-page a { text-decoration: none; color: inherit; }
.ub-page ul { list-style: none; margin: 0; padding: 0; }

/* Force our typography to win over Astra's defaults everywhere inside our pages */
.ub-page h1, .ub-page h2, .ub-page h3, .ub-page h4,
.entry-content .ub-page h1, .entry-content .ub-page h2, .entry-content .ub-page h3, .entry-content .ub-page h4,
.elementor-widget-container .ub-page h1, .elementor-widget-container .ub-page h2,
.elementor-widget-container .ub-page h3, .elementor-widget-container .ub-page h4 {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.ub-page p, .ub-page li, .ub-page span, .ub-page label, .ub-page input, .ub-page textarea, .ub-page select {
  font-family: var(--f-body) !important;
}
/* A <span> used for a colored accent word inside a heading would otherwise be knocked
   back to the body font by the rule above — headings should always use <em> for that
   (already colored via the .sec-title em rules below) so this is a safety net, not the
   primary fix. */
.ub-page h1 span, .ub-page h2 span, .ub-page h3 span, .ub-page h4 span {
  font-family: var(--f-display) !important;
}

.ub-page .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-ui) !important; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
  margin-bottom: 2px;
}
.ub-page .eyebrow::before { content: ''; display: inline-block; width: 34px; height: 2px; background: var(--green); flex-shrink: 0; }

.ub-page .wrap { max-width: 1760px; margin: 0 auto; padding: 0 52px; }
.ub-page .wrap-sm { max-width: 1100px; margin: 0 auto; padding: 0 52px; }

/* Make sure Elementor's own section/column wrappers never re-impose a boxed cap */
.ub-page,
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-full { max-width: none !important; width: 100% !important; }
.ub-page .section { padding: var(--section) 0; }

/* ============ Buttons ============ */
.ub-page .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 34px; border: 1px solid transparent; transition: var(--trans);
  position: relative; overflow: hidden; white-space: nowrap; cursor: pointer;
}
.ub-page .btn-green { background: var(--green); color: var(--white); border-color: var(--green); }
.ub-page .btn-green:hover { background: var(--green2); border-color: var(--green2); box-shadow: 0 0 30px rgba(61,122,23,.35), 0 0 60px rgba(61,122,23,.15); transform: translateY(-1px); }
.ub-page .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.2); }
.ub-page .btn-outline:hover { background: var(--forest-wash); border-color: var(--green); color: var(--green); box-shadow: 0 0 20px rgba(61,122,23,.1); }
/* Glass variant — same frosted look as .hstat-card, for a btn-outline that needs to visually
   match a nearby glass stat row (e.g. the hero's secondary CTA sitting right above its stats). */
.ub-page .btn-glass { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ub-page .btn-glass:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--white); box-shadow: none; }
.ub-page .btn-ghost { background: transparent; color: var(--green); border: none; padding-left: 0; padding-right: 0; }
.ub-page .arrow { transition: transform var(--trans); }
.ub-page .btn:hover .arrow { transform: translateX(4px); }

/* ============ Reveal animations ============ */
.ub-page .reveal { opacity: 0; transform: translateY(36px); transition: opacity .75s ease, transform .75s ease; }
.ub-page .reveal.on { opacity: 1; transform: none; }
.ub-page .reveal-l { opacity: 0; transform: translateX(-36px); transition: opacity .75s ease, transform .75s ease; }
.ub-page .reveal-l.on { opacity: 1; transform: none; }
.ub-page .reveal-r { opacity: 0; transform: translateX(36px); transition: opacity .75s ease, transform .75s ease; }
.ub-page .reveal-r.on { opacity: 1; transform: none; }
.ub-page .stagger > * { opacity: 0; transform: translateY(28px); }
.ub-page .stagger.on > * { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.ub-page .stagger.on > *:nth-child(1){transition-delay:.0s}.ub-page .stagger.on > *:nth-child(2){transition-delay:.08s}
.ub-page .stagger.on > *:nth-child(3){transition-delay:.16s}.ub-page .stagger.on > *:nth-child(4){transition-delay:.24s}
.ub-page .stagger.on > *:nth-child(5){transition-delay:.32s}.ub-page .stagger.on > *:nth-child(6){transition-delay:.40s}
.ub-page .stagger.on > *:nth-child(7){transition-delay:.48s}.ub-page .stagger.on > *:nth-child(8){transition-delay:.56s}
@media (prefers-reduced-motion: reduce) {
  .ub-page .reveal, .ub-page .reveal-l, .ub-page .reveal-r, .ub-page .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ============ Hero ============ */
.ub-page .ub-hero { min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 64px 0 80px; position: relative; overflow: hidden; background: var(--black); }
/* Real photo hero, used only where a page supplies a .hero-photo — pages without one keep the
   plain dark .ub-hero background untouched. Dark-at-bottom gradient keeps the hero-content
   (which sits at the bottom of the hero) readable over a busy photo. */
.ub-page .hero-photo { position: absolute; inset: 0; z-index: 0; }
.ub-page .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* A gentle overall darkening for depth/polish — not the thing carrying legibility anymore
   (the .hero-textbox panel below does that with a flat, reliable background instead of a
   gradient or a text-shadow glow, both of which read as an effect rather than a clean layer). */
.ub-page .hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,22,15,.55) 0%, rgba(18,22,15,.15) 55%, rgba(18,22,15,.05) 100%); }
.ub-page .hero-glow { position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(61,122,23,.07) 0%, transparent 65%); top: 5%; right: -100px; pointer-events: none; }
.ub-page .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(61,122,23,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(61,122,23,.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 25%, rgba(0,0,0,.6) 75%, transparent 100%); }
.ub-page .hero-content { position: relative; z-index: 2; }
/* The actual fix, replacing the text-shadow-glow attempt: a plain solid panel behind the
   eyebrow/H1/description, same "frosted glass" language as .hstat-card below it — reads as a
   deliberate design layer, not an effect on the text itself. Guarantees contrast independent
   of the photo (flat opaque-ish background, not a gradient or per-letter outline), and only
   covers the text's own footprint, not the full hero width, so most of the photo stays clear.
   Reuse this component for every future photo hero rather than reaching for text-shadow again. */
/* Toned way down from the first pass: that was near-opaque and blurred enough to erase the
   photo entirely inside its own footprint, which defeats the point of a real project photo —
   the viewer couldn't tell it was a real place anymore. This is genuinely translucent (same
   family as .hstat-card below, just a bit more tinted since it hosts bigger text) so the photo
   stays recognizable *through* the panel, not just around it. A modest single text-shadow
   (not a stacked glow) is the legibility backstop instead of relying on panel opacity alone. */
.ub-page .hero-textbox { display: inline-block; max-width: 960px; background: rgba(8,10,6,.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 30px 34px; }
.ub-page .hero-textbox .eyebrow, .ub-page .hero-textbox .hero-h1, .ub-page .hero-textbox .hero-desc, .ub-page .hero-textbox .pos-left-quote {
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
/* Colored accent text (lime) over a warm-toned photo needed more than a soft shadow could give —
   a blurred shadow still lets warm photo color bleed through and muddy a light hue. This is a
   genuine hard-edge outline instead (four 0-blur offsets = a solid stroke, not a glow — the
   blur is what made the earlier halo attempt look like an effect) plus a soft shadow for depth.
   Real fix for text color sitting on unpredictable photo color, independent of panel opacity. */
.ub-page .hero-textbox em {
  text-shadow: 1px 1px 0 rgba(0,0,0,.95), -1px -1px 0 rgba(0,0,0,.95), 1px -1px 0 rgba(0,0,0,.95), -1px 1px 0 rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.6);
}
.ub-page .hero-content .eyebrow { color: var(--green2); }
.ub-page .hero-content .eyebrow::before { background: var(--green2); }
.ub-page .hero-h1 { font-size: clamp(2.6rem, 6.5vw, 6rem); max-width: 900px; }
.ub-page .hero-h1.hero-h1-compact { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.ub-page .hero-h1 em { font-style: normal; color: var(--green2); font-weight: 300 !important; }
.ub-page .hero-desc { font-size: var(--fs-body-lg); color: var(--muted); line-height: 1.7; max-width: 480px; margin-top: 22px; }
.ub-page .hero-desc strong { color: var(--green2); font-weight: 500; }
.ub-page .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.ub-page .hero-stats { display: flex; gap: 18px; margin-top: 52px; flex-wrap: wrap; }
.ub-page .hstat-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 6px; padding: 22px 28px; }
.ub-page .hstat-num { font-family: var(--f-display) !important; font-size: var(--fs-stat); font-weight: 300 !important; line-height: 1; color: var(--white); }
.ub-page .hstat-num sup { font-size: 55%; color: var(--green2, var(--green)); vertical-align: super; }
.ub-page .hstat-lbl { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,242,242,.78); margin-top: 8px; line-height: 1.4; }
.ub-page .light .hstat-card { background: rgba(255,255,255,.55); border-color: rgba(18,32,32,.12); }
.ub-page .light .hstat-num { color: var(--light-ink); }
.ub-page .light .hstat-lbl { color: var(--light-muted); }

/* ============ Ticker ============ */
.ub-page .ticker { background: var(--green); padding: 22px 0; overflow: hidden; }
.ub-page .ticker-inner { display: flex; width: max-content; animation: ub-tick 32s linear infinite; white-space: nowrap; }
.ub-page .ticker-inner span { font-family: var(--f-ui) !important; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); padding: 0 42px; }
.ub-page .ticker-inner span.dot { color: rgba(255,255,255,.4); font-size: .65rem; padding: 0 10px; }
.ub-page .ticker.dark { background: var(--dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ub-page .ticker.dark .ticker-inner { animation-name: ub-tick-rev; }
.ub-page .ticker.dark .ticker-inner span { color: var(--green2); }
.ub-page .ticker.dark .ticker-inner span.dot { color: rgba(255,255,255,.22); }
@keyframes ub-tick { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes ub-tick-rev { from{transform:translateX(-50%);} to{transform:translateX(0);} }

/* ============ Brand reel (Pro Shop brands, distinct from the client logo wall) ============ */
.ub-page .brand-reel { overflow: hidden; padding: 8px 0; }
.ub-page .brand-reel-track { display: flex; width: max-content; gap: 40px; animation: ub-tick 50s linear infinite; }
.ub-page .brand-card { flex-shrink: 0; width: 200px; height: 110px; background: #fff; border: 1px solid var(--light-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 18px 26px; }
/* Same fix as .logo-card.dark-chip elsewhere: a white/light logo (MERIQ's mark is white-on-
   transparent) needs a dark backing, not the shared white card. */
.ub-page .brand-card.dark-chip { background: #10221f; border-color: #10221f; }
.ub-page .brand-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ub-page .brand-reel:hover .brand-reel-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ub-page .brand-reel-track { animation: none; } }

/* ============ Positioning statement ============ */
.ub-page .positioning { padding: 90px 0; background: var(--deep); border-bottom: 1px solid var(--border); }
.ub-page .pos-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.ub-page .pos-grid.pos-grid-rev { grid-template-columns: 1fr 1.4fr; }
.ub-page .pos-left-quote { font-family: var(--f-display) !important; font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 700 !important; line-height: 1.05; text-transform: uppercase; }
.ub-page .pos-left-quote em { font-style: normal; color: var(--green); display: block; font-weight: 300 !important; }
.ub-page .pos-right p { font-size: var(--fs-body); color: var(--muted); line-height: 1.75; margin-bottom: 18px; }
.ub-page .pos-callout { margin-top: 24px; padding: 20px 24px; background: var(--forest-wash); border: 1px solid var(--green-border); border-left: 3px solid var(--green); }
.ub-page .pos-callout p { font-family: var(--f-ui) !important; font-size: var(--fs-body-sm); font-weight: 600; color: var(--green); margin: 0; line-height: 1.55; }
/* Real-venue photo, now a clean standalone image — the quote that used to sit on top of it
   (as a .hero-textbox overlay) moved up into the section's own eyebrow/h2, which is what this
   section was actually missing (it had no title of its own, unlike every other section on the
   site). No more darkening/legibility treatment needed since there's no text on the photo
   anymore — it shows at full brightness. The .hero-textbox-on-a-photo pattern itself is kept
   (still used on the hero), just not needed here. */
.ub-page .pos-photo { position: relative; border-radius: 6px; overflow: hidden; min-height: 520px; }
.ub-page .pos-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============ Section headers ============ */
.ub-page .sec-hdr { margin-bottom: 56px; }
.ub-page .sec-title { font-size: clamp(2.2rem, 4.6vw, 4.4rem); margin-top: 14px; }
.ub-page .sec-title em, .ub-page h2 em, .ub-page h3 em { font-style: normal; font-weight: 300 !important; color: var(--green); }
.ub-page .sec-sub { font-size: var(--fs-body-lg); color: var(--muted); line-height: 1.7; max-width: 520px; margin-top: 18px; }

/* ============ Cards / grids ============ */
.ub-page .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ub-page .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ub-page .svc-card, .ub-page .factor, .ub-page .sol-card { background: var(--black); border: 1px solid var(--border); padding: 38px 28px; position: relative; overflow: hidden; transition: background var(--trans); }
.ub-page .svc-card:hover, .ub-page .factor:hover, .ub-page .sol-card:hover { background: var(--dark); }
.ub-page .svc-card::after, .ub-page .sol-card::before { content: ''; position: absolute; left:0; right:0; height: 2px; background: var(--green); transform: scaleX(0); transition: transform var(--trans); }
.ub-page .svc-card::after { bottom: 0; transform-origin: left; }
.ub-page .sol-card::before { top: 0; transform-origin: left; }
.ub-page .svc-card:hover::after, .ub-page .sol-card:hover::before { transform: scaleX(1); }
.ub-page .card-icon { width: 38px; height: 38px; color: var(--green); margin-bottom: 16px; }
.ub-page .card-icon svg { width: 100%; height: 100%; display: block; }
.ub-page .light .card-icon { color: var(--forest); }
.ub-page .card-icon-sm { width: 32px; height: 32px; color: var(--green); margin-bottom: 14px; }
.ub-page .card-icon-sm svg { width: 100%; height: 100%; display: block; }
.ub-page .light .card-icon-sm { color: var(--forest); }
.ub-page .step .card-icon { color: var(--green); margin-bottom: 10px; width: 30px; height: 30px; }
.ub-page .svc-n, .ub-page .factor-n { font-family: var(--f-display) !important; font-size: var(--fs-ghost); font-weight: 700 !important; line-height: 1; color: var(--green); margin-bottom: 6px; }
.ub-page .svc-title, .ub-page .factor-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
.ub-page .factor-title { color: var(--green); }
.ub-page .svc-desc, .ub-page .factor-desc { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.6; }
.ub-page .sol-title { font-family: var(--f-ui) !important; font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.ub-page .sol-desc { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.ub-page .sol-bullets { display: flex; flex-direction: column; gap: 12px; }
/* This class was originally sized as a dense small-chip label (--fs-label-sm, 15px) — now that
   it's used for actual list-ified sentence content (fork-cards, Inversión, Guía), it needs to
   read at body-copy size, not label size. */
.ub-page .sol-bullet { font-family: var(--f-ui) !important; font-size: var(--fs-body-sm); font-weight: 500; letter-spacing: .01em; color: var(--muted); display: flex; gap: 10px; line-height: 1.4; }
.ub-page .sol-bullet::before { content: '›'; color: var(--green); font-weight: 800; }

/* ============ Warning / callout box ============ */
.ub-page .warn-box { background: rgba(255,60,30,.05); border: 1px solid rgba(255,80,30,.2); border-left: 3px solid #FF4019; padding: 26px 30px; margin: 30px 0; }
.ub-page .warn-box h5 { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.ub-page .warn-list { display: flex; flex-direction: column; gap: 9px; }
.ub-page .warn-list li { display: flex; gap: 10px; font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.5; }
.ub-page .warn-list li::before { content: '×'; color: var(--orange); flex-shrink: 0; }
.ub-page .opp-quote { font-family: var(--f-display) !important; font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 300 !important; text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--border); padding-top: 30px; line-height: 1.4; }

/* ============ Portfolio ============ */
.ub-page .port-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 0 40px; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.ub-page .f-btn { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--border); padding: 9px 18px; border-radius: 50px; transition: var(--trans); cursor: pointer; }
.ub-page .f-btn:hover, .ub-page .f-btn.active { background: var(--green); color: var(--black); border-color: var(--green); }
.ub-page .port-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.ub-page .port-item { display: block; position: relative; overflow: hidden; background: var(--panel); min-height: 280px; grid-column: span 4; cursor: pointer; }
.ub-page .port-item.wide { grid-column: span 5; } .ub-page .port-item.narrow { grid-column: span 3; }
.ub-page .port-grid.gallery { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ub-page .port-grid.gallery .port-item { grid-column: span 1 !important; min-height: 220px; }
.ub-page .port-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--panel) 0%, rgba(61,122,23,.06) 100%); transition: transform .7s ease; }
.ub-page .port-item:hover .port-bg { transform: scale(1.05); }
.ub-page .port-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.4) 45%, transparent 70%); padding: 24px 26px; display: flex; flex-direction: column; justify-content: flex-end; }
.ub-page .port-name { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 400 !important; color: var(--white); line-height: 1.1; }
.ub-page .port-loc { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-top: 6px; }
.ub-page .port-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ub-page .port-tag { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.32); padding: 4px 10px; color: rgba(255,255,255,.92); }
.ub-page .port-tag.award { color: var(--orange); border-color: var(--orange-border); background: var(--orange-wash); }
.ub-page .port-tag.soon { color: var(--orange); border-color: var(--orange-border); background: var(--orange-wash); }

/* ============ Why-us / advantages ============ */
.ub-page .adv { display: flex; gap: 22px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--border); }
.ub-page .adv:first-child { border-top: 1px solid var(--border); }
.ub-page .adv-num { font-family: var(--f-display) !important; font-size: var(--fs-stat); font-weight: 300 !important; color: var(--green); line-height: 1; flex-shrink: 0; width: 70px; }
.ub-page .adv-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
.ub-page .adv-desc { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.6; }
.ub-page .big-stat { font-family: var(--f-display) !important; font-size: var(--fs-stat-hero); font-weight: 700 !important; line-height: 1; color: var(--white); text-align: center; }
.ub-page .big-stat span { color: var(--green); }
.ub-page .big-stat-lbl { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green2); text-align: center; margin-top: 10px; }
.ub-page .op-badge { display: flex; align-items: center; gap: 14px; background: var(--forest-wash); border: 1px solid var(--green-border); padding: 18px 24px; margin-top: 30px; }
.ub-page .op-badge-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.ub-page .op-badge-sub { font-size: var(--fs-body-sm); color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ============ Heritage photos (archival plates) ============ */
.ub-page .heritage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 36px 0 0; }
.ub-page .heritage-photo { padding: 14px; background: var(--black); border: 1px solid var(--border); border-radius: 4px; }
.ub-page .heritage-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ub-page .heritage-photo figcaption { margin-top: 14px; text-align: center; font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-style: italic; color: var(--muted); }
.ub-page .light .heritage-photo { background: #fff; border-color: var(--light-border); }
.ub-page .light .heritage-photo figcaption { color: var(--light-muted); }
@media (max-width: 700px) {
  .ub-page .heritage-grid { grid-template-columns: 1fr; }
}

/* ============ Steps ============ */
.ub-page .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 20px; margin: 40px 0; }
.ub-page .step { background: var(--black); border: 1px solid var(--border); padding: 28px 20px; overflow-wrap: break-word; min-width: 0; }
.ub-page .step-n { font-family: var(--f-display) !important; font-size: var(--fs-ghost); font-weight: 700 !important; line-height: 1; color: var(--green); }
.ub-page .step-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin: 10px 0 6px; }
.ub-page .step-desc { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.5; }

/* ============ Tables ============ */
.ub-page .tbl-wrap { overflow-x: auto; margin-top: 1.5rem; }
.ub-page table.tl { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); min-width: 560px; }
.ub-page table.tl th { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 13px 18px; border-bottom: 1px solid var(--border); text-align: left; }
.ub-page table.tl th.green-col { color: var(--green); }
.ub-page table.tl td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.ub-page table.tl td:first-child { font-family: var(--f-ui) !important; font-size: var(--fs-body-sm); font-weight: 700; color: var(--white); white-space: nowrap; }
.ub-page table.tl.wrap-names td:first-child { white-space: normal; min-width: 240px; }
.ub-page table.tl .tl-award { display: inline-block; margin-left: 8px; font-family: var(--f-ui) !important; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--orange); white-space: nowrap; }
.ub-page table.tl .tl-soon { display: inline-block; margin-left: 8px; font-family: var(--f-ui) !important; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); background: var(--orange-wash); border: 1px solid var(--orange-border); padding: 2px 7px; white-space: nowrap; }
.ub-page .light table.tl .tl-award { color: var(--orange); }
.ub-page .light table.tl .tl-soon { color: var(--orange); border-color: var(--orange-border); }

/* ============ Stat band ============ */
.ub-page .stat-band { background: linear-gradient(155deg, var(--forest) 0%, #12280A 100%); padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.ub-page .stat-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(143,195,31,.16) 0%, transparent 70%); pointer-events: none; }
.ub-page .stat-band .wrap { position: relative; z-index: 2; }
.ub-page .stat-band .eyebrow { justify-content: center; color: var(--green2); }
.ub-page .stat-band .big-stat { font-size: clamp(6rem, 13vw, 11rem); color: #fff; margin-top: 18px; }
.ub-page .stat-band .big-stat span { color: var(--green2); }
.ub-page .stat-band .big-stat-lbl { color: rgba(255,255,255,.8); font-size: 1rem; }
.ub-page .stat-band .prose { color: rgba(255,255,255,.85) !important; }
.ub-page .stat-band .stat-sub-row { display: flex; justify-content: center; gap: 64px; margin-top: 60px; flex-wrap: wrap; }
.ub-page .stat-band .hstat-num { color: #fff; }
.ub-page .stat-band .hstat-lbl { color: rgba(255,255,255,.65); }

/* ============ Logo wall ============ */
.ub-page .logo-group-label { display: flex; align-items: center; gap: 14px; font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); margin: 2.2rem 0 .9rem; }
.ub-page .logo-group-label:first-of-type { margin-top: 1.8rem; }
.ub-page .logo-group-label::after { content: ''; flex: 1; height: 1px; background: var(--light-border); }
.ub-page .logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1px; background: var(--light-border); border: 1px solid var(--light-border); }
.ub-page .logo-card { background: #fff; padding: 14px; min-height: 82px; display: flex; align-items: center; justify-content: center; transition: transform .25s ease, box-shadow .25s ease, z-index 0s; position: relative; }
.ub-page .logo-card img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; transition: transform .25s ease; }
.ub-page .logo-card:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 28px rgba(18,32,32,.14); z-index: 2; }
.ub-page .logo-card.dark-chip { background: #10221f; }
.ub-page .logo-wall.on-dark .logo-card { background: var(--panel); }
.ub-page .logo-wall.on-dark .logo-card:hover { box-shadow: 0 14px 28px rgba(0,0,0,.4); }
@media (max-width: 640px) {
  .ub-page .logo-wall { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .ub-page .logo-card { min-height: 68px; padding: 10px; }
  .ub-page .logo-card img { max-height: 36px; }
}

/* ============ Maintenance / comparison ============ */
.ub-page .maint-pt { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border); }
.ub-page .maint-pt:first-child { border-top: 1px solid var(--border); }
.ub-page .maint-pt-icon { font-size: 1.3rem; flex-shrink: 0; }
.ub-page .maint-pt-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.ub-page .maint-pt-desc { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.55; }
.ub-page .mstat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ub-page .mstat { background: var(--dark); border: 1px solid var(--border); padding: 28px 22px; }
.ub-page .mstat-n { font-family: var(--f-display) !important; font-size: var(--fs-stat); font-weight: 300 !important; line-height: 1; color: var(--green); }
.ub-page .mstat-lbl { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green2); margin-top: 6px; line-height: 1.4; }
.ub-page .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.ub-page .cmp { background: var(--dark); border: 1px solid var(--border); padding: 22px 20px; }
.ub-page .cmp.bad { background: rgba(255,50,20,.04); } .ub-page .cmp.good { background: rgba(61,122,23,.04); }
.ub-page .cmp-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.ub-page .cmp.bad .cmp-title { color: var(--orange); } .ub-page .cmp.good .cmp-title { color: var(--green); }
.ub-page .cmp-item { font-size: var(--fs-body-sm); color: var(--muted); display: flex; gap: 8px; line-height: 1.4; margin-bottom: 7px; }
.ub-page .cmp.bad .cmp-item::before { content:'×'; color:var(--orange); } .ub-page .cmp.good .cmp-item::before { content:'✓'; color:var(--green); }

/* ============ Markets row ============ */
.ub-page .svc-strip { display: flex; align-items: center; justify-content: space-between; padding: 44px 0; gap: 36px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ub-page .svc-item { display: flex; align-items: center; gap: 14px; }
.ub-page .svc-item .card-icon-sm { margin-bottom: 0; flex-shrink: 0; }
.ub-page .svc-name { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.ub-page .svc-sub { font-size: var(--fs-body-sm); color: var(--muted); margin-top: 2px; }
.ub-page .svc-sep { width: 1px; height: 46px; background: var(--border); }
.ub-page .bruns-badge { display: flex; align-items: center; gap: 16px; padding: 18px 28px; background: var(--forest-wash); border: 1px solid var(--green-border); }
.ub-page .bruns-badge-lbl { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green2); margin-bottom: 3px; }
.ub-page .bruns-badge-name { font-family: var(--f-display) !important; font-size: 1.4rem; font-weight: 600 !important; color: var(--white); }
/* The logo sits directly on the section's own background everywhere — no white card behind
   it, so it reads as part of the page, not a pasted-in image. Its printed orange tagline
   ("Experience is Everything.") has weak fill-contrast against any of our tinted backgrounds
   on its own, so a soft dark drop-shadow (which follows the artwork's real alpha silhouette,
   unlike a box-shadow) is used instead of a background swap to keep it legible. */
.ub-page .bruns-logo, .ub-page .brand-mark {
  filter: drop-shadow(0 1px 1px rgba(18,32,32,.5)) drop-shadow(0 2px 8px rgba(18,32,32,.2));
}
.ub-page .bruns-logo { height: 34px; width: auto; display: block; }
.ub-page .brand-mark { height: 58px; width: auto; margin: 24px 0 6px; display: block; }

/* ============ Form ============ */
.ub-page .form-note { margin-top: 26px; padding: 16px 20px; background: var(--forest-wash); border: 1px solid var(--green-border); font-family: var(--f-ui) !important; font-size: var(--fs-body-sm); font-weight: 600; color: var(--green); line-height: 1.55; }
.ub-page .form-trust-item { display: flex; gap: 10px; align-items: center; font-size: var(--fs-body-sm); color: var(--muted); margin-top: 10px; }
.ub-page .pform { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; }
.ub-page .fsec-title { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 12px; padding: 24px 0 14px; }
.ub-page .fsec-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ub-page .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ub-page .ffield label { display: block; font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.ub-page .ffield input, .ub-page .ffield select, .ub-page .ffield textarea { width: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--border); padding: 13px 15px; color: var(--white); font-size: var(--fs-body); outline: none; transition: var(--trans); }
.ub-page .ffield input:focus, .ub-page .ffield select:focus, .ub-page .ffield textarea:focus { border-color: var(--green); background: rgba(61,122,23,.04); }
.ub-page .ffield textarea { resize: vertical; min-height: 100px; }
.ub-page .fsubmit { margin-top: 24px; }
.ub-page .fsubmit .btn { width: 100%; justify-content: center; }
.ub-page .fdisclaimer { font-size: var(--fs-label-sm); color: var(--faint); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ============ Insights / news ============ */
.ub-page .ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
.ub-page .ins-card { background: var(--black); border: 1px solid var(--border); padding: 36px 30px; transition: background var(--trans); }
.ub-page .ins-card:hover { background: var(--dark); }
.ub-page .ins-cat { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.ub-page .ins-title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600 !important; line-height: 1.25; color: var(--white); margin-bottom: 12px; text-transform: none !important; letter-spacing: 0; }
.ub-page .ins-excerpt { font-size: var(--fs-body-sm); color: var(--muted); line-height: 1.65; }
.ub-page .ins-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.ub-page .ins-read { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.ub-page .ins-date { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); color: var(--faint); }

/* ============ Facts strip (reused across pages) ============ */
.ub-page .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 2rem 0; }
.ub-page .fact { background: var(--black); border: 1px solid var(--border); border-top: 3px solid var(--green); padding: 24px 24px 22px; position: relative; transition: transform var(--trans), box-shadow var(--trans); }
.ub-page .fact:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.35); z-index: 2; }
.ub-page .fact .k { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green2); display: block; margin-bottom: 10px; }
.ub-page .fact .v { font-size: var(--fs-body); font-weight: 600; color: var(--white); line-height: 1.5; }

/* ============ Final CTA ============ */
.ub-page .final-cta { background: var(--deep); text-align: center; padding: 110px 0; position: relative; overflow: hidden; border-top: 1px solid var(--border); }
.ub-page .fcta-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(61,122,23,.055) 0%, transparent 70%); }
.ub-page .fcta-inner { position: relative; z-index: 2; }
.ub-page .fcta-h { font-size: clamp(2.4rem, 5.5vw, 5.5rem); margin: 18px 0 30px; }
.ub-page .fcta-h em { font-style: normal; color: var(--green); font-weight: 300 !important; }
.ub-page .fcta-sub { font-size: var(--fs-body-lg); color: var(--muted); max-width: 520px; margin: 0 auto 40px; line-height: 1.7; }
.ub-page .fcta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  :root { --section: 72px; }
  .ub-page .grid4 { grid-template-columns: repeat(2, 1fr); }
  .ub-page .grid3 { grid-template-columns: 1fr 1fr; }
  .ub-page .pos-grid, .ub-page .pos-grid.pos-grid-rev { grid-template-columns: 1fr; gap: 44px; }
  .ub-page .why-grid, .ub-page .maint-grid, .ub-page .form-layout { grid-template-columns: 1fr !important; gap: 44px; }
  .ub-page .port-item { grid-column: span 6 !important; }
}
@media (max-width: 700px) {
  :root {
    --section: 56px;
    /* Slightly compress the scale on small screens so labels don't dominate body copy */
    --fs-label-sm: 0.8125rem;
    --fs-label: 0.875rem;
    --fs-body-sm: 0.9375rem;
    --fs-body: 1rem;
    --fs-body-lg: 1.0625rem;
  }
  .ub-page .wrap, .ub-page .wrap-sm { padding: 0 20px; }
  .ub-page .grid4, .ub-page .grid3 { grid-template-columns: 1fr; }
  .ub-page .port-item { grid-column: span 12 !important; }
  .ub-page .frow { grid-template-columns: 1fr; }
  .ub-page .mstat-grid, .ub-page .cmp-grid { grid-template-columns: 1fr; }
  .ub-page .hero-ctas, .ub-page .fcta-btns { flex-direction: column; }
  .ub-page .adv { gap: 16px; }
  .ub-page .adv-num { width: 56px; font-size: clamp(1.9rem, 9vw, 2.25rem); }
  .ub-page .svc-strip { justify-content: center; text-align: center; }
  .ub-page .brand-mark { height: 42px; }
}

/* ============ Site chrome: header/footer tie-in ============ */
body.page .site-header,
body.page-template-default .site-header {
  background: var(--black);
  border-bottom: 1px solid var(--border);
}

/* Astra's "Separate Containers" layout paints the body + article wrapper with its own
   light global color, which shows through as a pale frame/gap around our dark page
   content. Pin every layer of that wrapper to black so nothing shows through. */
body,
.ast-separate-container,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-inner,
.ast-separate-container .site-content,
#primary, #main, .site-content, .ast-container {
  background-color: var(--black) !important;
  background-image: none !important;
}
.ast-separate-container .ast-article-post { box-shadow: none !important; border: 0 !important; }
.site-header .site-navigation .main-navigation ul li a,
.ast-site-identity .site-title a { color: var(--white); }
.site-header .ast-header-navigation-container { --ast-global-color-1: #3D7A17; }

/* Show the visitor which page they're on — Astra marks the active nav item with these
   classes but ships no visible styling for them by default. */
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .main-navigation ul li.current_page_item > a,
.site-header .main-navigation ul li.current-menu-ancestor > a,
.site-header .main-navigation ul li.current_page_ancestor > a {
  color: var(--green) !important;
  position: relative;
}
.site-header .main-navigation ul li.current-menu-item > a::after,
.site-header .main-navigation ul li.current_page_item > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--green);
}

/* Hard cap on any header/footer logo so a wide-aspect lockup can never overflow the bar */
.site-header .custom-logo-link,
.site-header .ast-site-identity,
.site-header img.custom-logo,
footer img.custom-logo,
.site-footer img.custom-logo {
  max-height: 56px !important;
  height: auto !important;
  width: auto !important;
  display: flex;
  align-items: center;
}
.site-header .custom-logo-link img,
.site-header img.custom-logo {
  max-height: 56px !important;
  width: auto !important;
  max-width: 260px !important;
}
/* Astra applies an SVG recolor filter to the logo (site identity + transparent-header
   variants) that flattens it to a single tone. We want the real multi-color logo. */
.site-logo-img img,
.custom-logo-link img,
img.custom-logo,
.ast-site-identity img,
.transparent-custom-logo img {
  filter: none !important;
  -webkit-filter: none !important;
}
@media (max-width: 700px) {
  .site-header .custom-logo-link img,
  .site-header img.custom-logo { max-height: 40px !important; }
}

/* ============ Light-surface section variant (hybrid test — Inversión) ============
   Hero and final-cta stay dark for drama; dense content sections switch to a light,
   warm-neutral surface where the green accent reads richer and body copy is easier
   to hold a long read on. Apply with class="section light" (or "light alt" for the
   second surface tone, for rhythm between stacked light sections). */
.ub-page .light { background: var(--light-bg); color: var(--light-ink); }
.ub-page .light.alt { background: var(--light-panel); }
.ub-page .light h1, .ub-page .light h2, .ub-page .light h3, .ub-page .light h4 { color: var(--light-ink); }
.ub-page .light .sec-sub, .ub-page .light .pos-right p { color: var(--light-muted); }
.ub-page .light .pos-left-quote { color: var(--light-ink); }
.ub-page .light .pos-left-quote em { color: var(--forest); }
.ub-page .light .pos-callout { background: var(--forest-wash); border-color: var(--green-border); }
.ub-page .light .pos-callout p { color: var(--forest); }
.ub-page .light .sec-title, .ub-page .light .hero-h1 { color: var(--light-ink); }
.ub-page .light .sec-title em, .ub-page .light h2 em, .ub-page .light h3 em { color: var(--forest); }
.ub-page .light .svc-name { color: var(--light-ink); }
.ub-page .light .svc-sub { color: var(--light-muted); }
.ub-page .light .svc-sep { background: var(--light-border); }
.ub-page .light .bruns-badge-name { color: var(--light-ink); }
.ub-page .light .bruns-badge-lbl { color: var(--forest); }
.ub-page .light .svc-strip { border-color: var(--light-border); }
.ub-page .light p, .ub-page .light span, .ub-page .light li { color: inherit; }
.ub-page .light .ins-title { color: var(--light-ink); }
.ub-page .light .ins-excerpt { color: var(--light-muted); }
.ub-page .light .grid3 > *, .ub-page .light .grid4 > * { background: #fff; }
.ub-page .light .ins-card { background: #fff; }
.ub-page .light .ins-footer { border-color: var(--light-border); }
.ub-page .light .mstat, .ub-page .light .cmp { background: #fff; }
.ub-page .light .mstat-lbl { color: var(--forest); }
.ub-page .light .cmp-item { color: var(--light-muted); }
.ub-page .light .maint-pt-desc { color: var(--light-muted); }
.ub-page .light .maint-pt-title { color: var(--light-ink); }
.ub-page .light .maint-pt { border-color: var(--light-border); }
.ub-page .light .ffield input, .ub-page .light .ffield select, .ub-page .light .ffield textarea {
  background: #fff; border-color: var(--light-border); color: var(--light-ink);
}
.ub-page .light .ffield label { color: var(--light-muted); }
.ub-page .light .fsec-title::after { background: var(--light-border); }
.ub-page .light .form-note { color: var(--forest); }
.ub-page .light .fdisclaimer { color: var(--light-muted); }
.ub-page .light .f-btn { border-color: var(--light-border); color: var(--light-muted); }
.ub-page .light .port-filters { border-color: var(--light-border); }
.ub-page .light .port-tag { border-color: rgba(18,32,32,.25); color: var(--light-ink); }

/* Full audit pass: every remaining selector that defaults to --white/--muted/--faint
   (dark-theme text colors) and can actually appear inside a .light section. */
.ub-page .light .adv-title { color: var(--light-ink); }
.ub-page .light .adv-desc { color: var(--light-muted); }
.ub-page .light .big-stat { color: var(--light-ink); }
.ub-page .light .big-stat span { color: var(--forest); }
.ub-page .light .big-stat-lbl { color: var(--forest); }
.ub-page .light .op-badge-sub { color: var(--light-muted); }
.ub-page .light .op-badge-title { color: var(--forest); }
.ub-page .light .op-badge { background: var(--forest-wash); border-color: var(--green-border); }
.ub-page .light .sol-bullet { color: var(--light-muted); }
.ub-page .light table.tl th { color: var(--light-muted); border-color: var(--light-border); }
.ub-page .light table.tl td { color: var(--light-muted); border-color: var(--light-border); }
.ub-page .light table.tl td:first-child { color: var(--light-ink); }
.ub-page .light .form-trust-item { color: var(--light-muted); }
.ub-page .light .ins-date { color: var(--light-muted); }
.ub-page .light .adv, .ub-page .light .maint-pt { border-color: var(--light-border); }
.ub-page .light .eyebrow { color: var(--forest); }
.ub-page .light .eyebrow::before { background: var(--forest); }

.ub-page .light .sol-card, .ub-page .light .svc-card,
.ub-page .light .factor, .ub-page .light .step {
  background: #fff; border-color: var(--light-border);
}
.ub-page .light .mstat, .ub-page .light .cmp, .ub-page .light .ins-card {
  border-color: var(--light-border);
}
.ub-page .light .fact {
  background: #fff; border-right-color: var(--light-border); border-bottom-color: var(--light-border); border-left-color: var(--light-border);
}
.ub-page .light .sol-title, .ub-page .light .svc-title,
.ub-page .light .step-title, .ub-page .light .fact .v { color: var(--light-ink); }
.ub-page .light .step-title { color: var(--forest); }
.ub-page .light .sol-desc, .ub-page .light .svc-desc,
.ub-page .light .step-desc { color: var(--light-muted); }
.ub-page .light .fact .k { color: var(--forest); }
.ub-page .light .fact:hover { box-shadow: 0 14px 28px rgba(18,32,32,.14); }

.ub-page .light .warn-box { background: rgba(178,58,44,.06); border-color: rgba(178,58,44,.22); }
.ub-page .light .warn-box h5 { color: #B23A2C; }
.ub-page .light .warn-list li { color: var(--light-muted); }
.ub-page .light .warn-list li::before { color: #B23A2C; }

.ub-page .light .btn-outline { border-color: rgba(18,22,15,.3); color: var(--light-ink); }
.ub-page .light .btn-outline:hover { background: rgba(61,122,23,.08); border-color: var(--green); color: var(--forest); box-shadow: none; }
.ub-page .light .btn-ghost { color: var(--forest); }

/* ============ FAQ accordion (native <details>, no JS needed) ============ */
.ub-page .faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--light-border); border: 1px solid var(--light-border); margin-top: 2rem; }
.ub-page .faq-item { background: #fff; }
.ub-page .faq-item summary {
  font-family: var(--f-ui) !important; font-weight: 700; font-size: 1.05rem;
  color: var(--light-ink); padding: 22px 26px; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.ub-page .faq-item summary::-webkit-details-marker { display: none; }
.ub-page .faq-item summary::after {
  content: '+'; font-family: var(--f-display); font-size: 1.6rem; color: var(--green);
  flex-shrink: 0; transition: transform .25s ease;
}
.ub-page .faq-item[open] summary::after { transform: rotate(45deg); }
.ub-page .faq-item .faq-a { padding: 0 26px 24px; color: var(--light-muted); font-size: var(--fs-body-sm); line-height: 1.65; max-width: 72ch; }
.ub-page .faq-item[open] summary { border-bottom: 1px solid var(--light-border); }
.ub-page .faq-item .faq-a p { margin: 0 0 12px; }
.ub-page .faq-item .faq-a p:last-child { margin-bottom: 0; }
.ub-page .faq-item .faq-a .sol-bullets { margin: 4px 0 14px; }
.ub-page .faq-item .faq-a .pos-callout p { margin: 0; }

/* ============ Two-path fork (investor/developer vs. existing operator) ============ */
.ub-page .grid2-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 2.5rem; }
.ub-page .fork-card { background: var(--black); padding: 0; border: 1px solid var(--border); overflow: hidden; }
.ub-page .fork-card-img { aspect-ratio: 2 / 1; overflow: hidden; }
.ub-page .fork-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ub-page .fork-card-body { padding: 44px 38px; }
.ub-page .fork-card .tag { font-family: var(--f-ui) !important; font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: var(--green-faint); display: inline-block; padding: .45em 1em; margin-bottom: 1.2rem; }
.ub-page .fork-card h3 { font-size: 2.1rem; margin-bottom: .8rem; }
.ub-page .fork-card p { color: var(--muted); font-size: 1rem; margin-bottom: 1.5rem; max-width: 40ch; }
.ub-page .fork-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.ub-page .fork-links a { font-family: var(--f-ui) !important; font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: .03em; color: var(--white); border: 1px solid var(--border); padding: .6em 1.1em; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; }
.ub-page .fork-links a:hover { color: var(--green); border-color: var(--green); background: var(--forest-wash); }
@media (max-width: 700px) { .ub-page .grid2-fork { grid-template-columns: 1fr; } }

.ub-page .light .fork-card { background: #fff; border-color: var(--light-border); }
.ub-page .light .fork-card h3 { color: var(--light-ink); }
.ub-page .light .fork-card p { color: var(--light-muted); }
.ub-page .light .fork-links a { color: var(--light-ink); border-color: var(--light-border); }
.ub-page .light .fork-links a:hover { color: var(--forest); border-color: var(--green); background: rgba(61,122,23,.08); }

/* ============ Sticky quote tab (site-wide, injected via wp_footer — lives outside .ub-page) ============ */
.ub-sticky-quote {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  background: var(--green); color: #fff; text-decoration: none;
  font-family: var(--f-ui), sans-serif; font-weight: 800; font-size: .85rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 20px 11px; z-index: 9999; border-radius: 5px 0 0 5px;
  box-shadow: -2px 0 14px rgba(0,0,0,.22);
  transition: background .25s ease, padding-right .25s ease;
}
.ub-sticky-quote:hover { background: var(--green2, var(--green)); padding-right: 15px; }
@media (max-width: 700px) { .ub-sticky-quote { font-size: .78rem; padding: 16px 9px; } }

/* ============ Project map ============ */
.ub-page .ub-map { height: 560px; width: 100%; border-radius: 6px; overflow: hidden; margin-top: 2rem; border: 1px solid var(--light-border); }
/* Tint the stock OSM basemap toward the brand green instead of leaving it default-orange/cream —
   a real, one-line differentiator so this doesn't read as an off-the-shelf Leaflet map. */
.ub-page .ub-map .leaflet-tile-pane { filter: sepia(.35) hue-rotate(55deg) saturate(1.6) brightness(.92) contrast(1.05); }
.ub-page .ub-map .leaflet-popup-content-wrapper { border-radius: 4px; }
.ub-page .ub-map .leaflet-popup-content { margin: 14px 16px; font-family: var(--f-ui), sans-serif; min-width: 200px; }
.ub-map-pop strong { display: block; font-size: 1rem; color: var(--forest); margin-bottom: 2px; }
.ub-map-pop > span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--light-muted); margin-bottom: 10px; }
.ub-map-proj { font-size: .85rem; color: var(--light-ink); padding: 5px 0; border-top: 1px solid var(--light-border); line-height: 1.4; }
.ub-map-proj:first-of-type { border-top: none; }
.ub-map-proj b { color: var(--forest); }
.ub-page .ub-map-list { max-height: 220px; overflow-y: auto; }
@media (max-width: 700px) { .ub-page .ub-map { height: 420px; } }

/* ============ Collapsible table ============ */
.ub-page table.tl tr.tl-extra { display: none; }
.ub-page table.tl tr.tl-extra.tl-show { display: table-row; }