/* =============================================================================
   v3-pages.css
   Styles for About Us v3 and Join Our Team v3 page templates.
   All classes are prefixed (abt-v3-* / jot-v3-*) to avoid conflicts.
   Relies on existing .center-container and .btn from the parent theme.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Custom Properties
   --------------------------------------------------------------------------- */
:root {
    --v3-navy:        #030355;   /* primary dark navy — hero, footer, buttons */
    --v3-navy-mid:    #083276;   /* medium navy — gradient partner, accents */
    --v3-navy-alt:    #020355;   /* near-identical to --v3-navy; used in gradients */
    --v3-gold:        #e8a800;
    --v3-white:       #ffffff;
    --v3-off-white:   #fefefe;
    --v3-gallery-bg:  #D9D9D9;
    --v3-card-icon:   #494949;
    --v3-card-desc:   #535353;
    --v3-light-bg:    #f5f7fa;
    --v3-text:        #000000;

    /* gradient used on info/apply cards and some section bgs */
    --v3-card-gradient: linear-gradient(216deg, #083276 2%, #020355 50%);
    --v3-section-gradient: linear-gradient(216deg, #083276 24%, #020355 100%);

    --v3-font-heading: 'Outfit', sans-serif;
    --v3-font-body:    'Outfit', sans-serif; /* Figma uses Outfit throughout */

    --v3-section-pad:       80px 0;
    --v3-section-pad-sm:    66px 0;
    --v3-radius:            10px;
    --v3-radius-lg:         15px;
    --v3-transition:        0.2s ease;
}


/* =============================================================================
   ABOUT US v3  (abt-v3-*)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hero + Map — single continuous gradient section
   Background: vertical gradient #020355 → #083276
   --------------------------------------------------------------------------- */
.abt-v3-hero-map-shell {
    background: linear-gradient(180deg, #020355 0%, #083276 100%);
}

.abt-v3-hero {
    background: transparent;
    padding: 180px 0 80px;
    color: var(--v3-white);
}

/* Two-column row: left = text, right = image + stats */
.abt-v3-hero__inner {
    display: flex;
    align-items: flex-start;
    gap: 96px;
}

/* Left column */
.abt-v3-hero__content {
    flex: 0 0 489px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.abt-v3-hero__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 61px;
    color: var(--v3-white);
    margin: 0;
}

.abt-v3-hero__body {
    font-family: var(--v3-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--v3-white);
    margin: 0;
}

.abt-v3-hero__body a {
    color: inherit;
    text-decoration: underline;
}

/* Right column: image on top, stats row below */
.abt-v3-hero__right {
    flex: 0 0 522px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.abt-v3-hero__image img {
    width: 100%;
    height: 294px;
    object-fit: cover;
    display: block;
    border-radius: var(--v3-radius);
}

.abt-v3-hero__image--placeholder {
    width: 100%;
    height: 294px;
    background: rgba(255,255,255,0.10);
    border-radius: var(--v3-radius);
}

/* Stats row below image */
.abt-v3-hero__stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.abt-v3-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.abt-v3-stat__number {
    font-family: var(--v3-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--v3-white);
    line-height: 1.2;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.abt-v3-stat__label {
    font-family: var(--v3-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.0;
    color: rgba(178, 178, 178, 0.72);
}


/* ---------------------------------------------------------------------------
   World Class Service / Map
   Continues the shared shell gradient with no break
   --------------------------------------------------------------------------- */
.abt-v3-map {
    background: transparent;
    padding: 80px 0 100px;
    color: var(--v3-white);
}

.abt-v3-map__inner {
    display: flex;
    align-items: center;
    gap: 96px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.abt-v3-map__visual {
    flex: 0 0 466px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abt-v3-map__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--v3-radius);
}

/* Placeholder map tile */
.abt-v3-map__placeholder {
    height: 100%;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}

.abt-v3-map__placeholder-link {
    display: block;
    text-decoration: none;
}

.abt-v3-map__placeholder-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--v3-radius);
    transition: transform 0.25s ease;
    transform-origin: center;
}

.abt-v3-map__placeholder-link + .abt-v3-map__placeholder-img {
    margin-top: -48px;
    width: 380px;
    margin-left: -60px;
}

.abt-v3-map__placeholder-img:hover {
    transform: translateY(-4px) scale(1.03);
}

.abt-v3-map__tabs {
    display: none;
    gap: 8px;
}

.abt-v3-map__tab {
    font-family: var(--v3-font-body);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    border: 2px solid rgba(255,255,255,0.60);
    border-radius: 4px;
    background: transparent;
    color: var(--v3-white);
    cursor: pointer;
    transition: background var(--v3-transition), border-color var(--v3-transition);
}

.abt-v3-map__tab:hover,
.abt-v3-map__tab--active {
    background: rgba(255,255,255,0.18);
    border-color: var(--v3-white);
}

/* Content column */
.abt-v3-map__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.abt-v3-map__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 61px;
    color: var(--v3-white);
    margin: 0;
}

.abt-v3-map__body {
    font-family: var(--v3-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--v3-white);
    margin: 0;
}

.abt-v3-map__body strong {
    font-weight: 700;
}

/* Remove old select-label — now embedded in body copy */
.abt-v3-map__select-label {
    display: none;
}

.abt-v3-map__services {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.abt-v3-map__services--hidden {
    display: none;
}

.abt-v3-map__service-link {
    font-family: var(--v3-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--v3-white);
    border: 2px solid rgba(255,255,255,0.60);
    border-radius: var(--v3-radius);
    padding: 10px 24px;
    text-decoration: none;
    transition: background var(--v3-transition), border-color var(--v3-transition);
    display: inline-block;
}

.abt-v3-map__service-link:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--v3-white);
    color: var(--v3-white);
}


/* ---------------------------------------------------------------------------
   Our Values — white bg, two-column
   Left: title (60px) + intro body
   Right: 4 stacked values (no grid, no dark bg)
   --------------------------------------------------------------------------- */
.abt-v3-values {
    background: var(--v3-white);
    padding: 64px 0;
    color: var(--v3-text);
}

.abt-v3-values__inner {
    display: flex;
    align-items: flex-start;
    gap: 140px;
}

.abt-v3-values__intro {
    flex: 0 0 490px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.abt-v3-values__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 61px;
    color: var(--v3-navy);
    margin: 0;
}

.abt-v3-values__body {
    font-family: var(--v3-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--v3-text);
}

.abt-v3-values__body strong {
    font-weight: 700;
}

/* Right column: stacked list, no grid */
.abt-v3-values__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.abt-v3-value {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
}

.abt-v3-value__name {
    font-family: var(--v3-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
    color: var(--v3-navy);
    margin: 0;
}

.abt-v3-value__desc {
    font-family: var(--v3-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #434343;
    margin: 0;
}


/* ---------------------------------------------------------------------------
   Inc 5000 — dark navy bg, horizontal layout, large mixed-weight text
   --------------------------------------------------------------------------- */
.abt-v3-inc5000 {
    background-color: var(--v3-navy);
    padding: 0;
    min-height: 284px;
    display: flex;
    align-items: center;
}

.abt-v3-inc5000__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

.abt-v3-inc5000__badge {
    width: 161px;
    height: 161px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.abt-v3-inc5000__badge-placeholder {
    width: 161px;
    height: 161px;
    background: rgba(255,255,255,0.08);
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: var(--v3-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--v3-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

/* "Awarded as one of Inc 5000's" = weight 500; "Fastest Growing Companies" = weight 800 */
.abt-v3-inc5000__text {
    font-family: var(--v3-font-heading);
    font-size: 43px;
    font-weight: 500;
    line-height: 1.0;
    color: var(--v3-white);
    margin: 0;
}

.abt-v3-inc5000__text strong {
    font-weight: 800;
    display: block;
}


/* ---------------------------------------------------------------------------
   Driven by People
   Background image + gradient overlay + frosted glass panel
   Dark text inside panel (title = navy, body = black)
   --------------------------------------------------------------------------- */
.abt-v3-driven {
    position: relative;
    background-color: var(--v3-navy-mid);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 51px 0;
    min-height: 513px;
    display: flex;
    align-items: center;
}

/* Gradient overlay — matches Figma: light right → navy left */
.abt-v3-driven__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(265deg, rgba(233, 230, 230, 0.60) 0%, rgba(8, 50, 118, 0.70) 94%);
    z-index: 0;
}

.abt-v3-driven__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Frosted glass panel */
.abt-v3-driven__panel {
    background: rgba(255, 255, 255, 0.67);
    border-radius: var(--v3-radius-lg);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 1246px;
    margin: 0 auto;
}

/* Two-column row inside panel: title left, body right */
.abt-v3-driven__panel-content {
    display: flex;
    align-items: flex-start;
    gap: 31px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.abt-v3-driven__content {
    flex: 0 0 365px;
}

.abt-v3-driven__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 61px;
    color: var(--v3-navy);
    margin: 0;
}

.abt-v3-driven__body {
    flex: 1;
    font-family: var(--v3-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--v3-text);
    margin: 0;
    padding-top: 6px;
}

/* "Join Our Team" button — navy pill */
.abt-v3-driven__cta.btn {
    background-color: var(--v3-navy-alt);
    color: var(--v3-white);
    border: none;
    border-bottom: none;
    font-family: var(--v3-font-heading);
    font-size: 24.62px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10.77px;
    padding: 22px 26px;
    min-width: 261px;
    height: 62px;
    margin-top: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: none;
    transition: background var(--v3-transition), color var(--v3-transition);
}

.abt-v3-driven__cta.btn::after {
    display: none;
}

.abt-v3-driven__cta.btn:hover {
    background-color: var(--v3-navy-mid);
    color: var(--v3-white);
}


/* =============================================================================
   JOIN OUR TEAM v3  (jot-v3-*)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hero — solid dark navy, centered, compact
   --------------------------------------------------------------------------- */
.jot-v3-hero {
    background-color: var(--v3-navy);
    min-height: 320px;
    padding: 150px 0 32px;
    color: var(--v3-white);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* overlay only fires when a background image is set inline */
.jot-v3-hero__overlay {
    display: none; /* hidden unless bg-image is present */
}

.jot-v3-hero[style*="background-image"] .jot-v3-hero__overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 85, 0.75);
    z-index: 0;
}

.jot-v3-hero[style*="background-image"] .jot-v3-hero__inner {
    position: relative;
    z-index: 1;
}

.jot-v3-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.jot-v3-hero__title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 18px;
}

.jot-v3-hero__badge {
    width: 158px;
    max-width: 26vw;
    height: auto;
    flex: 0 0 auto;
}

.jot-v3-hero__title {
    font-family: var(--v3-font-heading);
    font-size: 43px;
    font-weight: 500;           /* matches Figma weight-500 for most of title */
    line-height: 1.0;
    color: var(--v3-white);
    margin: 0;
}

/* Strong text inside title gets weight-800 per Figma */
.jot-v3-hero__title strong {
    font-weight: 800;
    display: block;
}

.jot-v3-hero__body {
    font-family: var(--v3-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.jot-v3-hero__body p {
    margin: 0 0 12px;
}

.jot-v3-hero__body p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   Grow With Alliant
   White bg, title left + body right at top, full-width image below
   --------------------------------------------------------------------------- */
.jot-v3-grow {
    background-color: var(--v3-white);
    padding: 99px 0 80px;
}

.jot-v3-grow__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Top row: title left, body right */
.jot-v3-grow__content {
    display: flex;
    align-items: flex-start;
    gap: 200px;
}

.jot-v3-grow__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 61px;
    color: var(--v3-navy);
    margin: 0;
    flex: 0 0 489px;
}

.jot-v3-grow__body {
    font-family: var(--v3-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--v3-navy-mid);
    flex: 1;
    padding-top: 8px;
}

.jot-v3-grow__body p {
    margin: 0 0 16px;
}

.jot-v3-grow__body p:last-child {
    margin-bottom: 0;
}

/* Full-width image below */
.jot-v3-grow__image {
    width: 100%;
}

.jot-v3-grow__image img {
    width: 100%;
    height: 624px;
    object-fit: cover;
    display: block;
    border-radius: var(--v3-radius-lg);
}

.jot-v3-grow__image--placeholder {
    width: 100%;
    height: 624px;
    background: var(--v3-gallery-bg);
    border-radius: var(--v3-radius-lg);
}


/* ---------------------------------------------------------------------------
   Perks and Benefits
   Gradient bg, 3-column × 2-row white cards
   --------------------------------------------------------------------------- */
.jot-v3-perks {
    background: var(--v3-section-gradient);
    padding: 75px 0 85px;
    color: var(--v3-white);
}

.jot-v3-perks__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 61px;
    color: var(--v3-white);
    text-align: center;
    margin: 0 0 80px;
}

.jot-v3-perks__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* White card — left-aligned text, icon top-left */
.jot-v3-perk {
    background: var(--v3-white);
    border-radius: var(--v3-radius);
    outline: 1px rgba(238, 238, 238, 0.27) solid;
    padding: 31px 32px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 203px;
}

.jot-v3-perk__icon {
    color: var(--v3-card-icon);
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
}

.jot-v3-perk__icon svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.jot-v3-perk__name {
    font-family: var(--v3-font-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.0;
    color: var(--v3-text);
    margin: 0;
}

.jot-v3-perk__desc {
    font-family: var(--v3-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--v3-card-desc);
    margin: 0;
}


/* ---------------------------------------------------------------------------
   Our People Are  —  white bg, gradient info cards (3-up)
   --------------------------------------------------------------------------- */
.jot-v3-people {
    background-color: var(--v3-white);
    padding: 112px 0 80px;
}

.jot-v3-people__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* Each column rendered as a gradient card */
.jot-v3-people__column {
    background: var(--v3-card-gradient);
    border-radius: var(--v3-radius-lg);
    padding: 45px 32px;
    min-height: 321px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.jot-v3-people__title {
    font-family: var(--v3-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.0;
    color: var(--v3-white);
    margin: 0;
}

.jot-v3-people__subtitle {
    font-family: var(--v3-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.0;
    color: var(--v3-white);
    margin: 0;
}

.jot-v3-people__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.jot-v3-people__list li {
    font-family: var(--v3-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--v3-white);
}

/* Apply Now button row — centered below the 3 cards */
.jot-v3-people__apply {
    text-align: center;
    margin-top: 36px;
}

.jot-v3-people__apply-btn.btn {
    background-color: var(--v3-navy);
    color: var(--v3-white);
    font-family: var(--v3-font-heading);
    font-size: 24.62px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10.77px;
    padding: 22px 26px;
    min-width: 261px;
    height: 62px;
    margin-top: 0;
    border: none;
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: background var(--v3-transition), color var(--v3-transition);
}

.jot-v3-people__apply-btn.btn::after {
    display: none;
}

.jot-v3-people__apply-btn.btn:hover {
    background-color: var(--v3-navy-mid);
    color: var(--v3-white);
}

/* Email link inside card */
.jot-v3-people__email {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
}


/* ---------------------------------------------------------------------------
   Photo Gallery + Video
   Gray bg, asymmetric masonry layout
   --------------------------------------------------------------------------- */
.jot-v3-gallery {
    background-color: var(--v3-gallery-bg);
    padding: 66px 0;
}

/* Masonry grid: left narrow column + right wide column */
.jot-v3-gallery__grid {
    display: flex;
    gap: 12px;
    margin-bottom: 44px;
}

.jot-v3-gallery__grid--placeholder {
    align-items: stretch;
}

/* Left column — one-third width, stacks 3 images */
.jot-v3-gallery__col-left {
    flex: 0 0 calc(33.333% - 8px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Right column — two-thirds width */
.jot-v3-gallery__col-right {
    flex: 0 0 calc(66.667% - 4px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jot-v3-gallery__col-right-bottom {
    display: flex;
    gap: 12px;
}

.jot-v3-gallery__item {
    border-radius: var(--v3-radius-lg);
    overflow: hidden;
    display: block;
}

.jot-v3-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.jot-v3-gallery__item:hover img {
    transform: scale(1.03);
}

/* Left column image heights (matching Figma proportions) */
.jot-v3-gallery__col-left .jot-v3-gallery__item:nth-child(1) { height: 273px; }
.jot-v3-gallery__col-left .jot-v3-gallery__item:nth-child(2) { height: 402px; }
.jot-v3-gallery__col-left .jot-v3-gallery__item:nth-child(3) { height: 195px; }

/* Right column image heights */
.jot-v3-gallery__col-right > .jot-v3-gallery__item { height: 438px; }
.jot-v3-gallery__col-right-bottom .jot-v3-gallery__item { flex: 1; height: 444px; }

/* Placeholder tiles */
.jot-v3-gallery__item--placeholder {
    background: rgba(0, 0, 0, 0.08);
    border: 2px dashed rgba(0, 0, 0, 0.12);
}

.jot-v3-gallery__item--linked {
    text-decoration: none;
}

.jot-v3-gallery__placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: center;
    display: block;
    transition: none;
}

.jot-v3-gallery__item--linked:hover .jot-v3-gallery__placeholder-img {
    transform: none;
}

/* Placeholder gallery still uses the same desktop 1/3 + 2/3 structure */
.jot-v3-gallery__grid.jot-v3-gallery__grid--placeholder {
    display: flex;
}

.jot-v3-gallery__grid.jot-v3-gallery__grid--placeholder .jot-v3-gallery__col-left .jot-v3-gallery__item {
    height: 380px;
}

.jot-v3-gallery__grid.jot-v3-gallery__grid--placeholder .jot-v3-gallery__col-right > .jot-v3-gallery__item,
.jot-v3-gallery__grid.jot-v3-gallery__grid--placeholder .jot-v3-gallery__col-right-bottom {
    height: calc((1164px - 12px) / 2);
}

.jot-v3-gallery__grid.jot-v3-gallery__grid--placeholder .jot-v3-gallery__col-right-bottom .jot-v3-gallery__item {
    height: 100%;
}

/* YouTube embed */
.jot-v3-gallery__video {
    margin-bottom: 44px;
}

.jot-v3-gallery__video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--v3-radius-lg);
    background: var(--v3-navy);
}

.jot-v3-gallery__video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--v3-radius-lg);
}

/* Instagram CTA — matches "Visit our Instagram" button in Figma */
.jot-v3-gallery__instagram {
    text-align: center;
}

.jot-v3-gallery__ig-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--v3-font-heading);
    font-size: 24.62px;
    font-weight: 700;
    color: var(--v3-white);
    background: var(--v3-navy);
    border-radius: 10.77px;
    padding: 22px 26px;
    text-decoration: none;
    min-width: 261px;
    height: 62px;
    box-sizing: border-box;
    transition: background var(--v3-transition);
}

.jot-v3-gallery__ig-link:hover {
    background: var(--v3-navy-mid);
    color: var(--v3-white);
}

.jot-v3-gallery__ig-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}


/* ---------------------------------------------------------------------------
   Job Openings CTA — dark navy, centered
   --------------------------------------------------------------------------- */
.jot-v3-cta {
    background-color: var(--v3-navy);
    padding: 70px 0 85px;
    text-align: center;
    color: var(--v3-white);
}

.jot-v3-cta__inner {
    max-width: 640px;
    margin: 0 auto;
}

.jot-v3-cta__title {
    font-family: var(--v3-font-heading);
    font-size: 44px;
    font-weight: 600;
    color: var(--v3-white);
    margin: 0 0 16px;
}

.jot-v3-cta__body {
    font-family: var(--v3-font-body);
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 36px;
}

/* "Apply Now" style button — matches Figma navy pill */
.jot-v3-cta__btn.btn {
    background-color: var(--v3-navy);
    color: var(--v3-white);
    border: 2px solid rgba(255, 255, 255, 0.30);
    font-family: var(--v3-font-heading);
    font-size: 24.62px;
    font-weight: 700;
    border-radius: 10.77px;
    padding: 22px 26px;
    min-width: 261px;
}

.jot-v3-cta__btn.btn:hover {
    background-color: var(--v3-navy-mid);
    border-color: var(--v3-navy-mid);
    color: var(--v3-white);
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1024px — tablet landscape
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* About Us */
    .abt-v3-hero          { padding: 80px 0 60px; }
    .abt-v3-hero__inner   { gap: 48px; }
    .abt-v3-hero__content { flex: 0 0 380px; }
    .abt-v3-hero__right   { flex: 1; }
    .abt-v3-hero__title   { font-size: 44px; line-height: 1.15; }
    .abt-v3-stat__number  { font-size: 36px; }

    .abt-v3-map__inner    { gap: 48px; }
    .abt-v3-map__visual   { flex: 0 0 340px; }
    .abt-v3-map__placeholder-link + .abt-v3-map__placeholder-img { width: 300px; margin-left: -50px; }
    .abt-v3-map__title    { font-size: 44px; line-height: 1.15; }

    .abt-v3-values__inner { gap: 80px; }
    .abt-v3-values__intro { flex: 0 0 360px; }
    .abt-v3-values__title { font-size: 44px; line-height: 1.15; }

    .abt-v3-inc5000__text { font-size: 34px; }

    .abt-v3-driven__panel-content { gap: 24px; }
    .abt-v3-driven__content { flex: 0 0 280px; }
    .abt-v3-driven__title   { font-size: 44px; line-height: 1.15; }
    .abt-v3-driven__body    { font-size: 16px; }

    /* Join Our Team */
    .jot-v3-hero__badge   { width: 112px; }
    .jot-v3-hero__title   { font-size: 36px; }

    .jot-v3-grow__content { gap: 60px; }
    .jot-v3-grow__title   { font-size: 44px; flex: 0 0 340px; }

    .jot-v3-perks__title  { font-size: 44px; margin-bottom: 56px; }

    .jot-v3-people__inner { grid-template-columns: 1fr 1fr; }

    .jot-v3-gallery__col-left { flex: 0 0 300px; }

    .jot-v3-cta__title    { font-size: 36px; }
}


/* ---------------------------------------------------------------------------
   768px — tablet portrait
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* About Us — hero stacks: text top, image+stats below */
    .abt-v3-hero { padding: 140px 0 56px; }
    .abt-v3-hero__inner   { flex-direction: column; gap: 36px; }
    .abt-v3-hero__content,
    .abt-v3-hero__right   { flex: none; width: 100%; }
    .abt-v3-hero__title   { font-size: 36px; line-height: 1.2; }
    .abt-v3-hero__stats   { gap: 20px; }
    .abt-v3-stat__number  { font-size: 32px; }
    .abt-v3-stat__label   { font-size: 14px; }

    .abt-v3-map__inner    { flex-direction: column; gap: 36px; padding: 0 20px; }
    .abt-v3-map__visual,
    .abt-v3-map__content  { flex: none; width: 100%; }
    .abt-v3-map__title    { font-size: 36px; line-height: 1.2; }
    .abt-v3-map__placeholder-link + .abt-v3-map__placeholder-img { margin-top: -44px; width: 240px; margin-left: -40px; }

    .abt-v3-values__inner { flex-direction: column; gap: 36px; }
    .abt-v3-values__intro { flex: none; width: 100%; }
    .abt-v3-values__title { font-size: 36px; line-height: 1.2; }

    .abt-v3-inc5000       { min-height: 200px; }
    .abt-v3-inc5000__inner { flex-direction: column; text-align: center; gap: 24px; }
    .abt-v3-inc5000__text  { font-size: 28px; }

    .abt-v3-driven__panel-content { flex-direction: column; gap: 20px; }
    .abt-v3-driven__content       { flex: none; width: 100%; }
    .abt-v3-driven__title         { font-size: 32px; line-height: 1.2; }
    .abt-v3-driven__body          { font-size: 16px; }

    /* Join Our Team */
    .jot-v3-hero { min-height: 280px; padding: 150px 0 24px; }
    .jot-v3-hero__title-wrap { flex-direction: column; gap: 12px; }
    .jot-v3-hero__badge { width: 96px; max-width: 96px; }
    .jot-v3-hero__title { font-size: 30px; }

    .jot-v3-grow { padding: 60px 0; }
    .jot-v3-grow__content { flex-direction: column; gap: 24px; }
    .jot-v3-grow__title   { flex: none; font-size: 36px; line-height: 1.1; }
    .jot-v3-grow__image img,
    .jot-v3-grow__image--placeholder { height: 380px; }

    .jot-v3-perks__title { font-size: 36px; line-height: 1.2; margin-bottom: 40px; }
    .jot-v3-perks__grid  { grid-template-columns: 1fr 1fr; }

    .jot-v3-people__inner { grid-template-columns: 1fr; }
    .jot-v3-people__column { min-height: auto; }

    .jot-v3-gallery__grid { flex-direction: column; }
    .jot-v3-gallery__col-left { flex: none; }
    .jot-v3-gallery__col-left .jot-v3-gallery__item { height: 220px !important; }
    .jot-v3-gallery__col-right > .jot-v3-gallery__item { height: 280px; }
    .jot-v3-gallery__col-right-bottom .jot-v3-gallery__item { height: 220px; }

    .jot-v3-cta__title { font-size: 30px; }
}


/* ---------------------------------------------------------------------------
   480px — mobile
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* About Us */
    .abt-v3-hero { padding-top: 120px; }
    .abt-v3-hero__title  { font-size: 28px; }
    .abt-v3-hero__body   { font-size: 15px; }
    .abt-v3-stat__number { font-size: 26px; }
    .abt-v3-stat__label  { font-size: 13px; }
    .abt-v3-hero__stats  { gap: 14px; }

    .abt-v3-map__title   { font-size: 28px; }
    .abt-v3-map__body    { font-size: 15px; }
    .abt-v3-map__placeholder-link + .abt-v3-map__placeholder-img { margin-top: -40px; width: 200px; margin-left: -35px; }

    .abt-v3-values__title { font-size: 28px; }
    .abt-v3-values__body  { font-size: 15px; }

    .abt-v3-inc5000__text       { font-size: 22px; }
    .abt-v3-inc5000__badge,
    .abt-v3-inc5000__badge-placeholder { width: 110px; height: 110px; }

    .abt-v3-driven__title { font-size: 26px; }
    .abt-v3-driven__body  { font-size: 15px; }
    .abt-v3-driven__panel { padding: 24px 20px; }

    /* Join Our Team */
    .jot-v3-hero { min-height: 240px; padding: 150px 0 20px; }
    .jot-v3-hero__badge  { width: 84px; max-width: 84px; }
    .jot-v3-hero__title  { font-size: 26px; }
    .jot-v3-grow__title  { font-size: 28px; }
    .jot-v3-perks__title { font-size: 28px; margin-bottom: 28px; }
    .jot-v3-perks__grid  { grid-template-columns: 1fr; }
    .jot-v3-perk         { min-height: auto; }

    .jot-v3-people__column { padding: 32px 24px; }
    .jot-v3-people__title,
    .jot-v3-people__subtitle { font-size: 20px; }

    .jot-v3-gallery__col-right-bottom { flex-direction: column; }
    .jot-v3-gallery__col-right-bottom .jot-v3-gallery__item { width: 100%; height: 200px; }

    .jot-v3-cta__title { font-size: 26px; }
    .jot-v3-cta__body  { font-size: 15px; }
}

/* ============================================================
   State Compliance v2 — single-state_compliance.php
   ============================================================ */

.sc2-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 70px;
}

/* Hero */
.sc2-hero {
    position: relative;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--v3-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc2-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(8, 50, 118, 0.58);
}
.sc2-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.sc2-hero__title {
    font-family: var(--v3-font-heading);
    font-size: 60px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    padding-top: 60px;
}

/* Intro */
.sc2-intro {
    padding: 48px 0 32px;
}
.sc2-intro__body {
    font-family: var(--v3-font-body);
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.7;
    margin: 0 0 28px;
}
.sc2-intro__subheading {
    font-family: var(--v3-font-body);
    font-size: 24px;
    font-weight: 500;
    color: #414141;
    text-align: center;
    margin: 0;
}

/* State identity row */
.sc2-state-row {
    padding: 28px 0;
    border-bottom: 1px solid #e8e8e8;
}
.sc2-state-row .sc2-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.sc2-state-row__left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sc2-state-row__icon {
    width: 90px;
    flex-shrink: 0;
}
.sc2-state-row__icon svg,
.sc2-state-row__icon img {
    width: 100%;
    height: auto;
    fill: var(--v3-navy-alt);
}
.sc2-state-row__name {
    font-family: var(--v3-font-heading);
    font-size: 64px;
    font-weight: 500;
    color: #000;
    margin: 0;
    line-height: 1;
}
.sc2-state-row__right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.sc2-state-row__label {
    font-family: var(--v3-font-body);
    font-size: 18px;
    font-weight: 500;
    color: #000;
}
.sc2-state-row__select-wrap {
    position: relative;
}
.sc2-state-row__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(217, 217, 217, 0.3);
    border: 1px solid #000;
    border-radius: 5px;
    font-family: var(--v3-font-body);
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    padding: 5px 36px 5px 10px;
    min-width: 200px;
    cursor: pointer;
}
.sc2-state-row__select:focus {
    outline: 2px solid var(--v3-navy-mid);
    outline-offset: 1px;
}
.sc2-state-row__arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 11px;
    color: #000;
}

