/* Option 1 — "Established Athletic" (approved direction)
   Closest to the old brand: white-dominant, Oswald condensed uppercase
   nav/headings (matches old site + the "tracked caps" row in the
   shortlisted font file), a direct callback to the old site's green
   underline-bar button (.default-button) and left-green-border card
   treatment (.core-value-list).

   Fonts are self-hosted — see fonts.css, enqueued separately before this
   file. No runtime Google Fonts @import here. */

:root {
	--color-bg: #FFFFFF;
	--color-bg-alt: #F3F5F4;
	--color-text: #0A1413;
	--color-text-muted: #5B6664;
	--color-accent: #009F62;
	--color-accent-bright: #00DD81;
	--color-teal: #00D4C7;
	--color-black: #0A1413;
	--color-white: #FFFFFF;
	--color-border: #E3E7E6;

	/* Fourth accent used only by the #career-case-study section's
	   diagonal stripes/timeline rings on template-careers.php (2026-08-13
	   rewrite) — teal, bright green and accent green already exist as
	   tokens above; this blue has no other sitewide use. */
	--cs-blue: #0095FF;

	/* Fill color used by the bottom-up button hover (.btn-primary::before).
	   Defaults to the bright green everywhere; the Careers page overrides
	   this to --color-teal below so its CTA also matches its sub-brand
	   accent (see "Sub-brand accent theming" at the end of this file). */
	--color-btn-fill: var(--color-accent-bright);

	/* Header wordmark height (2026-07-21, full "Reliance Sports Group"
	   lockup — wider than the old R-mark icon, see the site branding
	   rule below). Was also shared with the footer's small logo lockup
	   until 2026-07-23, when the footer's logo was replaced site-wide
	   by the full banner graphic (see footer.php) — this token is
	   header-only now. */
	--logo-height: 48px;

	/* Header-only logo height (2026-07-21 nav-pill redesign) — the
	   header roughly doubles in size, logo becomes the header's
	   dominant element. See the #site-header .site-logo override below,
	   which wins over the #site-branding rule in layout.css by source
	   order (this file loads after layout.css). */
	--logo-height-header: 96px;

	--font-heading: 'Oswald', sans-serif;
	--font-nav: 'Oswald', sans-serif;
	--font-body: 'Inter', sans-serif;

	--weight-nav: 500;
	--tracking-nav: 0.06em;
	--case-nav: uppercase;
	--text-nav: 14px;

	--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 19px;
	--text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px;
	--text-hero: clamp(44px, 6vw, 84px);

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
	--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
	--space-9: 96px;

	--radius: 2px;
	--container-max: 1240px;
	--hero-align: left;
	--hero-max: 680px;
}

h1, h2, h3, h4 { font-family: var(--font-heading); text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; }

#site-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
/* Specificity note: layout.css's rule is `#site-branding .site-logo`
   (1 id + 1 class). A plain `#site-header img` (1 id + 0 class + 1
   type) would actually lose that specificity fight regardless of load
   order, so this stays class-based (`.site-logo`, plus `.custom-logo`
   to also cover the has_custom_logo() Customizer path) to tie on
   specificity and win on source order (this file loads after
   layout.css). */
#site-header .site-logo,
#site-header .custom-logo { height: var(--logo-height-header, 96px); width: auto; }

/* header social icons — clearly secondary vs. the nav pill: smaller,
   plain black/currentColor, no fill/background, simple color hover
   (same 200ms register as everything else in this theme). */
/* social icons now use fixed brand-colour fills (see header.php SVGs)
   instead of currentColor, so no color/hover rule needed here anymore —
   hover feedback is a scale transform, defined in layout.css. */

/* nav pill trigger — reuses the site's black-fill/green-hover button
   idiom (see .btn-primary below) but pill-shaped rather than sharp-
   cornered, per the brief's own "pill" naming. Open state (aria-
   expanded="true") gets the same green treatment as :hover so the
   trigger visibly reads as "currently open" even without hovering. */
