/**
 * Hashira Theme — supplementary CSS v1.3.1
 *
 * Philosophy for this revision: WordPress generates inline styles at render
 * time that have high specificity. Our theme.json-sourced rules are fine for
 * greenfield blocks, but once block classes + inline styles are in play, we
 * have to use !important on layout-critical declarations or they get lost.
 *
 * Where !important is used, it's because the spec is firm (exact pixel match
 * to the original site) and we need to beat WordPress's runtime overrides.
 */

/* ============================================================
   FONT LOADING SAFETY NET
   theme.json declares Varela/Montserrat. functions.php enqueues the Google
   Fonts stylesheet. This @import is a belt-and-braces fallback in case the
   enqueue fails to reach the page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Varela&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ============================================================
   GLOBAL BASE
   ============================================================ */
body {
    font-family: "Montserrat", sans-serif;
    color: #504F4F;
    background: #FFFFFF;
}

a, button, .wp-block-button__link {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.25s ease;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: "Varela", sans-serif !important;
    color: #000000 !important;
}

/* ============================================================
   BAND — full-width section with 1200px content area centered
   This is the workhorse layout class. Every section on the home page uses it.
   ============================================================ */

/* Outer band: break out of post-content width, fill viewport */
.hashira-band {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
    position: relative;
}

/* Inner children of band: force them to honour 1200px, NOT inherit
   WordPress's post-content constrained 1200px offset. */
.hashira-band > .wp-block-columns,
.hashira-band > .wp-block-group {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}

/* Band with direct children that aren't columns (e.g. an html block before columns) */
.hashira-band > * {
    box-sizing: border-box;
}

/* When a band wraps content like paragraph + heading + columns, they should also stay contained */
.hashira-band > p,
.hashira-band > h1,
.hashira-band > h2,
.hashira-band > h3 {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}

/* Kill WordPress's post-content constrained layout interfering with our bands */
main.wp-block-post-content .hashira-band .wp-block-columns,
main.wp-block-post-content .hashira-band .wp-block-column {
    max-width: none !important;
}

/* On smaller viewports, reduce the side padding */
@media (max-width: 768px) {
    .hashira-band > .wp-block-columns,
    .hashira-band > .wp-block-group,
    .hashira-band > p,
    .hashira-band > h1,
    .hashira-band > h2,
    .hashira-band > h3 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================================
   HEADER — sticky to top of viewport while scrolling
   ============================================================ */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-bottom: 1px solid #ECECEC;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
header.wp-block-template-part .hashira-header {
    background: #FFFFFF !important;
}
.hashira-header-inner {
    max-width: 1250px;
    margin: 0 auto;
}
.hashira-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.hashira-logo-img, .hashira-logo-svg {
    height: 56px;
    width: auto;
    max-width: 220px;
    display: block;
    /* Ensure SVG renders reliably on iOS Safari — prevents the blue "broken image" box */
    object-fit: contain;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
header.wp-block-template-part .wp-block-navigation {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 500;
}
header.wp-block-template-part .wp-block-navigation a {
    color: #54595F;
}
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation li.hashira-current > a,
header.wp-block-template-part .wp-block-navigation li.hashira-current-ancestor > a {
    color: #61CE70;
}

/* ============================================================
   HERO — fixed-height band with slider as background layer + gradient overlay
   Stacking order (bottom to top):
     z-index: 0  → .hashira-hero-slider (the cycling background images)
     z-index: 1  → ::before gradient overlay (dark left, transparent right)
     z-index: 2  → content (eyebrow, h1, subhead)
   ============================================================ */
.hashira-hero {
    position: relative !important;
    min-height: 650px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    background-color: #0B2035 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The slider div itself must be BEHIND the overlay. */
.hashira-hero-slider {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0 !important;
}

/* Gradient overlay sits ON TOP of the slider but BEHIND text. */
.hashira-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(83deg, rgba(0,0,0,0.79) 46%, rgba(242,41,91,0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Content sits on top of everything — but NOT the slider, which stays at z:0. */
.hashira-hero > .wp-block-columns,
.hashira-hero > .wp-block-group,
.hashira-hero > p,
.hashira-hero > h1 {
    position: relative !important;
    z-index: 2 !important;
}

/* Hero content typography — all enforced because theme.json defaults could
   be overridden by block-level inline styles. */
.hashira-hero h1,
.hashira-hero .wp-block-heading {
    color: #FFFFFF !important;
    font-family: "Varela", sans-serif !important;
    font-size: 65px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
}

.hashira-hero .hashira-hero-eyebrow {
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #61CE70 !important;
    margin: 0 0 12px !important;
    line-height: 1.3 !important;
}

.hashira-hero .hashira-hero-subhead {
    color: #FFFFFF !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

@media (max-width: 1024px) {
    .hashira-hero { min-height: 453px !important; }
    .hashira-hero h1 { font-size: 30px !important; }
}
@media (max-width: 768px) {
    .hashira-hero { min-height: 420px !important; }
    .hashira-hero h1 { font-size: 25px !important; }
    .hashira-hero .hashira-hero-eyebrow { font-size: 13px !important; }
}

/* ============================================================
   PILLAR CARD — icon-left layout, tight padding
   ============================================================ */
.hashira-pillar-card {
    display: flex !important;
    align-items: center !important;
    gap: 19px !important;
    padding: 15px 25px 15px 15px !important;
    background: #FFFFFF !important;
    border: 1px solid #ECECEC !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.hashira-pillar-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px);
}
.hashira-pillar-card .hashira-icon-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #13B9233B !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}
.hashira-pillar-card .hashira-icon-box img {
    width: 22px !important;
    height: 22px !important;
}
.hashira-pillar-card h3 {
    margin: 0 0 4px !important;
    font-family: "Varela", sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    line-height: 1.3 !important;
}
.hashira-pillar-card p {
    margin: 0 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #504F4F !important;
    line-height: 1.5 !important;
}

/* ============================================================
   GENERIC CARD — used in patterns (three-pillars, services-grid,
   testimonials) as a starter wrapper. Provides the base card shell;
   richer variants like .hashira-service-card override with photo-bg
   treatment.
   ============================================================ */
.hashira-card {
    background: #FFFFFF !important;
    border: 1px solid #ECECEC !important;
    border-radius: 4px !important;
    padding: 28px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hashira-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px);
}
.hashira-card h3,
.hashira-card .wp-block-heading {
    margin: 0 0 12px !important;
    font-family: "Varela", sans-serif !important;
    font-weight: 600 !important;
    color: #000000 !important;
}
.hashira-card p {
    margin: 0 0 12px !important;
    font-family: "Montserrat", sans-serif !important;
    color: #504F4F !important;
    line-height: 1.6 !important;
}
.hashira-card p:last-child {
    margin-bottom: 0 !important;
}
.hashira-card a {
    color: #13B923 !important;
    font-weight: 600 !important;
}
.hashira-card a:hover {
    color: #61CE70 !important;
}

/* ============================================================
   ABOUT section — 2x2 photo collage
   ============================================================ */
.hashira-photo-collage {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}
.hashira-photo-collage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    aspect-ratio: 1 !important;
    display: block !important;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.hashira-cta-band {
    position: relative !important;
    min-height: 480px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #0B2035;
    background-size: cover !important;
    background-position: top center !important;
    overflow: hidden !important;
}
.hashira-cta-band::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.83) 36%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.hashira-cta-band > * {
    position: relative !important;
    z-index: 2 !important;
}
.hashira-cta-band h2,
.hashira-cta-band .wp-block-heading {
    color: #FFFFFF !important;
    font-family: "Varela", sans-serif !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 16px !important;
}
.hashira-cta-band p {
    color: #FFFFFF !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    margin: 0 0 24px !important;
}

@media (max-width: 768px) {
    .hashira-cta-band { min-height: 252px !important; }
    .hashira-cta-band h2,
    .hashira-cta-band .wp-block-heading { font-size: 26px !important; }
}

/* ============================================================
   SERVICE CARD — photo bg, dark overlay, padding-top creates bottom text
   ============================================================ */
.hashira-service-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 3px !important;
    padding: 30px !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: transform 0.25s ease;
    height: 340px !important;
    box-sizing: border-box !important;
}
.hashira-service-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 1 !important;
    transition: background 0.25s ease;
}
.hashira-service-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
.hashira-service-card > * {
    position: relative !important;
    z-index: 3 !important;
}
.hashira-service-card:hover {
    transform: translateY(-4px);
}
.hashira-service-card:hover::before {
    background: rgba(0,0,0,0.7) !important;
}
.hashira-service-card h3,
.hashira-service-card .wp-block-heading {
    font-family: "Varela", sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
}
.hashira-service-card p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.92) !important;
    margin: 0 0 10px !important;
    line-height: 1.5 !important;
}
.hashira-service-card .hashira-read-more {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #13B923 !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.hashira-service-card .hashira-read-more:hover {
    color: #FFFFFF !important;
}

