/* ==========================================================================
   Blog template — layout, spacing and interaction extracted 1:1 from the
   reference blog page. Colour system re-mapped to the brand green + blacks.

   Token architecture mirrors the source:
     primitives  ->  tokens  ->  utilities  ->  components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Primitives
   -------------------------------------------------------------------------- */
:root {
  /* Neutrals — near-black ramp with a faint green cast so it sits with the
     brand green the same way the source neutrals sat with its accent. */
  --n-25:   #fafbf9;
  --n-50:   #f3f5f1;
  --n-100:  #ebeee8;
  --n-200:  #e2e6df;
  --n-300:  #d0d5cc;
  --n-400:  #bfc5ba;
  --n-500:  #9fa69b;
  --n-600:  #7d847a;
  --n-700:  #5f665c;
  --n-800:  #3d423b;
  --n-900:  #2a2e28;
  --n-1000: #1a1d19;

  /* Brand green ramp */
  --g-100: #f2faed;
  --g-200: #e7f6de;
  --g-300: #d2eec1;
  --g-400: #a5dc82;
  --g-500: #75c946;   /* brand */
  --g-600: #63b238;
  --g-700: #4e8f2a;
  --g-800: #3c6f20;

  /* Spacers */
  --sp-025: .25rem;
  --sp-050: .5rem;
  --sp-075: .75rem;
  --sp-100: 1rem;
  --sp-125: 1.25rem;
  --sp-150: 1.5rem;
  --sp-200: 2rem;
  --sp-250: 2.5rem;
  --sp-300: 3rem;
  --sp-400: 4rem;
  --sp-500: 5rem;

  /* Section rhythm */
  --section-margin: var(--sp-300);   /* horizontal page gutter  = 48px */
  --section-gutter: var(--sp-200);   /* grid column gap         = 32px */
  --section-pad-lg: var(--sp-500);   /* 80px */
  --max-width:      96rem;           /* 1536px */

  /* Corner radius */
  --r-xs:   .25rem;
  --r-sm:   .75rem;
  --r-md:   1.5rem;
  --r-lg:   3rem;
  --r-xl:   5rem;
  --r-full: 1000rem;

  /* Type families — no Google Fonts CDN calls (Bug 6). System stacks only. */
  --font-body:    'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', Times, serif;

  /* Type scale */
  --heading-lg-size: 3rem;      --heading-lg-lh: 1.1em;   --heading-lg-ls: normal;
  --heading-md-size: 2.25rem;   --heading-md-lh: 1.15em;  --heading-md-ls: -.01em;
  --heading-sm-size: 1.875rem;  --heading-sm-lh: 1.15em;  --heading-sm-ls: 0;
  --heading-xs-size: 1.5rem;    --heading-xs-lh: 1.15em;  --heading-xs-ls: -.01em;

  --p-md-size: 1.25rem;   --p-md-lh: 1.2em;
  --p-sm-size: 1rem;      --p-sm-lh: 1.3em;
  --p-xs-size: .875rem;   --p-xs-lh: 1.3em;

  --eyebrow-size: .875rem; --eyebrow-lh: 1.2em;
  --action-size:  1rem;    --action-lh: 1.2em;

  /* --------------------------------------------------------------------
     Semantic tokens
     -------------------------------------------------------------------- */
  --surface-bg:            var(--n-25);
  --surface-bg-hover:      var(--n-50);
  --surface-alt:           var(--n-50);
  --surface-fg:            #ffffff;
  --surface-invert:        var(--n-1000);

  --text-primary:          var(--n-1000);
  --text-secondary:        var(--n-700);
  --text-invert:           var(--n-25);
  --text-highlight:        var(--g-500);   /* dark surfaces — footer etc. (8.3:1) */
  --text-highlight-onlight: var(--g-500);  /* original brand green, kept by request — fails WCAG AA on white (~2:1) */
  --text-eyebrow:          var(--g-500);   /* original brand green, kept by request — fails WCAG AA on white (~2:1) */

  --border-primary:        var(--n-200);

  --btn-primary-bg:        var(--n-1000);
  --btn-primary-bg-hover:  var(--n-800);
  --btn-primary-text:      var(--n-25);
  --btn-secondary-bg:      var(--n-25);
  --btn-secondary-bg-hover:var(--n-100);
  --btn-secondary-border:  var(--n-1000);
  --btn-secondary-text:    var(--n-1000);
  --btn-tertiary-idle:     var(--n-1000);
  --btn-tertiary-hover:    var(--g-500);   /* original brand green, kept by request — fails WCAG AA on white (~2:1) */

  --tag-border:            var(--n-1000);
  --tag-bg-idle:           transparent;
  --tag-bg-hover:          var(--n-100);
  --tag-bg-active:         var(--n-1000);
  --tag-text-idle:         var(--n-1000);
  --tag-text-active:       var(--n-25);

  /* --------------------------------------------------------------------
     Standardized neutral tokens (AI Design to Lasso CSS requirement #4)
     Derived from the palette above — not the prompt's placeholder values.
     -------------------------------------------------------------------- */
  --text:          var(--n-1000);
  --text-muted:    var(--n-700);
  --primary-100:   var(--g-300);
  --primary-500:   var(--g-500);
  --primary-700:   var(--g-700);
  --primary-800:   var(--g-800);
  --accent-400:    var(--g-400);
  --accent-500:    var(--g-600);
  --white:         #ffffff;
  --gray-300:      var(--n-300);
  --gray-600:      var(--n-600);
  --background:    var(--n-25);
  --border:        var(--n-200);
  --surface-100:   var(--g-100);
  --box-shadow-sm: 0 1px 3px 0 rgba(34, 40, 42, .1);
  --box-shadow-md: 0 4px 20px 0 rgba(33, 37, 41, .05);
  --box-shadow-lg: 0 4px 20px 0 rgba(33, 37, 41, .15);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--surface-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.2em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap's .flex-grow-1 (required by the shell structure) stretches the
   content slot to fill the sticky-footer body, which leaves a large blank
   gap above the footer on short pages (contact, privacy, etc). Override it
   so the footer sits right after the actual content instead. Needs
   !important to beat Bootstrap's own !important utility. */
.main-wrapper.flex-grow-1 { flex-grow: 0 !important; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--g-700); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.page-wrapper { overflow: clip; }

.container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--section-margin);
}