.nav-pill-trigger {
	background: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-nav);
	font-size: var(--text-nav);
	font-weight: var(--weight-nav);
	letter-spacing: var(--tracking-nav);
	text-transform: var(--case-nav);
}
.nav-pill-trigger:hover,
.nav-pill-trigger[aria-expanded="true"] {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-black);
}

/* nav pill dropdown panel — white surface + top accent border, the
   same idiom as .card's left accent border (see below) rotated to fit
   a panel that drops down rather than sitting in a grid. */
.nav-pill-menu {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-accent);
	box-shadow: 0 12px 24px rgba(10,20,19,0.10);
}
.nav-pill-menu a:hover { background: var(--color-bg-alt); }

#primary-navigation a { color: var(--color-black); padding-bottom: 4px; border-bottom: 2px solid transparent; transition: border-color 200ms ease, color 200ms ease; }
#primary-navigation a:hover { border-color: var(--color-accent); color: var(--color-accent); }

#hero { background: var(--color-white); }
#hero .accent-word { background: var(--color-accent-bright); padding: 2px 10px; box-decoration-break: clone; color: var(--color-black); }
#hero p { color: var(--color-text-muted); }

.btn-primary {
	position: relative; overflow: hidden; background: var(--color-black); color: var(--color-white); z-index: 1;
}
.btn-primary::before {
	content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--color-btn-fill);
	transition: height 260ms ease; z-index: -1;
}
.btn-primary:hover::before { height: 100%; }
.btn-primary:hover { color: var(--color-black); }

.card {
	background: var(--color-white);
	border-left: 3px solid var(--color-accent);
	box-shadow: 0 1px 2px rgba(10,20,19,0.04);
}
.card:hover {
	box-shadow: 0 12px 24px rgba(10,20,19,0.10);
}

#process, #how-it-works { background: var(--color-bg-alt); }
#process li, #how-it-works li { background: var(--color-white); border-left: 3px solid var(--color-accent); }
#process h3 span.step-num, #how-it-works h3 span.step-num { color: var(--color-accent); font-family: var(--font-heading); margin-right: var(--space-2); }

/* service cards (Player Recruitment #process only, 2026-07-28) — same
   white background + accent border-left "card" look the old
   .process-card/.process-media pair used, applied uniformly to all five
   cards now that they're equal-weight (no left/right border-flip needed —
   that existed only to make the old card-photo pairs read as one joined
   unit; these cards are independent). */
.service-card {
	background: var(--color-white);
	border-left: 3px solid var(--color-accent);
	box-shadow: 0 1px 2px rgba(10,20,19,0.04);
}
.service-card:hover {
	box-shadow: 0 12px 24px rgba(10,20,19,0.10);
}

/* Careers intro band (2026-08-04 v2) — teal text on black, per
   direction. Replaces the old white-panel .careers-intro-text (which
   sat inside a photo/text split that's gone now — see
   template-careers.php/layout.css). --color-accent already resolves
   to --color-teal on this page (see "Sub-brand page identity" above)
   but this uses --color-teal directly since intro text needs to stay
   teal regardless of any future sub-brand accent change on this page. */
#careers-intro { background: var(--color-black); color: var(--color-teal); }

/* Process infographic ("How We Work", 2026-08-04 v2) — background
   swapped white -> black per direction, keeping every teal/accent
   value as-is. Every value that was literally black or literally
   white is inverted (.hw-node's circle fill+text swap places; the
   inactive-tab and step-description text, previously dark on white,
   become their light-on-dark equivalents using the same rgba(255,255,255,*)
   pattern already used for .eyebrow-label elsewhere on this page); the
   "How We Work" h2 and step h3/h4 have no color rules to touch at all
   — they simply inherit white from this section rule now instead of
   the dark var(--color-text) they inherited from #content before. */
#diamond-process { background: var(--color-black); color: var(--color-white); }
.hw-tab { color: rgba(255,255,255,0.65); }
.hw-tab.is-active { background: var(--color-accent); color: var(--color-black); }
.hw-step:not(:last-child)::after { background: var(--color-accent); }
.hw-node { background: var(--color-white); color: var(--color-black); }
.hw-step p { color: rgba(255,255,255,0.7); }

