/* ==========================================================================
   Component redesign - header, footer, editorial ("About Our Company") block.
   Sep 9 2026 CEO rollout.
   --------------------------------------------------------------------------
   WHY THIS FILE IS HAND-WRITTEN CSS

   These three components are being brought forward to the design language of
   the full site redesign, which lives in c:\c\scientificgames-v18. That repo
   is Tailwind v4 and generates its utilities from tokens declared in
   SG.Web/Styles/app.css.

   This repo's Tailwind build is FROZEN: wwwroot/css/tailwind.css is a
   prebuilt artifact from Oct 2022, and there is no tailwind.config.js, no
   package.json and no build step. A utility class that is not already in
   that file does nothing. So the v18 markup cannot be lifted across as-is -
   the component styling is reproduced here by hand instead.

   Class names deliberately MIRROR the v18 names (.sg-header, .sg-container,
   .sg-section, .sg-exec-card, .sg-link, .sg-brand-rule ...) so that when the v18
   site ships, these views are already close to a straight lift and the diff
   is "delete this file" rather than "rename everything".

   TOKEN VALUES ARE LITERAL HEX, not color-mix(), because there is no build
   step to flatten them. Each derived value carries the v18 mix it came from
   in a comment; app.css in the v18 repo is the source of truth. If a brand
   colour changes, change it there first, then re-derive here.

   Loaded LAST in Master.cshtml, after custom.css, so it wins specificity
   ties against the older stylesheets.
   ========================================================================== */