.container.grid,
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  column-gap: var(--section-gutter);
  row-gap: var(--section-gutter);
  place-items: center stretch;
}

main { display: block; }

/* --------------------------------------------------------------------------
   4. Typography utilities
   -------------------------------------------------------------------------- */
.u-heading-lg {
  font-family: var(--font-display);
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-lh);
  letter-spacing: var(--heading-lg-ls);
  font-weight: 400;
}
.u-heading-md {
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-lh);
  letter-spacing: var(--heading-md-ls);
  font-weight: 400;
}
.u-heading-sm {
  font-family: var(--font-display);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-lh);
  letter-spacing: var(--heading-sm-ls);
  font-weight: 400;
}
.u-heading-xxs {
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-lh);
  letter-spacing: var(--heading-xs-ls);
  font-weight: 500;
}

.text-md { font-size: var(--p-md-size); line-height: var(--p-md-lh); }
.text-sm { font-size: var(--p-sm-size); line-height: var(--p-sm-lh); }
.text-xs { font-size: var(--p-xs-size); line-height: var(--p-xs-lh); }

.u-text-eyebrow {
  display: block; /* was a <p> originally; now a <span> inside its anchor —
                      Lasso anchor-content rule #8/#9 — keep the block box */
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.u-text-action {
  font-size: var(--action-size);
  line-height: var(--action-lh);
  font-weight: 500;
}

.u-color-inherit { color: inherit; }

.u-text-link { transition: color .25s; }
.u-text-link:hover { color: var(--text-highlight-onlight); }

.u-link-cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  color: inherit;
}

.u-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header_wrap { position: relative; z-index: 100; }

.header_wrapper {
  position: relative;
  background-color: var(--surface-bg);
}

.header_container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--section-gutter);
  height: 5.5rem;                     /* 88px */
}

.header_logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header-logo_wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-primary);
}

/* logo.png / logo-light.png are 555x95 wordmarks (5.84:1). height:auto keeps
   them proportional even if the HTML width/height attributes don't match. */