/* Case study (2026-08-13, ground-up rewrite). --color-accent resolves
   to --color-teal on this page (sub-brand override below), so the
   fourth, slightly-darker green (timeline node 3) is hardcoded as
   --color-accent would just duplicate the teal used for node/label 1
   otherwise. */
#career-case-study { background: var(--color-black); color: var(--color-white); }
.cs-tag { background: var(--color-teal); color: var(--color-black); }
.cs-tag-role { color: rgba(255,255,255,0.65); }
.cs-text > p { color: rgba(255,255,255,0.8); }
.cs-label-teal { color: var(--color-teal); }
.cs-label-bright-green { color: var(--color-accent-bright); }
.cs-label-blue { color: var(--cs-blue); }

.cs-stat-teal { border-top-color: var(--color-teal); }
.cs-stat-bright-green { border-top-color: var(--color-accent-bright); }
.cs-stat-blue { border-top-color: var(--cs-blue); }
.cs-stat-teal .cs-stat-num { color: var(--color-teal); }
.cs-stat-bright-green .cs-stat-num { color: var(--color-accent-bright); }
.cs-stat-blue .cs-stat-num { color: var(--cs-blue); }
.cs-stat-label { color: rgba(255,255,255,0.65); }

.cs-node-teal { background: var(--color-teal); }
.cs-node-bright-green { background: var(--color-accent-bright); }
.cs-node-green { background: #009F62; }
.cs-node-blue { background: var(--cs-blue); }
.cs-timeline-title { color: rgba(255,255,255,0.65); }
.cs-timeline-step p { color: rgba(255,255,255,0.7); }

/* Testimonials (2026-08-04 v8 — brochure-faithful rebuild). White ->
   black background per the case study/diamond-process precedent set
   above, and teal/bright-green brought in per the brochure page (the
   v5-v7 passes deliberately kept "no teal anywhere in it" — superseded
   by this direction). .ct-box-client/.ct-box-candidate get the
   brochure's top accent bar via border-top (teal / bright-green, set
   structurally in layout.css, colored here). */
#careers-testimonials { background: var(--color-black); color: var(--color-white); }
.ct-subtext { color: rgba(255,255,255,0.65); }
.ct-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); }
.ct-box-client { border-top-color: var(--color-teal); }
.ct-box-candidate { border-top-color: var(--color-accent-bright); }
.ct-box-client .ct-kind { color: var(--color-teal); }
.ct-box-candidate .ct-kind { color: var(--color-accent-bright); }
.ct-role { color: rgba(255,255,255,0.6); }

#enquiry-cta { background: var(--color-black); color: var(--color-white); }
#enquiry-cta .btn-primary { background: var(--color-accent); color: var(--color-black); }
#enquiry-cta .btn-primary::before { display: none; }
#enquiry-cta .btn-primary:hover { color: var(--color-black); }
/* Sitewide .btn:hover has a translateY(-2px) lift (layout.css) — this
   button shouldn't have it. */
#enquiry-cta .btn:hover { transform: none; }

#industries-served { background: var(--color-black); color: var(--color-white); }


/* player journey (#journey) + CTA (#cta), Player Recruitment only,
   2026-07-28 — a deliberately dark closing run of the page, echoing the
   hero's accent-to-black wash (theme-established-athletic.css "HERO
   BACKGROUND" above) so the page opens and closes on the same gradient
   idea. Vertical (not diagonal like the hero) specifically so the
   entire bottom edge resolves to flat var(--color-black) — a diagonal
   wash would leave one bottom corner still tinted green, visible as a
   seam against #cta and the footer, which are flat black. #cta then
   matches that same flat black so the run from mid-#journey through
   #cta into #site-footer reads as one continuous dark passage, not
   three stacked bands. --color-accent already resolves to this page's
   bright-green sub-brand accent (see "Sub-brand page identity" above),
   so this needs no page-specific override of its own. */
#journey {
	background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-black) 70%);
	color: var(--color-white);
}
#journey .journey-intro p,
#journey .journey-card p,
.journey-mobile-list p { color: rgba(255,255,255,0.75); }
/* white nodes (not accent-bright) deliberately — a green node would
   read fine against the section's black lower half but nearly vanish
   against its own green upper half; white holds contrast against both. */
