/* ---------------------------------------------------------
   Gyford / Standoff Systems — layout styles
   ---------------------------------------------------------
   Site-specific styles for the gyford tenant. Shared blocks
   and base layout styles ship from /shared/css/shared.css.
   --------------------------------------------------------- */

:root {
    /* Brand palette */
    --gyford-ocean-blue: #2A7F99;
    --gyford-soft-gray: #F3F3F3;
    --gyford-white: #FFFFFF;
    --gyford-deep-teal: #063F48;
    --gyford-pale-green: #87A228;
    --gyford-cream: #F7F5F1;
    --gyford-pale-sage: #E0E4D2;
    --gyford-forest-green: #146154;
    --gyford-mist-green: #EFF3E8;
    --gyford-light-sky: #B3E5F3;
    --gyford-stone-gray: #6F7271;

    /* Footer uses the ocean blue brand color per Figma */
    --gyford-footer-bg: var(--gyford-ocean-blue);

    /* Layout */
    --gyford-max-width: 1920px;

    /* Typography */
    --gyford-font-family: 'Myriad Pro', 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
}

body {
    margin: 0;
    font-family: var(--gyford-font-family);
}

/* ---------------------------------------------------------
   Sticky header stack
   - The whole <header> becomes a single fixed container at
     top:0. Brand bar, info bar, and masthead flow naturally
     inside, so when the info bar wraps to 2 lines (e.g. on
     mobile), the masthead pushes down instead of overlapping.
   - Overrides the shared `.brand-bar.sticky { position: fixed }`
     since the header itself is now the fixed unit.
   --------------------------------------------------------- */
body > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

body > header .brand-bar.sticky {
    position: static !important;
}

/* Header is now position: fixed, so main content needs an explicit
   top offset equal to the header height (set by the JS in _base.twig). */
body > main {
    padding-top: var(--header-h, 165px);
}

/* Pages that don't need the full-viewport min-height (e.g. content-light
   landing pages) opt out via the `no-min-height` body class. Switches the
   body to a flex column so <main> can grow and push <footer> to the bottom
   of the viewport (sticky footer) instead of leaving blank space below it. */
body.no-min-height {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
}
body.no-min-height main#main-content {
    min-height: 0 !important;
    flex: 1 0 auto;
}

/* ---------------------------------------------------------
   Info bar
   - Sits between the shared brand bar and the site nav.
   - Renders only when siteSettings.announcementMessage is set.
   - Content comes from CKEditor, which wraps output in <p>.
   --------------------------------------------------------- */
.info-bar {
    background-color: var(--gyford-ocean-blue);
    color: var(--gyford-white);
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    box-sizing: border-box;
}