:root {
  /* ---- PRIMARY brand colours (Brand Guide, updated 04/26) --------------
     SG Blue is #005d98, NOT the brighter #00a0df - that one is a secondary
     accent. The old header and footer painted themselves with Tailwind's
     bg-blue-500 / bg-blue-900, which are neither. */
  --sg-blue: #005d98;      /* PMS 301C */
  --sg-red: #d02a2f;       /* PMS 711C */

  /* ---- SECONDARY / accent colours ------------------------------------- */
  --sg-purple: #592c82;    /* PMS 268C */
  --sg-cyan: #00a0df;      /* PMS 299C */
  --sg-sky: #8ab7e9;       /* PMS 278C */
  --sg-magenta: #af0061;   /* PMS 227C */

  /* ---- Derived tones --------------------------------------------------
     Each is the flattened result of the matching color-mix() in v18 app.css. */
  --sg-blue-deep: #004c7d;   /* sg-blue 82% + black  */

  /* Neutrals. ink-900 IS TRUE BLACK, confirmed with Brand: BK is the dark
     colour and the dark accent, not a near-black navy. That is why the
     footer and the header utility bar are black here rather than blue-900. */
  --sg-ink-900: #000000;
  --sg-ink-700: #2b4154;     /* sg-blue 16% + #333c47 */
  --sg-ink-500: #5c7286;     /* sg-blue 14% + #6b7683 */
  --sg-ink-300: #b0c1d0;     /* sg-blue 10% + #c3ccd6 */
  --sg-ink-100: #e2eaf0;     /* sg-blue 5%  + #eef1f5 */
  --sg-ink-50:  #f0f4f8;     /* sg-blue 3%  + #f7f9fb */

  /* Copy on a dark ground - sg-sky 80% + white. Not plain white: body copy
     at full white on black buzzes, and the footer's contact block is the
     smallest type on the page. */
  --sg-ink-on-dark-soft: #a1c5ed;

  /* ---- Typography ----------------------------------------------------
     Tellumo is already the base face in this repo (tailwind.css preflight),
     so this only restates it on the component roots. DM Sans keeps the
     editorial voice.

     MACKLIN IS NOT REFERENCED HERE, ON PURPOSE. The v18 repo removed it -
     the files were self-hosted for the public site without a web-embedding
     right (confirmed 2026-08-20) and DM Sans took over the editorial role.
     fonts.css in this repo still declares Macklin for the pages that have
     not been redesigned; do not add it to any stack below. */
  --sg-font-sans: Tellumo, Arial, ui-sans-serif, system-ui, sans-serif;
  --sg-font-editorial: 'DM Sans', Arial, ui-sans-serif, system-ui, sans-serif;

  /* ---- Motion --------------------------------------------------------- */
  --sg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Radii ---------------------------------------------------------
     The v18 scale, tightened from Tailwind's defaults: the design is moving
     toward squarer forms. A printed game has a barely-there corner radius,
     not a soft app-card one. */
  --sg-radius-md: 0.25rem;
  --sg-radius-2xl: 0.625rem;

  /* The brand rule - a 3px gradient bar. In v18 it closes the page-title
     band and opens the footer; this site has no title band, so the footer is
     its only use here. 3px rather than a hairline: at 1px the separation
     reads as an accident rather than a mark. */
  --sg-brand-rule: linear-gradient(90deg,
    var(--sg-blue), var(--sg-purple) 45%,
    var(--sg-magenta) 72%, transparent);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

/* The v18 container: an 80rem cap with fluid gutters, rather than this repo's
   Tailwind `container` (which steps at breakpoints and carries no padding). */
.sg-container {
  margin-inline: auto;
  max-width: 80rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.sg-brand-rule {
  height: 3px;
  flex: none;
  background: var(--sg-brand-rule);
}

/* Mirrored, so the rule ramps AWAY from the page content rather than into
   it - it reads as the content ending, which is the opposite gesture to
   v18's title-band rule saying "the page starts here". */
.sg-brand-rule[data-flip] {
  background: linear-gradient(270deg,
    var(--sg-blue), var(--sg-purple) 45%,
    var(--sg-magenta) 72%, transparent);
}

.sg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sg-skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  padding: 0.6rem 1rem;
  border-radius: var(--sg-radius-md);
  background: var(--sg-blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

/* ==========================================================================
   HEADER

   The old header was a fixed, 60%-opacity blue bar floating over the hero.
   The redesign is a STICKY, opaque white bar that participates in layout, so
   the nav has a real ground and its type is legible over any hero rather
   than depending on what the page happens to open with.
   ========================================================================== */

.sg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  transition: transform 0.3s var(--sg-ease-out), box-shadow 0.3s;
  font-family: var(--sg-font-sans);
}
/* Only blur where it is supported - without the guard, a browser that
   ignores backdrop-filter gets a 95% ground with nothing softening behind
   it, which reads as a rendering bug rather than a choice. */
@supports (backdrop-filter: blur(6px)) {
  .sg-header { backdrop-filter: blur(6px); }
}

/* Hides on the way down, returns on the way up: a reader scrolling down has
   committed to the content, a reader scrolling up is looking for the nav. */
.sg-header.is-hidden { transform: translateY(-100%); }
.sg-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(0, 93, 152, 0.4); }

/* ---- Utility bar: customer logins plus any Top Navigation links.

   Black rather than SG blue. The bar and the footer are now the same ground,
   so the page opens and closes on one dark colour instead of opening on
   blue; and white type on black gains contrast rather than losing it (301C
   against white is already close to the AA floor at this size).

   Desktop only - on mobile these links live inside the menu panel. */
.sg-utility-bar {
  display: none;
  background: var(--sg-ink-900);
}
.sg-utility-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-block: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.sg-utility-link {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.sg-utility-link:hover,
.sg-utility-link:focus { opacity: 1; color: #fff; text-decoration: none; }

/* 768px, NOT 1024px, and that difference is load-bearing. The mobile panel -
   the only other place these links appear - is itself hidden from 768px up,
   so a 1024px breakpoint here leaves Contact, Game Gallery and SGZone
   unreachable at every width in between. v18 has the same gap (its bar is
   `hidden lg:block` against a `md:hidden` panel); this closes it. The bar is
   three short uppercase links right-aligned, so it fits 768px comfortably. */
@media (min-width: 768px) {
  .sg-utility-bar { display: block; }
}

/* ---- Brand row --------------------------------------------------------- */
.sg-header-bar { border-bottom: 1px solid var(--sg-ink-100); }
.sg-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* The LOGO sets this row's height, not the padding - it is a stacked
     lockup, so the wordmark under the mark needs real height to be legible.
     0.75rem rather than 1rem keeps the sticky header within a few px of the
     old bar's height despite the larger mark. */
  padding-block: 0.75rem;
}
.sg-logo-link {
  display: inline-flex;
  /* Only reaches the vector fallback, which is currentColor. The approved
     lockups are full-colour raster files and are rendered as supplied - the
     brand guide forbids recolouring the mark - so the hover feedback is a
     slight fade, which works for both. */
  color: var(--sg-blue);
  transition: color 0.2s, opacity 0.2s;
  --sg-logo-h: 3rem;
}
.sg-logo-link:hover { color: var(--sg-blue-deep); opacity: 0.85; }
.sg-logo { height: var(--sg-logo-h); width: auto; display: block; }

@media (min-width: 1024px) {
  .sg-logo-link { --sg-logo-h: 3.75rem; }
}

/* ---- Desktop nav ------------------------------------------------------
   An underline growing out of the left on hover, and staying put on the
   current section. Replaces the old hover:border-b + sky-300 recolour, which
   nudged the link a pixel every time it was pointed at. */
.sg-nav { display: none; }
.sg-nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  font-weight: 700;
}
.sg-nav-link {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  color: var(--sg-ink-700);
  text-decoration: none;
  transition: color 0.2s;
}
.sg-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.125rem;
  height: 2px;
  background: var(--sg-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--sg-ease-out);
}
.sg-nav-link:hover,
.sg-nav-link:focus-visible { color: var(--sg-blue); text-decoration: none; }
.sg-nav-link:hover::after,
.sg-nav-link:focus-visible::after { transform: scaleX(1); }
.sg-nav-link.is-current { color: var(--sg-blue); }
.sg-nav-link.is-current::after { transform: scaleX(1); }