.journey-node, .journey-mobile-num { background: var(--color-white); color: var(--color-black); }
.journey-cell-node::before { background: rgba(255,255,255,0.35); }

#cta { background: var(--color-black); }
/* .btn-primary is normally a black button on a white section (bottom-up
   accent fill on hover) — invisible against #cta's own black background
   until hovered, so this page's CTA inverts it: accent-filled at rest,
   black fill still rises on hover, text flips to white to stay legible
   against that incoming black. Scoped to #cta only, not a global
   .btn-primary change (would also affect the 404 page and homepage
   hero CTA, both on light backgrounds). */
#cta .btn-primary { background: var(--color-accent-bright); color: var(--color-black); }
/* .btn-primary's hover mechanic (bottom-up ::before fill + text color
   swap) removed entirely for this button, not just its animation — the
   button now looks identical at rest and on hover. Scoped to #cta so
   .btn-primary elsewhere (404 page, homepage hero CTA) is unaffected. */
#cta .btn-primary::before { display: none; }
#cta .btn-primary:hover { color: var(--color-black); }

/* testimonials (Player Recruitment #testimonials only) — dark section
   background so the grid's edges (and any letterboxing before photos
   load) read as a continuous dark run with #journey above and #cta
   below, matching the rest of this page's dark-section rhythm.

   .testimonial-cell-tint (2026-08-04 v5, per direction) is back to a
   flat, even wash across the whole photo — v4's directional gradient
   (darkening only the corner/edge behind the quote, leaving the rest
   of the photo untouched) is superseded. The photo still shows through
   at 55% tint everywhere; the quote itself still sits per-photo at the
   --tl/--l/--b/--bl placement chosen in template-player-recruitment.php
   so the TEXT specifically avoids sitting over the player, even though
   the tint now covers the full image. Text color inherits white from
   #testimonials. */
#testimonials { background: var(--color-black); color: var(--color-white); }
.testimonial-cell-tint { background: rgba(10, 20, 19, 0.55); }
.testimonial-role { opacity: 0.75; }