.logo {
  max-width: 180px;
  height: auto;
}

.logo a {
  display: flex;
}

/* Nav ------------------------------------------------------------------- */
.nav_wrap { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; }

.nav_list { display: flex; align-items: center; justify-content: flex-start; gap: 1.75rem; height: 100%; }

.nav_list-item-wrapper { position: relative; height: 100%; }

.nav_dropdown_wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }

.nav_list-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 100%;
  padding-inline: .375rem;
  font-size: 1rem;
  line-height: 1.4em;
  color: var(--text-primary);
  cursor: pointer;
  transition: color .25s;
}
.nav_list-item:hover { color: var(--text-highlight-onlight); }

.nav_dropdown-icon {
  width: .75rem; height: .75rem;
  transition: transform .3s ease-out;
}
.nav_dropdown_wrap:hover .nav_dropdown-icon { transform: rotate(180deg); }

.nav_dropdown-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  padding: .5rem;
  background-color: var(--surface-bg);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px -12px rgb(26 29 25 / .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}
.nav_dropdown_wrap:hover .nav_dropdown-wrapper,
.nav_dropdown_wrap:focus-within .nav_dropdown-wrapper {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav_dropdown-item {
  display: block;
  padding: .625rem .5rem;
  border-radius: var(--r-xs);
  font-size: 1rem;
  line-height: 1.3em;
  transition: padding-left .25s ease-out, background-color .25s;
}
.nav_dropdown-item:hover {
  padding-left: 1rem;
  background-color: var(--surface-bg-hover);
}

/* Header actions -------------------------------------------------------- */
.header_actions-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex: 1;
}

.header_action-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Mobile menu toggle — hidden on desktop, shown once .nav_wrap collapses -- */
.mobile-menu_toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3125rem;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}
.mobile-menu_toggle-bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: var(--r-full);
  transition: transform .25s ease-out, opacity .2s;
}
.mobile-menu_toggle.is-active .mobile-menu_toggle-bar:nth-child(1) {
  transform: translateY(.4375rem) rotate(45deg);
}
.mobile-menu_toggle.is-active .mobile-menu_toggle-bar:nth-child(2) {
  opacity: 0;
}
.mobile-menu_toggle.is-active .mobile-menu_toggle-bar:nth-child(3) {
  transform: translateY(-.4375rem) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: var(--r-sm);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 1rem;
  line-height: 1em;
  font-weight: 500;
  transition: background-color .25s, border-radius .35s ease-out, color .25s;
}
.button:hover {
  background-color: var(--btn-primary-bg-hover);
  border-radius: calc(var(--r-sm) * 1.33);
}

.button.is-secondary {
  padding: .5rem 1.25rem;
  background-color: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}
.button.is-secondary:hover { background-color: var(--btn-secondary-bg-hover); }

/* Tertiary / text button with the two-bar underline wipe ------------------ */
.button_wrapper { display: flex; flex-direction: column; gap: .5rem; }

.text-button {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
  padding-block: .75rem;
  color: var(--btn-tertiary-idle);
  transition: color .25s;
}
.text-button:hover { color: var(--btn-tertiary-hover); }

/* The parts below are <span>s, not <div>s: Lasso lifts block elements out of
   an <a> and then drops the emptied anchor, which killed this button on the
   first deploy. Hence the explicit display on each one. */
.text-button_label {
  display: block;
  font-size: var(--p-xs-size);
  line-height: var(--p-xs-lh);
  font-weight: 500;
  text-align: left;
}

.text-button_underline-wrapper { display: flex; width: 100%; height: 1px; }

.text-button_idle-underline {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--btn-tertiary-idle);
  transition: width .2s ease-out;
}
.text-button_active-underline {
  display: block;
  width: 0%;
  height: 1px;
  background-color: var(--btn-tertiary-hover);
  transition: width .2s ease-out;
}
.text-button:hover .text-button_idle-underline   { width: 0%; }
.text-button:hover .text-button_active-underline { width: 100%; }

.text-button.is-nav-tertiary { flex-direction: row; align-items: center; padding: 0 .75rem; height: 3rem; }
.text-button.is-nav-tertiary .text-button_label { font-size: 1rem; line-height: 1.3em; }