@media (min-width: 768px) {
  .sg-nav { display: block; }
  /* Below ~900px a seven-item nav at 2rem gaps collides with the logo before
     the md breakpoint hands over to the burger. Tighten rather than wrap. */
  .sg-nav-list { gap: 1.25rem; }
}
@media (min-width: 1100px) {
  .sg-nav-list { gap: 2rem; }
}

/* ---- Menu button + mobile panel --------------------------------------- */
.sg-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: the minimum comfortable touch target, and the reason this is not
     sized to the glyph. */
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;   /* optical: pull the glyph flush with the gutter */
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sg-blue);
}
.sg-menu-button svg { width: 1.75rem; height: 1.75rem; }
@media (min-width: 768px) {
  .sg-menu-button { display: none; }
}

.sg-mobile-menu {
  display: none;
  border-bottom: 1px solid var(--sg-ink-100);
  background: #fff;
  /* Cap the panel and let it scroll rather than run off a short viewport - a
     landscape phone has ~300px of height to give a nine-item nav. */
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sg-mobile-menu.is-open { display: block; }
@media (min-width: 768px) {
  /* Desktop always uses the inline nav, even if the panel was left open
     through a rotate or a resize across the breakpoint. */
  .sg-mobile-menu,
  .sg-mobile-menu.is-open { display: none; }
}
.sg-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 700;
}
.sg-mobile-link {
  display: block;
  padding: 0.625rem 0.5rem;
  border-radius: var(--sg-radius-md);
  color: var(--sg-ink-700);
  text-decoration: none;
}
.sg-mobile-link:hover,
.sg-mobile-link:focus {
  background: var(--sg-ink-50);
  color: var(--sg-blue);
  text-decoration: none;
}
/* The section the reader is in, marked the same way the desktop nav marks it.
   v18's mobile panel does not mark it at all - but the desktop nav here does,
   and a panel that is the only nav on a phone should not be the one place the
   reader cannot see where they are. A left bar rather than the desktop's
   underline: the items are stacked, so a bottom border would read as a
   divider between rows instead of a marker on one. */
.sg-mobile-link.is-current {
  background: var(--sg-ink-50);
  box-shadow: inset 3px 0 0 var(--sg-blue);
  color: var(--sg-blue);
}

/* Secondary rows in the panel: the utility-bar links and the customer
   logins, which have nowhere else to go on mobile. Separated by a rule and
   set a step down, so the primary nav still reads as the primary nav. */
.sg-mobile-secondary {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sg-ink-100);
}
.sg-mobile-secondary-label {
  display: block;
  padding: 0 0.5rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sg-ink-500);
}
.sg-mobile-link--sub {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--sg-ink-500);
}

/* ==========================================================================
   FOOTER

   Black ground, brand rule on top, three regions: the brand/contact column,
   the link columns (an accordion under 768px), and a copyright/tagline rule.
   ========================================================================== */