form label { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; color: var(--color-text-muted); }
form input, form select, form textarea {
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: 0; color: var(--color-text);
}
form input:focus, form select:focus, form textarea:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(0,159,98,0.15); }
form button[type="submit"] { background: var(--color-black); color: var(--color-white); padding: var(--space-3) var(--space-6); font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; }
form button[type="submit"]:hover { background: var(--color-accent); }
[role="alert"] { background: #FBEAE8; color: #8A2A22; border-left: 3px solid #C6423A; }
[role="status"] { background: var(--color-bg-alt); border-left: 3px solid var(--color-accent); }

#site-footer { background: var(--color-black); color: var(--color-white); }
#footer-navigation a { transition: color 200ms ease; }
#footer-navigation a:hover { color: var(--color-accent-bright); }

/* Footer stripe graphic — went through several iterations (flat image,
   then a live CSS gradient at various angles/widths/positions, see git
   history for the full v2–v10 trail) before being removed entirely on
   2026-07-27 (v11): after rotating it 90deg, the client decided
   against the line graphic and asked to centralize the banner text
   instead (see footer.php/layout.css v11 notes). */
.footer-banner-headline { color: var(--color-white); }
.fbp-talent .fbp-label { color: var(--color-accent-bright); }
.fbp-careers .fbp-label { color: var(--color-teal); }
.fbp-desc { color: rgba(255,255,255,0.75); }
.footer-banner-divider { background: rgba(255,255,255,0.25); }

/* ==========================================================================
   Additions below — decoration for the sections extended beyond the
   original 3-option preview scope (site branding wordmark, prose/page
   title typography, About team grid, homepage Instagram placeholder,
   Contact intro, 404, footer contact/social).
   ========================================================================== */

.prose h2 { color: var(--color-black); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; transition: color 200ms ease; }
.prose a:hover { color: var(--color-accent-bright); }

.page-title { color: var(--color-black); }

.team-member { background: var(--color-white); border-left: 3px solid var(--color-accent); box-shadow: 0 1px 2px rgba(10,20,19,0.04); }
.team-member:hover { box-shadow: 0 12px 24px rgba(10,20,19,0.10); }
.team-photo-placeholder { background: var(--color-bg-alt); color: var(--color-accent); }
.team-member .role { color: var(--color-text-muted); font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.04em; }

/* Player carousel (Home) — one large represented-player action photo
   at a time, now living inside `.hero-media` in `#hero` (relocated
   2026-07-21, see design-system.md's dated addendum). Structure/motion
   mechanics live in layout.css; this file previously supplied a white
   card surface + left-accent-border + shadow on `.player-carousel-
   stage` (the same idiom as .card/.team-member/.instagram-tile-media)
   plus a tinted section background — both removed at the user's
   request as part of the relocation: no card framing, no padding, no
   background box around the image, just the raw rotating photo sized
   to the hero column. Deliberately no rule here now — the image
   renders with whatever sizing/aspect-ratio layout.css's
   `.player-carousel-stage`/`.player-carousel-slide` supply, nothing
   else. */

/* Player carousel — empty state (mirrors .instagram-placeholder: same
   left-accent-border white card, accent-coloured icon, muted body
   copy). Renders instead of the slide track when `player_carousel`
   has no rows with an image yet. Kept as its own framed card
   (unlike the now-frameless rotating image) — an empty `.hero-media`
   column would otherwise read as a layout bug rather than an
   intentional "no photos yet" state. */
.player-carousel-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	max-width: 360px;
	margin-inline: auto;
	padding: var(--space-6) var(--space-5);
	text-align: center;
	background: var(--color-white);
	border-left: 3px solid var(--color-accent);
	box-shadow: 0 1px 2px rgba(10,20,19,0.04);
}
.player-carousel-placeholder-icon { display: inline-flex; color: var(--color-accent); }
.player-carousel-placeholder-text { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

#contact-intro h1 { color: var(--color-black); }
#contact-intro p { color: var(--color-text-muted); }

#error-404 { background: var(--color-bg-alt); }
#error-404 h1 { color: var(--color-black); }
#error-404 p { color: var(--color-text-muted); }

#footer-contact-details { color: var(--color-white); opacity: 0.85; }
#footer-contact-details a { transition: color 200ms ease; }
#footer-contact-details a:hover { color: var(--color-accent-bright); }
#footer-social a { font-family: var(--font-nav); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm); transition: color 200ms ease; }
#footer-social a:hover { color: var(--color-accent-bright); }

/* ==========================================================================
   Sub-brand page identity (2026-07-21) — full wordmark lockups for
   Reliance Talent / Reliance Careers, plus each page's dominant accent
   color scoped via a page-level body class. Source: the client's
   "Final Recommendation" brand deck confirms Reliance Sports Group
   (deep green #009f61, i.e. this theme's --color-accent), Reliance
   Talent (bright green #00dd81, this theme's --color-accent-bright)
   and Reliance Careers (teal #00d3c6, essentially --color-teal above)
   as a formal sub-brand system. No new color values were invented —
   all three already existed in this theme's token set before this
   change; this only applies them more deliberately as each page's
   dominant accent instead of using the deep green everywhere.

   Scoping mechanism: WordPress's body_class() already emits
   `page-template-{template-slug}-php` for any page using a custom
   page template (confirmed via curl, no functions.php change needed).
   Each block below only overrides --color-accent (and --color-btn-fill
   for the CTA button's hover fill, which template-established-athletic
   otherwise reads from --color-btn-fill's global default) *within
   that page's <body>* — every component that already consumes
   var(--color-accent)/var(--color-btn-fill) (nav hover, .card /
   .team-member / #process/#how-it-works left borders, .prose link
   color, .btn-primary hover fill) picks up the page's sub-brand color
   automatically, no component-level changes needed. Global tokens
   (:root above) are untouched, so every other page keeps the standard
   deep-green accent.

   To give a future page its own sub-brand accent: add a
   `body.page-template-{slug}-php { --color-accent: ...; --color-btn-fill: ...; }`
   block following this pattern — reuse an existing token (like these
   two) if the brand deck specifies one, or ask design-motion to
   propose new sub-brand options first if it doesn't. */

/* Reliance Talent (template-player-recruitment.php) — bright green */
body.page-template-template-player-recruitment-php {
	--color-accent: var(--color-accent-bright);
	--color-btn-fill: var(--color-accent-bright); /* same as the global default; explicit for clarity */
}

/* Reliance Careers (template-careers.php) — teal */
body.page-template-template-careers-php {
	--color-accent: var(--color-teal);
	--color-btn-fill: var(--color-teal);
}

/* ==========================================================================
   Giant-logo page hero — Reliance Talent / Reliance Careers (2026-07-21)

   Replaces the earlier small .page-subbrand lockup + separate visible
   .page-title text with one full-bleed hero: a giant on-dark wordmark
   over a colour wash, with a real <h1> wrapping the logo image whose
   text is visually hidden (see .sr-only in reset.css) so the page still
   has real heading text for accessibility/SEO — the image itself has
   empty alt + role="presentation" so screen readers don't double-announce.

   Three directions were mocked up and screenshotted for approval:
     Option 1 — Black Band     (solid black, centered, accent underline)
     Option 2 — White Giant    (stays on white, on-brand with old style)
     Option 3 — Accent Gradient (diagonal accent-to-black wash) <- SHIPPED
   The user picked Option 3 for now and may switch later. Swap directions
   by replacing ONLY the "HERO BACKGROUND" rule below — the structural
   rule above it (box model, centering) and the logo-sizing rule below it
   are shared by all three options and don't need to change. Full CSS for
   Options 1 and 2 is kept in design-system.md's 2026-07-21 addendum so a
   swap is a copy/paste, not a redesign.

   Bug note: the very first version of this hero showed a stray "|" glyph
   above the logo in every option. That turned out to be a pre-existing
   ~4px-wide artifact baked into the source logo-talent/-careers PNGs
   themselves (invisible at the old 40px display height, visible once
   blown up) — not a CSS/markup bug. Fixed by cleaning the source assets
   (see design-system.md addendum for the tool + before/after). */
.page-hero {
	margin: 0;
	padding: var(--space-9) 5%;
	display: flex;
	justify-content: center;
}
/* width: 100% (not the flex default shrink-to-fit auto) is required
   here: with a percentage-width img child and an auto-width flex-item
   parent, browsers resolve the img's percentage against the parent's
   *intrinsic* content size (i.e. the PNG's native 1154px) rather than
   the flex container's actual available space — a circular-reference
   fallback in the CSS sizing spec. That silently forced this h1 to be
   1154px wide regardless of viewport, causing full horizontal page
   overflow at narrow widths (verified: happened at 375px before this
   was added). width: 100% gives the img a definite containing-block
   width to resolve its min(92%, 900px) against, so it actually shrinks
   on small screens. min-width: 0 additionally overrides the flex
   default that would otherwise refuse to shrink below content size. */
.page-hero h1.page-hero-title { margin: 0; padding: 0; font-weight: 400; line-height: 0; width: 100%; min-width: 0; }

/* HERO BACKGROUND — Option 3: Accent Gradient (current, approved
   2026-07-21). Same diagonal-wash pattern already used for the
   Instagram tile placeholder above (.instagram-tile-media); --color-accent
   is already scoped per-page (bright green on Talent, teal on Careers)
   by the sub-brand accent theming block above, so this one rule works
   for both pages unmodified. */
.page-hero { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-black) 65%); }