/* Body: content + sidebar */
.sc2-body {
    padding: 48px 0 64px;
}
.sc2-body .sc2-container {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}
.sc2-body__main {
    flex: 1;
    min-width: 0;
}
.sc2-body__content {
    font-family: var(--v3-font-body);
    font-size: 18px;
    line-height: 1.75;
    color: #000;
}
.sc2-body__content h2,
.sc2-body__content h3 {
    font-family: var(--v3-font-heading);
    color: var(--v3-navy);
    margin-top: 32px;
    margin-bottom: 10px;
}
.sc2-body__tips {
    margin-top: 24px;
}
.sc2-body__buttons {
    margin-top: 36px;
}
.sc2-body__sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 32px;
}

/* CTA sidebar card */
.sc2-cta-card {
    background: #fff;
    border-radius: var(--v3-radius-lg);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12);
    padding: 32px 24px;
    text-align: center;
}
.sc2-cta-card__text {
    font-family: var(--v3-font-body);
    font-size: 22px;
    font-weight: 500;
    color: #414141;
    line-height: 1.45;
    margin: 0 0 24px;
}
.sc2-cta-card__btn {
    display: inline-block;
    background: var(--v3-navy);
    color: #fff;
    font-family: var(--v3-font-body);
    font-size: 18px;
    font-weight: 400;
    border-radius: var(--v3-radius);
    padding: 12px 32px;
    text-decoration: none;
    transition: background var(--v3-transition);
}
.sc2-cta-card__btn:hover {
    background: var(--v3-navy-mid);
    color: #fff;
    text-decoration: none;
}