/* The wrapper flex-grows into whatever vertical space a short page leaves
   over, so the footer's colour runs to the bottom of the window while the
   footer itself still sits directly under the content.

   Deliberately a wrapper rather than recolouring <body>: the header is 95%
   white with a backdrop blur, so a dark body would tint it.

   data-theme="dark" on it is a MARKER, not styling - the colour comes from
   background below. It is there so redesign.js's ground probe sees the
   footer the same way it sees a dark section. */
.sg-footer-wrap {
  flex: 1 1 auto;
  background: var(--sg-ink-900);
}
/* Paired with the wrapper: <body> has to be a min-height flex column for the
   flex-grow above to have anything to grow into. Scoped to a class so it
   cannot reach the backoffice or a page that does not use this footer. */
body.sg-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
/* Everything that is not the footer wrapper keeps its natural height; only
   the wrapper absorbs the slack. */
body.sg-page > *:not(.sg-footer-wrap) { flex: 0 0 auto; }

.sg-footer {
  background: var(--sg-ink-900);
  color: #fff;
  font-family: var(--sg-font-sans);
}
.sg-footer-inner { padding-block: 3.5rem; }

.sg-footer-top {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 768px) {
  .sg-footer-top { flex-direction: row; }
  .sg-footer-brand { width: 33.333%; }
  .sg-footer-cols-wrap { flex: 1 1 0; min-width: 0; }
}