/* Logo sizing — shared by all three hero options. Fluid width, height:auto
   preserves the source aspect ratio so no separate mobile override is
   needed; margin-inline: auto centers it now that its containing block
   (h1.page-hero-title) is full-width rather than shrink-to-fit — verified
   not to overflow at 375px or force horizontal scroll. */
.page-hero-logo { display: block; width: min(92%, 900px); height: auto; margin-inline: auto; }

/* Talent hero, 50% bigger (2026-07-28) — scoped to this page's body
   class rather than editing .page-hero/.page-hero-logo directly, since
   those are shared with the Careers hero (same markup/classes, just a
   different logo src and --color-accent). The 92% figure is untouched:
   it's already a relative safety cap that shrinks the logo on narrow
   screens regardless of the px ceiling (see "Logo sizing" note above),
   so raising just the 900px -> 1350px ceiling (and the vertical padding
   proportionally, 96px -> 144px) doesn't reopen the narrow-viewport
   overflow bug that min(92%, ...) was added to fix. */
body.page-template-template-player-recruitment-php .page-hero-logo { width: min(92%, 1350px); }
body.page-template-template-player-recruitment-php .page-hero { padding: 144px 5%; }

/* Careers hero, matched to Talent's size (2026-07-28) — same 50%
   increase (900px -> 1350px, 96px -> 144px padding), same reasoning:
   scoped per-page since .page-hero/.page-hero-logo are shared with the
   other hero. */
