/* @import url('http://example.com/example_style.css'); */

  /***********************************************/
  /* CSS @imports must be at the top of the file */
  /* Add them above this section                 */
  /***********************************************/

  /*****************************************/
  /* Start your style declarations here    */
  /*****************************************/

  /* ===========================================
     MASONRY GALLERY - QA Fixes
     Applied here so they take effect on parent-theme module
  instances too
     =========================================== */

  /* Pagination indicator: square with rounded corners (not
  circle) */
  .hd-gallery .hd-gallery__pagination-number {
    border-radius: 4px !important;
  }

  /* Disabled prev/next arrow: no background, no hover state */
  .hd-gallery .hd-gallery__pagination-arrow:disabled {
    background: none !important;
    pointer-events: none;
  }

  /* ===========================================
     SECONDARY NAV - QA Fixes
     =========================================== */

  @media (min-width: 768px) {
    /* ul fills the full 60px bar; items centred on Y axis */
    section.secondary-nav-wrapper .sticky ul {
      display: flex !important;
      align-items: center !important;
      align-self: stretch;
      gap: 40px;
    }

    section.secondary-nav-wrapper .sticky ul li {
      display: flex !important;
      align-items: center !important;
    }

    section.secondary-nav-wrapper .sticky ul li a {
      display: flex !important;
      align-items: center !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    /* Active item stretches to full bar height so underline is
  flush at bottom */
    section.secondary-nav-wrapper .sticky ul li.active {
      align-self: stretch;
    }

    section.secondary-nav-wrapper .sticky ul li.active a {
      border-bottom: 4px solid #16325A !important;
      height: 100%;
      padding-top: 26px !important;
      padding-bottom: 26px !important;
      color: var(--gl-color-text) !important;
      font-weight: 700 !important;
    }
  }

  /* ===========================================
     NAV CTA BUTTON — Gold variant (Figma alignment)
     Overrides parent hd-menu.module tertiary-button and
     theme-overrides/buttons.css rules.
     =========================================== */

  section.menu.desktop-menu a.cta_button.btn.tertiary-button {
    background-color: #9E9479 !important;
    color: #FFFFFF !important;
    font-family: var(--gl-font-body-stack) !important;
    font-weight: 500 !important;
    font-size: 19px !important;
    line-height: 31px !important;
    letter-spacing: var(--gl-body-ls) !important;
    padding: 6px 16px !important;
    border-radius: 0 !important;
    border: none !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
  }

  section.menu.desktop-menu a.cta_button.btn.tertiary-button:hover,
  section.menu.desktop-menu a.cta_button.btn.tertiary-button:focus {
    background-color: #867E67 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
  }

  /* ===========================================
     CUSTOM TABLE MODULE — Full override
     Moved to child.css (theme bundle) so styles load reliably
     when the module is placed on a page. The parent theme's
     theme-overrides/tables.css compiles global td/th/table rules
     from HubSpot theme settings (border, padding, color,
     background-color) which can win over module.css depending on
     load order. !important is used only on those specific
     properties to guarantee the module always looks correct.
     =========================================== */

  /* Section layout — Figma: padding 60px 152px, gap 40px, bg #fff */
  section.table-wrapper {
    background-color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    /* padding: 60px 152px !important; table padding as per figma as requested by Andrea */
  }

  section.table-wrapper h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #1A1201;
    margin: 0 !important;
    letter-spacing: -0.24px !important;
    line-height: 1.1 !important;
  }

  section.table-wrapper .table-description {
    font-size: 19px !important;
    color: var(--gl-color-text) !important;
    margin: 0 !important;
    line-height: 31px !important;
    letter-spacing: var(--gl-body-ls) !important;
  }

  /* Scroll wrapper — overflow on the inner div */
  section.table-wrapper .table-scroll {
    overflow-x: auto;
  }

  /* Table base */
  section.table-wrapper table {
    width: 100% !important;
    background: #fff !important;
    border-collapse: collapse !important;
    border: 1px solid #f1f1f1 !important;
    margin-bottom: 0 !important;
  }

  /* Strip borders/backgrounds from tbody/thead/tfoot added by
     the parent theme */
  section.table-wrapper table tbody,
  section.table-wrapper table tfoot,
  section.table-wrapper table thead {
    border: none !important;
    background-color: transparent !important;
  }

  /* Header row */
  section.table-wrapper table thead tr th,
  section.table-wrapper table tbody tr:first-child th,
  section.table-wrapper table tbody tr:first-child td {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--gl-color-text) !important;
    background-color: #fff !important;
    padding: 16px 12px !important;
    text-align: left !important;
    vertical-align: top !important;
    border: none !important;
    letter-spacing: 0.3px !important;
  }

  /* All body cells */
  section.table-wrapper table tr td,
  section.table-wrapper table tr th {
    padding: 14px 12px !important;
    font-size: 14px !important;
    text-align: left !important;
    vertical-align: top !important;
    border: none !important;
    color: #1A1201 !important;
    line-height: var(--gl-body-lh) !important;
  }

  /* First column — bold label */
  section.table-wrapper table tr td:first-child,
  section.table-wrapper table tr th:first-child {
    font-weight: 600 !important;
    color: #1A1201 !important;
  }

  /* Inline elements inside cells */
  section.table-wrapper table tr td *,
  section.table-wrapper table tr td strong {
    font-size: 14px !important;
  }

  /* Alternating row colours — Figma: odd=#F6F6F6, even=#F1F1F1 */
  section.table-wrapper table tbody tr:nth-child(odd) td,
  section.table-wrapper table tbody tr:nth-child(odd) th {
    background-color: #F6F6F6 !important;
  }

  section.table-wrapper table tbody tr:nth-child(even) td,
  section.table-wrapper table tbody tr:nth-child(even) th {
    background-color: #F1F1F1 !important;
  }

  /* Heading row — must come after nth-child rules (same specificity, last wins) */
  section.table-wrapper table tbody tr:first-child td,
  section.table-wrapper table tbody tr:first-child th {
    background-color: #fefefe !important;
  }

  /* Responsive */
  @media (max-width: 1200px) {
    section.table-wrapper {
      padding: 60px 80px !important;
    }
  }

  @media (max-width: 768px) {
    section.table-wrapper {
      padding: 48px 24px !important;
      gap: 24px !important;
    }

    section.table-wrapper h3 {
      font-size: 20px !important;
    }

    section.table-wrapper table tr td,
    section.table-wrapper table tr th {
      padding: 12px 8px !important;
      font-size: 13px !important;
      min-width: 120px;
    }
  }

  @media (max-width: 480px) {
    section.table-wrapper {
      padding: 40px 16px !important;
    }

    section.table-wrapper h3 {
      font-size: 18px !important;
    }

    section.table-wrapper table tr td,
    section.table-wrapper table tr th {
      padding: 10px 6px !important;
      font-size: 12px !important;
      min-width: 100px;
    }
  }

  /* ===========================================
     WARRANTY BANNER - Width Fix
     Padding matches the 152px page container used by adjacent
  modules
     =========================================== */

  .warranty-wrapper {
    max-width: none;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  @media (min-width: 1200px) {
    .warranty-wrapper {
      padding-left: 152px;
      padding-right: 152px;
    }
  }

  /* ===========================================
     FORM MODULE RESKIN - Consultation Form
     =========================================== */

  /* Fieldset reset — HubSpot wraps multi-column rows in fieldsets */
  .hs-form-private fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: none;
  }

  /* Form Container */
  .hs-form-private {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  /* Form Field Groups */
  .hs-form-private .hs-form-field {
    margin-bottom: 0;
    width: 100%;
  }

  /* Labels — hide all standard labels; placeholders carry the info */
  .hs-form-private .hs-form-field > label:not(.hs-form-checkbox-display):not(.hs-form-booleancheckbox-display) {
    display: none;
  }

  /* "Which products are you interested in?" — show this label, bold */
  .hs-form-private .hs-fieldtype-checkbox > label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1A1201;
    margin-bottom: 14px;
  }

  /* All Input Fields */
  .hs-form-private input[type="text"],
  .hs-form-private input[type="email"],
  .hs-form-private input[type="tel"],
  .hs-form-private input[type="number"],
  .hs-form-private select,
  .hs-form-private textarea {
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0;
    color: #1A1201;
    font-size: 14px;
    padding: 14px 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    font-family: var(--gl-font-heading-stack);
  }

  /* Placeholder Text */
  .hs-form-private input::placeholder,
  .hs-form-private textarea::placeholder {
    color: #9B9B9B;
    opacity: 1;
  }

  /* Focus State */
  .hs-form-private input[type="text"]:focus,
  .hs-form-private input[type="email"]:focus,
  .hs-form-private input[type="tel"]:focus,
  .hs-form-private input[type="number"]:focus,
  .hs-form-private select:focus,
  .hs-form-private textarea:focus {
    outline: none;
    border-color: #16325A;
  }

  /* Select Dropdown Arrow */
  .hs-form-private select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-color: #fff;
    padding-right: 40px;
  }

  /* Textarea */
  .hs-form-private textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
  }

  /* Two-Column Field Layout */
  .hs-form-private .form-columns-2 {
    display: flex;
    gap: 12px;
  }

  .hs-form-private .form-columns-2 .hs-form-field {
    flex: 1;
    min-width: 0;
  }

  /* Single-Column Fieldset — full width, no extra gaps */
  .hs-form-private .form-columns-1 {
    display: block;
  }

  .hs-form-private .form-columns-1 .hs-form-field {
    width: 100%;
  }

  /* Checkbox Group — 2-column grid per Figma */
  .hs-form-private .hs-fieldtype-checkbox .inputs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 48px;
  }

  /* Boolean checkboxes (consent) — single column */
  .hs-form-private .hs-fieldtype-booleancheckbox .inputs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
  }

  /* Checkbox Item Label */
  .hs-form-private .hs-form-checkbox label,
  .hs-form-private .hs-form-booleancheckbox label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1A1201;
    cursor: pointer;
    font-weight: 400;
  }

  /* Custom Checkbox */
  .hs-form-private .hs-form-checkbox input[type="checkbox"],
  .hs-form-private .hs-form-booleancheckbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
  }

  .hs-form-private .hs-form-checkbox input[type="checkbox"]:hover,
  .hs-form-private .hs-form-booleancheckbox input[type="checkbox"]:hover {
    border-color: #16325A;
  }

  .hs-form-private .hs-form-checkbox input[type="checkbox"]:checked,
  .hs-form-private .hs-form-booleancheckbox input[type="checkbox"]:checked {
    background-color: #16325A;
    border-color: #16325A;
  }

  .hs-form-private .hs-form-checkbox input[type="checkbox"]:checked::after,
  .hs-form-private .hs-form-booleancheckbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* Field description / legend text */
  .hs-form-private .hs-field-desc,
  .hs-form-private fieldset > legend {
    font-size: 14px;
    font-weight: 400;
    color: #555;
    margin-bottom: 10px;
    display: block;
  }

  /* Submit Button Container — left-aligned per Figma */
  .hs-form-private .hs-submit {
    text-align: left;
    margin-top: 8px;
  }

  /* Submit Button — Figma 433-9744 Primary Blue: Gotham Medium 500 */
  .hs-form-private .hs-button,
  .hs-form-private input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #16325A;
    border: none;
    border-radius: 0;
    color: #FFFFFF;
    font-size: 19px;
    line-height: 31px;
    letter-spacing: var(--gl-body-ls);
    font-weight: 500;
    font-family: var(--gl-font-body-stack);
    padding: 12px 28px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
    width: auto;
  }

  .hs-form-private .hs-button:hover,
  .hs-form-private input[type="submit"]:hover {
    background-color: #011E41;
    color: #FFFFFF;
    font-size: 19px;
    line-height: 31px;
    letter-spacing: var(--gl-body-ls);
    font-weight: 500;
    font-family: var(--gl-font-body-stack);
  }

  .hs-form-private .hs-button:active,
  .hs-form-private input[type="submit"]:active {
    transform: translateY(1px);
  }

  /* Error Messages */
  .hs-form-private .hs-error-msgs {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
  }

  .hs-form-private .hs-error-msgs li {
    color: #dc3545;
    font-size: 12px;
  }

  /* Required Field Asterisk */
  .hs-form-private .hs-form-required {
    color: #dc3545;
    margin-left: 2px;
  }

  /* Legal/Consent Container */
  .hs-form-private .legal-consent-container {
    padding: 0;
    margin-top: 8px;
  }

  .hs-form-private .legal-consent-container .hs-form-booleancheckbox-display > span,
  .hs-form-private .legal-consent-container .hs-form-booleancheckbox-display > span p {
    margin-left: 0 !important;
    font-size: 13px;
    color: #666;
  }

  /* reCAPTCHA spacing */
  .hs-form-private .hs_recaptcha {
    margin-top: 12px;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .hs-form-private .form-columns-2 {
      flex-direction: column;
      gap: 12px;
    }

    .hs-form-private .hs-fieldtype-checkbox .inputs-list {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .hs-form-private .hs-button,
    .hs-form-private input[type="submit"] {
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: normal;
      padding: 16px 20px;
    }

    .hs-form-private .hs-submit {
      text-align: center;
    }
  }

  /* ===========================================
     BLOG LISTING CONTAINER
     Side margins matching the site's 152px page container on large screens
     =========================================== */

  .hd-blog-listing-container {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  @media (min-width: 992px) {
    .hd-blog-listing-container {
      padding-left: 60px;
      padding-right: 60px;
    }
  }

  @media (min-width: 1200px) {
    .hd-blog-listing-container {
      padding-left: 152px;
      padding-right: 152px;
    }
  }

  /* ===========================================
     SHARED BLOG CARD (components/blog_card.html)
     Used by Blog Listing + Related Blogs. Figma MVP Blog Listing.
     BEM: hd-blog-card. Master prompt: BEM, lazy-load, accessibility.
     =========================================== */

  .hd-blog-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0;
    overflow: hidden;
    height: 100%;
  }

  .hd-blog-card__image-link {
    display: block;
    text-decoration: none;
    flex-shrink: 0;
  }

  .hd-blog-card__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 450 / 250;
    overflow: hidden;
    background-color: #f0f0f0;
  }

  .hd-blog-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .hd-blog-card:hover .hd-blog-card__image {
    transform: scale(1.02);
  }

  .hd-blog-card__image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
  }

  .hd-blog-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 24px;
    flex: 1 1 auto;
  }

  .hd-blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    line-height: 20px;
  }

  .hd-blog-card__tag {
    font-family: var(--gl-font-heading-stack);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gl-color-text);
    text-decoration: none;
    transition: opacity 0.2s ease !important;
  }

  .hd-blog-card__tag:hover,
  .hd-blog-card__tag:focus {
    opacity: 0.7;
    color: var(--gl-color-text);
    font-family: var(--gl-font-heading-stack);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1.4px;
    text-decoration: none;
  }

  .hd-blog-card__tag-divider {
    display: inline-block;
    width: 1px;
    height: 17px;
    background-color: #16325a;
    vertical-align: middle;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    user-select: none;
  }

  .hd-blog-card__title {
    margin: 0;
    font-family: var(--gl-font-heading-stack);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.46px;
    color: var(--gl-color-text);
  }

  .hd-blog-card__title a {
    font-family: var(--gl-font-heading-stack);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.46px;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease !important;
  }

  .hd-blog-card__title a:hover,
  .hd-blog-card__title a:focus {
    opacity: 0.8;
    color: inherit;
    font-family: var(--gl-font-heading-stack);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.46px;
    text-decoration: none;
  }

  .hd-blog-card__description {
    margin: 0;
    font-family: var(--gl-font-body-stack);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1A1201;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hd-blog-card__button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--gl-font-body-stack);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    color: var(--gl-color-text);
    text-decoration: none;
    transition: opacity 0.2s ease !important;
    background: none;
    border: none;
    cursor: pointer;
  }

  .hd-blog-card__button span {
    display: inline !important;
  }

  .hd-blog-card__button:hover,
  .hd-blog-card__button:focus {
    opacity: 0.7;
    color: var(--gl-color-text);
    font-family: var(--gl-font-body-stack);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    text-decoration: none;
  }

  .hd-blog-card__chevron {
    display: inline-block !important;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .hd-blog-card__image,
    .hd-blog-card__button,
    .hd-blog-card__tag,
    .hd-blog-card__title a {
      transition: none;
    }
    .hd-blog-card:hover .hd-blog-card__image {
      transform: none;
    }
  }

  .hd-blog-card__image-link:focus-visible,
  .hd-blog-card__tag:focus-visible,
  .hd-blog-card__title a:focus-visible,
  .hd-blog-card__button:focus-visible {
    outline: 2px solid #16325a;
    outline-offset: 2px;
  }

  /* ===========================================
     BLOG LISTING - DND section breakout
     When blog listing module is placed on a static DND page,
     lift the row-fluid max-width so module padding controls width
     =========================================== */

  .dnd-section:has(.hd-blog-listing) > .row-fluid {
    max-width: none;
  }

  /* ===========================================
     BLOG POST — HERO SECTION
     Full-width dark navy banner with white text
     =========================================== */

  .hd-blog-hero {
    background-color: #16325a;
    padding: 72px 0 48px;
    text-align: center;
  }

  .hd-blog-hero__container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .hd-blog-hero__label {
    display: block;
    font-family: var(--gl-font-heading-stack);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 16px;
  }

  .hd-blog-hero__topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 24px;
  }

  .hd-blog-hero__topic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #9E9479;
    padding: 12px 14px;
    font-family: var(--gl-font-body-stack);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .hd-blog-hero__topic:hover,
  .hd-blog-hero__topic:focus {
    background-color: #867E67;
    color: #ffffff;
    text-decoration: none;
  }

  .hd-blog-hero__topic-sep {
    display: none;
  }

  .hd-blog-hero__title {
    font-family: var(--gl-font-heading-stack);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 24px;
  }

  .hd-blog-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .hd-blog-hero__date,
  .hd-blog-hero__read-time {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
  }

  @media (max-width: 768px) {
    .hd-blog-hero {
      padding: 48px 0 32px;
    }

    .hd-blog-hero__topics {
      gap: 10px;
    }

    .hd-blog-hero__topic {
      padding: 8px 12px;
      font-size: 12px;
    }

    .hd-blog-hero__title {
      font-size: 26px;
    }
  }

  /* ===========================================
     BLOG POST — BODY CONTAINER + SHARE BAR
     =========================================== */

  .hd-blog-post .container {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px;
  }

  .hd-share-bar {
    padding: 20px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 40px;
  }

  .hd-share-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .hd-share-bar__author {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* KEY — constrain avatar; img default is 'auto' which shows full size */
  .hd-share-bar__avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background-color: #e5e5e5;
  }

  .hd-share-bar__author-text {
    margin: 0;
    font-size: 14px;
    color: #1A1201;
  }

  .hd-share-bar__author-text span {
    font-weight: 700;
    color: var(--gl-color-text);
  }

  .hd-share-bar__share {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hd-share-bar__share-label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #666;
  }

  .hd-share-bar__icons {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hd-share-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--gl-color-text) !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    overflow: hidden;
  }

  .hd-share-bar__icon:hover,
  .hd-share-bar__icon:focus {
    opacity: 0.7;
    color: var(--gl-color-text) !important;
    text-decoration: none;
  }

  .hd-share-bar__icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
    flex-shrink: 0;
    fill: #16325a !important;
  }

  @media (max-width: 600px) {
    .hd-share-bar__inner {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* ===========================================
     BLOG POST — FEATURED IMAGE + POST CONTENT
     =========================================== */

  .hd-post-intro {
    font-size: 16px;
    line-height: 1.65;
    color: #1A1201;
    font-weight: 500;
    margin: 0 0 32px;
  }

  .hd-featured-media {
    margin: 0 0 40px;
  }

  .hd-featured-media__wrapper {
    position: relative;
    overflow: hidden;
  }

  .hd-featured-media__img {
    width: 100%;
    height: auto;
    display: block;
  }

  .hd-featured-media__caption {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    text-align: center;
  }

  .hd-post-content {
    font-size: 16px;
    line-height: 1.7;
    color: #1A1201;
    margin-bottom: 48px;
  }

  .hd-post-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1A1201;
    margin: 40px 0 16px;
  }

  .hd-post-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1A1201;
    margin: 32px 0 12px;
  }

  .hd-post-content p {
    margin-bottom: 20px;
  }

  .hd-post-content a {
    color: var(--gl-color-text);
    text-decoration: underline;
  }

  /* ===========================================
     BLOG POST — AUTHOR BIO
     =========================================== */

  .hd-author-bio {
    margin-top: 48px;
    margin-bottom: 48px;
    padding: 24px;
    background-color: #f7f7f7;
    border-left: 4px solid #16325a;
  }

  .hd-author-bio__inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .hd-author-bio__avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    background-color: #e5e5e5;
  }

  .hd-author-bio__avatar--placeholder {
    background-color: #e5e5e5;
  }

  .hd-author-bio__content {
    flex: 1;
  }

  .hd-author-bio__name {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--gl-color-text);
  }

  .hd-author-bio__name span {
    font-weight: 700;
  }

  .hd-author-bio__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
  }

  @media (max-width: 600px) {
    .hd-author-bio__inner {
      flex-direction: column;
    }
  }

  /* ===========================================
     ICON CARDS — vertical column dividers
     Duplicated here from module.css to ensure reliable
     loading via the theme bundle (module.css is CDN-cached
     per-module and may not reflect immediately).
     =========================================== */

  /* cols-2: divider between column 1 and column 2 */
  .hd-icon-cards .hd-icon-cards__grid--cols-2 .hd-icon-cards__card:nth-child(odd) {
    padding-right: 16px;
    border-right: 1px solid #d0d0d0;
  }

  .hd-icon-cards .hd-icon-cards__grid--cols-2 .hd-icon-cards__card:nth-child(even) {
    padding-left: 16px;
  }

  /* cols-3: dividers after col 1 and col 2; none after col 3 */
  .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card:not(:nth-child(3n)) {
    padding-right: 10px;
    border-right: 1px solid #d0d0d0;
  }

  .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card:not(:nth-child(3n+1)) {
    padding-left: 10px;
  }

  /* cols-3: reduce outer module side padding to give card content more room */
  .hd-icon-cards:has(.hd-icon-cards__grid--cols-3) {
    padding-left: 80px;
    padding-right: 80px;
  }

  @media (max-width: 1200px) {
    .hd-icon-cards:has(.hd-icon-cards__grid--cols-3) {
      padding-left: 40px;
      padding-right: 40px;
    }
  }

  /* @1300px: cols-3 collapses to 2-col — reset 3-col rules, re-apply 2-col pattern */
  @media (max-width: 1300px) {
    .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card {
      padding-right: 0;
      padding-left: 0;
      border-right: none;
    }

    .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card:nth-child(odd) {
      padding-right: 10px;
      border-right: 1px solid #d0d0d0;
    }

    .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card:nth-child(even) {
      padding-left: 10px;
    }
  }

  /* @820px: all collapse to 1-col — remove all dividers. */
  @media (max-width: 820px) {
    .hd-icon-cards .hd-icon-cards__grid--cols-2 .hd-icon-cards__card,
    .hd-icon-cards .hd-icon-cards__grid--cols-2 .hd-icon-cards__card:nth-child(odd),
    .hd-icon-cards .hd-icon-cards__grid--cols-2 .hd-icon-cards__card:nth-child(even),
    .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card,
    .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card:nth-child(odd),
    .hd-icon-cards .hd-icon-cards__grid--cols-3 .hd-icon-cards__card:nth-child(even) {
      padding-right: 0;
      padding-left: 0;
      border-right: none;
    }
  }

  /* ===========================================
     LEGACY HEADING FONT GUARD
     Override parent theme heading/link rules so child pages
     stay on the standard Gotham stacks.
     =========================================== */

  main h1,
  main h1 a,
  main h2,
  main h2 a,
  main h3,
  main h3 a,
  main h4,
  main h4 a,
  main h5,
  main h5 a,
  main h6,
  main h6 a {
    font-family: var(--gl-font-heading-stack) !important;
    color: #1A1201;
  }

  main h1 a:hover,
  main h1 a:focus,
  main h1 a:active,
  main h2 a:hover,
  main h2 a:focus,
  main h2 a:active,
  main h3 a:hover,
  main h3 a:focus,
  main h3 a:active,
  main h4 a:hover,
  main h4 a:focus,
  main h4 a:active,
  main h5 a:hover,
  main h5 a:focus,
  main h5 a:active,
  main h6 a:hover,
  main h6 a:focus,
  main h6 a:active {
    font-family: var(--gl-font-heading-stack) !important;
    color: #1A1201;
  }

  /* Mobile: H1-H6 scale (Figma) */
  @media (max-width: 767px) {
    main h1,
    main h1 a {
      font-size: 38px !important;
      line-height: 90% !important;
      letter-spacing: -2% !important;
    }

    main h2,
    main h2 a {
      font-size: 32px !important;
      line-height: 100% !important;
      letter-spacing: -1% !important;
    }

    main h3,
    main h3 a {
      font-size: 26px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h4,
    main h4 a {
      font-size: 22px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h5,
    main h5 a {
      font-size: 20px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h6,
    main h6 a {
      font-size: 18px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h1 a:hover,
    main h1 a:focus,
    main h1 a:active {
      font-size: 38px !important;
      line-height: 90% !important;
      letter-spacing: -2% !important;
    }

    main h2 a:hover,
    main h2 a:focus,
    main h2 a:active {
      font-size: 32px !important;
      line-height: 100% !important;
      letter-spacing: -1% !important;
    }

    main h3 a:hover,
    main h3 a:focus,
    main h3 a:active {
      font-size: 26px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h4 a:hover,
    main h4 a:focus,
    main h4 a:active {
      font-size: 22px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h5 a:hover,
    main h5 a:focus,
    main h5 a:active {
      font-size: 20px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }

    main h6 a:hover,
    main h6 a:focus,
    main h6 a:active {
      font-size: 18px !important;
      line-height: 110% !important;
      letter-spacing: -1% !important;
    }
  }

  /* Tablet/desktop: H1-H3 design review */
  @media (min-width: 768px) {
    main h1,
    main h1 a {
      font-size: 58px !important;
      line-height: 100% !important;
      letter-spacing: -3px !important;
    }

    main h2,
    main h2 a {
      font-size: 44px !important;
      line-height: 100% !important;
      letter-spacing: -1% !important;
    }

    main h3,
    main h3 a {
      font-size: 34px !important;
      line-height: 100% !important;
      letter-spacing: -2% !important;
    }

    main h1 a:hover,
    main h1 a:focus,
    main h1 a:active {
      font-size: 58px !important;
      line-height: 100% !important;
      letter-spacing: -3px !important;
    }

    main h2 a:hover,
    main h2 a:focus,
    main h2 a:active {
      font-size: 44px !important;
      line-height: 100% !important;
      letter-spacing: -1% !important;
    }

    main h3 a:hover,
    main h3 a:focus,
    main h3 a:active {
      font-size: 34px !important;
      line-height: 100% !important;
      letter-spacing: -2% !important;
    }
  }

  /* ===========================================
     MAIN RICH TEXT BODY — Gotham Book stack
     Parent theme uses Gotham SSm on main p/li; force child stack.
     Headings stay Bold via main h1-h6 rules above.
     Do not override custom bullet ::before (Font Awesome on li).
     =========================================== */

  main .hs_cos_wrapper_type_rich_text {
    font-family: var(--gl-font-body-stack) !important;
  }

  main .hs_cos_wrapper_type_rich_text p,
  main .hs_cos_wrapper_type_rich_text li,
  main .hs_cos_wrapper_type_rich_text td,
  main .hs_cos_wrapper_type_rich_text th,
  main .hs_cos_wrapper_type_rich_text blockquote,
  main .hs_cos_wrapper_type_rich_text strong,
  main .hs_cos_wrapper_type_rich_text em,
  main .hs_cos_wrapper_type_rich_text p span,
  main .hs_cos_wrapper_type_rich_text li span,
  main .hs_cos_wrapper_type_rich_text td span,
  main .hs_cos_wrapper_type_rich_text th span,
  main .hs_cos_wrapper_type_rich_text blockquote span {
    font-family: var(--gl-font-body-stack) !important;
  }

  /* ===========================================
     HOVER FONT GUARD
     Prevent parent theme-overrides hover/focus rules from
     switching interactive text to Gotham SSm A/B.
     =========================================== */

  main a,
  main a:hover,
  main a:focus,
  main a:active {
    font-family: var(--gl-font-body-stack) !important;
  }

  button,
  button:hover,
  button:focus,
  button:active,
  .button,
  .button:hover,
  .button:focus,
  .button:active,
  .secondary-button,
  .secondary-button:hover,
  .secondary-button:focus,
  .secondary-button:active,
  .tertiary-button,
  .tertiary-button:hover,
  .tertiary-button:focus,
  .tertiary-button:active,
  .quaternary-button,
  .quaternary-button:hover,
  .quaternary-button:focus,
  .quaternary-button:active {
    font-family: var(--gl-font-body-stack) !important;
  }

  form .hs-richtext a,
  form .hs-richtext p a,
  form .hs-richtext a:hover,
  form .hs-richtext p a:hover,
  form .hs-richtext a:focus,
  form .hs-richtext p a:focus {
    font-family: var(--gl-font-body-stack) !important;
  }

  form input[type=submit],
  form .hs-button,
  form input[type=submit]:hover,
  form input[type=submit]:focus,
  form input[type=submit]:active,
  form .hs-button:hover,
  form .hs-button:focus,
  form .hs-button:active {
    font-family: var(--gl-font-body-stack) !important;
  }

  /* ===========================================
     MAIN FORM — Gotham stack (all HubSpot forms in main)
     Supplements .hs-form-private; covers labels, consent, inputs.
     =========================================== */

  main form {
    font-family: var(--gl-font-body-stack) !important;
  }

  main form .form-title,
  main form label,
  main form label span,
  main form legend,
  main form .hs-error-msg,
  main form .hs-error-msgs label,
  main form .hs-richtext,
  main form .hs-richtext p,
  main form .legal-consent-container .hs-form-booleancheckbox-display > span,
  main form .legal-consent-container .hs-form-booleancheckbox-display > span p,
  main form .submitted-message,
  main form .submitted-message p {
    font-family: var(--gl-font-body-stack) !important;
  }

  main form input[type="text"],
  main form input[type="email"],
  main form input[type="password"],
  main form input[type="tel"],
  main form input[type="number"],
  main form input[type="file"],
  main form input[type="date"],
  main form select,
  main form textarea {
    font-family: var(--gl-font-body-stack) !important;
  }

  main form input[type="submit"],
  main form .hs-button,
  main form input[type="submit"]:hover,
  main form input[type="submit"]:focus,
  main form input[type="submit"]:active,
  main form .hs-button:hover,
  main form .hs-button:focus,
  main form .hs-button:active {
    font-family: var(--gl-font-body-stack) !important;
  }

  /* ===========================================
     HubSpot embedded forms (hsfc-FormWrapper)
     Submit: gold background, white text (Figma button spec)
     =========================================== */

  .hsfc-FormWrapper button[type="submit"],
  .hsfc-FormWrapper input[type="submit"] {
    background-color: #9e9479 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--gl-font-body-stack) !important;
    font-weight: 500 !important;
    font-size: 19px !important;
    line-height: 31px !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    transition: background-color 0.3s ease !important;
  }

  .hsfc-FormWrapper button[type="submit"]:hover,
  .hsfc-FormWrapper button[type="submit"]:focus,
  .hsfc-FormWrapper input[type="submit"]:hover,
  .hsfc-FormWrapper input[type="submit"]:focus {
    background-color: #867e67 !important;
    color: #ffffff !important;
  }

  .hsfc-FormWrapper button[type="submit"]:active,
  .hsfc-FormWrapper input[type="submit"]:active {
    background-color: #867e67 !important;
    color: #ffffff !important;
  }
  /* ===========================================
     FRANCHISE 2026 RESKIN — scoped CSS block
     Scope: body.hd-franchise-page (Corp Impact Isolation Rule 1)
     Purpose: layer 2026 brand styling onto the franchise menu and
              footer modules without modifying the modules themselves
              or any corp-active selector outside this block.
     Spec: specs/franchise-2026-reskin/03-module-strategy.md
           §The franchise block
     Build date: 2026-05-26 (Phase 0 — Strict Mode local build)
     =========================================== */

  /* ── Foundation: page-level franchise context ── */

  body.hd-franchise-page {
    /* Reserved for any future franchise-only token overrides.
       Do not add unscoped declarations here. */
  }

  /* ===========================================
     FRANCHISE HEADER (hd-menu-franchisee 2026)
     Targets section.menu.desktop-menu / .mobile-menu inside the
     franchise page body, leaving corp menu unaffected.

     Note on scope vs corp:
       • Header hat: franchise-specific 2026 styling (dark
         #1A1201 bar, white type, 1440px container). Corp 2026
         hides the header hat entirely, so there is no corp
         equivalent to mirror — this is a deliberate franchise
         design choice, confirmed correct by Marc 2026-05-26.
       • Desktop primary nav + dropdowns: mirror the 2026 corp
         hd-menu.module/module.css (Figma alignment, see changelog
         2026-03-18/hd-menu-header-nav-figma.md).
     =========================================== */

  /* ── Header hat — 2026 dark bar ──
     Replaces legacy navy #103658 with brand near-black #1A1201. */
  body.hd-franchise-page section.menu.desktop-menu .top-bar-wrapper {
    background-color: var(--gl-color-text);
  }

  body.hd-franchise-page section.menu.desktop-menu .top-bar a {
    font-family: var(--gl-font-body-stack);
    font-size: 13px;
    line-height: 1.5;
    color: #ffffff;
    padding: 0.6rem 1rem;
    transition: opacity 0.2s ease;
  }

  body.hd-franchise-page section.menu.desktop-menu .top-bar a:hover,
  body.hd-franchise-page section.menu.desktop-menu .top-bar a:focus {
    color: #ffffff;
    opacity: 0.7;
    text-decoration: none;
  }

  /* Header hat intro text — 2026 heading-stack typography */
  body.hd-franchise-page section.menu.desktop-menu .top-bar-left a {
    font-family: var(--gl-font-heading-stack);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Navigation containers — 1440px max-width (2026 corp footer parity) */
  body.hd-franchise-page section.menu nav.navigation-bar {
    max-width: 1440px;
  }

  body.hd-franchise-page section.menu.desktop-menu .top-bar {
    max-width: 1440px;
  }

  /* ── Desktop primary nav ──
     Figma: Gotham Medium 16px / 120% / -3% letter-spacing /
            uppercase / #011E41 (matches 2026 corp). */
  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li > a {
    font-family: var(--gl-font-body-stack);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #011E41;
    background-color: transparent;
  }

  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li > a:hover,
  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li > a:focus {
    color: #386098;
    background-color: transparent;
    text-decoration: none;
  }

  /* ── Desktop flyout / dropdown items ──
     Figma: Gotham Medium 14px / 120% / -3% letter-spacing /
            sentence-case / #011E41. */
  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li ul li a {
    font-family: var(--gl-font-body-stack);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: none;
    color: #011E41;
    background-color: transparent;
  }

  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li ul li a:hover,
  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li ul li a:focus {
    color: #386098;
    background-color: transparent;
    text-decoration: none;
  }

  /* Active state in dropdown (matches 2026 corp) */
  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li ul li a.active-header {
    color: #011E41;
    font-weight: 600;
  }

  /* Dropdown caret indicator — recolour to corp navy */
  body.hd-franchise-page section.menu.desktop-menu .hs-menu-wrapper > ul > li.hs-item-has-children > a::after {
    border-color: #011E41 transparent transparent;
  }

  /* CTA button — inherits gold variant from existing corp rule at
     section.menu.desktop-menu a.cta_button.btn.tertiary-button (~line 77).
     No additional declarations needed — corp and franchise CTAs are aligned. */

  /* Sticky behaviour — 2026 corp pattern: solid white bg, subtle shadow.
     Matches the franchise module.css default; kept here for clarity. */
  body.hd-franchise-page section.menu.desktop-menu.sticky {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* Mobile menu — 2026 dark navy panel (replaces legacy #0a2035 / #103658).
     Confirmed visually good by Marc on 2026-05-26; do not modify without
     re-testing against the franchise mobile render. */
  body.hd-franchise-page section.menu.mobile-menu .navigation-mob {
    background: var(--gl-color-text);
  }

  body.hd-franchise-page section.menu.mobile-menu .hs-menu-wrapper > ul > li > a {
    background: var(--gl-color-text);
    color: #ffffff;
    font-family: var(--gl-font-body-stack);
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  body.hd-franchise-page section.menu.mobile-menu .hs-menu-wrapper > ul > li ul li a {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--gl-font-body-stack);
  }

  body.hd-franchise-page section.menu.mobile-menu .mobile-details li a {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--gl-font-body-stack);
  }

  /* ===========================================
     FRANCHISE FOOTER (hd-footer-franchisee 2026)
     Targets footer.inner-footer inside the franchise page body.
     Mirrors 2026 corp hd-footer styling tokens where structurally
     compatible (dark navy bg, white type, modern flexbox).
     =========================================== */

  /* Dark navy footer matching 2026 corp footer */
  body.hd-franchise-page footer.inner-footer {
    background-color: var(--gl-color-text);
    color: #ffffff;
    padding: 72px 0;
  }

  /* Inner container — 1440px max-width matching 2026 corp footer */
  body.hd-franchise-page footer.inner-footer .inner-container {
    max-width: 1440px;
    padding: 0 60px;
  }

  /* Column headings — 2026 typography */
  body.hd-franchise-page footer.inner-footer h6 {
    font-family: var(--gl-font-body-stack);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 14px;
  }

  /* Address block — white type, 2026 body font */
  body.hd-franchise-page footer.inner-footer .footer-leftaddress {
    color: #ffffff;
    font-family: var(--gl-font-body-stack);
    font-size: 12px;
    font-weight: 325;
  }

  body.hd-franchise-page footer.inner-footer .footer-leftaddress p,
  body.hd-franchise-page footer.inner-footer .footer-leftaddress a,
  body.hd-franchise-page footer.inner-footer .footer-leftaddress span {
    color: #ffffff;
    font-family: var(--gl-font-body-stack);
    font-size: 12px;
    font-weight: 325;
    line-height: 1.5;
    text-decoration: none;
  }

  body.hd-franchise-page footer.inner-footer .footer-leftaddress a:hover,
  body.hd-franchise-page footer.inner-footer .footer-leftaddress a:focus {
    color: #ffffff;
    opacity: 0.7;
  }

  /* Nav columns — Products / Company simple_menu output */
  body.hd-franchise-page footer.inner-footer ul li a {
    color: #ffffff;
    font-family: var(--gl-font-body-stack);
    font-size: 12px;
    font-weight: 325;
    line-height: 1.4;
    transition: opacity 0.2s ease;
  }

  body.hd-franchise-page footer.inner-footer ul li a:hover,
  body.hd-franchise-page footer.inner-footer ul li a:focus {
    color: #ffffff;
    opacity: 0.7;
    text-decoration: none;
  }

  body.hd-franchise-page footer.inner-footer li * {
    color: #ffffff;
  }

  /* Social column */
  body.hd-franchise-page footer.inner-footer .footer-social ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.hd-franchise-page footer.inner-footer .footer-social i {
    color: #ffffff;
    margin-right: 8px;
  }

  /* Copyright row — divider + small white text */
  body.hd-franchise-page footer.inner-footer .row.copyright {
    padding-top: 40px;
    margin-top: 40px;
  }

  body.hd-franchise-page footer.inner-footer .row.copyright hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin: 0 0 24px;
  }

  body.hd-franchise-page footer.inner-footer .row.copyright p {
    color: #ffffff;
    font-family: var(--gl-font-body-stack);
    font-size: 11px;
    font-weight: 325;
    letter-spacing: 0.22px;
    text-transform: capitalize;
    padding: 0;
  }

  body.hd-franchise-page footer.inner-footer .row.copyright p a,
  body.hd-franchise-page footer.inner-footer a.legal-links {
    color: #ffffff;
    text-decoration: none;
  }

  body.hd-franchise-page footer.inner-footer .row.copyright p a:hover,
  body.hd-franchise-page footer.inner-footer a.legal-links:hover {
    color: #ffffff;
    opacity: 0.7;
  }

  /* Responsive — collapse padding on narrower viewports */
  @media (max-width: 1200px) {
    body.hd-franchise-page footer.inner-footer .inner-container {
      padding: 0 40px;
    }
    body.hd-franchise-page footer.inner-footer {
      padding: 56px 0;
    }
  }

  @media (max-width: 768px) {
    body.hd-franchise-page footer.inner-footer .inner-container {
      padding: 0 20px;
    }
    body.hd-franchise-page footer.inner-footer {
      padding: 48px 0;
    }
    body.hd-franchise-page footer.inner-footer .footer-columns {
      text-align: left;
    }
  }

  /* TODO[design]: confirm Figma-specified footer layout — 2026 corp footer
     uses 4-column flexbox (logo+badge | nav-col x3 | social). Franchise
     footer currently uses Bootstrap col-lg-6/col-lg-2/col-lg-2/col-lg-2.
     Decision needed: refactor markup to match corp, OR style the Bootstrap
     grid to visually approximate corp. See brand-rulebook.md §12. */

  /* TODO[design]: confirm whether icon-font social icons should be replaced
     with the 2026 inline SVG approach (see garage-living-2026/modules/
     hd-footer.module/module.html for the SVG pattern). Currently leaves the
     legacy <i class="icon-facebook"> approach untouched to avoid module
     rewrites in Phase 0. */

  /* TODO[design]: confirm exact 2026 hover opacity (corp footer uses 0.7;
     this block uses 0.7 by default). */

  /* ===========================================
     FRANCHISE SECONDARY NAV — full-bleed escape
     Built: 2026-05-26
     Reason: The corp theme's global rule
       .dnd-section > .row-fluid { max-width: ; /* 1200px */ }
     (from garage-living/css/theme-overrides/containers-grid-dnd.css)
     caps every DnD section's inner row to 1200px. The secondary nav
     module is meant to render edge-to-edge (cream bar full viewport
     width, items centred in a 1920px inner column). The corp theme
     already provides equivalent escapes for .hd-header and footer
     (max-width: 100% on their respective .dnd-section > .row-fluid).
     This rule does the same for any .dnd-section that contains a
     .secondary-nav-wrapper, scoped to franchise pages only.
     :has() — supported Chrome 105+, Safari 15.4+, Firefox 121+.
     =========================================== */

  body.hd-franchise-page .dnd-section > .row-fluid:has(.secondary-nav-wrapper) {
    max-width: 100%;
  }

  /* ===========================================
     END FRANCHISE 2026 RESKIN block
     =========================================== */