.sg-footer-brand .sg-logo-link { color: #fff; --sg-logo-h: 2.75rem; }
.sg-footer-brand .sg-logo-link:hover { color: #fff; }

/* Address / phone / email. Neutral white-at-70%, the SAME tone as the link
   columns opposite - deliberately NOT --sg-ink-on-dark-soft. The sky tint
   reads as a link colour, so the address and phone (which are not links)
   looked clickable and the whole left column drifted blue against the rest
   of the footer. The tint still suits copy that sits alone on a dark
   ground; it does not belong beside the footer's link columns. */
.sg-footer-contact {
  margin-top: 1.5rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.sg-footer-contact p { margin: 0; }
/* One rhythm through the whole block - the address, email and phone set as a
   single contact list rather than three groups split by wider breaks. */
.sg-footer-contact p + p,
.sg-footer-contact-group { margin-top: 0.15rem; }
/* No resting underline: it made the email the only decorated thing in the
   column. The underline is the hover affordance instead. */
.sg-footer-contact a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.sg-footer-contact a:hover,
.sg-footer-contact a:focus { color: #fff; text-decoration: underline; }

/* ---- Social row: circles rather than bare icons, so an editor's uploaded
   PNG and an SVG land on the same footprint instead of each setting its own. */
.sg-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.sg-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.2s var(--sg-ease-out),
              transform 0.2s var(--sg-ease-out);
}
.sg-social-link:hover,
.sg-social-link:focus {
  background: var(--sg-cyan);
  transform: translateY(-2px);
}
/* The icons are the platforms' own marks and carry their own brand rules, so
   they are rendered as supplied and never recoloured - which is why the
   hover only changes the ground under them. */
.sg-social-link img {
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}

/* ---- Consent controls. Under the social links; revealed by
   transcend-opt-out.js once the SDK is present. The inline display:none in
   the markup is what keeps them hidden until then, so nothing here may set
   `display` on them. */
.sg-footer-consent { margin-top: 1.5rem; }
.sg-footer-consent > * + * { margin-top: 0.75rem; }
.sg-consent-link {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.sg-consent-link:hover,
.sg-consent-link:focus { color: #fff; text-decoration-color: #fff; }
.sg-consent-button {
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  transition: color 0.2s;
}
.sg-consent-button:hover,
.sg-consent-button:focus { color: #fff; }
/* The "Your Privacy Choices" opt-out icon is a PRESCRIBED asset - the shape
   and its #0066FF are fixed by the CPRA regulations, so it is the sanctioned
   exception to the brand palette. Do not restyle it to a brand blue. */
.sg-consent-button svg { height: 0.875rem; width: auto; flex-shrink: 0; }

/* ---- Link columns ----------------------------------------------------
   A grid on desktop, so every column is the same width regardless of how
   long its heading or its links are; stacked accordion rows under 768px. */
.sg-footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.5rem;
}
@media (min-width: 768px) {
  .sg-footer-cols[data-cols='1'] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sg-footer-cols[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-footer-cols[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-footer-cols[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-footer-cols[data-cols='5'] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.sg-footer-col {
  padding-block: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* The last column's rule and the copyright block's top rule would otherwise
   be two hairlines a few rem apart with nothing between them, which reads as
   a mistake. The copyright rule is the one that means something. */
.sg-footer-col:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .sg-footer-col { padding-block: 0; border-bottom: 0; }
}

.sg-footer-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 768px) {
  .sg-footer-heading {
    margin-bottom: 1rem;
    padding: 0;
    /* Columns are always open on desktop, so the control is inert there. */
    pointer-events: none;
    cursor: default;
  }
}
.sg-footer-heading svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s var(--sg-ease-out);
}
.sg-footer-heading[aria-expanded='true'] svg { transform: rotate(180deg); }
@media (min-width: 768px) {
  .sg-footer-heading svg { display: none; }
}

.sg-footer-links {
  display: none;
  margin: 0;
  padding: 0.5rem 0 0.25rem;
  list-style: none;
}
.sg-footer-links.is-open { display: block; }
@media (min-width: 768px) {
  .sg-footer-links,
  .sg-footer-links.is-open { display: block; padding: 0; }
}
.sg-footer-links a {
  display: block;
  padding-block: 0.375rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.sg-footer-links a:hover,
.sg-footer-links a:focus { color: #fff; text-decoration: none; }

/* ---- Copyright / tagline rule ---------------------------------------- */
.sg-footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}
.sg-footer-legal p { margin: 0; }
.sg-footer-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sg-footer-legal a:hover { color: #fff; }
@media (min-width: 768px) {
  .sg-footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   SECTION / EDITORIAL - the "About Our Company" block and everything else
   rendered by SimpleCardSection.

   The section owns a small set of custom properties, and every utility
   inside it reads from them - so one component is correct on a light ground
   and on a tinted one without a second copy of its markup. data-theme maps
   1:1 to the block's "Background Color" setting in the backoffice.
   ========================================================================== */

.sg-section {
  --sec-ink: var(--sg-ink-900);
  --sec-ink-soft: var(--sg-ink-700);
  --sec-accent: var(--sg-blue);
  --sec-rule: var(--sg-ink-300);
  position: relative;
  /* clip, not hidden: nothing inside a section may open a horizontal
     scrollbar, and clip does that without creating a scroll container the
     way overflow:hidden does. */
  overflow: clip;
  padding-block: clamp(3.5rem, 4rem + 2vw, 6.5rem);
  background: #fff;
  color: var(--sec-ink);
  font-family: var(--sg-font-sans);
}
/* overflow: clip is ~2022 baseline; hidden is the fallback for anything
   older, and the difference does not matter for this block. */
@supports not (overflow: clip) {
  .sg-section { overflow: hidden; }
}
.sg-section[data-theme='tint'] { background: var(--sg-ink-50); }

.sg-section[data-theme='dark'] {
  --sec-ink: #ffffff;
  --sec-ink-soft: var(--sg-ink-on-dark-soft);
  /* On a dark ground 299C cyan carries interaction: 301C is too dark to read
     as interactive against black. */
  --sec-accent: var(--sg-cyan);
  --sec-rule: rgba(255, 255, 255, 0.2);
  background: var(--sg-ink-900);
  color: var(--sec-ink);
}

.sec-ink { color: var(--sec-ink); }
.sec-soft { color: var(--sec-ink-soft); }

/* ---- Prose. The description is RTE output, so element styles have to be
   restored here - tailwind.css's preflight strips them. */
.sg-prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sec-ink-soft);
}
.sg-prose > :first-child { margin-top: 0; }
.sg-prose > :last-child { margin-bottom: 0; }
.sg-prose p { margin-block: 0.75em; }
.sg-prose h2, .sg-prose h3, .sg-prose h4 {
  margin: 1.6em 0 0.5em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sec-ink);
}
.sg-prose h2 { font-size: 1.5em; }
.sg-prose h3 { font-size: 1.25em; }
.sg-prose ul { list-style: disc; padding-left: 1.5em; margin-block: 0.75em; }
.sg-prose ol { list-style: decimal; padding-left: 1.5em; margin-block: 0.75em; }
.sg-prose li { margin-block: 0.25em; }
.sg-prose a {
  color: var(--sec-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sg-prose blockquote {
  margin-block: 1.25em;
  padding-left: 1.25rem;
  border-left: 3px solid var(--sec-accent);
  font-family: var(--sg-font-editorial);
  font-size: 1.15em;
  color: var(--sec-ink);
}
.sg-prose hr {
  border: 0;
  border-top: 1px solid var(--sec-rule);
  margin-block: 2em;
}

/* ---- The link, replacing .bg-half-blue: the v10 "highlighter" treatment
   modernised into an underline that grows on hover rather than a static
   half-height block sitting behind the text. */
.sg-link {
  display: inline-block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sec-accent);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: background-size 0.3s var(--sg-ease-out);
}
.sg-link:hover,
.sg-link:focus-visible {
  color: var(--sec-accent);
  text-decoration: none;
  background-size: 100% 28%;
}

/* ==========================================================================
   Executive leadership grid - the headshot cards on the Company page.
   Rendered by Views/Partials/Widgets/ExecutiveListing.cshtml.

   Ported from v18's executivesummary component (app.css, .sg-exec-*), but
   the MARKUP IT STYLES IS DELIBERATELY NOT v18's. v18 opens each bio in a
   native <dialog> with a full-card overlay <button>; this keeps v10's
   company.js modal, which finds its triggers with
   getElementsByTagName('p') filtered on dataset.executiveName and reads the
   bio off e.target.dataset. So:

     - The trigger stays a <p> carrying all five data-* attributes. It is not
       a <button> and it does not cover the card, because either change would
       break that lookup.
     - Anything nested inside that <p> MUST be pointer-events: none. company.js
       reads e.target.dataset, not currentTarget.dataset, so a click that
       lands on the arrow would come back with an empty dataset and open a
       blank modal. See .sg-exec-cue svg below.

   This is a restyle only - no document type, property or block-list change,
   so the section reads the same Title / FirstName / Position / Picture / Bio
   it always has.
   ========================================================================== */
.sg-exec-title {
  margin: 0;
  /* Fluid rather than a breakpoint step, matching .sg-footer/.sg-section
     typography elsewhere in this file. */
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* Near-black from the section theme, NOT the old text-sky-500. #00A0DF on
     white is 2.3:1 - it never passed AA for a heading, and cyan is a
     secondary accent rather than a heading colour. */
  color: var(--sec-ink);
}

.sg-exec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2rem;
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .sg-exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sg-exec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sg-exec-card { position: relative; }

/* The frame clips the hover scale, so the photo grows without pushing the
   card's neighbours around. */
.sg-exec-frame {
  overflow: hidden;
  border-radius: var(--sg-radius-2xl);
}
.sg-exec-card img {
  display: block;
  width: 100%;
  /* 6:7 portrait, object-fit cover: every card is the same height whatever
     an editor uploaded, and the same crop serves company.js's modal, which
     reuses this exact media item. */
  aspect-ratio: 6 / 7;
  object-fit: cover;
  transition: transform 0.5s var(--sg-ease-out);
}
.sg-exec-card:hover img { transform: scale(1.03); }

/* Photo-less fallback. content.Picture is optional on the item type and
   Picture.Url() used to throw a NullReferenceException on an empty one,
   taking the whole page down rather than the one card. */
.sg-exec-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 6 / 7;
  background: linear-gradient(to bottom left,
    var(--sg-red) 0%, var(--sg-purple) 50%, var(--sg-blue) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 3.5rem;
  font-weight: 700;
}

.sg-exec-name {
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sec-ink);
}
.sg-exec-position {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--sec-ink-soft);
}

/* Replaces .bg-half-blue's static half-height highlighter block with v18's
   arrow cue, which travels on card hover. */
.sg-exec-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sec-accent);
  cursor: pointer;
}
/* Load-bearing, not decoration - see the note at the top of this section.
   Without it a click on the arrow reaches company.js with no dataset. */
.sg-exec-cue svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  transition: transform 0.3s var(--sg-ease-out);
}
.sg-exec-card:hover .sg-exec-cue svg { transform: translateX(0.25rem); }

/* ==========================================================================
   Executive bio modal.

   The markup for this is a TEMPLATE STRING inside wwwroot/scripts/company.js
   (generateModalHTML), not a Razor view - so these class names are the
   contract with that function. Two of its hooks are load-bearing and must
   survive any restyle:

     .modal-panel   the document-level mouseup handler closes the modal when
                    a click lands outside this element.
     #close-button  mountModal binds the close click by id.

   The old layout gave a 285px-minimum headshot the left half of the panel
   and squeezed the bio into a fixed h-48 scroll box beneath it, so a
   four-paragraph bio - which is most of them - read through a ~190px slot
   next to a large photo and a column of empty space. The proportions are now
   inverted: the photo is a compact identifying avatar in the header, and the
   bio takes every remaining pixel of an 85vh panel, scrolling only once it
   genuinely runs out.

   Written here rather than as Tailwind utilities because this repo's build
   is frozen - see the note at the top of this file.
   ========================================================================== */
.sg-execmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.7);
}
.sg-execmodal {
  /* The modal mounts in #modal at page level, OUTSIDE any .sg-section, so the
     section tokens .sg-prose reads are not in scope here. Restated locally,
     or the bio's colour and link styling silently fall back to inherit. */
  --sec-ink: var(--sg-ink-900);
  --sec-ink-soft: var(--sg-ink-700);
  --sec-accent: var(--sg-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Wide enough that a bio paragraph runs to a readable measure instead of
     wrapping every eight or nine words the way it did beside the old photo. */
  max-width: 52rem;
  max-height: 85vh;
  padding: 2rem 1.5rem 1.5rem;
  border-radius: var(--sg-radius-2xl);
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  font-family: var(--sg-font-sans);
}
@media (min-width: 768px) {
  .sg-execmodal { padding: 2.5rem 3rem 2rem; }
}

.sg-execmodal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sg-ink-500);
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
@media (min-width: 768px) {
  .sg-execmodal-close { top: 1.5rem; right: 1.75rem; }
}
.sg-execmodal-close:hover { color: var(--sg-blue); }
.sg-execmodal-close svg { width: 0.75rem; height: 0.75rem; }

/* Header: avatar beside the name, so the panel opens on the person rather
   than on a wall of type. flex-none on the avatar or it is squeezed by a
   long job title. */
.sg-execmodal-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: none;
  /* Clears the close button. */
  padding-right: 5.5rem;
}
.sg-execmodal-avatar {
  flex: none;
  width: 5.5rem;
  /* The same 6:7 crop the grid card uses, so one media item serves both and
     no second upload is needed. */
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: var(--sg-radius-2xl);
}
@media (min-width: 768px) {
  .sg-execmodal-avatar { width: 7rem; }
}
/* Photo-less executives - same fallback as the grid card. */
.sg-execmodal-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom left,
    var(--sg-red) 0%, var(--sg-purple) 50%, var(--sg-blue) 100%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 2rem;
  font-weight: 700;
}
.sg-execmodal-ident { min-width: 0; }
.sg-execmodal-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sg-blue);
}
.sg-execmodal-position {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  color: var(--sg-ink-500);
}