body.page-template-template-careers-php .page-hero-logo { width: min(92%, 1350px); }
body.page-template-template-careers-php .page-hero { padding: 144px 5%; }

/* Careers hero, solid-black bottom edge (2026-08-04, retimed 2026-08-13) —
   #careers-photo-grid now sits directly beneath this header (see
   template-careers.php), so the header's bottom edge needs to read as
   flat solid black across its full width to blend cleanly into that
   photo row. The shared diagonal .page-hero background (135deg, teal at
   0% to black at 65%) doesn't guarantee that on its own: a 135deg
   gradient's color depends on position along that diagonal axis, not
   vertical position, so on a hero this much wider than tall the
   bottom-LEFT corner can still be short of pure black even past the 65%
   stop, only the bottom-right corner reliably reaches it. Scoped to
   Careers only (Talent's hero isn't followed by a photo grid, so it
   keeps the unmodified diagonal — per direction). Layers a second,
   vertical black-to-transparent gradient on top of the existing diagonal
   one (first-listed background paints on top) — solid black by 80% (was
   100%/the very bottom; moved earlier per direction so the last 1/5 of
   the hero is already flat black going into the photo grid, rather than
   only reaching black exactly at the seam), fading to fully transparent
   by 55% so it doesn't touch the diagonal's own look higher up in the
   header. */
body.page-template-template-careers-php .page-hero {
	background:
		linear-gradient(to bottom, transparent 55%, var(--color-black) 80%),
		linear-gradient(135deg, var(--color-accent) 0%, var(--color-black) 65%);
}

/* ==========================================================================
   Homepage photo-grid pillar teasers (Talent / Careers) — 2026-07-22,
   rebuilt into a floating glass card (v4), then into its own full-width
   row sitting between photo rows (v5) same day: structural rules (box
   model, row stacking) live in layout.css; this is the color/surface
   layer, same split used throughout this file. Frosted glass surface —
   a translucent tint of each grid's own sub-brand accent (bright green
   = Talent, teal = Careers), plus a thin light border for the "glass
   edge" and a soft shadow to lift it off the page slightly. White text
   sits on the tint for contrast. No new color tokens: reuses
   --color-accent-bright / --color-teal already defined in :root above
   via color-mix(). */
.pg-text {
	box-shadow: 0 20px 40px rgba(10,20,19,0.28);
	border: 1px solid rgba(255,255,255,0.35);
	transition: box-shadow 220ms ease, transform 220ms ease;
}
.pg-text:hover { box-shadow: 0 24px 48px rgba(10,20,19,0.34); transform: translateY(-2px); }
.pg-text h2 { color: var(--color-white); }
.pg-text p { color: rgba(255,255,255,0.88); }

.pg-talent .pg-text { background: color-mix(in srgb, var(--color-accent-bright) 80%, transparent); }
.pg-talent .pg-text a { color: var(--color-white); }
.pg-talent .pg-text a:hover { color: var(--color-black); gap: 10px; }

.pg-careers .pg-text { background: color-mix(in srgb, var(--color-teal) 80%, transparent); }
.pg-careers .pg-text a { color: var(--color-white); }
.pg-careers .pg-text a:hover { color: var(--color-black); gap: 10px; }