/* --------------------------------------------------------------------------
   7. Tags / category pills
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: .5rem 1.25rem;
  border: 1px solid var(--tag-border);
  border-radius: var(--r-full);
  background-color: var(--tag-bg-idle);
  color: var(--tag-text-idle);
  font-size: 1.25rem;
  line-height: .96em;
  transition: color .2s, border-color .2s, background-color .2s;
}
.tag:hover {
  border-color: var(--tag-bg-hover);
  background-color: var(--tag-bg-hover);
}
.tag.is-active {
  background-color: var(--tag-bg-active);
  border-color: var(--tag-bg-active);
  color: var(--tag-text-active);
}
.tag.is-active:hover {
  background-color: var(--n-900);
  border-color: var(--n-900);
  color: var(--tag-text-active);
}

/* --------------------------------------------------------------------------
   8. Card content — shared by every card variant
   -------------------------------------------------------------------------- */
.card-content_wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.card-content_wrap.is-mega { gap: 1.5rem; }

.card-content_main-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.card-content_eyebrow-container {
  display: block;
  color: var(--text-eyebrow);
  transition: color .25s;
}
.card-content_eyebrow-container:hover { color: var(--text-highlight-onlight); }

.card-content_main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.card-content_heading { overflow: hidden; }
.card-content_body { color: var(--text-primary); overflow: hidden; }

/* Action bar — metadata swaps out for "Read more" on hover ---------------- */
.card-content_action-bar { display: block; }

.card-content_action-container {
  position: relative;
  display: flex;
}

.card-content_metadata {
  display: flex;
  flex-flow: row;
  gap: .5rem;
  min-height: 1.2em;
  transform: translateY(0);
  opacity: 1;
  transition: transform .3s ease-out, opacity .2s;
}

.card-content_card-hover-action {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--text-highlight-onlight);
  transform: translateY(.75rem);
  opacity: 0;
  transition: transform .3s ease-out, opacity .2s;
}

/* Image wrapper — radius grows on hover ---------------------------------- */
.content-card_img-wrapper {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  transition: border-radius .35s ease-out;
}

.img-cover { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease-out; }

/* Shared hover choreography (pointer devices only, as in the source) ------ */
@media (min-width: 769px) {
  .content-card_wrap:hover        .card-content_card-hover-action,
  .mega-content-card_wrap:hover   .card-content_card-hover-action,
  .compact-content-card_wrap:hover .card-content_card-hover-action {
    transform: translateY(0);
    opacity: 1;
  }

  .content-card_wrap:hover        .card-content_metadata,
  .mega-content-card_wrap:hover   .card-content_metadata,
  .compact-content-card_wrap:hover .card-content_metadata {
    transform: translateY(-.75rem);
    opacity: 0;
  }

  .content-card_wrap:hover      .content-card_img-wrapper,
  .mega-content-card_wrap:hover .content-card_img-wrapper {
    border-radius: calc(var(--r-md) * 1.5);
    box-shadow: 0 16px 32px -8px rgb(26 29 25 / .25);
  }

  .content-card_wrap:hover      .img-cover,
  .mega-content-card_wrap:hover .img-cover {
    transform: scale(1.06);
  }

  .content-card_wrap:hover,
  .mega-content-card_wrap:hover {
    transform: translateY(-.25rem);
  }

  .compact-content-card_wrap:hover::before {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   9. Hero section
   -------------------------------------------------------------------------- */
.s_blog-hero { padding-block: var(--section-pad-lg); }

.blog-hero_mega-container {
  grid-column: span 6;
  padding-right: var(--section-gutter);
}

.blog-hero_sidebar {
  grid-column: span 6;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Mega card ------------------------------------------------------------- */
.mega-content-card_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: transform .3s ease-out;
}

.mega-content-card_wrap .content-card_img-wrapper { aspect-ratio: 3 / 2; }

/* Compact card (Latest posts) ------------------------------------------- */
.latest-posts_list { display: block; }

.compact-content-card_wrap {
  position: relative;
  width: 100%;
  padding-block: var(--sp-100);
  border-bottom: 1px solid var(--border-primary);
}

/* Hover highlight as a background layer, not a box-size change — animating
   margin/padding directly made the row's content width shift mid-transition,
   which reflowed the title text and looked like the letters were jumping. */
.compact-content-card_wrap::before {
  content: '';
  position: absolute;
  inset: 0 -1rem;
  z-index: 0;
  background-color: var(--surface-bg-hover);
  opacity: 0;
  transition: opacity .25s ease-out;
  pointer-events: none;
}

.compact-content-card_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* --------------------------------------------------------------------------
   10. Blog list sections
   -------------------------------------------------------------------------- */
.s_editors-choice {
  background-color: var(--surface-alt);
  padding-block: var(--section-pad-lg);
}
.s_editors-choice.is-first { padding-top: 7rem; }

.blog-list_container,
.tabbed-blog-list_container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-400);
}