/* Resources */
.sc2-resources {
    padding: 48px 0 80px;
    background: #fff;
}
.sc2-resources__heading {
    font-family: var(--v3-font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--v3-navy-mid);
    margin: 0 0 32px;
}
.sc2-resources__track-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sc2-resources__arrow {
    background: none;
    border: none;
    font-size: 52px;
    color: #333;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color var(--v3-transition);
}
.sc2-resources__arrow:hover:not(:disabled) {
    color: var(--v3-navy-mid);
}
.sc2-resources__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.sc2-resources__track {
    display: flex;
    gap: 32px;
    flex: 1;
    overflow: hidden;
}
.sc2-resources__card {
    flex: 0 0 calc(33.333% - 22px);
    min-width: 0;
}
.sc2-resources__card-img-link {
    display: block;
    margin-bottom: 12px;
}
.sc2-resources__card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.sc2-resources__card-cat {
    display: block;
    font-family: var(--v3-font-body);
    font-size: 16px;
    font-weight: 500;
    color: #6e6e6e;
    margin-bottom: 6px;
}
.sc2-resources__card-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin: 0;
    line-height: 1.4;
}
.sc2-resources__card-title a {
    color: inherit;
    text-decoration: none;
}
.sc2-resources__card-title a:hover {
    color: var(--v3-navy-mid);
}