.info-bar__inner {
    max-width: var(--gyford-max-width);
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.info-bar__inner p {
    margin: 0;
}

.info-bar a {
    color: var(--gyford-white);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Chevron auto-appended after any link in the info bar.
   Lives in CSS rather than the field so editors only manage text/links. */
.info-bar a::after {
    content: '';
    display: inline-block;
    width: 17px;
    height: 16px;
    margin-left: 4px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'><path d='M6.375 12L10.625 8L6.375 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------------------------------------------------------
   Site header / nav bar
   - Outer bar: full-width gray background, padded.
   - Inner row: logo (left) + primary nav (right), centered
     within the 1920px max content width.
   --------------------------------------------------------- */
.site-header {
    background: var(--gyford-soft-gray);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

/* Match the shared brand bar's 83%-centered content width so the
   logo's left edge aligns with the first brand bar link. */
.site-header .header-inner {
    display: flex;
    width: 83%;
    max-width: var(--gyford-max-width);
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

/* Mirror the brand bar's responsive widening on narrower viewports
   (matches the breakpoints in shared/templates/components/_brand-bar.twig). */
@media (max-width: 1105px) {
    .site-header .header-inner {
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
    }
}

/* Logo */
.brand {
    display: flex;
    width: 173px;
    height: 52px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.brand__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand__text {
    font-weight: 700;
    color: #000;
}

/* Mobile toggle hidden on desktop (shown via media query below).
   Hamburger / close icon swap is driven by aria-expanded which the
   navbar's JS already toggles. */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.nav-toggle .icon--close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon--menu {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
    display: inline-block;
}

/* Primary nav links */
.site-header .nav {
    display: flex;
}

.site-header .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
    align-items: center;
}

/* Bump the gap a touch on wider desktops — Figma's 24px reads tight once
   the header has room to breathe past ~1440px. */
@media (min-width: 1440px) {
    .site-header .menu {
        gap: 32px;
    }
}

.site-header .menu__link {
    color: #414141;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
}

.site-header .menu__link:hover {
    color: var(--gyford-ocean-blue);
    text-decoration: none;
}

/* Desktop: hide chevron on items that don't have a submenu */
.site-header .menu__item:not(.has-children) .caret {
    display: none;
}

/* `<button class="menu__link">` lives on title-only entries (entry type
   blockTitle). Strip every browser-default button affordance so it lines up
   pixel-for-pixel with the <a class="menu__link"> siblings. Uses :where() so
   the reset has 0,1,0 specificity — gets overridden by any explicit
   .menu__link rule (color, font-size, etc.) without needing !important. */
:where(.site-header button.menu__link) {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* Universal default — hide submenus until shown. Mobile shows via .is-open
   (set by the click JS inside its own media query); desktop shows via hover/
   focus inside the @media (min-width: 921px) block below. */
.site-header .submenu {
    display: none;
    list-style: none;
    margin: 0;
}

/* ---------- Desktop submenu (≥921px) ---------- */
@media (min-width: 921px) {
    /* Anchor for absolute-positioned dropdown */
    .site-header .menu__item.has-children {
        position: relative;
    }

    .site-header .submenu {
        /* Per Figma — fixed width, height auto so it grows with item count. */
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        width: 190px;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border: 1px solid #E8E8E8;
        background: #FFF;
    }

    /* Right-half items: pin dropdown's right edge to trigger's right edge so
       it doesn't overflow off-screen. */
    .site-header .menu__item.align-right .submenu {
        left: auto;
        right: 0;
    }

    .site-header .submenu li {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Per Figma — 16/22 Myriad Pro ocean-blue, mixed-case, no underline. */
    /* display: block + width: 100% so the entire row is the click target,
       not just the text. */
    .site-header .submenu a {
        display: block;
        width: 100%;
        color: var(--gyford-ocean-blue);
        font-family: "Myriad Pro", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        text-decoration: none;
        text-transform: none;
        transition: color 0.18s ease;
    }
    /* Darker text on hover — matches Figma's subtle hover state. */
    .site-header .submenu a:hover {
        color: var(--gyford-deep-teal);
    }

    /* Open on hover; :focus-within keeps the dropdown open while keyboard
       tabbing through child links. */
    .site-header .menu__item.has-children:hover > .submenu,
    .site-header .menu__item.has-children:focus-within > .submenu {
        display: flex;
    }

    /* Caret default = right-facing SVG rotated 90deg → points DOWN. When the
       submenu opens, rotate to -90deg → points UP. */
    .site-header .menu__item.has-children .caret {
        margin-left: 8px;   /* breathing room between trigger text and chevron */
        transform: rotate(90deg);
        transition: transform 0.22s ease;
    }
    .site-header .menu__item.has-children:hover .caret,
    .site-header .menu__item.has-children:focus-within .caret,
    .site-header .menu__item.has-children.is-open .caret {
        transform: rotate(-90deg);
    }
}

/* Mobile breakpoint — full-screen panel nav */
@media (max-width: 920px) {
    .site-header .header-inner {
        padding: 0 24px;
    }
    .nav-toggle {
        display: inline-flex;
    }

    /* Nav becomes a full-viewport panel below the fixed header */
    .site-header .nav {
        display: none;
        position: fixed;
        top: var(--header-h, 165px);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gyford-white);
        padding: 24px;
        overflow-y: auto;
        z-index: 99998;
    }

    #primary-nav.is-open {
        display: block;
    }

    .site-header .menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
    }

    .site-header .menu__item {
        border-bottom: 1px solid #E4E4E4;
        list-style: none;
    }

    /* Top-level link rows — uppercase bold, full width, chevron right */
    .site-header .menu__link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 18px 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 16px;
        text-transform: uppercase;
        text-decoration: none;
        color: #414141;
    }

    /* Mobile: show chevron on every link (desktop hides it on leaf items) */
    .site-header .menu__item:not(.has-children) .caret {
        display: inline-block;
    }

    /* The right-chevron SVG rotates 90deg down when the parent item is open */
    .site-header .menu__item .caret {
        transition: transform 0.22s ease;
    }

    .site-header .menu__item.is-open > .menu__link .caret {
        transform: rotate(90deg);
    }

    /* Submenus stay collapsed until parent .menu__item gets .is-open */
    .site-header .submenu {
        display: none;
        list-style: none;
        padding: 0 0 12px;
        margin: 0;
    }

    .site-header .menu__item.is-open .submenu {
        display: block;
    }

    .site-header .submenu li {
        padding: 0;
    }

    /* Padding lives on <a> so the whole row is the click target, not just
       the text. Same pattern as the desktop submenu rule above. */
    .site-header .submenu a {
        display: block;
        padding: 8px 0 8px 16px;
        font-size: 14px;
        font-weight: 400;
        text-transform: none;
        color: #414141;
        text-decoration: none;
    }
}

/* ---------------------------------------------------------
   Gyford utility classes
   - Project-scoped additions to the shared utility set.
     If these prove useful sitewide, promote to shared.css.
   --------------------------------------------------------- */
.border-radius-top-12 {
    border-radius: 12px 12px 0 0;
}

.border-radius-bottom-12 {
    border-radius: 0 0 12px 12px;
}

/* ---------------------------------------------------------
   Color overlay utility — drops a tinted layer over an
   element's background image. Apply to a block that has a
   `background-image` inline style and the overlay color tints
   the image while keeping the block's children visible above.
   --------------------------------------------------------- */
.overlay-deep-teal {
    position: relative;
}

.overlay-deep-teal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 63, 72, 0.93);
    z-index: 0;
    pointer-events: none;
}

.overlay-deep-teal > * {
    position: relative;
    z-index: 1;
}

/* Brand color utilities (gyford-specific) */
.text-gyford-ocean-blue {
    color: var(--gyford-ocean-blue) !important;
}

.text-gyford-soft-gray {
    color: var(--gyford-soft-gray) !important;
}

.text-gyford-pale-green {
    color: var(--gyford-pale-green) !important;
}

.text-gyford-white {
    color: var(--gyford-white) !important;
}

.text-gyford-forest-green {
    color: var(--gyford-forest-green) !important;
}

.text-gyford-deep-teal {
    color: var(--gyford-deep-teal) !important;
}

.text-gyford-cream {
    color: var(--gyford-cream) !important;
}

.text-gyford-pale-sage {
    color: var(--gyford-pale-sage) !important;
}

.text-gyford-mist-green {
    color: var(--gyford-mist-green) !important;
}

.text-gyford-light-sky {
    color: var(--gyford-light-sky) !important;
}

.text-gyford-stone-gray {
    color: var(--gyford-stone-gray) !important;
}

/* Hover text-color brand utilities */
.hover-text-gyford-ocean-blue:hover    { color: var(--gyford-ocean-blue) !important; }
.hover-text-gyford-deep-teal:hover     { color: var(--gyford-deep-teal) !important; }
.hover-text-gyford-forest-green:hover  { color: var(--gyford-forest-green) !important; }
.hover-text-gyford-pale-green:hover    { color: var(--gyford-pale-green) !important; }
.hover-text-gyford-white:hover         { color: var(--gyford-white) !important; }

/* These trigger off the parent card's hover state (so the whole-card
   hover affects nested text/icons), as well as direct element hover. */
.block--card-grid__item:hover .hover-text-gyford-ocean-blue   { color: var(--gyford-ocean-blue) !important; }
.block--card-grid__item:hover .hover-text-gyford-deep-teal    { color: var(--gyford-deep-teal) !important; }
.block--card-grid__item:hover .hover-text-gyford-forest-green { color: var(--gyford-forest-green) !important; }
.block--card-grid__item:hover .hover-text-gyford-pale-green   { color: var(--gyford-pale-green) !important; }
.block--card-grid__item:hover .hover-text-gyford-white        { color: var(--gyford-white) !important; }

/* Background-color brand utilities */
.background-gyford-ocean-blue {
    background-color: var(--gyford-ocean-blue) !important;
}

.background-gyford-cream {
    background-color: var(--gyford-cream) !important;
}

.background-gyford-deep-teal {
    background-color: var(--gyford-deep-teal) !important;
}

.background-gyford-pale-sage {
    background-color: var(--gyford-pale-sage) !important;
}

.background-gyford-mist-green {
    background-color: var(--gyford-mist-green) !important;
}


/* ---------------------------------------------------------
   Rich-text block typography
   - Site-wide defaults for rich-text content. Heading and
     paragraph children inherit color/alignment/size from the
     block; override per-instance via #anchor selectors or
     customCssClassesText if a section needs something different.
   --------------------------------------------------------- */
.block--rich-text,
.block--column-single {
    /* "16 Paragraph" body default — shared across rich text and column blocks.
       Alignment is intentionally not set so it can be driven from the
       CKEditor alignment toolbar per-paragraph.
       !important needed on font-size/line-height to defeat the inline
       `{% css %}` block in shared blockColumnSingle.twig which forces
       1.1rem / 1.6. */
    color: #000;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 22px !important;
}

/* Center images in rich-text and column content regardless of how CKEditor
   wraps them (figure tags, paragraph wrappers, inline styles, etc.) */
.block--rich-text img,
.block--column-single img {
    display: block;
    margin: 0 auto;
}

.block--rich-text h2 {
    /* "36 Large Headline ALL CAPS" */
    color: var(--gyford-ocean-blue);
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    margin: 0;
}

/* Opt rich-text headings out of their baked-in colors and let them inherit
   from a parent text-color utility. Apply the matching h{1,2,3}-inherit-color
   class to either Custom CSS Classes (outer .block--rich-text) or Custom CSS
   Classes - Text (inner wrapper) alongside the desired color utility — e.g.
   `text-gyford-white h2-inherit-color` for a section heading over a dark
   background. Generic / future-proof: works for any text-* color class.

   h1 has no baked-in color rule today, so `.h1-inherit-color` is a no-op
   currently — included for symmetry so future defaults are opt-out-able. */
.block--rich-text.h1-inherit-color h1,
.block--rich-text .h1-inherit-color h1 {
    color: inherit;
}

.block--rich-text.h2-inherit-color h2,
.block--rich-text .h2-inherit-color h2 {
    color: inherit;
}

/* h3 default lives on both .block--rich-text and .block--column-single
   (see rule above) — opt-out class handles both contexts. */
.block--rich-text.h3-inherit-color h3,
.block--rich-text .h3-inherit-color h3,
.block--column-single.h3-inherit-color h3,
.block--column-single .h3-inherit-color h3 {
    color: inherit;
}

/* "32 Sub Headline Bold" — H2 variant for rich-text blocks where the
   heading should be smaller, mixed-case, and black instead of the
   default 36px uppercase ocean-blue. The H2 inside a rich text can't be
   classed directly, so this scopes the override by applying the class
   to the block's wrapper (Custom CSS Classes or Custom CSS Classes -
   Text field). Applying it directly to a stand-alone <h2> also works. */
.font-subhead h2,
h2.font-subhead {
    color: #000;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-transform: none;
    margin: 0;
}

/* "20 Bold Black" — H2 variant for dense legal copy (privacy policy,
   terms, etc.) where section headings should be small, mixed-case, and
   black instead of the default 36px uppercase ocean-blue. Same scoping
   pattern as .font-subhead — apply to the rich-text block's Custom CSS
   Classes or Custom CSS Classes - Text field, or directly to a stand-
   alone <h2>. */
.privacy-policy h2,
h2.privacy-policy {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0;
}

/* H3 in the privacy policy — same as the gyford default 20/24/700 but
   black instead of ocean-blue. Specificity (0,3,0) wins over the default
   `.block--rich-text h3` (0,2,0) regardless of source order. Selectors
   handle both placements of the `privacy-policy` class — on the outer
   block wrapper (Custom CSS Classes) and on the inner text wrapper
   (Custom CSS Classes - Text). */
.block--rich-text.privacy-policy h3,
.block--rich-text .privacy-policy h3,
.block--column-single.privacy-policy h3,
.block--column-single .privacy-policy h3,
h3.privacy-policy {
    color: #000;
}

/* Tighten the gap between a privacy-policy H2 and the paragraph or list
   that immediately follows — kills the element's default 1em top margin
   so the body content sits flush under the heading. */
.privacy-policy h2 + p,
.privacy-policy h2 + ul,
.privacy-policy h2 + ol {
    margin-top: 0;
}

/* Inline links in the privacy policy body — black instead of the
   browser-default blue (and the visited purple). Underline stays. */
.privacy-policy a,
.privacy-policy a:visited,
.privacy-policy a:hover {
    color: #000;
}

/* ---------------------------------------------------------
   Photo Gallery page — page-level styles scoped by the
   `photo-gallery` body class.
   --------------------------------------------------------- */
body.photo-gallery .block--rich-text h2 {
    color: var(--gyford-deep-teal);
}

/* FAQ section H2 — overrides the page-level deep-teal default
   for the section anchored `faq`. */
#faq h2 {
    color: #000;
}