.blog-list_heading { display: flex; gap: var(--section-gutter); }

.blog-list_component {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--section-gutter);
  row-gap: var(--sp-300);
}

.content-card_wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
  transition: transform .3s ease-out;
}

.content-card_wrap .content-card_img-wrapper { aspect-ratio: 3 / 2; }

.blog-list_action-bar-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Tabbed section -------------------------------------------------------- */
.blog-tabbed-list_heading {
  position: absolute;
  top: 0;
  left: var(--section-margin);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--section-gutter);
}

.tabbed-blog-list_container > .w-tabs { width: 100%; }

.blog-tabbed-list_menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--sp-100);
  padding-top: var(--sp-100);
  padding-bottom: 6rem;
}

.blog-tabbed-list_pane { position: relative; }
.blog-tabbed-list_pane[hidden] { display: none; }

.blog-tabbed-list_pane .blog-list_action-bar-container { margin-top: var(--sp-400); }

/* --------------------------------------------------------------------------
   11. Image placeholders (swap the .ph block for an <img class="img-cover">)
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--ph-bg);
  overflow: hidden;
}

.ph span {
  position: absolute;
  bottom: 0;
  border-radius: var(--r-full) var(--r-full) 0 0;
  background-color: var(--ph-fg);
}
.ph span:nth-child(1) { left: 50%; width: 13%; height: 62%; }
.ph span:nth-child(2) { left: 66%; width: 13%; height: 84%; background-color: var(--ph-fg-alt); }
.ph span:nth-child(3) { left: 82%; width: 13%; height: 52%; }

.ph--a { --ph-bg: var(--g-300);  --ph-fg: var(--n-900);  --ph-fg-alt: var(--g-500); }
.ph--b { --ph-bg: var(--n-1000); --ph-fg: var(--g-500);  --ph-fg-alt: var(--g-700); }
.ph--c { --ph-bg: var(--g-200);  --ph-fg: var(--n-800);  --ph-fg-alt: var(--g-500); }
.ph--d { --ph-bg: var(--g-500);  --ph-fg: var(--n-1000); --ph-fg-alt: var(--n-900); }
.ph--e { --ph-bg: var(--n-100);  --ph-fg: var(--g-500);  --ph-fg-alt: var(--n-1000); }
.ph--f { --ph-bg: var(--n-900);  --ph-fg: var(--g-300);  --ph-fg-alt: var(--g-500); }

/* Stand-in for an article image that has not been uploaded yet. A <span> so
   Lasso leaves it inside the card's <a>, and every instance repeats this
   colour inline so the placeholder still shows if this stylesheet lags behind
   the layout in the CMS. */
.img-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--n-400);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.s_footer_wrap { background-color: var(--surface-invert); color: var(--text-invert); }

/* Shifted up 1px rather than pulled up with a negative margin: a margin-top
   here collapses with the footer's own, moving the whole footer instead of
   this band, which left a hairline of the dark footer background showing at
   the seam — read as a grey line under the last section. */
.footer_corner-radius {
  position: relative;
  top: -1px;
  height: 6rem;
  background-color: var(--surface-alt);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
/* On interior pages the content sits directly on --surface-bg (no alternating
   alt-background section before the footer like the home page's Editors
   Choice), so --surface-alt (#f3f5f1) reads as a visible off-color band
   against it (#fafbf9). Match the page background there instead. */
.pages .footer_corner-radius {
  background-color: var(--surface-bg);
}

.footer_top-container { padding-block: var(--section-pad-lg); }

.footer_brand-row {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: var(--sp-300);
}

.footer_brand-tagline {
  max-width: 32rem;
  font-size: var(--p-sm-size);
  line-height: 1.6em;
  color: rgba(250, 251, 249, .62);
}

.footer_main-layout {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--section-gutter);
}