@media (max-width: 768px) {
    .hashira-service-card {
        height: 260px !important;
        padding: 20px !important;
    }
    .hashira-service-card h3,
    .hashira-service-card .wp-block-heading {
        font-size: 17px !important;
    }
}

/* ============================================================
   WHAT WE DO — icon-label grid
   ============================================================ */
.hashira-icon-label {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}
.hashira-icon-label .hashira-icon-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: #13B9233B !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}
.hashira-icon-label .hashira-icon-box img {
    width: 28px !important;
    height: 28px !important;
}
.hashira-icon-label strong {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    line-height: 1.4 !important;
}

/* ============================================================
   GENERIC EYEBROW — small green label above section headings
   ============================================================ */
.hashira-eyebrow {
    display: inline-block !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #61CE70 !important;
    margin: 0 0 20px !important;
}

/* ============================================================
   BUTTONS — generic style for About/CTA/Home buttons
   ============================================================ */
.wp-block-button .wp-block-button__link {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    letter-spacing: 0.2px;
}

/* Header Career button — rectangle with 4px radius (matches original) */
header .wp-block-button .wp-block-button__link {
    border-radius: 4px !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
}

/* ============================================================
   FOOTER — bg image, column heading underlines, FA icons, divider
   ============================================================ */
footer.wp-block-template-part {
    background: #E1F0FF;
    padding: 0;
}

.hashira-footer {
    position: relative;
    background-color: #E1F0FF;
    background-image:
        linear-gradient(rgba(245, 247, 252, 0.92), rgba(245, 247, 252, 0.92)),
        url('/wp-content/uploads/hashira/footer-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hashira-footer .hashira-footer-cols {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}

.hashira-footer a {
    color: #504F4F;
    text-decoration: none;
}
.hashira-footer a:hover {
    color: #61CE70;
}

/* --- Brand column --- */
.hashira-footer-brand .hashira-footer-logo-img {
    display: block;
    height: 50px;
    width: auto;
    margin: 0 0 16px;
}
.hashira-footer-brand p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    color: #504F4F !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- Column heading + green underline accent --- */
.hashira-footer-heading {
    font-family: "Varela", sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 16px !important;
    padding-bottom: 8px !important;
    position: relative;
}
.hashira-footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    background: #2DC93C;
}

/* --- Quick Links / Services lists --- */
.hashira-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.hashira-footer-links li {
    margin-bottom: 10px !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    color: #504F4F !important;
}
.hashira-footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #504F4F !important;
}
.hashira-footer-links li a:hover {
    color: #61CE70 !important;
}
.hashira-footer-links li a i {
    color: #2DC93C;
    font-size: 12px;
}

/* --- Get In Touch contact list --- */
.hashira-footer-contact {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.hashira-footer-contact > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    color: #504F4F !important;
    line-height: 1.5;
}
.hashira-footer-contact > li > i {
    color: #2DC93C;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.hashira-footer-contact a {
    color: #504F4F !important;
}
.hashira-footer-contact a:hover {
    color: #61CE70 !important;
}
.hashira-footer-contact > li > i {
    transition: color 0.2s ease;
}
/* Hover anywhere in an address row → icon + strong title + link text all turn green */
.hashira-footer-address:hover > i,
.hashira-footer-address:hover strong,
.hashira-footer-address:hover a {
    color: #61CE70 !important;
}
.hashira-footer-address strong {
    transition: color 0.2s ease;
}
.hashira-footer-address strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #000000;
}

/* --- Bottom bar (divider + copyright + legal links) --- */
.hashira-footer-bottom {
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 16px 32px 0;
    border-top: 1px solid #ECECEC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: #504F4F;
    box-sizing: border-box;
}
.hashira-footer-legal a {
    color: #504F4F !important;
}
.hashira-footer-legal a:hover {
    color: #61CE70 !important;
}

@media (max-width: 768px) {
    .hashira-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    padding: 12px 16px;
    border: 1px solid #ECECEC;
    border-radius: 4px;
    background: #FFFFFF;
    color: #000000;
    width: 100%;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #61CE70;
    box-shadow: 0 0 0 3px rgba(97,206,112,0.15);
}

/* ============================================================
   IMAGE DEFAULTS
   ============================================================ */
.wp-block-image img {
    border-radius: 6px;
}

/* ============================================================
   LOGO — v1.3.11: intro animation + mobile sizing
   Animation mimics original GIF: green accent draws up from
   bottom, then dark H strokes + wordmark fade in. Plays once
   on page load, respects prefers-reduced-motion.
   ============================================================ */
.hashira-logo-img, .hashira-logo-svg {
    animation: hashira-logo-fade 700ms ease-out 1;
}
@keyframes hashira-logo-fade {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hashira-logo-img, .hashira-logo-svg { animation: none; }
}

/* ============================================================
   RESPONSIVE HEADER — v1.3.11
   Fixes mobile flex spacing and prevents hamburger+Career button
   from crowding together. Also shrinks logo slightly on mobile.
   ============================================================ */