/* ---------------------------------------------------------
   Contact List — gyford brand colors on top of the neutral
   shared defaults. Card backgrounds stay #f3f3f3 (matches
   --gyford-soft-gray); name + secondary-link tint to ocean
   blue per the design.
   --------------------------------------------------------- */
.block--contact-list__name {
    color: var(--gyford-ocean-blue);
}

.block--contact-list__secondary {
    color: var(--gyford-ocean-blue);
}

/* Icons (globe / envelope / chevron) sit on their own line — color
   them independently of the surrounding row text so URLs/emails can
   stay dark while the glyph picks up the brand accent. */
.block--contact-list__icon {
    color: var(--gyford-ocean-blue);
}

/* Make image-grid cards uniform width so longer labels don't push
   their card wider than the others. Labels wrap inside the card. */
body.photo-gallery .block--image-grid__item {
    width: 240px;
    flex-shrink: 0;
    flex-grow: 0;
}

body.photo-gallery .block--image-grid__caption {
    white-space: normal;
}

/* Always horizontal scroll for gallery image-grids — keeps all cards
   on one row regardless of viewport width. */
body.photo-gallery .block--image-grid__wrapper {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   White hero banner — apply `.hero-white` to a block's
   customCssClasses to get H1/P in white centered, sized for
   a dark/colored hero background.
   --------------------------------------------------------- */
.hero-white h1 {
    color: var(--gyford-white);
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.hero-white p {
    color: var(--gyford-white);
    text-align: center;
}

.block--rich-text h3,
.block--column-single h3 {
    /* "20 Large Text Bold" */
    color: var(--gyford-ocean-blue);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

/* ---------------------------------------------------------
   Sustainability section — section-specific overrides.
   Scoped by anchor ids set on the blocks in /radmin.
   --------------------------------------------------------- */
#sustainability h2 {
    color: var(--gyford-deep-teal);
    /* Fluid: scales down on narrow screens so the long words don't clip out
       of the box, caps at 38px (unchanged on desktop). */
    font-size: clamp(28px, 6vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}

#sustainability-section h3 {
    color: var(--gyford-forest-green);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
}

#sustainability-section p {
    color: var(--gyford-deep-teal);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* About-us section — constrain inline icons to a fixed 68×68 so the
   titles below align across all three columns. */
#about-us-section .block--column-single img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    margin: 0 auto;
}

/* Image-grid hover zoom — slight scale on the product card image,
   clipped to the media wrapper. Border-radius matches the parent
   card's top-corner radius so the scaled image clip stays rounded. */
.block--image-grid__media {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.block--image-grid__media img {
    transition: transform 0.3s ease;
}

.block--image-grid__item:hover .block--image-grid__media img {
    transform: scale(1.1);
}

/* On mobile, the product-card grid scrolls horizontally instead of
   wrapping to new rows. Cards keep their natural width and overflow
   container scrolls. */
@media (max-width: 920px) {
    .block--image-grid__wrapper {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px; /* room for the card shadows */
        -webkit-overflow-scrolling: touch;
    }
    .block--image-grid__item {
        flex-shrink: 0;
    }
}

/* Override the shared line-divider color to match Figma's #E4E4E4
   (shared.css uses #ddd, which is 7 units darker). Shared loads after
   gyford CSS so !important is required to win the cascade. */
.block--column-multi.block--divider-line .column:not(:last-child) {
    border-right-color: #E4E4E4 !important;
}

/* ---------------------------------------------------------
   Blockquote — gyford default styling for quote callouts.
   Decorative quote marks render via pseudo-elements so the
   editor only types the quote text in CKE.
   --------------------------------------------------------- */
.block--column-single blockquote {
    color: var(--gyford-white);
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    margin: 0;
}

.block--column-single blockquote p::before,
.block--column-single blockquote p::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.block--column-single blockquote p::before {
    background-image: url('https://rowmark-ram.s3.amazonaws.com/gyford/images/homepage/our_story/Frame.svg');
    margin-right: 10px;
}

.block--column-single blockquote p::after {
    background-image: url('https://rowmark-ram.s3.amazonaws.com/gyford/images/homepage/our_story/Frame%201.svg');
    margin-left: 10px;
}

/* Attribution paragraph — the paragraph directly following the blockquote */
.block--column-single blockquote + p {
    color: var(--gyford-white);
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin: 16px 0 0;
}


/* ---------------------------------------------------------
   Card Grid block — gyford brand color overrides.
   Base layout/typography lives in shared.css.
   --------------------------------------------------------- */
.block--card-grid__media {
    background: var(--gyford-deep-teal);
}


/* ---------------------------------------------------------
   Site footer
   - Ocean blue background, white text.
   - 5 columns top-to-bottom:
       1) Brand column: Gyford logo + TRG logo, copyright at bottom
       2) Contact column
       3+) Nav columns (one per top-level navigationFooter entry)
       last) Badges column: Made-in-USA marks + legal links at bottom
   - Each column uses space-between so the bottom items
     (copyright / legal links) sit flush with the footer's bottom edge.
   --------------------------------------------------------- */
.site-footer__inner {
    background: var(--gyford-footer-bg);
    color: var(--gyford-white);
    padding: 69px 0 32px;
    /* Base footer body type — matches the "16 Paragraph" Figma style.
       Headings/copyright override below. */
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.site-footer__inner > .site-footer__main,
.site-footer__inner > .site-footer__legal {
    width: 83%;
    max-width: var(--gyford-max-width);
    margin-left: auto;
    margin-right: auto;
}

.site-footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.site-footer__col {
    flex: 0 0 auto; /* size to content; free space distributes via space-between */
    display: flex;
    flex-direction: column;
}

/* Bottom row — copyright (left) + legal links (right) */
.site-footer__legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 64px;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer__col .site-footer__heading {
    /* "20 Large Bold ALL CAPS" */
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 16px;
    color: var(--gyford-white);
}

/* Brand column */
.site-footer__brand-col {
    gap: 32px;
    align-items: flex-start;
}

.site-footer__logo img {
    max-width: 200px;
    height: auto;
    display: block;
}

.site-footer__trg img {
    max-width: 100px;
    height: auto;
    display: block;
}

.site-footer__logo-text {
    color: var(--gyford-white);
    font-size: 24px;
    font-weight: 700;
}

.site-footer__copyright {
    /* "14 Supporting Small Text" */
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

/* Contact column */
.site-footer__address {
    font-style: normal;
}

.site-footer__address p,
.site-footer__contact-line {
    margin: 0;
    /* Inherit 22px line-height from .site-footer__inner — matches Figma "16 Paragraph". */
}

.site-footer__contact-line {
    margin-top: 22px; /* one blank line gap, matching Figma */
}

.site-footer__contact a,
.site-footer__nav a,
.site-footer__legal-links a {
    color: var(--gyford-white);
    text-decoration: none;
}

.site-footer__contact a.site-footer__email {
    /* "16 Paragraph" underlined — line-height 20 per Figma.
       Selector specificity matches `.site-footer__contact a` so the
       text-decoration override wins. */
    line-height: 20px;
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-position: from-font;
}

.site-footer__contact a:hover,
.site-footer__nav a:hover,
.site-footer__legal-links a:hover {
    text-decoration: underline;
}

/* Nav columns */
.site-footer__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Badges + legal column */
.site-footer__badges-col {
    align-items: flex-end;
}

.site-footer__badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.site-footer__badge--text {
    max-width: 140px;
    height: auto;
    display: block;
}

.site-footer__badge--mark {
    max-width: 72px;
    height: auto;
    display: block;
}

.site-footer__legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 21px;
}

.site-footer__legal-links a {
    display: inline-flex;
    height: 22px;
    padding-bottom: 1px;
    justify-content: center;
    align-items: center;
}

.site-footer__legal-links li + li::before {
    content: '|';
    padding-right: 12px;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 920px) {
    .site-footer__inner {
        padding: 40px 0 24px;
    }
    .site-footer__inner > .site-footer__main {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .site-footer__main {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }
    .site-footer__col {
        width: 100%;
    }
    .site-footer__badges-col {
        align-items: flex-start;
    }
    .site-footer__legal-links {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------
   HubSpot form — gyford styling
   ---------------------------------------------------------
   Two layered variants, applied via the HubSpot Form block's
   Custom CSS Classes field:

   • `hubspot-form--styled`
       Inline form — rounded inputs, gyford ocean-blue button,
       hidden labels (placeholders carry the field names),
       inline Yes/No after checkbox questions, red validation
       errors. No card wrapper — sits flush on the page.

   • `hubspot-form--card`
       Adds a white rounded-card wrapper on top of the styled
       form (background, padding, shadow, fills column height,
       and centers contents vertically). Use when the form sits
       on a dark section background.

   Either class implies the styled rules; `--card` adds the
   wrapper. You only ever need to apply one of the two.

   Heads-up for editors: text fields without a configured
   HubSpot placeholder render as empty boxes since labels are
   hidden. Add placeholders inside the HubSpot form definition.
   --------------------------------------------------------- */

/* === Shared "styled" rules — apply to both --styled and --card === */

/* Hide the form's internal heading (e.g. "BECOME AN AUTHORIZED DISTRIBUTOR"
   baked into the HubSpot form definition). */
.block--hubspot-form.hubspot-form--styled fieldset.form-columns-0,
.block--hubspot-form.hubspot-form--styled .hbspt-register-header,
.block--hubspot-form.hubspot-form--card fieldset.form-columns-0,
.block--hubspot-form.hubspot-form--card .hbspt-register-header {
    display: none;
}

/* Hide labels for text / email / tel / url / number / select fields.
   Keep labels for checkbox + radio groups. */
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) > label,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) > label {
    display: none !important;
}

/* Inputs: stone-gray border (#6F7271), off-white background (#FAFAFA),
   black text. Rounded corners (8px) match the Figma. */
.block--hubspot-form.hubspot-form--styled .hs-form input[type=text],
.block--hubspot-form.hubspot-form--styled .hs-form input[type=email],
.block--hubspot-form.hubspot-form--styled .hs-form input[type=tel],
.block--hubspot-form.hubspot-form--styled .hs-form input[type=url],
.block--hubspot-form.hubspot-form--styled .hs-form input[type=number],
.block--hubspot-form.hubspot-form--styled .hs-form input[type=search],
.block--hubspot-form.hubspot-form--styled .hs-form select,
.block--hubspot-form.hubspot-form--card .hs-form input[type=text],
.block--hubspot-form.hubspot-form--card .hs-form input[type=email],
.block--hubspot-form.hubspot-form--card .hs-form input[type=tel],
.block--hubspot-form.hubspot-form--card .hs-form input[type=url],
.block--hubspot-form.hubspot-form--card .hs-form input[type=number],
.block--hubspot-form.hubspot-form--card .hs-form input[type=search],
.block--hubspot-form.hubspot-form--card .hs-form select {
    border: 1px solid #6F7271;
    border-radius: 8px;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    background: #FAFAFA;
    color: #000;
}

.block--hubspot-form.hubspot-form--styled .hs-form textarea,
.block--hubspot-form.hubspot-form--card .hs-form textarea {
    border: 1px solid #6F7271;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    background: #FAFAFA;
    color: #000;
    min-height: 120px;
}

/* Placeholder color — slightly muted but still legible. */
.block--hubspot-form.hubspot-form--styled .hs-form ::placeholder,
.block--hubspot-form.hubspot-form--card .hs-form ::placeholder {
    color: #6F7271;
    opacity: 1;
}

.block--hubspot-form.hubspot-form--styled .hs-form input:not([type=checkbox]):not([type=radio]):focus,
.block--hubspot-form.hubspot-form--styled .hs-form select:focus,
.block--hubspot-form.hubspot-form--styled .hs-form textarea:focus,
.block--hubspot-form.hubspot-form--card .hs-form input:not([type=checkbox]):not([type=radio]):focus,
.block--hubspot-form.hubspot-form--card .hs-form select:focus,
.block--hubspot-form.hubspot-form--card .hs-form textarea:focus {
    border-color: var(--gyford-ocean-blue);
    box-shadow: 0 0 0 2px rgba(42, 127, 153, 0.18);
    outline: none;
}

/* Vertical spacing between fields + fieldsets. */
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field {
    margin: 0 0 20px !important;
}
.block--hubspot-form.hubspot-form--styled .hs-form fieldset[class^=form-columns-],
.block--hubspot-form.hubspot-form--card .hs-form fieldset[class^=form-columns-] {
    margin: 0 0 20px !important;
}

/* Checkbox questions — label inline with the options. */
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-checkbox,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-checkbox > label,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-checkbox > label {
    margin: 0 !important;
    font-weight: 400;
    font-size: 14px;
}
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-checkbox .input,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-checkbox .input {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    display: inline-flex;
}
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-checkbox .inputs-list,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-checkbox .inputs-list {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
}
/* Radio options (e.g. "select your company industry") stay vertically
   stacked, with a 16px gap between them per Figma. */
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-radio .inputs-list,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-radio .inputs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-checkbox .inputs-list > li,
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-field.hs-fieldtype-radio .inputs-list > li,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-checkbox .inputs-list > li,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-field.hs-fieldtype-radio .inputs-list > li {
    margin: 0;
    display: inline-flex;
    align-items: center;
}
.block--hubspot-form.hubspot-form--styled .hs-form .hs-form-checkbox-display,
.block--hubspot-form.hubspot-form--card .hs-form .hs-form-checkbox-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Submit button — ocean-blue, uppercase, square corners.
   Overrides the global `input.hs-button.primary.large { height: 30px }`
   rule from shared.css. */
.block--hubspot-form.hubspot-form--styled input.hs-button.primary,
.block--hubspot-form.hubspot-form--styled input.hs-button.primary.large,
.block--hubspot-form.hubspot-form--card input.hs-button.primary,
.block--hubspot-form.hubspot-form--card input.hs-button.primary.large {
    background: var(--gyford-ocean-blue);
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    height: auto;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: background 0.22s;
}
.block--hubspot-form.hubspot-form--styled input.hs-button.primary:hover,
.block--hubspot-form.hubspot-form--card input.hs-button.primary:hover {
    background: #226880;
}

/* Validation error message under the offending input. */
.block--hubspot-form.hubspot-form--styled .hs-error-msg,
.block--hubspot-form.hubspot-form--styled .hs-error-msgs label,
.block--hubspot-form.hubspot-form--card .hs-error-msg,
.block--hubspot-form.hubspot-form--card .hs-error-msgs label {
    display: block;
    color: #e51520;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 400;
}

/* Newer HubSpot Forms (v4 markup) ship the reCAPTCHA badge inside
   `.hsfc-ReCaptchaV2` (with an unnamed wrapper div between the container
   and `.grecaptcha-badge`) and the submit row inside
   `.hsfc-NavigationRow__Buttons`. Center both — needs !important because
   the shared CSS has `.grecaptcha-badge { text-align: left !important }`. */
.block--hubspot-form.hubspot-form--styled .hsfc-ReCaptchaV2,
.block--hubspot-form.hubspot-form--styled .hsfc-ReCaptchaV2 > div,
.block--hubspot-form.hubspot-form--styled .hsfc-NavigationRow__Buttons,
.block--hubspot-form.hubspot-form--card .hsfc-ReCaptchaV2,
.block--hubspot-form.hubspot-form--card .hsfc-ReCaptchaV2 > div,
.block--hubspot-form.hubspot-form--card .hsfc-NavigationRow__Buttons {
    display: flex !important;
    justify-content: center !important;
}

/* The reCAPTCHA badge itself has an inline `width: 256px` — center it
   inside its (now-flex) parent + override the shared.css left-align. */
.block--hubspot-form.hubspot-form--styled .hsfc-ReCaptchaV2 .grecaptcha-badge,
.block--hubspot-form.hubspot-form--card .hsfc-ReCaptchaV2 .grecaptcha-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* === Card-only rules — wrapper, full-height fill, vertical centering === */

.block--hubspot-form.hubspot-form--card {
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* Fill the parent column's width AND height so the card matches the
       height of the column next to it. */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.block--hubspot-form.hubspot-form--card .hubspot-form__container,
.block--hubspot-form.hubspot-form--card form.hs-form {
    width: 100%;
    height: 100%;
}

/* Center the form's content vertically AND horizontally inside the
   (now-full-height) card. */
.block--hubspot-form.hubspot-form--card form.hs-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.block--hubspot-form.hubspot-form--card form.hs-form > fieldset,
.block--hubspot-form.hubspot-form--card form.hs-form > .hs-submit {
    width: 100%;
}

/* Center the submit button under the fields. */
.block--hubspot-form.hubspot-form--card .hs-submit .actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* HubSpot form opt-out modifiers — combine with `--styled` / `--card`
   to re-enable header/labels that the base rules hide for the Rowmark
   distributor portal pattern (placeholders carry field names). */
.block--hubspot-form.hubspot-form--styled.hubspot-form--show-header fieldset.form-columns-0,
.block--hubspot-form.hubspot-form--styled.hubspot-form--show-header .hbspt-register-header,
.block--hubspot-form.hubspot-form--card.hubspot-form--show-header fieldset.form-columns-0,
.block--hubspot-form.hubspot-form--card.hubspot-form--show-header .hbspt-register-header {
    display: block;
    text-align: center;
    margin: 0 0 24px;
    color: var(--gyford-ocean-blue);
    font-family: var(--gyford-font-family);
    /* `!important` beats HubSpot's inline `style="font-size:48px"` on the
       .hbspt-register-header span. Figma: 32px / 700. */
    font-size: 32px !important;
    font-weight: 700;
    line-height: 1.2;
}
/* Inner headings/paragraphs inherit (HubSpot wraps rich text in nested h1/h2/p). */
.block--hubspot-form.hubspot-form--styled.hubspot-form--show-header fieldset.form-columns-0 :where(h1, h2, h3, h4, p),
.block--hubspot-form.hubspot-form--card.hubspot-form--show-header fieldset.form-columns-0 :where(h1, h2, h3, h4, p) {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    margin: 0;
}

/* `!important` beats the base rule's `display: none !important`. */
.block--hubspot-form.hubspot-form--styled.hubspot-form--show-labels .hs-form .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) > label,
.block--hubspot-form.hubspot-form--card.hubspot-form--show-labels .hs-form .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) > label {
    display: block !important;
    margin: 0 0 6px;
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}
.block--hubspot-form.hubspot-form--styled.hubspot-form--show-labels .hs-form-required,
.block--hubspot-form.hubspot-form--card.hubspot-form--show-labels .hs-form-required {
    color: var(--gyford-ocean-blue);
    margin-left: 2px;
}

/* Stack the question above its options instead of inline. */
.block--hubspot-form.hubspot-form--styled.hubspot-form--checkbox-stacked .hs-form .hs-form-field.hs-fieldtype-checkbox,
.block--hubspot-form.hubspot-form--styled.hubspot-form--checkbox-stacked .hs-form .hs-form-field.hs-fieldtype-radio,
.block--hubspot-form.hubspot-form--card.hubspot-form--checkbox-stacked .hs-form .hs-form-field.hs-fieldtype-checkbox,
.block--hubspot-form.hubspot-form--card.hubspot-form--checkbox-stacked .hs-form .hs-form-field.hs-fieldtype-radio {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=text],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=email],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=tel],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=url],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=number],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=search],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form input[type=password],
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form select,
.block--hubspot-form.hubspot-form--styled.hubspot-form--inputs-square .hs-form textarea,
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=text],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=email],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=tel],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=url],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=number],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=search],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form input[type=password],
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form select,
.block--hubspot-form.hubspot-form--card.hubspot-form--inputs-square .hs-form textarea {
    border-radius: 0;
}