/* Responsive — sc2 */
@media (max-width: 1200px) {
    .sc2-container { padding: 0 40px; }
    .sc2-state-row__name { font-size: 52px; }
    .sc2-hero__title { font-size: 48px; }
}
@media (max-width: 1024px) {
    .sc2-container { padding: 0 28px; }
    .sc2-hero__title { font-size: 38px; }
    .sc2-state-row__name { font-size: 42px; }
    .sc2-body__sidebar { width: 260px; }
    .sc2-resources__card { flex: 0 0 calc(50% - 16px); }
}
@media (max-width: 768px) {
    .sc2-container { padding: 0 20px; }
    .sc2-hero { height: 350px; }
    .sc2-hero__title { font-size: 28px; padding-top: 40px; }
    .sc2-intro { padding: 32px 0 20px; }
    .sc2-intro__subheading { font-size: 18px; }
    .sc2-state-row .sc2-container { flex-direction: column; align-items: flex-start; }
    .sc2-state-row__name { font-size: 36px; }
    .sc2-body .sc2-container { flex-direction: column; }
    .sc2-body__sidebar { width: 100%; position: static; }
    .sc2-resources__card { flex: 0 0 100%; }
    .sc2-resources__heading { font-size: 30px; }
}
/* =============================================================================
   blog2-* — Single blog post template (Individual Blog design).
   ============================================================================= */