.footer_main-col { display: flex; flex-direction: column; gap: var(--sp-200); }

.footer_col-heading {
  font-size: 1rem;
  line-height: 1em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.footer_menu { display: flex; flex-direction: column; gap: var(--sp-100); }

.footer_menu-item {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  font-size: 1rem;
  line-height: 1.2em;
  color: var(--text-invert);
  transition: transform .3s ease-out;
}
.footer_menu-item:hover { transform: translateX(.5rem); }

.footer_social-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
  margin-top: var(--sp-100);
}

.footer_social-link {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-invert);
  transition: color .25s;
}
.footer_social-link:hover { color: var(--text-highlight); }
.footer_social-link svg { width: 100%; height: 100%; }

.footer_bottom-container { padding-block: var(--sp-200); }

.s_footer_bottom-layout {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: var(--sp-150);
}

.s_footer_bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--section-gutter);
  flex-wrap: wrap;
  font-size: var(--p-xs-size);
  line-height: var(--p-xs-lh);
}

.s_footer_bottom-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-100) var(--sp-150);
}

.footer_disclaimer {
  max-width: 56rem;
  font-size: var(--p-xs-size);
  line-height: 1.65em;
  color: rgba(250, 251, 249, .52);
}

/* --------------------------------------------------------------------------
   13. Mobile menu panel (off-canvas, opened by .mobile-menu_toggle)
   -------------------------------------------------------------------------- */
.mobile-menu_panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
}

.mobile-menu_backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 29, 25, .5);
  opacity: 0;
  transition: opacity .25s ease-out;
}

.mobile-menu_sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(22rem, 86vw);
  padding: 1.5rem;
  background-color: var(--surface-bg);
  box-shadow: -12px 0 32px rgba(26, 29, 25, .18);
  transform: translateX(100%);
  transition: transform .3s ease-out;
  overflow-y: auto;
}

.mobile-menu_panel.is-open { visibility: visible; }
.mobile-menu_panel.is-open .mobile-menu_backdrop { opacity: 1; }
.mobile-menu_panel.is-open .mobile-menu_sheet { transform: translateX(0); }

.mobile-menu_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.mobile-menu_close {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.mobile-menu_list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mobile-menu_link {
  display: block;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border-primary);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}

.mobile-menu_utility {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}

.mobile-menu_utility-link {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  :root {
    --section-margin: var(--sp-200);
    --section-gutter: var(--sp-100);
    --section-pad-lg: var(--sp-500);

    --heading-lg-size: 2.25rem; --heading-lg-lh: 1.1em;  --heading-lg-ls: -.02em;
    --heading-md-size: 1.875rem; --heading-md-lh: 1.2em; --heading-md-ls: -.01em;
    --p-md-size: 1rem;          --p-md-lh: 1.3em;
  }

  .container.grid,
  .grid { grid-template-columns: repeat(8, 1fr); }

  .blog-hero_mega-container { grid-column: span 8; padding-right: 0; }
  .blog-hero_sidebar        { grid-column: span 8; width: 100%; }

  .blog-list_component { grid-template-columns: 1fr; gap: var(--sp-400); }

  .blog-list_heading { flex-wrap: wrap; }

  .blog-tabbed-list_heading { position: relative; left: 0; flex-wrap: wrap; }

  .blog-tabbed-list_menu {
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: var(--sp-400);
  }

  .card-content_wrap { align-items: stretch; justify-content: center; }

  .footer_main-layout { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-500); }
  .s_footer_bottom-row { flex-wrap: wrap; }

  /* Nav collapses to the mobile off-canvas menu. About Us / Contact Us and
     the CTA already live inside the panel — hide the header copies so the
     bar doesn't crowd against the logo and toggle. */
  .nav_wrap { display: none; }
  .header_action-container > a.nav_list-item { display: none; }
  .mobile-menu_toggle { display: flex; }
}