/* Full-width submit button — Figma's SIGN UP button spans the form. */
.block--hubspot-form.hubspot-form--styled.hubspot-form--submit-full input.hs-button.primary,
.block--hubspot-form.hubspot-form--styled.hubspot-form--submit-full input.hs-button.primary.large,
.block--hubspot-form.hubspot-form--card.hubspot-form--submit-full input.hs-button.primary,
.block--hubspot-form.hubspot-form--card.hubspot-form--submit-full input.hs-button.primary.large {
    width: 100%;
}

/* Hero dot pagination — gyford palette overrides per figma. Active dot
   is solid white with stone-gray border; inactive dot is 50% white with
   75% stone-gray border. Sized to 18px. */
/* Hero dots container — match Figma's 8px gap between the 18px dots.
   Shared default is 12px (suited to the 12px-dot baseline). */
#hero-banner .hero-dots {
    gap: 8px;
}

#hero-banner .hero-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.50);
    border: 0.75px solid rgba(111, 114, 113, 0.75);
}
#hero-banner .hero-dot.is-active {
    background: #FFFFFF;
    border: 0.75px solid #6F7271;
}
#hero-banner .hero-dot:hover {
    background: rgba(255, 255, 255, 0.80);
    border-color: #6F7271;
}

/* ---------------------------------------------------------
   Hero banner typography — scoped by anchor ID `hero-banner`
   ---------------------------------------------------------
   Apply by setting the Hero block's Anchor ID field to
   `hero-banner`. Inside, CKEditor's H1 / P / HR get the
   white-on-image hero treatment. For per-line color variation
   (e.g. last line in light-sky), wrap the inline text in a
   <span class="text-gyford-light-sky"> via CKEditor's source
   view, or split into separate H1s.
   --------------------------------------------------------- */