.sg-execmodal-rule {
  flex: none;
  height: 1px;
  margin: 1.5rem 0 0;
  border: 0;
  background: var(--sg-ink-100);
}

/* The bio takes the slack. min-height: 0 is load-bearing - without it a flex
   child refuses to shrink below its content height and the panel grows past
   85vh instead of scrolling inside it. */
.sg-execmodal-bio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 1.5rem;
  /* Keeps the text off the scrollbar when one appears. */
  padding-right: 1rem;
}

/* ==========================================================================
   Scroll reveals. Opt-in per element; redesign.js adds .is-in once, the
   first time the element enters the viewport.

   Everything is visible with no script at all - the hidden initial state is
   only applied once the script has announced itself by putting .sg-js on
   <html>, so a failed or blocked script leaves readable content rather than
   a blank section.
   ========================================================================== */
.sg-js .sg-fade,
.sg-js .sg-reveal { opacity: 0; }
.sg-js .sg-fade { transition: opacity 0.9s var(--sg-ease-out); }
.sg-js .sg-reveal {
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--sg-ease-out), transform 0.7s var(--sg-ease-out);
}
/* --i staggers siblings without a per-element delay in the markup. */
.sg-js .sg-fade.is-in,
.sg-js .sg-reveal.is-in {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  .sg-js .sg-fade,
  .sg-js .sg-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sg-header,
  .sg-nav-link::after,
  .sg-social-link,
  .sg-footer-heading svg,
  .sg-exec-card img,
  .sg-exec-cue svg { transition: none; }
  .sg-exec-card:hover img { transform: none; }
}