.blog2-container {
    max-width: 1112px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* HERO — title block + thumbnail */
.blog2-hero {
    padding: 130px 0 48px;
    background: var(--v3-white, #ffffff);
}
.blog2-hero__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
}
.blog2-hero__text {
    flex: 1 1 587px;
    min-width: 0;
}
.blog2-hero__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 0, 0, 0.67);
    font-family: var(--v3-font-body, 'Outfit', sans-serif);
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 12px;
}
.blog2-hero__category-icon {
    width: 19px;
    height: 19px;
    opacity: 0.67;
    flex-shrink: 0;
}
.blog2-hero__title {
    font-family: var(--v3-font-heading, 'Outfit', sans-serif);
    font-weight: 500;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -1.44px;
    color: var(--v3-text, #000);
    margin: 0 0 24px;
}
.blog2-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
}
.blog2-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #545454;
    font-family: var(--v3-font-body, 'Outfit', sans-serif);
    font-size: 14px;
    font-weight: 500;
}
.blog2-hero__meta-icon {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    flex-shrink: 0;
}
.blog2-hero__thumb {
    flex: 0 0 424px;
    aspect-ratio: 424 / 262;
    background: var(--v3-gallery-bg, #d9d9d9);
    overflow: hidden;
}
.blog2-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* BODY — content + sticky sidebar */
.blog2-body {
    padding: 32px 0 80px;
}
.blog2-body__inner {
    display: flex;
    align-items: flex-start;
    gap: 90px;
}
.blog2-body__main {
    flex: 1 1 720px;
    min-width: 0;
    color: var(--v3-text, #000);
    font-family: var(--v3-font-body, 'Outfit', sans-serif);
}
.blog2-content h1,
.blog2-content h2,
.blog2-content h3 {
    font-family: var(--v3-font-heading, 'Outfit', sans-serif);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.08px;
    color: var(--v3-text, #000);
    margin: 40px 0 20px;
    scroll-margin-top: 140px;
}
.blog2-content h1 { font-size: 36px; }
.blog2-content h2 { font-size: 36px; }
.blog2-content h3 { font-size: 32px; }
.blog2-content > :first-child { margin-top: 0; }
.blog2-content p,
.blog2-content li {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 20px;
}
.blog2-content ul,
.blog2-content ol {
    padding-left: 1.25em;
    margin: 0 0 20px;
}
.blog2-content a {
    color: var(--v3-navy-mid, #083276);
    text-decoration: underline;
}
.blog2-content img {
    max-width: 100%;
    height: auto;
}

/* SIDEBAR */
.blog2-sidebar {
    flex: 0 0 233px;
    width: 233px;
}
.blog2-sidebar__sticky {
    position: sticky;
    top: 140px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.blog2-toc {
    font-family: var(--v3-font-body, 'Outfit', sans-serif);
}
.blog2-toc__heading {
    font-weight: 700;
    font-size: 16px;
    color: var(--v3-text, #000);
    margin: 0 0 6px;
}
.blog2-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.blog2-toc__item a {
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.3;
    display: inline-block;
}
.blog2-toc__item a:hover {
    color: var(--v3-navy, #020355);
}
.blog2-toc__item.blog2-toc__item--h3 a {
    padding-left: 12px;
}
.blog2-toc__item--active > a,
.blog2-toc__item:first-child > a {
    color: var(--v3-text, #000);
    font-weight: 600;
}
.blog2-toc__divider {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin: 16px 0 0;
}

.blog2-newsletter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--v3-font-body, 'Outfit', sans-serif);
}
.blog2-newsletter__heading {
    font-weight: 700;
    font-size: 16px;
    color: var(--v3-text, #000);
    margin: 0;
}
.blog2-newsletter__body {
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
    line-height: 1.4;
}
.blog2-newsletter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    background: var(--v3-navy, #020355);
    color: var(--v3-white, #fff);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.4px;
    padding: 6px 28px;
    border-radius: 12px;
    min-width: 127px;
    height: 28px;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}
.blog2-newsletter__btn:hover {
    background: var(--v3-navy-mid, #083276);
    color: var(--v3-white, #fff);
}

/* READ MORE — related posts carousel */
.blog2-readmore {
    padding: 24px 0 96px;
}
.blog2-readmore__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}
.blog2-readmore__heading {
    font-family: var(--v3-font-heading, 'Outfit', sans-serif);
    font-weight: 500;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -1.08px;
    color: var(--v3-text, #000);
    margin: 0;
}
.blog2-readmore__nav {
    display: flex;
    gap: 20px;
    align-items: center;
}
.blog2-readmore__arrow {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.blog2-readmore__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}
.blog2-readmore__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.blog2-readmore__track {
    display: flex;
    gap: 103px;
    align-items: flex-start;
}
.blog2-readmore__card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 302px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}
.blog2-readmore__card-img-link {
    display: block;
    aspect-ratio: 330 / 243;
    background: var(--v3-gallery-bg, #d9d9d9);
    overflow: hidden;
}
.blog2-readmore__card-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.blog2-readmore__card-img-link:hover img {
    transform: scale(1.04);
}
.blog2-readmore__card-img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}
.blog2-readmore__card-cat {
    font-family: var(--v3-font-body, 'Outfit', sans-serif);
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.6px;
    color: #6e6e6e;
    margin: 0;
}
.blog2-readmore__card-title {
    font-family: var(--v3-font-heading, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: var(--v3-text, #000);
    margin: 0;
}
.blog2-readmore__card-title a {
    color: inherit;
    text-decoration: none;
}
.blog2-readmore__card-title a:hover {
    color: var(--v3-navy-mid, #083276);
}

/* Responsive */
@media (max-width: 1024px) {
    .blog2-hero__inner { flex-direction: column; gap: 32px; }
    .blog2-hero__thumb { width: 100%; flex: 0 0 auto; }
    .blog2-hero__title { font-size: 40px; }
    .blog2-body__inner { flex-direction: column; gap: 48px; }
    .blog2-sidebar { width: 100%; flex: 0 0 auto; }
    .blog2-sidebar__sticky { position: static; }
    .blog2-readmore__track { gap: 32px; }
}
@media (max-width: 768px) {
    .blog2-container { padding: 0 20px; }
    .blog2-hero { padding: 100px 0 32px; }
    .blog2-hero__title { font-size: 32px; letter-spacing: -0.8px; }
    .blog2-content h1,
    .blog2-content h2 { font-size: 28px; letter-spacing: -0.6px; }
    .blog2-content h3 { font-size: 24px; letter-spacing: -0.4px; }
    .blog2-readmore__heading { font-size: 28px; }
    .blog2-readmore { padding: 16px 0 64px; }
    .blog2-readmore__track { gap: 24px; }
    .blog2-readmore__card { max-width: none; }
}