#hero-banner h1 {
    color: var(--gyford-white);
    font-size: 50px;
    font-weight: 700;
    line-height: 52px;
    margin: 0;
}

#hero-banner p {
    color: var(--gyford-white);
    font-size: 24px;
    font-weight: 700;
    /* Was 50px (~2.08× font-size) — created huge gaps when the body copy
       wrapped at tablet/desktop widths. 32px (~1.33×) reads naturally. */
    line-height: 32px;
    margin: 0;
}

/* Tablet + mobile typography scaling — keep the hero content fitting
   inside the slide at narrow viewports. Both H1 and P step down at each
   breakpoint so a 3-line headline + wrapped paragraph + buttons still
   fit without clipping the slide. */
@media (max-width: 768px) {
    #hero-banner h1 {
        font-size: 32px;
        line-height: 36px;
    }
    #hero-banner p {
        font-size: 16px;
        line-height: 24px;
    }
}
@media (max-width: 576px) {
    #hero-banner h1 {
        font-size: 22px;
        line-height: 26px;
    }
    #hero-banner p {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Slide-level typography variant — bumps H1 + P sizes within a slide.
   Apply `hero-text-larger` via the slide's "Text Container CSS — This
   Slide" field. Sized to the slide-3 Figma spec (85px H1 / 46px P, tight
   50px line-height). Bold words in the paragraph are tinted via inline
   <span class="text-gyford-light-sky"> and weight-boosted to 700 below;
   the surrounding paragraph drops to 400 (Figma's "not bold" weight). */
#hero-banner .hero-text-larger h1 {
    font-size: 85px;
    /* Safe line-height for standard desktops (1366–1920) where the H1 may
       wrap. The tight Figma 50px line-height applies only at ≥1920 below,
       where the H1 fits single-line and gets the dramatic display look. */
    line-height: 65px;
    /* Space the H1 from the preceding paragraph — line-height is still
       tighter than font-size, so without a margin-top it feels cramped. */
    margin-top: 24px;
}
#hero-banner .hero-text-larger p {
    font-size: 46px;
    font-weight: 400;
    line-height: 50px;
}
#hero-banner .hero-text-larger p .text-gyford-light-sky {
    font-weight: 700;
}
/* Tight Figma line-height for very wide screens (matches Jess's 2108px
   review viewport). At those widths the H1 fits on a single line, so the
   tight 50px doesn't cause line-overlap. */