@media screen and (max-width: 767px) {
  :root {
    --section-margin: var(--sp-100);
    --section-gutter: var(--sp-100);
    --section-pad-lg: var(--sp-300);
  }

  .container.grid,
  .grid { grid-template-columns: repeat(4, 1fr); }

  .blog-hero_mega-container,
  .blog-hero_sidebar { grid-column: span 4; }

  .s_editors-choice.is-first { padding-top: var(--sp-400); }

  .footer_main-layout { display: flex; flex-direction: column; row-gap: var(--sp-300); }
  .s_footer_bottom-row { flex-direction: column; align-items: flex-start; }

  .card-content_wrap { align-items: flex-start; justify-content: flex-start; }

  .blog-tabbed-list_menu { gap: .5rem; }

  .footer_corner-radius { height: 3rem; border-radius: 0 0 var(--r-lg) var(--r-lg); }

  .header_action-container .text-button.is-nav-tertiary { display: none; }
  .button.is-secondary { display: none; }
}

@media screen and (max-width: 479px) {
  .blog-tabbed-list_menu { gap: .5rem; padding-bottom: var(--sp-300); }
  .tag { font-size: 1rem; padding: .375rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════
           LAYOUT RESET
═══════════════════════════════════ */
.home .container.main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.container.layout {
  max-width: 100%;
  padding: 0;
}

.container.layout .row.layout {
  margin: 0;
}

.container.layout .row.layout > .cols {
  overflow-x: hidden;
}

.home .container.layout .row.layout > .cols {
  padding: 0;
}

.pages .main-wrapper .container.main {
  padding: 24px 16px;
}

/* ═══════════════════════════════════
           FONTS RESET
═══════════════════════════════════ */
/* Scoped to .pages .container.main (the real injected-content slot on
   interior pages) instead of the assumed .main-paragraph class, which the
   actual page content never carries — that's why headings and paragraphs
   were rendering with no hierarchy (base reset strips font-weight/size,
   and .main-paragraph never matched anything). Also keep .main-paragraph
   as a belt-and-suspenders selector in case some page wraps content in it.
   Scoped under body.pages only so the home page's own card/hero typography
   (.u-heading-*, .card-content_*) is never touched. */
.pages .container.main h1,
.pages .container.main h2,
.main-paragraph h1,
.main-paragraph h2 {
  font-weight: 700;
  color: var(--text);
}

.pages .container.main h1,
.pages .container.main h2,
.pages .container.main h3,
.pages .container.main p,
.pages .container.main strong,
.main-paragraph h1,
.main-paragraph h2,
.main-paragraph h3,
.main-paragraph p,
.main-paragraph strong {
  color: var(--text);
}

.pages .container.main h1,
.main-paragraph h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.pages .container.main h2,
.main-paragraph h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 40px 0 18px;
}

.pages .container.main h3,
.main-paragraph h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 24px 0 10px;
}

.pages .container.main p,
.main-paragraph p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.pages .container.main strong,
.main-paragraph strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .pages .container.main h1,
  .main-paragraph h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .pages .container.main h2,
  .main-paragraph h2 {
    font-size: 25px;
    margin: 32px 0 16px;
  }

  .pages .container.main h3,
  .main-paragraph h3 {
    font-size: 20px;
    margin: 22px 0 8px;
  }

  .pages .container.main p,
  .main-paragraph p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* ═══════════════════════════════════
           TABLE RESET
═══════════════════════════════════ */
table { margin: 32px 0; }

table th, table td {
  border-color: var(--border) !important;
  padding: 8px 16px !important;
}

table td {
  color: var(--text) !important;
}

table th {
  background: var(--primary-500) !important;
  color: var(--white) !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

table tbody tr:nth-child(even) td {
  background: var(--surface-100) !important;
}

@media (max-width: 992px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    border: 0 !important
  }
}

/* ═══════════════════════════════════
           CONTACT US FORM
═══════════════════════════════════ */
#contact-form {
  margin: 45px auto 0;
  max-width: 500px;
}

#contact-form input,
#contact-form textarea {
  flex: 1;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  outline: 0;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text);
  min-width: 100%;
}