@media (max-width: 720px) {
	/* No photo mosaic sits behind the card once it drops to static
	   mobile flow (layout.css turns off the blur there), so the tint
	   goes solid instead of translucent — and since both brand accents
	   are light, bright colors, text flips to black/dark here rather
	   than the white used over photos, to keep contrast. */
	.pg-talent .pg-text { background: var(--color-accent-bright); }
	.pg-careers .pg-text { background: var(--color-teal); }
	.pg-text h2, .pg-text p { color: var(--color-black); }
	.pg-talent .pg-text a, .pg-careers .pg-text a { color: var(--color-black); text-decoration: underline; }
	.pg-talent .pg-text a:hover, .pg-careers .pg-text a:hover { color: var(--color-black); }
	.pg-text { border: none; box-shadow: none; }
	.pg-text:hover { box-shadow: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pg-text, .pg-talent .pg-text a, .pg-careers .pg-text a { transition: none; }
}

/* "What We Do" icon grid — color layer for the structure in
   layout.css. Each item's icon is tinted by which pillar it belongs
   to, same bright-green/teal split as everywhere else on this page. */
.wwd-talent .wwd-icon { color: var(--color-accent-bright); }
.wwd-careers .wwd-icon { color: var(--color-teal); }

/* About page (2026-08-03 v2) — colors for the structure in
   layout.css. Hardcoded black/teal (not var(--color-accent)) since
   this page has no sub-brand override of its own; the brochure page
   being recreated here is specifically Reliance Careers branded, used
   as-is per direction. Whole page reads as one continuous black
   passage (all three sections share the same background), matching
   the brochure page it's copied from. */
#about-intro, #about-experience, #about-trust { background: var(--color-black); color: var(--color-white); }
.eyebrow-num { color: var(--color-teal); }
.eyebrow-line { background: var(--color-teal); }
.eyebrow-label { color: rgba(255,255,255,0.65); }
.about-intro-text p { color: rgba(255,255,255,0.85); }
.about-photo-role { color: rgba(255,255,255,0.65); }

/* Talent/Careers glass cards (2026-08-13) — same frosted-glass
   technique as the homepage's .pg-text pillar teasers (translucent
   tint via color-mix, thin light border for the "glass edge", soft
   shadow, white text for contrast on the tint). Two independent
   tinted surfaces rather than one shared/gradient card, per
   direction — replaces the old plain-black-background styling
   (colored h3 text, no card surface) this had before the
   connector-graphic version was removed. */
.about-focus-block {
	box-shadow: 0 20px 40px rgba(10,20,19,0.28);
	border: 1px solid rgba(255,255,255,0.35);
	transition: box-shadow 220ms ease, transform 220ms ease;
}
.about-focus-block:hover { box-shadow: 0 24px 48px rgba(10,20,19,0.34); transform: translateY(-2px); }
.about-focus-block h3 { color: var(--color-white); }
.about-focus-block p { color: rgba(255,255,255,0.88); }
.about-focus-talent { background: color-mix(in srgb, var(--color-accent-bright) 80%, transparent); }
.about-focus-careers { background: color-mix(in srgb, var(--color-teal) 80%, transparent); }
@media (max-width: 720px) {
	/* No photo mosaic behind these cards to blur, and both brand
	   accents are light/bright colors — solid tint + dark text reads
	   better here than translucent white-on-color, same call
	   .pg-text makes at this breakpoint. */
	.about-focus-talent { background: var(--color-accent-bright); }
	.about-focus-careers { background: var(--color-teal); }
	.about-focus-block h3, .about-focus-block p { color: var(--color-black); }
	.about-focus-block { border: none; box-shadow: none; }
	.about-focus-block:hover { box-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.about-focus-block { transition: none; }
}
#about-experience h4, #about-trust h4 { color: rgba(255,255,255,0.65); }
.trust-dot-teal { background: var(--color-teal); }
.trust-dot-green { background: var(--color-accent-bright); }
.trust-dot-blue { background: #3B82F6; }