@media (min-width: 1920px) {
    #hero-banner .hero-text-larger h1 { line-height: 50px; }
}
/* Tablet + mobile scaling — proportional step-downs from the 85/46 base
   with looser line-heights so wrapped text doesn't collide on narrow widths. */
/* Line-heights at smaller breakpoints are slightly larger than font-size
   (~1.05-1.1x) so the H1 doesn't collide with itself when it wraps.
   Desktop keeps the tight 50px line-height since it fits on a single line. */
@media (max-width: 1024px) {
    #hero-banner .hero-text-larger h1 { font-size: 70px; line-height: 74px; }
    #hero-banner .hero-text-larger p  { font-size: 38px; line-height: 44px; }
}
@media (max-width: 768px) {
    #hero-banner .hero-text-larger h1 { font-size: 52px; line-height: 56px; }
    #hero-banner .hero-text-larger p  { font-size: 28px; line-height: 34px; }
}
@media (max-width: 576px) {
    #hero-banner .hero-text-larger h1 { font-size: 36px; line-height: 40px; }
    #hero-banner .hero-text-larger p  { font-size: 18px; line-height: 22px; }
}

/* Shift the slide's text wrapper up without moving the slide's buttons.
   Apply via the slide's "Text Container CSS — This Slide" field. Uses
   transform so the button container's flow position is unaffected. */
#hero-banner .hero-text-up {
    transform: translateY(-24px);
}


/* ----- Light-bg slide variant (slides 2 + 4 in current hero) -----
   Apply `hero-slide--light` to a slide's "Slide CSS" field for the
   stone-gray-on-light treatment. Default H1 sized larger (matches the
   prominent display headings in the figma); P + body text drops to the
   36/40/300 stone-gray spec. Specific words can be tinted ocean-blue
   via the existing CKEditor `text-gyford-ocean-blue` style. */