#contact-form input:active,
#contact-form input:focus,
#contact-form textarea:active,
#contact-form textarea:focus {
  border: 2px solid var(--primary-500);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--gray-600);
}

#contact-form button {
  background: var(--primary-500);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 16px;
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s;
  white-space: nowrap;
  width: 100%;
}

#contact-form button:hover {
  background: var(--accent-500);
}

/* ═══════════════════════════════════
           WIDGETS
═══════════════════════════════════ */

/* IMAGE STYLE RESET */
.item-current-image img {
  box-shadow: none !important;
  border-radius: 4px !important;
  border-color: var(--gray-300) !important;
}

/* SUBLIST */
.item-sublist a {
  width: 100%;
  height: 100%;
}

.item.item-bubbles {
  margin-bottom: 32px;
}

.item-bubbles .row {
  margin: 0;
}

.bubbles-chip {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  display: flex;
  font-weight: 500;
  height: 100%;
  padding: 16px 48px 16px 24px;
  position: relative;
  transition: padding 0.2s ease-in-out;
}

.bubbles-chip:hover {
  color: var(--primary-800);
  background: var(--surface-100);
  border-color: var(--primary-100);
  padding-left: 20px;
}

.bubbles-chip:active,
.bubbles-chip:focus {
  background: var(--accent-500);
  color: var(--white);
}

.bubbles-link {
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
}

.bubbles-link .bubbles-outer {
  height: 100%;
  padding: 5px;
  max-width: 100%;
}

.sibling.link-button .bubbles-link .bubbles-outer,
.sibling.link-button .bubbles-chip {
  height: auto;
}

.col-gap:has(> .item-bubbles)::before {
  display: none !important;
}

.bubbles-chip::after {
  content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87771 7.01782H1.02042C0.737361 7.01782 0.496528 6.91886 0.297917 6.72094C0.0993056 6.52317 0 6.2833 0 6.00136C0 5.71942 0.0993056 5.4781 0.297917 5.2774C0.496528 5.07657 0.737361 4.97615 1.02042 4.97615H8.87771L5.66583 1.76428C5.46111 1.55955 5.35681 1.31719 5.35292 1.03719C5.34889 0.757332 5.45076 0.510249 5.65854 0.295943C5.86632 0.0948319 6.11014 -0.00377823 6.39 0.000110661C6.66986 0.00399955 6.91236 0.108583 7.1175 0.313861L12.0713 5.27407C12.1699 5.37282 12.2464 5.4856 12.3008 5.6124C12.3551 5.73935 12.3823 5.86865 12.3823 6.00032C12.3823 6.13199 12.3551 6.26122 12.3008 6.38803C12.2464 6.51497 12.1727 6.62497 12.0798 6.71803L7.10958 11.688C6.89403 11.9037 6.65368 12.0081 6.38854 12.0012C6.12354 11.9942 5.88715 11.8862 5.67938 11.6772C5.4716 11.4629 5.36771 11.2166 5.36771 10.9382C5.36771 10.6599 5.4716 10.4192 5.67938 10.2162L8.87771 7.01782Z' fill='%2375c946'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-in-out;
}

.bubbles-chip:hover::after {
  right: 10px;
}

/* SUBLIST CARDS */
.item-sublist:has(.sublist.card) .row > div {
  padding: 5px !important;
}

.sublist.card {
  border: none;
  border-radius: 6px;
  box-shadow: var(--box-shadow-md);
  transition: 0.2s ease-in;
}

.sublist.card:hover {
  box-shadow: var(--box-shadow-lg);
  color: var(--primary-500);
  transform: translateY(-4px);
}

.sublist.card h5 {
  margin-bottom: 0;
  font-weight: 500;
}

.sublist.card .card-body {
  padding: 16px;
}

@media (max-width: 767.98px) {
  .row div:has(> .sublist.card) {
    padding: 0 !important;
  }

  .row:has(> div .sublist.card) {
    margin: 0;
    gap: 10px;
  }

  .sublist.card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .sublist.card .card-img-top {
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    width: 120px;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .sublist.card .card-body {
    flex: 1;
    padding: 1rem;
  }

  .sublist.card .card-body * {
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sublist.card .card-body h5 {
    font-size: 16px;
  }
}