@media (max-width: 782px) {
    .hashira-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .hashira-logo-img, .hashira-logo-svg {
        height: 42px;
        max-width: 170px;
    }
    /* Add breathing room between hamburger and Career button */
    .hashira-header-inner > .wp-block-group:last-child {
        gap: 14px;
    }
    /* Shrink Career button on mobile so it doesn't crowd the hamburger */
    .hashira-header-inner .wp-block-button__link {
        padding-top: 8px !important;
        padding-right: 18px !important;
        padding-bottom: 8px !important;
        padding-left: 18px !important;
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .hashira-logo-img, .hashira-logo-svg {
        height: 36px;
        max-width: 150px;
    }
}

/* ============================================================
   v1.4.1 ADDITIONS — all new CSS below this line.
   Existing rules above are unchanged from v1.3.14.
   ============================================================ */

/* --- Header 3-column layout. Each col gets equal flex share of the inner row. --- */
.hashira-header-col {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    display: flex;
}
.hashira-header-col-logo    { justify-content: flex-start; }
.hashira-header-col-nav     { justify-content: center; }
.hashira-header-col-button  { justify-content: flex-end; }
.hashira-header-col-nav .wp-block-navigation,
.hashira-header-col-nav .wp-block-navigation__container {
    justify-content: center;
}

/* --- Footer column 1 social icons (new row under tagline) --- */
.hashira-footer-social {
    list-style: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hashira-footer-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0B2035;
    color: #FFFFFF !important;
    font-size: 13px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.hashira-footer-social li a:hover {
    background: #61CE70;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* ============================================================
   v1.4.2 HOTFIX — nav wrap fix.
   Five nav items at 15px Montserrat + 32px gaps need ~553px to
   fit single-line. The equal 1/3/1/3/1/3 flex split in v1.4.1
   gave the nav column only ~395px at the 1250px container, which
   caused "Secure Portal" to wrap onto a second row.
   Fix: give the nav column twice the flex share. Logo and button
   columns stay symmetric so col-2 stays geometrically centred.
   ============================================================ */
.hashira-header-col-logo,
.hashira-header-col-button {
    flex: 1 1 0;
}
.hashira-header-col-nav {
    flex: 2 1 0;
}
.hashira-header-col-nav .wp-block-navigation,
.hashira-header-col-nav .wp-block-navigation__container {
    flex-wrap: nowrap !important;
}

/* ============================================================
   v1.4.3 — aggressive nav wrap fix.
   v1.4.2's flex: 2 1 0 did not hold because WordPress's inline
   container styles can have higher effective specificity. This
   pass attacks the problem from five angles simultaneously.
   ============================================================ */

/* 1. Nav col now gets 3/5 of the container — logo and button stay
      symmetric at 1/5 each, so col-2 remains geometrically centred. */
.hashira-header-col-logo,
.hashira-header-col-button {
    flex: 1 1 0 !important;
}
.hashira-header-col-nav {
    flex: 3 1 0 !important;
}

/* 2. Smaller nav font — 14px buys ~7% horizontal width back without
      hurting legibility. Matches a typical Elementor desktop header. */
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item a,
header.wp-block-template-part .wp-block-navigation__container a {
    font-size: 14px !important;
}

/* 3. Force single-line across every container WP might inject, at
      every ancestor level. Belt + braces + safety pin. */
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation__container,
header.wp-block-template-part .wp-block-navigation__responsive-container-content,
header.wp-block-template-part [class*="wp-container-"] {
    flex-wrap: nowrap !important;
}

/* 4. Prevent intra-label word wrap. "About Us" should never split into
      "About" / "Us" on the next line. */
header.wp-block-template-part .wp-block-navigation-item a {
    white-space: nowrap;
}

/* 5. Kill any inline margin WP might auto-inject on flex children
      of the nav that could force wrap via total width calculation. */
header.wp-block-template-part .wp-block-navigation__container > li {
    margin: 0;
}

/* ============================================================
   v1.4.5 — active-page highlight fix + nav font/spacing restore
   + eyebrow centring fix
   ============================================================ */

/* 1. v1.4.39: switched from [aria-current="page"] to .hashira-current
      (set by mobile-menu.js URL-match logic, runs site-wide so applies
      to desktop nav too). Same rationale as mobile menu fix in v1.4.38:
      WordPress's aria-current attribution is unreliable on the
      page-no-title template (most sub-pages use it). The JS-driven
      class is reliable on every page.
      
      Also accept .hashira-current-ancestor so the parent (e.g. Services)
      lights up green when on a sub-page (e.g. /wealth-management/). */
header.wp-block-template-part .wp-block-navigation li.hashira-current > a,
header.wp-block-template-part .wp-block-navigation li.hashira-current-ancestor > a {
    color: #61CE70 !important;
}
/* Default colour for non-current items. */
header.wp-block-template-part .wp-block-navigation li:not(.hashira-current):not(.hashira-current-ancestor) > a:not(:hover) {
    color: #54595F !important;
}

/* ============================================================
   v1.4.40 — DESKTOP HEADER SPACING (Option D).
   ------------------------------------------------------------
   Now that the topbar is gone (v1.4.35), the header has more
   breathing room. Widen the nav-item gap from WP's default 40px
   to 56px, and add 8px vertical padding per nav item so each
   becomes a 36px-tall tap zone (vs ~24px before). Better
   accessibility (WCAG 2.5.5 minimum target size) and visually
   less cramped.
   
   Scoped to ≥901px so mobile menu (which has its own padding
   in the @media (max-width: 900px) block) is unaffected. */
@media (min-width: 901px) {
    header.wp-block-template-part .wp-block-navigation__container,
    header.wp-block-template-part nav.wp-block-navigation > .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 56px !important;
    }
    header.wp-block-template-part .wp-block-navigation__container > li > .wp-block-navigation-item__content,
    header.wp-block-template-part .wp-block-navigation__container > li > a.wp-block-navigation-item__content {
        padding: 8px 0 !important;
    }
}

/* 2. Restore nav font to the brand's 15px (v1.4.3 had shrunk it to
      14px as part of the wrap defence; no longer needed with the
      flex 3/5 nav column). */
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item a,
header.wp-block-template-part .wp-block-navigation__container a {
    font-size: 15px !important;
}

/* 3. Fix centred eyebrow (Our Services etc.) — .hashira-eyebrow is
      display:inline-block which collapses to content width, so its
      own text-align:center has no effect on its position within its
      parent. Switch to display:block ONLY when the block author
      chose centre alignment. Left-aligned eyebrows stay inline-block. */
.hashira-eyebrow.has-text-align-center {
    display: block !important;
    text-align: center !important;
}

/* ============================================================
   v1.4.6 — scroll-triggered animations + FA icon support
   ============================================================ */

/* 1. Initial hidden state for scroll-triggered animations.
      The animate-on-view.js script adds .is-revealed (no-IO fallback)
      OR .animated + the named animation class (e.g. .fadeInDown) when
      the element scrolls into view. Both paths transition opacity from
      0 → 1; Animate.css's animation-fill-mode: both leaves fadeInDown
      ending at opacity:1, matching .is-revealed. */
.hashira-animate-on-view {
    opacity: 0;
}
.hashira-animate-on-view.is-revealed {
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

/* 2. Font Awesome icon support inside .hashira-icon-box. The What We Do
      section now uses FA <i> tags instead of inline SVG (cleaner at
      small sizes). Existing rules already target svg and img inside
      the box; this adds the <i> case. */
.hashira-icon-label .hashira-icon-box i {
    font-size: 26px;
    color: #0B2035;
    line-height: 1;
}
.hashira-pillar-card .hashira-icon-box i {
    font-size: 22px;
    color: #0B2035;
    line-height: 1;
}

/* ============================================================
   v1.4.7 — footer addresses moved to a full-width strip below
   the four columns. Two cards side-by-side with generous room
   to breathe; addresses stay formal (full company names +
   complete street lines) without cramping the contact column.
   ============================================================ */
.hashira-footer-addresses {
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 24px 32px 0;
    border-top: 1px solid #DDE3EF;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    box-sizing: border-box;
}
.hashira-footer-address-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.hashira-footer-address-card > i {
    color: #2DC93C;
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    transition: color 0.2s ease;
}
.hashira-footer-address-card > div {
    flex: 1;
    min-width: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #504F4F;
}
.hashira-footer-address-card strong {
    display: block;
    font-weight: 600;
    color: #000000;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}
.hashira-footer-address-card a {
    color: #504F4F !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.hashira-footer-address-card:hover > i,
.hashira-footer-address-card:hover strong,
.hashira-footer-address-card:hover a {
    color: #61CE70 !important;
}

/* Stack addresses vertically on narrow viewports */
@media (max-width: 768px) {
    .hashira-footer-addresses {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 24px 0;
    }
}

/* Tighten the bottom bar spacing now that addresses sit between
   the columns and the copyright line. */
.hashira-footer-addresses + .hashira-footer-bottom,
.hashira-footer-addresses + * .hashira-footer-bottom {
    margin-top: 20px;
}

/* ============================================================
   v1.4.11 — COLUMN GAP via MARGIN (replaces broken v1.4.10 attempt)
   ------------------------------------------------------------
   Background: v1.4.8 set theme.json styles.spacing.blockGap to "0"
   to fix the white seams between header/hero and content/footer.
   Side-effect: every intra-section column gap collapsed to zero —
   Services cards touched, About Us columns merged, etc.

   v1.4.10 attempted to fix this by adding `gap: 32px !important` 
   on .wp-block-columns. That broke things differently: with 
   flex-wrap:wrap, columns whose widths summed to 100% (e.g. 35%+65%, 
   40%+60%, or 4×25% in the footer) now exceeded the container 
   (100% + 32px gap = >100%) and the last column wrapped to a new 
   row. About Us text dropped below the collage. Footer's "Get In 
   Touch" column dropped below the other three.

   v1.4.11 fix: use margin-left between adjacent columns instead of 
   the flexbox gap property. This gives a visible gap WITHOUT adding 
   to the columns' total flex width, so columns can sum to 100% 
   without overflowing. Mobile reset re-stacks vertically.
   ============================================================ */

/* Restore the visible gap between sibling columns via margin */
.wp-block-columns > .wp-block-column + .wp-block-column {
    margin-left: 32px !important;
}

/* Cancel the previous gap-based attempt; gap on .wp-block-columns is what
   was causing the overflow. We use margins on individual columns instead. */
.wp-block-columns {
    gap: 0 !important;
}

/* Vertical-center alignment is honoured on opted-in column groups */
.wp-block-columns.are-vertically-aligned-center {
    align-items: center !important;
}

/* Buttons inside a wp:buttons block are inline-flex by default; restore
   a small gap between adjacent buttons via margin (same approach). */
.wp-block-buttons > .wp-block-button + .wp-block-button {
    margin-left: 12px !important;
}
.wp-block-buttons {
    gap: 0 !important;
}

/* Hero wraps a single column of stacked content; no horizontal margin
   should apply there. */
.hashira-hero .wp-block-columns > .wp-block-column + .wp-block-column {
    margin-left: 0 !important;
}

/* Mobile (≤768px): WordPress stacks columns vertically. Reset horizontal
   margin to zero and add a vertical margin so stacked columns have 
   breathing room top-to-bottom. */
@media (max-width: 768px) {
    .wp-block-columns > .wp-block-column + .wp-block-column {
        margin-left: 0 !important;
        margin-top: 32px !important;
    }
    .wp-block-buttons > .wp-block-button + .wp-block-button {
        margin-left: 0 !important;
        margin-top: 12px !important;
    }
}

/* ============================================================
   v1.4.10 — WHAT WE DO H2 FONT SIZE (kept from previous release)
   ------------------------------------------------------------
   Live's WWD H2 is measured at ~40px. Our staging deploy rendered
   larger because the H2 inherits from theme.json's H2 default
   which can be overridden by wp-block-heading base styles.
   Pin it explicitly to match live.
   ============================================================ */
.hashira-band h2,
.hashira-band .wp-block-heading.has-h-2-font-size,
.hashira-band .wp-block-columns .wp-block-heading {
    font-size: 40px !important;
    line-height: 1.25 !important;
    margin: 0 0 16px !important;
}

/* Hero H1 and CTA H2 keep their own sizes (overridden earlier in file) */
.hashira-hero h1,
.hashira-hero .wp-block-heading {
    font-size: 65px !important;
}
.hashira-cta-band h2,
.hashira-cta-band .wp-block-heading {
    font-size: 40px !important;
}

/* ============================================================
   v1.4.13 — INNER PAGE COMPONENTS
   ------------------------------------------------------------
   Added for the About Us page deploy. These three patterns are 
   reusable across all inner pages (Services, Contact Us, 
   Testing Services, etc.) so the visual language stays consistent.
   ============================================================ */

/* ----- 1. PAGE HERO -----
   Compact hero band shown at the top of every inner page. Dark photo 
   background with linear-gradient overlay for legibility, page title 
   in white, and a small breadcrumb line below the title. Much shorter 
   than the home hero (280px vs 650px) — meant to anchor, not dominate. */
.hashira-page-hero {
    position: relative !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    background-color: #0B2035 !important;
    background-image: url('/wp-content/uploads/hashira/page-hero-default.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 40px 32px !important;
}
.hashira-page-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.3) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.hashira-page-hero > * {
    position: relative !important;
    z-index: 2 !important;
}
.hashira-page-hero h1 {
    color: #FFFFFF !important;
    font-family: "Varela", sans-serif !important;
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
}
.hashira-page-hero .hashira-breadcrumb {
    color: #FFFFFF !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: 0.9 !important;
    margin: 0 !important;
}
.hashira-page-hero .hashira-breadcrumb a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.hashira-page-hero .hashira-breadcrumb a:hover {
    color: #61CE70 !important;
}
.hashira-page-hero .hashira-breadcrumb-sep {
    margin: 0 6px !important;
    opacity: 0.7 !important;
}

@media (max-width: 768px) {
    .hashira-page-hero { min-height: 200px !important; padding: 30px 24px !important; }
    .hashira-page-hero h1 { font-size: 28px !important; }
}

/* ----- 2. PILL HIGHLIGHTS GRID -----
   3-column × 2-row grid of green pill-shaped highlight phrases. Used on 
   About Us to summarise differentiators ("Experts in Delivering Core 
   Banking Solutions", etc.). Each pill has the brand-green-tint 
   background, rounded corners, and centered text. */
.hashira-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px;
    margin: 0 auto;
}
.hashira-pill {
    background: #B7EBC0 !important;
    border-radius: 4px !important;
    padding: 28px 24px !important;
    text-align: center !important;
    font-family: "Varela", sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #0B2035 !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 80px !important;
}
@media (max-width: 1024px) {
    .hashira-pill-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .hashira-pill-grid { grid-template-columns: 1fr !important; }
    .hashira-pill { font-size: 15px !important; padding: 20px 18px !important; }
}

/* ----- 3. VISION / MISSION OVERLAY CARDS -----
   Full-width photo background with two white cards floating at the 
   bottom — one for Vision, one for Mission. Cards overlap the photo 
   bottom edge by a third of their height (negative margin-top equivalent 
   via positioning). On mobile, cards stack vertically below the photo. */
.hashira-vision-mission {
    position: relative !important;
    background-color: #161115 !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 0 !important;
    min-height: 580px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}
.hashira-vision-mission::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.hashira-vision-mission .hashira-vm-cards {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    width: calc(100% - 64px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    transform: translateY(60px);
}
.hashira-vm-card {
    background: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 36px 32px !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
.hashira-vm-card h3 {
    font-family: "Varela", sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #0B2035 !important;
    margin: 0 0 16px !important;
    line-height: 1.2 !important;
}
.hashira-vm-card p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #54595F !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
/* Add bottom padding to the section that contains overlay cards
   so the cards' translateY doesn't visually overlap the next section. */
.hashira-vision-mission + * {
    padding-top: 100px !important;
}
@media (max-width: 768px) {
    .hashira-vision-mission { min-height: 380px !important; }
    .hashira-vision-mission .hashira-vm-cards {
        grid-template-columns: 1fr !important;
        transform: translateY(40px);
        gap: 20px;
    }
    .hashira-vm-card { padding: 28px 24px !important; }
    .hashira-vm-card h3 { font-size: 22px !important; }
    .hashira-vision-mission + * { padding-top: 80px !important; }
}

/* ============================================================
   v1.4.16 — JUSTIFIED BODY TEXT + SPACING (replaces v1.4.14/15)
   ------------------------------------------------------------
   v1.4.14 introduced justified body text but its selector required 
   .hashira-band as an ancestor. The home page's About Us, Services 
   intro, and What We Do sections use plain wp-block-group (without 
   the .hashira-band class), so the selector never matched. Result: 
   justification only worked on a few sections, not consistently.
   
   v1.4.16 drops the .hashira-band requirement so ALL body paragraphs 
   inside any wp-block-columns get justified, regardless of section 
   wrapper class. Combined with bigger margin-bottom on the eyebrow 
   (12→20px) and icon-label (16→28px), and explicit margin rules on 
   H2 inside columns and body paragraphs, the prose now matches live's 
   professional spacing rhythm.
   ============================================================ */

/* Justify long-form body paragraphs inside ANY wp-block-columns layout. 
   This catches the home About Us, home WWD intro, About Us page intro, 
   About Us Methodology, and any future column-based content. */
.wp-block-columns .wp-block-column > p:not(.hashira-eyebrow):not(.hashira-breadcrumb) {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Also catch paragraphs that sit DIRECTLY inside a band (no column 
   wrapper) — Services intro paragraph is one example. */
.hashira-band > p:not(.hashira-eyebrow):not(.hashira-breadcrumb),
.wp-block-group > p:not(.hashira-eyebrow):not(.hashira-breadcrumb):not(.has-text-align-center) {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* CTA band paragraph stays justified for prose consistency. */
.hashira-cta-band p {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Vision/Mission card body text justified per user request 
   (carried over from v1.4.15). */
.hashira-vm-card p {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Re-assert short-text elements stay on their natural alignment 
   regardless of any column-level rules above. */
.hashira-pillar-card p {
    text-align: left !important;
}
.hashira-service-card p {
    text-align: left !important;
}
.hashira-pill {
    text-align: center !important;
}

/* ----- SPACING — match live's professional rhythm -----
   Live's What We Do section has visibly more vertical breathing 
   room than our previous staging. Bumping inter-element margins 
   on H2 inside content columns and on body paragraphs brings the 
   spacing in line. */

/* H2 headings inside content column layouts — bigger bottom margin. */
.wp-block-columns .wp-block-column > .wp-block-heading,
.wp-block-columns .wp-block-column > h2 {
    margin: 0 0 28px !important;
}

/* Body paragraphs inside column layouts — bigger bottom margin to 
   create breathing room between paragraph and the next block 
   (button, image, icon grid, etc). */
.wp-block-columns .wp-block-column > p:not(.hashira-eyebrow):not(.hashira-breadcrumb) {
    margin: 0 0 24px !important;
}

/* Preserve explicit margin-top inline styles (used in Services 
   intro to space the H2 → paragraph). Last paragraph in a column 
   shouldn't have bottom margin doubling with the column's own 
   bottom padding. */
.wp-block-columns .wp-block-column > p:last-child:not(.hashira-eyebrow):not(.hashira-breadcrumb) {
    margin-bottom: 0 !important;
}

/* ============================================================
   v1.4.17 — SERVICE PAGE COMPONENTS
   ------------------------------------------------------------
   Added for the Services page suite (Services landing + 5 individual 
   service detail pages). Two new patterns:
     1. .hashira-service-title-pill — large green pill-shaped heading 
        used as the title of each service detail page (visually 
        distinct from the small green eyebrow we use elsewhere).
     2. .hashira-bullet-list — green-dot bullets for service-offering 
        lists like "Securities Trading", "Portfolio Management", etc.
   ============================================================ */

/* ----- 1. SERVICE TITLE — v1.4.39: eyebrow + plain bold h2 -----
   Replaces the v1.4.17 green pill heading. The pill was a 2018-era
   pattern that visually competed with the green CTA below it. The
   modern B2B treatment is a small eyebrow label ("OUR SERVICE") above
   a clean dark heading — better hierarchy, lower visual noise.

   The same `.hashira-service-title-pill` class is kept (no markup
   change needed in the 5 service pages). Just restyled. The ::before
   pseudo-element renders the eyebrow text, so it's purely a CSS
   transformation — no per-page edits. */
.hashira-service-title-pill {
    display: block !important;
    background: transparent !important;
    color: #0B2035 !important;
    font-family: "Varela", sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 24px !important;
    line-height: 1.25 !important;
    position: relative !important;
}
.hashira-service-title-pill::before {
    content: "Our service" !important;
    display: block !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #61CE70 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}
@media (max-width: 768px) {
    .hashira-service-title-pill {
        font-size: 24px !important;
    }
    .hashira-service-title-pill::before {
        font-size: 12px !important;
    }
}

/* ----- 2. CHEVRON BULLET LIST — v1.4.39 -----
   Replaces the v1.4.17 green-dot bullets. Chevrons match the visual
   language used in the footer Quick Links (where each list item is
   prefixed with a green ›). Keeping consistency across the site, and
   chevrons read as "navigate to" or "next" — slightly more dynamic
   than dots for capability/offering lists. */
.hashira-bullet-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
}
.hashira-bullet-list li {
    position: relative !important;
    padding: 8px 0 8px 24px !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #54595F !important;
    line-height: 1.5 !important;
}
.hashira-bullet-list li::before {
    content: "›" !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    color: #61CE70 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* ----- 3. ENQUIRE NOW BUTTON -----
   Reuses the standard .wp-block-button styling but ensures the 
   default state is solid green (matching live's CTA buttons). */
.hashira-enquire-button .wp-block-button__link,
.wp-block-button.hashira-enquire-button .wp-block-button__link {
    background: #61CE70 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 28px !important;
    font-family: "Varela", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.hashira-enquire-button .wp-block-button__link:hover {
    background: #4FB561 !important;
    transform: translateY(-1px);
}

/* ============================================================
   v1.4.18 — CONTACT US PAGE COMPONENTS
   ------------------------------------------------------------
   Card-style contact information patterns used on the Contact Us 
   page. Two card styles (white "Reach Us" card + dark navy "Send 
   Us a Message" card) rendered side-by-side in equal-height 
   columns, plus a full-width map embed beneath.
   ============================================================ */

/* ----- 1. CARDS WRAPPER (equal-height 2-col) ----- */
.hashira-contact-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch !important;
}
@media (max-width: 900px) {
    .hashira-contact-cards { grid-template-columns: 1fr !important; }
}

/* ----- 2. REACH US CARD (white) ----- */
.hashira-reach-us-card {
    background: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 40px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
}
.hashira-reach-us-card h3 {
    font-family: "Varela", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 8px !important;
}
.hashira-reach-us-card .hashira-card-divider {
    border: 0 !important;
    border-top: 1px solid #E5E7EB !important;
    margin: 20px 0 !important;
}
.hashira-reach-us-card .hashira-contact-label {
    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #61CE70 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 8px !important;
}
.hashira-reach-us-card .hashira-contact-value {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    color: #54595F !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
.hashira-reach-us-card .hashira-contact-value a {
    color: #54595F !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.hashira-reach-us-card .hashira-contact-value a:hover {
    color: #61CE70 !important;
}
.hashira-reach-us-card .hashira-linkedin-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.hashira-reach-us-card .hashira-linkedin-pill:hover {
    border-color: #61CE70 !important;
    color: #61CE70 !important;
}
.hashira-reach-us-card .hashira-linkedin-pill i {
    color: #0A66C2 !important;
}

/* ----- 3. SEND US A MESSAGE CARD (dark navy) ----- */
.hashira-send-message-card {
    background: #0B2035 !important;
    border-radius: 6px !important;
    padding: 40px !important;
    color: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
}
.hashira-send-message-card h3 {
    font-family: "Varela", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px !important;
}
.hashira-send-message-card .hashira-card-divider {
    border: 0 !important;
    border-top: 3px solid #61CE70 !important;
    width: 48px !important;
    margin: 0 0 24px !important;
}
.hashira-send-message-card p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    line-height: 1.6 !important;
    margin: 0 0 24px !important;
    text-align: justify !important;
    hyphens: auto;
}
.hashira-send-message-card .wp-block-button {
    margin-bottom: 20px !important;
}
.hashira-send-message-card .wp-block-button__link {
    background: #61CE70 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 28px !important;
    font-family: "Varela", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.hashira-send-message-card .wp-block-button__link:hover {
    background: #4FB561 !important;
    transform: translateY(-1px);
}
.hashira-send-message-card .hashira-call-fallback {
    font-size: 14px !important;
    color: #FFFFFF !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    text-align: left !important;
}
.hashira-send-message-card .hashira-call-fallback a {
    color: #61CE70 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ----- 4. MAP EMBED ----- */
.hashira-contact-map {
    position: relative !important;
    max-width: 1200px;
    margin: 48px auto 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.hashira-contact-map iframe {
    width: 100% !important;
    height: 420px !important;
    border: 0 !important;
    display: block !important;
}
.hashira-contact-map .hashira-map-open-link {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #FFFFFF !important;
    color: #1A73E8 !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    z-index: 2;
    transition: background-color 0.2s ease;
}
.hashira-contact-map .hashira-map-open-link:hover {
    background: #F5F8FF !important;
}
@media (max-width: 600px) {
    .hashira-contact-map iframe { height: 320px !important; }
}

/* ============================================================
   v1.4.40 — CONTACT US REDESIGN
   ------------------------------------------------------------
   Three changes for Contact Us page:
   
   1. .hashira-send-message-intro — paragraph above the CTA in
      the dark Send Message card. Replaces the v1.4.18 longer
      paragraph + button + call-fallback combo with a single
      tight intro + one CTA. Smaller card height, less empty
      space relative to content.
   
   2. .hashira-send-message-cta — direct mailto link with arrow
      icon, replaces the v1.4.18 wp-block-button + call-fallback
      pattern. Single visible CTA. Cleaner.
   
   3. .hashira-location-cards / .hashira-location-card — two-
      up grid of location cards, each with address text and
      embedded Google Maps iframe. Singapore + Chennai. Maps
      load lazily (loading="lazy" on iframe).
   ============================================================ */

/* ----- 1. Slim Send Message card intro ----- */
.hashira-send-message-card .hashira-send-message-intro {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    line-height: 1.6 !important;
    margin: 0 0 24px !important;
    text-align: left !important;
    opacity: 0.92 !important;
}

/* ----- 2. Send Message CTA — direct mailto with arrow ----- */
.hashira-send-message-card .hashira-send-message-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #61CE70 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 28px !important;
    font-family: "Varela", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    align-self: flex-start;
}
.hashira-send-message-card .hashira-send-message-cta:hover {
    background: #4FB561 !important;
    transform: translateY(-1px);
}
.hashira-send-message-card .hashira-send-message-cta i {
    font-size: 13px;
    transition: transform 0.2s ease;
}
.hashira-send-message-card .hashira-send-message-cta:hover i {
    transform: translateX(3px);
}

/* ----- 3. Location cards (two-up grid with maps) ----- */
.hashira-location-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    max-width: 1200px;
    margin: 0 auto;
}
.hashira-location-card {
    background: #FFFFFF !important;
    border: 1px solid #ECECEC !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
}
.hashira-location-text {
    padding: 24px 28px 20px !important;
}
.hashira-location-text h4 {
    font-family: "Varela", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
}
.hashira-location-tag {
    font-family: "Montserrat", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #61CE70 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 12px !important;
}
.hashira-location-address {
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    color: #54595F !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
.hashira-location-address a {
    color: #54595F !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.hashira-location-address a:hover {
    color: #61CE70 !important;
}
.hashira-location-map {
    display: block !important;
    width: 100% !important;
    height: 240px !important;
    border: 0 !important;
    background: #e8eaed !important;
}
@media (max-width: 768px) {
    .hashira-location-cards {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .hashira-location-map {
        height: 200px !important;
    }
}

/* ============================================================
   v1.4.19 — NAVIGATION SUBMENU + MOBILE HEADER FIXES
   ------------------------------------------------------------
   Two distinct fixes bundled in one release.
   
   Fix A: Services dropdown menu was rendering with WordPress's 
   bare default styling — dark navy background (overlayBackgroundColor 
   was set to "bg-dark" = #0B2035), no border, no shadow, and 
   positioned with leftward bleed instead of dropping cleanly below 
   the parent. Replaced with a proper light-background, properly-
   positioned dropdown matching the rest of the site's visual 
   language.
   
   Fix B: The top utility bar (.hashira-topbar) used to show social media 
   icons (Facebook, X, YouTube, LinkedIn) on desktop. On mobile it 
   was still rendering — and the social icons were appearing in the 
   mobile menu overlay, which the live site doesn't have at all. 
   Originally hidden on mobile to match live's cleaner mobile header 
   (just logo + hamburger). HISTORICAL — entire topbar was removed in 
   v1.4.35 as dead code (it was hidden on every screen size).
   ============================================================ */

/* ----- A. SUBMENU (Services dropdown) — desktop ----- */

/* v1.4.36 — wrapped this entire desktop-submenu section in
   @media (min-width: 901px) so it does NOT apply on mobile.
   Previously these rules leaked to mobile (no media query gate)
   and beat the mobile @media (max-width: 900px) rules below on
   specificity, causing the mobile submenu to render as an
   absolutely-positioned floating dropdown that overlapped the
   parent rows instead of pushing them down inline. Visible
   regression: tapping Services on mobile made "Expert
   Consultation" appear floating over "Contact Us" instead of
   indented below "Services". Fix: media-query-gate the desktop
   block. Mobile rules below now apply uncontested on mobile. */
@media (min-width: 901px) {

/* v1.4.19 — submenu was rendering with a dark navy bg in some deploys 
   (legacy stylesheet caching, or the wp:navigation overlayBackgroundColor 
   leaking into desktop submenus). Force white bg with maximum specificity, 
   and reposition so the dropdown opens directly below the parent and 
   extends rightward — NOT leftward (the v1.4.18 right-anchored variant 
   pushed items off-screen to the left of the Services menu item).

   The dual selector pattern (header.wp-block-template-part AND html body 
   header) covers both the FSE template-part wrapper and the DOM-flattened 
   fallback when the page renders without the template-part wrapper.

   v1.4.20 addition: position:relative on the container so the ::before 
   bridge below positions correctly relative to the submenu itself. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container,
header.wp-block-template-part .wp-block-navigation-submenu .wp-block-navigation__submenu-container,
html body .wp-block-navigation .wp-block-navigation__submenu-container {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #ECECEC !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
    padding: 12px 0 !important;
    margin-top: 8px !important;
    min-width: 280px !important;
    /* Anchor below parent, extending RIGHTWARD from parent's left edge. */
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    /* v1.4.20: relative positioning needed for ::before bridge below. */
    position: absolute !important;
}

/* v1.4.20 — INVISIBLE HOVER BRIDGE
   ----------------------------------------
   Without this, there's a dead 8px gap between the parent menu item 
   ("Services") and the submenu container. When the cursor traverses 
   that gap on its way to click a submenu item, it leaves both the 
   parent and the submenu, causing the submenu to close before the 
   cursor reaches it. Frustrating UX bug, classic to dropdown menus.
   
   Fix: a transparent ::before that extends 12px above the submenu 
   (covering the visible gap and a bit more for safety). The cursor 
   "stays inside" the submenu's hover target the entire time, so the 
   submenu remains open during traversal.
   
   The ::before is purely a hover-bridge — invisible to the eye, no 
   visual effect, but functionally critical for smooth navigation. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-container::before,
html body .wp-block-navigation .wp-block-navigation__submenu-container::before {
    content: "" !important;
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    right: 0 !important;
    height: 12px !important;
    background: transparent !important;
    /* No pointer-events:none here — we WANT this to capture pointer 
       events so the submenu stays open during cursor traversal. */
}

/* Each submenu item: padding, dark text, hover state. */
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item,
html body .wp-block-navigation__submenu-container .wp-block-navigation-item {
    background: transparent !important;
    background-color: transparent !important;
}
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
html body .wp-block-navigation__submenu-container a {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    line-height: 1.4 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap !important;
    text-decoration: none !important;
}
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
html body .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
html body .wp-block-navigation__submenu-container a:hover {
    background: rgba(97, 206, 112, 0.08) !important;
    background-color: rgba(97, 206, 112, 0.08) !important;
    color: #61CE70 !important;
}

/* Active sub-item (current page) — green text, subtle green tint.
   v1.4.39: switched from .current-menu-item to .hashira-current. Same
   reason as primary nav: WordPress class attribution is unreliable on
   page-no-title template. JS-driven class is reliable. */
header.wp-block-template-part .wp-block-navigation__submenu-container li.hashira-current > .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation__submenu-container li.hashira-current > a {
    color: #61CE70 !important;
    background: rgba(97, 206, 112, 0.08) !important;
}

/* The parent menu item with submenu — make sure no leftover dark 
   bg from the overlay attribute paints across the parent. */
header.wp-block-template-part .wp-block-navigation .has-child > .wp-block-navigation-item__content {
    background: transparent !important;
}

/* Submenu indicator (caret/chevron) sits next to the parent label. */
header.wp-block-template-part .wp-block-navigation .wp-block-navigation__submenu-icon {
    margin-left: 6px !important;
}

} /* end @media (min-width: 901px) — v1.4.36 desktop-submenu gate */

/* ============================================================
   MOBILE MENU — v1.4.30
   ------------------------------------------------------------
   Replaces the v1.4.26 mobile overlay. The previous implementation
   was a full-screen overlay with separator lines, auto-expanded
   submenus, and no active-page highlight. The live site uses a
   dropdown panel attached to the header that grows to fit content,
   with collapsed submenus and a black band on the active row.

   This block reimplements that behaviour and adds accessibility
   improvements (aria-expanded, prefers-reduced-motion, focus-visible
   outline, overscroll-behavior containment) that don't exist in
   the WordPress core navigation block by default.

   The companion JS file `mobile-menu.js` handles tap-to-expand,
   single-open accordion behaviour, escape-to-close, dynamic
   header-height measurement, and aria-expanded state syncing.
   ============================================================ */
@media (max-width: 900px) {

    /* PANEL — converts WP's full-screen overlay into a dropdown
       attached below the header. Uses --hashira-mobile-menu-top
       set by mobile-menu.js on each open, falls back to 70px. */
    .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: var(--hashira-mobile-menu-top, 70px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - var(--hashira-mobile-menu-top, 70px)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        background: #FFFFFF !important;
        padding: 0 !important;
        border-radius: 0 0 12px 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
        animation: hashira-menu-slide 200ms ease-out !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    @keyframes hashira-menu-slide {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Reduced motion — disable animation for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        .wp-block-navigation__responsive-container.is-menu-open {
            animation: none !important;
        }
    }

    /* X CLOSE BUTTON — top-right of panel, black, generous tap area */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 12px !important;
        right: 16px !important;
        color: #000000 !important;
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        z-index: 10 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
        width: 24px !important;
        height: 24px !important;
        fill: #000000 !important;
        color: #000000 !important;
    }

    /* MENU LIST — left aligned, no separators, no inherited gap.
       The desktop nav has gap:40px and justify-content:flex-end (from the
       header.html block config). WordPress propagates these onto the mobile
       overlay container via gap:inherit and align-items:var(--navigation-layout-justification-setting).
       We explicitly null all of them here so items stack tight, full-width, left-aligned. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        padding: 56px 0 16px !important;
        margin: 0 !important;
        list-style: none !important;
        text-align: left !important;
        gap: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        --navigation-layout-justification-setting: stretch !important;
    }
    /* Same overrides on the responsive container content (intermediate wrapper WP renders) */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        gap: 0 !important;
        padding-top: 0 !important;
        align-items: stretch !important;
        --navigation-layout-justification-setting: stretch !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        list-style: none !important;
        width: 100% !important;
        align-self: stretch !important;
    }

    /* PRIMARY ITEM ROW */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a.wp-block-navigation-item__content {
        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #2C2C2A !important;
        padding: 14px 24px !important;
        border-bottom: none !important;
        text-align: left !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        background: transparent !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color 150ms ease !important;
    }

    /* TAP FEEDBACK — v1.4.40: switched from :active to JS-driven
       .hashira-tapped class. :active was unreliable across iOS Safari
       and Firefox Android on touch — sometimes didn't fire, sometimes
       cleared too fast to be visible. mobile-menu.js now adds the
       class on touchstart/mousedown and removes on touchend after a
       150ms minimum hold, so feedback is always perceivable. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-tapped > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-tapped > a.wp-block-navigation-item__content {
        background-color: rgba(97, 206, 112, 0.22) !important;
        color: #2DC93C !important;
        font-weight: 500 !important;
    }

    /* v1.4.39 — REMOVED the @media (hover: hover) block.
       Reason: Firefox Android and Chrome DevTools mobile emulation wrongly
       report (hover: hover) as true. The hover rule fired on mobile and
       left a green tint stuck on whichever item was last touched (sticky-
       hover bug visible in v1.4.38 testing).
       
       Mobile menu now relies on :active only — pure tap feedback that
       auto-clears when the finger lifts. Tablet-with-mouse loses the
       subtle hover state, but that's acceptable: tap feedback works on
       both touch and click events. */

    /* FOCUS-VISIBLE — keyboard nav gets a green ring, mouse users don't */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content:focus-visible,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:focus-visible {
        outline: 2px solid #61CE70 !important;
        outline-offset: -2px !important;
    }

    /* ACTIVE ROW — v1.4.38: JS-driven detection.
       v1.4.37's class fallback (.current-menu-item, .current_page_item) was
       reverted because WordPress 6.9 applies these classes incorrectly when
       a page uses the page-no-title template (most of our sub-pages do).
       Symptom: viewing /expert-consultation/ caused About Us to be tagged
       current-menu-item and lit up wrongly.
       
       Also dropping the [aria-current="page"] selector for the same reason —
       WP doesn't set aria-current consistently on these templates either.
       
       v1.4.38 fix: companion mobile-menu.js detects current page by URL match
       (window.location.pathname against each link's href), then adds:
       - .hashira-current to the matching <li>
       - .hashira-current-ancestor to the parent <li> if a sub-item matches
       This bypasses WordPress's broken class/aria attribution entirely.
       Reliable on every page template. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-current > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-current > a.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-current-ancestor.has-child > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-current-ancestor.has-child > a.wp-block-navigation-item__content {
        background-color: #000000 !important;
        color: #61CE70 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    /* CHEVRON for parent items — CSS-drawn, rotates on open.
       v1.4.37: added higher-specificity html body prefix to defend against
       possible third-party overrides. Also added explicit position:relative
       on the content so the chevron-after element renders cleanly. */
    html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content,
    html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child > a.wp-block-navigation-item__content {
        position: relative !important;
    }
    html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content::after,
    html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child > a.wp-block-navigation-item__content::after {
        content: "" !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(45deg) translate(-2px, -2px) !important;
        margin-left: 12px !important;
        transition: transform 200ms ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    @media (prefers-reduced-motion: reduce) {
        html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content::after {
            transition: none !important;
        }
    }

    /* CHEVRON ROTATED when submenu open */
    html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child.hashira-submenu-open > .wp-block-navigation-item__content::after,
    html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child.hashira-submenu-open > a.wp-block-navigation-item__content::after {
        transform: rotate(225deg) translate(-2px, -2px) !important;
    }

    /* HIDE WP's default submenu icon AND the wrapping toggle button.
       WordPress core renders the chevron as either:
       - <button class="wp-block-navigation__submenu-icon"> with an SVG inside
       - <button class="wp-block-navigation-submenu__toggle"> wrapping the icon
       - A standalone <span class="wp-block-navigation__submenu-icon"> on the link
       All variants need to be hidden because we draw our own chevron via ::after. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
    .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation__submenu-icon,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.has-child > button {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* SUBMENU CONTAINER — collapsed by default, expand when parent has .hashira-submenu-open */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transition: max-height 250ms ease, opacity 200ms ease !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        list-style: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
            transition: none !important;
        }
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li.hashira-submenu-open > .wp-block-navigation__submenu-container {
        max-height: 600px !important;
        opacity: 1 !important;
    }

    /* SUB-ITEM ROW — indented, smaller, lighter */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        list-style: none !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a.wp-block-navigation-item__content {
        font-family: "Montserrat", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #54595F !important;
        padding: 10px 24px 10px 40px !important;
        border-bottom: none !important;
        text-align: left !important;
        text-decoration: none !important;
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    /* ACTIVE SUB-ITEM — v1.4.38: JS-driven .hashira-current class.
       Same rationale as primary item — WP class/aria attribution is unreliable
       on the page-no-title template. Companion mobile-menu.js sets the class
       reliably via URL match. */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li.hashira-current > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li.hashira-current > a.wp-block-navigation-item__content {
        color: #61CE70 !important;
        font-weight: 500 !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    /* SUB-ITEM TAP FEEDBACK — v1.4.40: same JS-driven .hashira-tapped */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li.hashira-tapped > .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li.hashira-tapped > a {
        background-color: rgba(97, 206, 112, 0.22) !important;
        color: #2DC93C !important;
        font-weight: 500 !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content:focus-visible,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a:focus-visible {
        outline: 2px solid #61CE70 !important;
        outline-offset: -2px !important;
    }
    /* v1.4.39 — REMOVED the @media (hover: hover) block here too.
       Same reason as the primary-item tap-feedback block above. */

    /* HAMBURGER OPEN BUTTON — kept from v1.4.21, restated for clarity */
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open {
        color: #000000 !important;
    }
}

/* ============================================================
   v1.4.21 — MOBILE RENDERING FIXES
   ------------------------------------------------------------
   Mobile users reported three visible bugs:
   
   1. Hero H1 ("Optimizing the Core Banking Platform") rendered at 
      desktop's 65px on mobile screens, overflowing the viewport. 
      Cause: an unconditional .hashira-hero h1 { font-size: 65px } 
      rule added later in the file overrode the earlier mobile 
      media query that set 25px. Last-rule-wins for equal specificity, 
      and the override had no media query gate.
   
   2. Career button collapsed into a vertical column with each letter 
      on its own line. Cause: the button's own min-width or padding 
      wasn't preventing flex-shrink from squeezing it to a 1-character-
      wide column. Same root cause: later spacing rules overrode 
      mobile padding.
   
   3. Hamburger icon rendered as plain two-line WP default rather than 
      a styled green-bg button matching live's branded look.
   
   This release places all mobile fixes at the END of the stylesheet 
   to win the cascade unambiguously, with !important on every property 
   to defeat any earlier or external override.
   ============================================================ */

/* ----- 1. HERO H1 + SUBHEAD MOBILE SIZING ----- */
@media (max-width: 768px) {
    .hashira-hero h1,
    .hashira-hero .wp-block-heading {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    .hashira-hero .hashira-hero-subhead {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    .hashira-hero .hashira-hero-eyebrow {
        font-size: 13px !important;
    }
}
@media (max-width: 480px) {
    .hashira-hero h1,
    .hashira-hero .wp-block-heading {
        font-size: 30px !important;
    }
    .hashira-hero .hashira-hero-subhead {
        font-size: 15px !important;
    }
}

/* ----- 2. CAREER BUTTON — v1.4.41: hide entirely if Site Editor still has it.
   Theme markup removed the .hashira-header-col-button column in v1.4.34, but
   WP Site Editor customizations persist in the database and don't get reset
   by theme upgrades. If the user's Site Editor still has the Career button
   block, it leaks through on mobile (the desktop layout's flex sizing happens
   to hide it; mobile doesn't). This rule defensively hides it everywhere. */
.hashira-header-col-button {
    display: none !important;
}

/* ----- 2b. CAREER BUTTON — KEEP COMPACT ON MOBILE (legacy, harmless) ----- */
@media (max-width: 782px) {
    /* Lock button text on a single line, prevent flex-shrink-to-1-char */
    .hashira-header-inner .wp-block-button,
    .hashira-header-col-button .wp-block-button {
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }
    .hashira-header-inner .wp-block-button__link,
    .hashira-header-col-button .wp-block-button__link {
        white-space: nowrap !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
    }
    /* The header inner row should allow the button to take its natural width
       and let the nav (hamburger) area be flexible instead. */
    .hashira-header-inner {
        gap: 8px !important;
        align-items: center !important;
    }
    .hashira-header-col-nav {
        flex: 0 0 auto !important;
    }
    .hashira-header-col-button {
        flex: 0 0 auto !important;
    }
    .hashira-header-col-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}
@media (max-width: 480px) {
    .hashira-header-inner .wp-block-button__link,
    .hashira-header-col-button .wp-block-button__link {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }
}

/* ----- 3. HAMBURGER ICON — STYLE TO MATCH LIVE ----- */
@media (max-width: 900px) {
    /* The "open menu" trigger that WP renders for the responsive overlay.
       v1.4.37: absolutely positioned to top-right corner of the header
       so it lands in the conventional mobile-menu location regardless of
       column flex math. The hashira-header (its containing block) is
       position: relative below to anchor this absolute child. */
    .wp-block-navigation__responsive-container-open {
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        transform: translateY(-50%) !important;
        background: #61CE70 !important;
        color: #FFFFFF !important;
        padding: 8px 10px !important;
        border-radius: 4px !important;
        border: none !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 5 !important;
        transition: background-color 0.2s ease;
    }
    .wp-block-navigation__responsive-container-open:hover,
    .wp-block-navigation__responsive-container-open:focus {
        background: #4FB561 !important;
    }
    /* Style the SVG icon inside the trigger to be white. */
    .wp-block-navigation__responsive-container-open svg {
        fill: #FFFFFF !important;
        color: #FFFFFF !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* v1.4.38: Anchor the absolute hamburger to the HEADER bar specifically.
       v1.4.37 had this rule but the hamburger was still mispositioned because
       WordPress's .wp-block-navigation has `position: relative` (set by core
       block CSS). That made the nav element the positioning context for the
       absolutely-positioned hamburger, not .hashira-header. The hamburger
       landed wherever the nav element sat (often centered-ish in the
       column), not at the header's right edge.
       
       Fix: force position:static on every intermediate ancestor between the
       hamburger and .hashira-header. The hamburger then climbs to
       .hashira-header (the only ancestor with position:relative) for its
       positioning context. right:16px lands at the header's right edge. */
    .hashira-header {
        position: relative !important;
    }
    .hashira-header .hashira-header-inner,
    .hashira-header .hashira-header-col,
    .hashira-header .hashira-header-col-nav,
    .hashira-header .hashira-header-col-nav .wp-block-navigation,
    .hashira-header nav.wp-block-navigation {
        position: static !important;
    }

    /* v1.4.37: HIDE HAMBURGER WHEN MENU IS OPEN.
       WordPress adds .has-modal-open to <html> when the responsive
       overlay opens. While open, the X close button shows inside the
       panel, so the hamburger trigger should disappear — otherwise
       both icons render simultaneously and confuse users. */
    html.has-modal-open .wp-block-navigation__responsive-container-open,
    body.has-modal-open .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}

/* ----- 4. HERO PADDING ON MOBILE ----- */
@media (max-width: 768px) {
    .hashira-hero {
        padding: 60px 24px !important;
    }
    .hashira-hero-content,
    .hashira-hero > div {
        padding: 0 !important;
    }
}

/* ============================================================
   v1.4.22 — CAREERS PAGE COMPONENTS
   ------------------------------------------------------------
   Three small patterns for the "Coming Soon" Careers landing page. 
   These will eventually be deprecated when the full Phase 1 Careers 
   module ships, but they give the placeholder page a polished, 
   on-brand feel until then.
   ============================================================ */

/* ----- 1. COMING SOON CARD ----- */
.hashira-coming-soon-card {
    background: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 56px 48px !important;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    text-align: center !important;
}
.hashira-coming-soon-card h2 {
    font-family: "Varela", sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 24px 0 16px !important;
    line-height: 1.3 !important;
}
.hashira-coming-soon-card p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    color: #54595F !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
    text-align: center !important;
}
.hashira-coming-soon-card .hashira-coming-soon-cta {
    margin: 28px 0 24px !important;
}
.hashira-coming-soon-card .hashira-coming-soon-cta .wp-block-button__link {
    background: #61CE70 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 32px !important;
    font-family: "Varela", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.hashira-coming-soon-card .hashira-coming-soon-cta .wp-block-button__link:hover {
    background: #4FB561 !important;
    transform: translateY(-1px);
}
.hashira-coming-soon-card .hashira-coming-soon-footnote {
    font-size: 14px !important;
    color: #54595F !important;
    margin: 0 !important;
}
.hashira-coming-soon-card .hashira-coming-soon-footnote a {
    color: #000000 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease;
}
.hashira-coming-soon-card .hashira-coming-soon-footnote a:hover {
    color: #61CE70 !important;
}

/* ----- 2. COMING SOON ICON (briefcase in green tint circle) ----- */
.hashira-coming-soon-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    background: rgba(97, 206, 112, 0.15) !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
}
.hashira-coming-soon-icon i {
    color: #61CE70 !important;
    font-size: 28px !important;
}

/* ----- 3. COMING SOON PILL (small label) ----- */
.hashira-coming-soon-pill {
    display: inline-block !important;
    background: rgba(97, 206, 112, 0.15) !important;
    color: #61CE70 !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin: 16px 0 0 !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .hashira-coming-soon-card {
        padding: 40px 28px !important;
    }
    .hashira-coming-soon-card h2 {
        font-size: 22px !important;
    }
    .hashira-coming-soon-icon {
        width: 60px !important;
        height: 60px !important;
    }
    .hashira-coming-soon-icon i {
        font-size: 24px !important;
    }
}


/* ============================================================
   v1.4.34 — Header restructure: 2-column layout.

   Previous v1.4.3 hotfix split the 3-column header at 1:3:1
   (logo : nav : Career button). v1.4.34 removes the Career
   button column entirely — Careers becomes a normal nav item
   added via WP admin, and the right column is gone. The header
   now needs only logo + nav.

   New ratio: logo 1 : nav 4. Logo stays compact left; nav
   absorbs the freed width, sits right-justified to give the
   header a confident, less-busy shape (matches McKinsey/Bain/
   Deloitte pattern of no header CTA button on serious B2B
   consultancy sites).

   The hashira-header-col-button rules from v1.4.3 above are
   left in place as dead rules — harmless without the matching
   class in markup, and preserves the audit trail.
   ============================================================ */
.hashira-header-col-logo {
    flex: 1 1 0 !important;
}
.hashira-header-col-nav {
    flex: 4 1 0 !important;
}
.hashira-header-col-nav .wp-block-navigation,
.hashira-header-col-nav .wp-block-navigation__container {
    justify-content: flex-end !important;
}