#hero-banner .hero-slide.hero-slide--light h1 {
    color: var(--gyford-ocean-blue);
    font-size: 72px;
    font-weight: 700;
    line-height: 76px;
    text-transform: uppercase;
    margin: 0;
}
#hero-banner .hero-slide.hero-slide--light h2,
#hero-banner .hero-slide.hero-slide--light p {
    color: var(--gyford-stone-gray);
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0;
}
/* Laptop / small desktop — light slide scaling. Lg breakpoint (1024px)
   needs to come BEFORE the smaller breakpoints in source so md/sm can
   override it at narrower widths. */
@media (max-width: 1024px) {
    #hero-banner .hero-slide.hero-slide--light h1 {
        font-size: 60px;
        line-height: 64px;
    }
    #hero-banner .hero-slide.hero-slide--light h2,
    #hero-banner .hero-slide.hero-slide--light p {
        font-size: 28px;
        line-height: 32px;
    }
}
/* Tablet — light slide scaling */
@media (max-width: 768px) {
    #hero-banner .hero-slide.hero-slide--light h1 {
        font-size: 48px;
        line-height: 52px;
    }
    #hero-banner .hero-slide.hero-slide--light h2,
    #hero-banner .hero-slide.hero-slide--light p {
        font-size: 22px;
        line-height: 26px;
    }
}
/* Mobile — light slide scaling */
@media (max-width: 576px) {
    #hero-banner .hero-slide.hero-slide--light h1 {
        font-size: 32px;
        line-height: 36px;
    }
    #hero-banner .hero-slide.hero-slide--light h2,
    #hero-banner .hero-slide.hero-slide--light p {
        font-size: 16px;
        line-height: 22px;
    }
}

/* Divider variants — apply to a CKEditor-inserted <hr> via the Style
   dropdown ("Divider - …" entries) so each separator can pick a treatment
   independently. */
.divider-white-short {
    border: 0;
    border-top: 1px solid var(--gyford-light-sky);
    width: 120px;
    margin: 24px 0 16px;
}

/* Block - Login gyford modifier. Heading + submit sizing live in the
   per-element CSS fields (font-size-32, button-gyford-ocean-blue). */
