/* ==========================================================================
   International Exporters (Figma frame 49:1434)
   ========================================================================== */

/* ---------- Page header (171:3479) + background photo (238:18575) ---------- */
.exp-hero { position: relative; z-index: 0; }
/* Photo is 785px tall from the top of the frame (behind the 76px nav) and runs 17px into the next section. */
.exp-hero__bg {
    position: absolute; z-index: -1; left: 0; right: 0;
    top: calc(-1 * var(--nav-h)); bottom: -17px;
    overflow: hidden; pointer-events: none;
}
.exp-hero__bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; }
.exp-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); }

.exp-hero__inner {
    padding: 120px max(40px, calc((100% - 1440px) / 2)) 280px;
}
.exp-hero__copy { width: 888px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.exp-hero__title { color: var(--white); }
.exp-hero__body { display: flex; flex-direction: column; gap: 32px; }
.exp-hero__lede { width: 599px; max-width: 100%; color: var(--neutral-800); }
.exp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Buttons here are the 40px variant: 6px padding, 28px icon. */
.exp-btn { gap: 11px; padding: 6px 6px 6px 19px; }
.exp-btn .btn-gold__icon, .exp-btn .btn-glass__icon { width: 28px; height: 28px; }
.exp-btn--glass {
    font-size: 13.5px; letter-spacing: -0.189px;
    border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: none;
    padding: 5px 5px 5px 18px; /* border included: total box matches 6/19 padding */
}
.exp-btn--glass .btn-glass__icon { background: rgba(255, 255, 255, 0.08); }

/* ---------- The journey (49:1480) ---------- */
.exp-journey { padding-top: 80px; }
.exp-journey__lede { margin-top: 20px; }
.exp-rail { display: flex; gap: 12px; margin-top: 28px; }
.exp-rail__step {
    flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column;
    padding: 5px; border-radius: var(--radius-sm);
    background: var(--glass-fill); border: 1px solid var(--glass-hair);
}
.exp-rail__core {
    flex: 1 0 auto; display: flex; flex-direction: column; gap: 8px;
    padding: 22px 20px 20px; border-radius: var(--radius-xs);
    background: var(--glass-fill-2); box-shadow: var(--bezel-inner);
}
.exp-rail__head { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.exp-rail__title { font-weight: 600; font-size: 16.5px; line-height: 1.22; letter-spacing: -0.429px; color: var(--text-primary); }
.exp-rail__text { font-size: 14px; line-height: 1.55; color: var(--text-tertiary); }

/* ---------- Shared split (sticky heading + content) ---------- */
.exp-split { display: flex; align-items: flex-start; }
.exp-split--hurt { gap: 79px; }
.exp-split--hurt .exp-split__aside { width: 463px; }
.exp-split--covers { gap: 80px; }
.exp-split--covers .exp-split__aside { width: 566px; }
.exp-split__aside { flex-shrink: 0; position: sticky; top: calc(var(--nav-h) + 40px); }

/* ---------- Where does it hurt (49:1493) ---------- */
.exp-hurt { padding-top: 101px; }
.exp-accordion { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 10px; }
.exp-acc {
    padding: 6px; border-radius: var(--radius-lg);
    background: var(--glass-fill); border: 1px solid var(--glass-hair);
}
.exp-acc__core {
    padding: 21px 24px; border-radius: var(--radius-md);
    background: var(--glass-fill-2); box-shadow: var(--bezel-inner);
}
.exp-acc__heading { margin: 0; font: inherit; }
.exp-acc__toggle {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    width: 100%; text-align: left;
}
.exp-acc__q {
    flex: 1 0 0; min-width: 1px; align-self: center;
    font-weight: 600; font-size: 16.5px; line-height: 1.34; letter-spacing: -0.429px; color: var(--text-primary);
}
.exp-acc__icon {
    position: relative; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-pill);
    background: var(--glass-fill-2); border: 1px solid var(--glass-hair);
    transition: background-color .15s ease;
}
.exp-acc__toggle:hover .exp-acc__icon { background: var(--glass-fill-3); }
.exp-acc__icon img { width: 12px; height: 12px; }
/* Collapsed state shows a plus: the same minus glyph, a second copy rotated 90deg. */
.exp-acc__icon-v { position: absolute; top: 50%; left: 50%; margin: -6px 0 0 -6px; transform: rotate(90deg); opacity: 0; transition: opacity .15s ease; }
.exp-acc__toggle[aria-expanded="false"] .exp-acc__icon-v { opacity: 1; }
.exp-acc__body {
    margin-top: 18px;
    font-size: 16.5px; line-height: 1.34; letter-spacing: -0.429px; color: var(--text-secondary);
}
.exp-acc__body[hidden] { display: none; }
.exp-acc__body p + p { margin-top: 1.34em; }
.exp-acc__body strong { font-weight: 700; }

/* ---------- Trade-related covers (49:1505) ---------- */
.exp-covers { padding-top: 101px; }
.exp-covers__aside { display: flex; flex-direction: column; gap: 20px; }
.exp-covers__grid { flex: 1 0 0; min-width: 1px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.exp-tile {
    display: flex; flex-direction: column;
    padding: 6px; border-radius: var(--radius-lg);
    background: var(--glass-fill); border: 1px solid var(--glass-hair);
    transition: border-color .15s ease;
}
.exp-tile--wide { grid-column: 1 / -1; }
.exp-tile__core {
    flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 28px 26px 24px; border-radius: var(--radius-md);
    background: var(--glass-fill-2); box-shadow: var(--bezel-inner);
}
.exp-tile__copy { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.exp-tile__copy .tile-name { color: var(--text-primary); }
.exp-tile__text { font-size: 14.5px; line-height: 1.58; color: var(--text-tertiary); }
.exp-tile__more {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 13.5px; line-height: normal; color: var(--accent-gold); white-space: nowrap;
}
.exp-tile__ico {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--accent-gold-dim);
    transition: transform .15s ease;
}
.exp-tile:hover { border-color: rgba(255, 172, 0, 0.3); }
.exp-tile:hover .exp-tile__ico { transform: translate(2px, -2px); }

/* ---------- Responsive ---------- */
/* Tablet / phone: below 1280px the photo is cropped narrower, so the container stacks sit behind the copy and the
   dark-grey lede (designed for the open sky at 1920) becomes unreadable. Add a navy scrim on the copy side and switch
   the lede to light text; 44px-tall CTAs for touch. Desktop (>=1280) is untouched. */
@media (max-width: 1279px) {
    .exp-hero__bg::after {
        background: linear-gradient(90deg, rgba(15, 23, 42, 0.84) 0%, rgba(15, 23, 42, 0.7) 50%, rgba(15, 23, 42, 0.2) 82%, rgba(15, 23, 42, 0.05) 100%);
    }
    .exp-hero__title { text-wrap: balance; } /* no single-character CJK orphan (e.g. zh at 820) */
    .exp-hero__lede { color: rgba(243, 246, 250, 0.9); text-wrap: pretty; }
    .exp-split__aside .display-h1 { text-wrap: balance; }
    .exp-btn { padding: 8px 8px 8px 20px; }
    .exp-btn--glass {
        padding: 7px 7px 7px 19px;
        background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.14);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    }
    /* Touch: 44px hit area (32px icon + 6px padding each side, cancelled by negative margin so the card doesn't grow). */
    .exp-acc__toggle { padding: 6px 0; margin: -6px 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .exp-acc__icon { width: 32px; height: 32px; }
}
/* Sticky aside only when the viewport is tall enough for it (short landscape tablets: plain flow). */
@media (max-width: 1279px) and (max-height: 700px) {
    .exp-split__aside { position: static; }
}
@media (max-width: 1312px) {
    .exp-split--hurt { gap: 48px; }
    .exp-split--covers { gap: 48px; }
    .exp-split--hurt .exp-split__aside { width: 36%; }
    .exp-split--covers .exp-split__aside { width: 42%; }
}
@media (max-width: 1024px) {
    .exp-hero__inner { padding: 96px 32px 200px; }
    .exp-rail { flex-wrap: wrap; }
    .exp-rail__step { flex: 1 1 calc(50% - 6px); }
    .exp-split { flex-direction: column; gap: 32px; }
    .exp-split--hurt, .exp-split--covers { gap: 32px; }
    .exp-split--hurt .exp-split__aside, .exp-split--covers .exp-split__aside { width: 100%; position: static; }
    .exp-accordion, .exp-covers__grid { width: 100%; flex: none; }
}
@media (max-width: 640px) {
    .exp-hero__inner { padding: 56px var(--gutter) 120px; }
    .exp-hero__bg img { object-position: 8% top; }
    /* Copy spans the full width on phones: scrim runs top-to-bottom, fading out over the containers below the CTAs. */
    .exp-hero__bg::after {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.74) 55%, rgba(15, 23, 42, 0.3) 82%, rgba(15, 23, 42, 0.1) 100%);
    }
    .exp-hero__body { gap: 28px; }
    .exp-hero__ctas { flex-direction: column; gap: 10px; }
    .exp-hero__ctas .exp-btn { justify-content: space-between; width: 100%; font-size: 15px; }
    .exp-rail__text { font-size: 15px; }
    .exp-tile__text { font-size: 15px; }
    .exp-tile__core { padding: 24px 20px 22px; }
    .exp-journey { padding-top: 64px; }
    .exp-hurt, .exp-covers { padding-top: 72px; }
    .exp-rail { flex-direction: column; }
    .exp-rail__step { flex: none; }
    .exp-rail__head { white-space: normal; }
    .exp-acc__core { padding: 18px 18px; }
    .exp-covers__grid { grid-template-columns: 1fr; }
}