.block--login--gyford .block--login__heading {
    color: var(--gyford-ocean-blue);
}
.block--login--gyford .block--login__input {
    border: 1px solid var(--gyford-stone-gray);
    background: #FAFAFA;
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.block--login--gyford .block--login__input::placeholder {
    color: #6F7271;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
}
.block--login--gyford .block--login__input:focus {
    border-color: var(--gyford-ocean-blue);
    box-shadow: 0 0 0 2px rgba(42, 127, 153, 0.15);
}

.block--login--gyford .block--login__toggle {
    color: var(--gyford-stone-gray);
}
.block--login--gyford .block--login__toggle:hover {
    color: var(--gyford-ocean-blue);
}

/* Forgot Password split out so it can be 700 weight while the other
   form-text rows stay 400. */
.block--login--gyford .block--login__remember,
.block--login--gyford .block--login__signup {
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.block--login--gyford .block--login__forgot {
    color: var(--gyford-ocean-blue);
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}
.block--login--gyford .block--login__signup a {
    color: var(--gyford-ocean-blue);
}
.block--login--gyford .block--login__remember input[type="checkbox"] {
    accent-color: var(--gyford-ocean-blue);
}

.block--login--gyford .block--login__signed-in {
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.block--login--gyford .block--login__signed-in strong {
    font-weight: 700;
}
.block--login--gyford .block--login__signed-in a {
    color: var(--gyford-ocean-blue);
    font-weight: 700;
}

/* CAD Drawings listing. The tabs row uses a wider max-width than the
   toolbar/list so all 8 filter buttons can sit on one line. */
.cad-drawings {
    padding: 32px 0 64px;
    font-family: var(--gyford-font-family);
    color: #000;
}
.cad-drawings__toolbar,
.cad-drawings__list {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
.cad-drawings__tabs-wrapper {
    max-width: 1600px;
    margin: 0 auto 32px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
.cad-drawings__toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto 32px;
    flex-wrap: wrap;
}
.cad-drawings__search {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cad-drawings__search-field {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cad-drawings__search-input {
    width: 400px;
    max-width: 100%;
    height: 39px;
    padding: 9px 36px 9px 16px; /* 9px right + 21px icon + 6px gap ≈ 36px */
    border: 1px solid var(--gyford-stone-gray);
    border-radius: 0;
    background: #FAFAFA;
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.cad-drawings__search-input::placeholder {
    color: #6F7271;
}
.cad-drawings__search-input:focus {
    border-color: var(--gyford-ocean-blue);
}
.cad-drawings__search-icon {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.cad-drawings__search-submit {
    border: 0;
    font-size: 14px;
    line-height: 16px;
    min-height: 39px;
}

/* === Profile button + dropdown ============================== */
.cad-drawings__profile {
    position: relative;
    flex-shrink: 0;
}
.cad-drawings__profile-btn {
    width: 39px;
    height: 39px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
    line-height: 0;
}
.cad-drawings__profile-btn:hover {
    opacity: 0.9;
}
/* width/height 100% (vs the SVG's native attrs) — removes the
   inline-baseline gap that misaligns the icon next to the input. */
.cad-drawings__profile-btn svg {
    display: block;
    width: 100%;
    height: 100%;
}
.cad-drawings__profile-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: #FFFFFF;
    border: 1px solid var(--gyford-stone-gray);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 50;
    display: flex;
    flex-direction: column;
}
.cad-drawings__profile-menu[hidden] {
    display: none;
}
.cad-drawings__profile-link {
    padding: 10px 16px;
    color: #000;
    text-decoration: none;
    font-family: var(--gyford-font-family);
    font-size: 14px;
    border-bottom: 1px solid #E8E9EB;
}
.cad-drawings__profile-link:last-child {
    border-bottom: 0;
}
.cad-drawings__profile-link:hover {
    background: #F7F8FA;
    color: var(--gyford-ocean-blue);
}

/* Mobile filter trigger — hidden on desktop, shown ≤768px. */
.cad-drawings__tabs-trigger {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: #F5F5F5;
    border: 1px solid #F3F3F3;
    color: var(--gyford-ocean-blue);
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
}
.cad-drawings__tabs-trigger-icon {
    flex-shrink: 0;
}
.cad-drawings__tabs-trigger-icon[hidden] {
    display: none;
}
.cad-drawings__tabs-trigger-label {
    flex: 1;
    text-align: left;
}

.cad-drawings__tabs {
    display: flex;
    flex-wrap: wrap;
}
/* Inactive tabs reserve a 5px transparent top border so the row
   height doesn't jump when switching the active tab. */
.cad-drawings__tab {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 12px 8px;
    background: #F5F5F5;
    border: 1px solid #F3F3F3;
    border-top: 5px solid transparent;
    color: #414141;
    text-align: center;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
/* Laptop range — shrink + allow wrap so the long EZ label fits. */
@media (min-width: 769px) and (max-width: 1366px) {
    .cad-drawings__tab {
        padding: 10px 6px;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
        white-space: normal;
    }
}
.cad-drawings__tab:hover {
    color: var(--gyford-ocean-blue);
}
.cad-drawings__tab.is-active {
    border-top-color: var(--gyford-ocean-blue);
    color: var(--gyford-ocean-blue);
}

.cad-drawings__list {
    display: flex;
    flex-direction: column;
}
.cad-drawings__row {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 0;
    border-bottom: 1px solid #E8E9EB;
}
.cad-drawings__row:last-child {
    border-bottom: 0;
}
/* Re-asserts hide — the `display: flex` above beats the UA `[hidden]`
   rule on source order, so `row.hidden = true` had no effect. */
.cad-drawings__row[hidden] {
    display: none;
}
.cad-drawings__thumb {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border: 1px solid #D0D5DA;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.cad-drawings__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.cad-drawings__title {
    flex: 1;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: #414141;
}
.cad-drawings__actions {
    flex-shrink: 0;
    display: flex;
    gap: 28px;
}
.cad-drawings__link {
    color: var(--gyford-ocean-blue);
    text-decoration: underline;
    text-underline-offset: auto;
    text-decoration-thickness: auto;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}
.cad-drawings__link:hover {
    color: var(--gyford-deep-teal);
}

.cad-drawings__empty {
    text-align: center;
    padding: 64px 0;
    color: var(--gyford-stone-gray);
    font-family: var(--gyford-font-family);
    font-size: 16px;
}
.cad-drawings__pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
/* Currently unused (pagination dropped) — kept for re-add later. */
.cad-drawings__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 28px 8px 28px;
    min-height: 39px;
    background: var(--gyford-ocean-blue);
    color: #fff;
    border: 0;
    text-decoration: none;
    font-family: var(--gyford-font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    transition: background 0.22s;
}
.cad-drawings__load-more:hover {
    background: #226880;
    color: #fff;
}

@media (max-width: 768px) {
    .cad-drawings__toolbar,
    .cad-drawings__list {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Input on row 1 (full width), SEARCH + profile on row 2.
       Profile is inside the form so it grid-pairs with submit. */
    .cad-drawings__search {
        display: grid;
        grid-template-columns: 1fr 39px;
        grid-template-areas:
            "field field"
            "submit profile";
        gap: 10px;
        width: 100%;
    }
    .cad-drawings__search-field {
        grid-area: field;
        width: 100%;
    }
    .cad-drawings__search-input {
        width: 100%;
    }
    .cad-drawings__search-submit {
        grid-area: submit;
        width: 100%;
    }
    .cad-drawings__profile {
        grid-area: profile;
    }

    /* Tabs collapse into the trigger; wrapper goes edge-to-edge so
       the gray trigger bar spans the viewport. */
    .cad-drawings__tabs-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .cad-drawings__tabs-trigger {
        display: flex;
        padding: 14px 24px;
    }
    .cad-drawings__tabs {
        display: none;
        flex-direction: column;
    }
    .cad-drawings__tabs.is-open {
        display: flex;
        margin: 4px 16px 0;
        background: #FFFFFF;
        border: 1px solid #F3F3F3;
    }
    .cad-drawings__tab {
        flex: 0 0 auto;
        background: #FFFFFF;
        border: 0;
        border-top: 1px solid #F3F3F3;
        padding: 14px 24px;
        text-align: left;
        font-size: 14px;
        color: #414141;
        white-space: normal;
    }
    .cad-drawings__tab:first-child {
        border-top: 0;
    }
    .cad-drawings__tab.is-active {
        border-top: 1px solid #F3F3F3;
        background: #F5F5F5;
        color: var(--gyford-ocean-blue);
    }
    .cad-drawings__tab:first-child.is-active {
        border-top: 0;
    }

    /* Product rows: thumbnail + title side by side, links wrap below. */
    .cad-drawings__row {
        display: grid;
        grid-template-columns: 100px 1fr;
        grid-template-areas:
            "thumb title"
            "actions actions";
        align-items: start;
        gap: 12px 16px;
    }
    .cad-drawings__thumb {
        grid-area: thumb;
        width: 100px;
        height: 100px;
    }
    .cad-drawings__title {
        grid-area: title;
        align-self: center;
    }
    .cad-drawings__actions {
        grid-area: actions;
        flex-wrap: wrap;
        gap: 24px;
    }
}

/* My Profile — full-bleed gray heading bar over a 720px form. */
.my-profile {
    font-family: var(--gyford-font-family);
    color: #000;
    padding-bottom: 64px;
}
.my-profile__head {
    background: #F5F5F5;
    margin-bottom: 32px;
}
.my-profile__head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}
.my-profile__heading {
    color: var(--gyford-ocean-blue);
    font-family: var(--gyford-font-family);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}
.my-profile__icon {
    flex-shrink: 0;
    line-height: 0;
}
.my-profile__icon svg {
    display: block;
}

.my-profile__form {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}
.my-profile__row {
    display: flex;
    gap: 16px;
}
.my-profile__row > .my-profile__field {
    flex: 1;
    min-width: 0;
}

.my-profile__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.my-profile__label {
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.my-profile__required {
    color: var(--gyford-ocean-blue);
    margin-left: 2px;
}

.my-profile__input {
    width: 100%;
    height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--gyford-stone-gray);
    border-radius: 0;
    background: #FAFAFA;
    color: #000;
    font-family: var(--gyford-font-family);
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
}
.my-profile__input::placeholder {
    color: #6F7271;
}
.my-profile__input:focus {
    border-color: var(--gyford-ocean-blue);
}
.my-profile__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%236F7271' stroke-width='2' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.my-profile__hint {
    margin: 4px 0 0;
    color: var(--gyford-stone-gray);
    font-family: var(--gyford-font-family);
    font-style: italic;
    font-size: 13px;
    line-height: 1.4;
}

.my-profile__password {
    position: relative;
}
.my-profile__input--password {
    padding-right: 48px;
}
.my-profile__toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--gyford-stone-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.my-profile__toggle:hover {
    color: var(--gyford-ocean-blue);
}
.my-profile__eye[hidden] {
    display: none;
}

.my-profile__mismatch,
.my-profile__errors {
    margin: 8px 0 0;
    padding: 8px 12px;
    background: #fff3cd;
    border: 1px solid #f5d585;
    border-radius: 4px;
    color: #6a4f00;
    font-size: 14px;
    list-style: none;
}
.my-profile__errors li {
    margin: 0;
}
.my-profile__notice {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #e8f5e9;
    border: 1px solid #b6e0bb;
    border-radius: 4px;
    color: #1e7e34;
}

.my-profile__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
}
/* Overrides `.button-gyford-ocean-blue` hero sizing to a more
   compact form-action button (~36px tall). Fixed width keeps SAVE
   and CANCEL matched regardless of text length. */
.my-profile__submit,
.my-profile__cancel {
    padding: 8px 22px;
    width: 110px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 18px;
    min-height: auto;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width: 576px) {
    .my-profile {
        padding-bottom: 48px;
    }
    .my-profile__head-inner {
        padding: 12px 16px;
    }
    .my-profile__form {
        padding: 0 12px;
    }
    .my-profile__row {
        flex-direction: column;
    }
    .my-profile__actions {
        flex-direction: column;
    }
    .my-profile__submit,
    .my-profile__cancel {
        width: 100%;
    }
}