/* =========================================================
   TERRAVAULT LOGISTICS — MAIN STYLESHEET
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--tl-font);
    color: var(--tl-gray-900);
    line-height: 1.65;
    background: var(--tl-white);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.2; margin: 0 0 16px; color: var(--tl-gray-900); }
p { margin: 0 0 14px; color: var(--tl-gray-700); }
button { font-family: inherit; cursor: pointer; }

.tl-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.tl-section { padding: 90px 0; }
.tl-section--tinted { background: var(--tl-gray-100); }
.tl-section--dark { background: var(--tl-dark); }
.tl-section--dark p { color: #B9C2CB; }
.tl-section--dark h2, .tl-section--dark h3 { color: #fff; }

.tl-eyebrow { display: inline-block; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; color: var(--tl-primary); margin-bottom: 10px; }
.tl-eyebrow--light { color: var(--tl-accent); }

.tl-section-heading { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.tl-section-heading h2 { font-size: 36px; }
.tl-section-heading--light h2 { color: #fff; }

.tl-wysiwyg { color: var(--tl-gray-700); }
.tl-wysiwyg--center { max-width: 820px; margin: 0 auto; text-align: center; }
.tl-wysiwyg p:last-child { margin-bottom: 0; }

/* =========================================================
   BUTTONS
   ========================================================= */
.tl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; border-radius: 6px; font-weight: 600; font-size: 15px;
    border: 2px solid transparent; transition: all .25s ease; white-space: nowrap;
}
.tl-btn--primary { background: var(--tl-primary); color: #fff; }
.tl-btn--primary:hover { background: var(--tl-primary-dark); transform: translateY(-2px); }
.tl-btn--accent { background: var(--tl-accent); color: var(--tl-dark); }
.tl-btn--accent:hover { background: #b8931f; transform: translateY(-2px); }
.tl-btn--lg { padding: 16px 38px; font-size: 16px; }

/* =========================================================
   TOP BAR
   ========================================================= */
.tl-topbar { background: var(--tl-primary-dark); color: #cfe0ee; font-size: 13px; }
.tl-topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; flex-wrap: wrap; gap: 6px; }
.tl-topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; }
.tl-topbar__contact span { display: inline-flex; align-items: center; gap: 6px; }
.tl-topbar__social { display: flex; gap: 12px; }
.tl-topbar__social a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: background .2s; }
.tl-topbar__social a:hover { background: var(--tl-accent); color: var(--tl-dark); }

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.tl-header { background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 500; }
.tl-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }
.tl-header__logo img { max-height: var(--tl-header-logo-h, 70px); width: auto !important; height: auto !important; object-fit: contain; }
.tl-logo-fallback { display: flex; align-items: center; gap: 10px; color: var(--tl-primary); }
.tl-logo-fallback i { font-size: 30px; }
.tl-logo-fallback__text { display: flex; flex-direction: column; line-height: 1.1; }
.tl-logo-fallback__text strong { font-size: 20px; font-family: 'Playfair Display', serif; }
.tl-logo-fallback__text small { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--tl-gray-500); }

.tl-header__identity { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.25; padding-left: 18px; margin-left: 4px; border-left: 1px solid var(--tl-gray-200, #e2e6ea); flex-shrink: 0; max-width: 220px; min-width: 0; }
.tl-header__identity-name { font-size: 13.5px; font-weight: 700; letter-spacing: .3px; color: var(--tl-primary); font-family: 'Playfair Display', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-header__identity-address { font-size: 11px; color: var(--tl-gray-500); display: flex; align-items: center; gap: 5px; min-width: 0; }
.tl-header__identity-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-header__identity-contact { font-size: 11px; color: var(--tl-gray-500); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.tl-header__identity-contact a { color: var(--tl-gray-500); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-header__identity-contact a:hover { color: var(--tl-primary); }
.tl-header__identity i { font-size: 10.5px; flex-shrink: 0; }

.tl-nav { flex: 1; min-width: 0; display: flex; justify-content: center; padding-left: 1.5rem; }
.tl-menu { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.tl-menu-item { position: relative; flex-shrink: 0; }
.tl-menu-link { display: flex; align-items: center; gap: 5px; padding: 12px 13px; font-weight: 600; font-size: 14.5px; color: var(--tl-gray-900); border-radius: 6px; transition: color .2s, background .2s; white-space: nowrap; }
.tl-menu-link:hover, .tl-menu-item:hover > .tl-menu-link { color: var(--tl-primary); background: var(--tl-gray-100); }
.tl-menu-caret { font-size: 10px; transition: transform .2s; }
.tl-menu-item:hover > .tl-menu-link .tl-menu-caret { transform: rotate(180deg); }

.tl-sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 240px;
    background: #fff; border-radius: 8px; box-shadow: var(--tl-shadow);
    padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .2s ease; z-index: 50;
}
.tl-menu-item:hover > .tl-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.tl-sub-menu .tl-menu-item { width: 100%; }
.tl-sub-menu .tl-menu-link { width: 100%; padding: 10px 14px; justify-content: space-between; }
.tl-sub-menu--flyout { top: -10px; left: 100%; margin-left: 6px; }

.tl-header__cta { flex-shrink: 0; }
.tl-header__cta .tl-btn { padding: 11px 24px; font-size: 14px; }

.tl-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.tl-menu-toggle span { width: 26px; height: 3px; background: var(--tl-primary); border-radius: 2px; transition: all .25s; }

/* =========================================================
   HERO VIDEO SLIDER
   ========================================================= */
.tl-hero-slider { position: relative; width: 100%; height: 92vh; min-height: 560px; overflow: hidden; }
.tl-hero-slider--short { height: 62vh; min-height: 440px; }
.tl-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease; }
.tl-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.tl-hero-media { position: absolute; inset: 0; }
.tl-hero-video { width: 100%; height: 100%; object-fit: cover; }
.tl-hero-video--placeholder { background: linear-gradient(135deg, var(--tl-primary-dark), var(--tl-primary)); }
.tl-hero-video--gold { background: linear-gradient(135deg, #3a2f0d, var(--tl-accent)); }
.tl-hero-video--diamond { background: linear-gradient(135deg, #0d2b3a, #4fa9c9); }
.tl-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,41,68,.82) 0%, rgba(7,41,68,.55) 55%, rgba(7,41,68,.35) 100%); }
.tl-hero-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 700px; }
.tl-hero-title { color: #fff; font-size: 52px; margin-bottom: 18px; }
.tl-hero-subtitle { color: #E4EBF1; font-size: 19px; max-width: 560px; margin-bottom: 30px; }
.tl-hero-slider--short .tl-hero-title { font-size: 40px; }

.tl-hero-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.tl-hero-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; opacity: .6; transition: all .2s; }
.tl-hero-dot.is-active { background: var(--tl-accent); border-color: var(--tl-accent); opacity: 1; }
.tl-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); color: #fff; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 18px; z-index: 5; transition: background .2s; }
.tl-hero-arrow:hover { background: var(--tl-accent); color: var(--tl-dark); }
.tl-hero-arrow--prev { left: 24px; }
.tl-hero-arrow--next { right: 24px; }

/* =========================================================
   INTRO / GENERIC TEXT SECTIONS
   ========================================================= */
.tl-intro { text-align: center; }
.tl-intro__grid { max-width: 860px; margin: 0 auto; }
.tl-intro__content h2 { font-size: 34px; }

/* =========================================================
   STATS
   ========================================================= */
.tl-stats { background: var(--tl-primary); padding: 46px 0; }
.tl-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.tl-stat__number { display: block; font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 700; color: var(--tl-accent); }
.tl-stat__label { display: block; color: #DCE8F2; font-size: 14px; margin-top: 6px; }

/* =========================================================
   CARDS (services, values, why-choose, purposes)
   ========================================================= */
.tl-cards { display: grid; gap: 28px; }
.tl-cards--4 { grid-template-columns: repeat(4, 1fr); }
.tl-cards--3 { grid-template-columns: repeat(3, 1fr); }

.tl-card {
    background: #fff; border: 1px solid var(--tl-gray-200); border-radius: var(--tl-radius);
    padding: 34px 26px; text-align: left; transition: transform .25s, box-shadow .25s;
    display: flex; flex-direction: column;
}
.tl-card:hover { transform: translateY(-6px); box-shadow: var(--tl-shadow); }
.tl-card__icon { width: 58px; height: 58px; border-radius: 12px; background: rgba(10,61,98,.08); color: var(--tl-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; }
.tl-card__icon--accent { background: rgba(201,162,39,.15); color: var(--tl-accent); }
.tl-card__number { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 22px; }
.tl-card__title { font-size: 20px; margin-bottom: 10px; }
.tl-card__desc { font-size: 14.5px; flex-grow: 1; }
.tl-card__link { margin-top: 12px; color: var(--tl-primary); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.tl-card--dark { background: #171F27; border-color: #262F38; }
.tl-card--dark .tl-card__title { color: #fff; }
.tl-card--dark .tl-card__desc { color: #AEB9C2; }
.tl-card--service { position: relative; overflow: hidden; }
.tl-card__image { height: 130px; margin: -34px -26px 20px; background-size: cover; background-position: center; }
.tl-card--special { cursor: pointer; }

/* =========================================================
   SPECIAL SERVICE — EVEN 2x2 CARD GRID (4 cards, same size)
   Row 1: Safe Keeping Receipts, Secure Storage.
   Row 2: Diamond Exportation, Gold Exportation.
   ========================================================= */
.tl-special-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.tl-special-grid .tl-card--special { margin: 0; height: 100%; }
.tl-special-grid .tl-card--special .tl-card__image { height: 210px; }
.tl-special-grid .tl-card--special .tl-card__title { font-size: 24px; }
.tl-special-grid .tl-card--special .tl-card__desc { font-size: 15.5px; }

/* =========================================================
   WHY / MISSION-VISION
   ========================================================= */
.tl-mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tl-mv__card { background: #fff; border-radius: var(--tl-radius); padding: 40px; box-shadow: var(--tl-shadow); text-align: center; }
.tl-mv__card i { font-size: 34px; color: var(--tl-primary); margin-bottom: 16px; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.tl-cta-banner { background: linear-gradient(120deg, var(--tl-primary-dark), var(--tl-primary)); padding: 60px 0; }
.tl-cta-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.tl-cta-banner h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.tl-cta-banner p { color: #D8E4EE; margin: 0; }

/* =========================================================
   PAGE HERO (About, Special Service, generic)
   ========================================================= */
.tl-page-hero { position: relative; padding: 130px 0 80px; background: linear-gradient(120deg, var(--tl-primary-dark), var(--tl-primary)); background-size: cover; background-position: center; }
.tl-page-hero__overlay { position: absolute; inset: 0; background: rgba(7,20,32,.55); }
.tl-page-hero__overlay--gold { background: rgba(30,20,4,.6); }
.tl-page-hero__content { position: relative; z-index: 2; max-width: 700px; }
.tl-page-hero__content h1 { color: #fff; font-size: 44px; margin-bottom: 12px; }
.tl-page-hero__content p { color: #E4EBF1; font-size: 17px; }
.tl-page-hero--simple { padding: 100px 0 60px; text-align: center; }
.tl-page-hero--simple .tl-page-hero__content { max-width: 100%; margin: 0 auto; }
.tl-page-hero--gradient { background: linear-gradient(120deg, #1c1204, var(--tl-primary-dark)); }

/* =========================================================
   ABOUT PAGE SPECIFIC
   ========================================================= */
.tl-about-intro__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: start; }
.tl-about-intro__text h2 { font-size: 32px; }
.tl-image-placeholder { background: var(--tl-gray-100); border-radius: var(--tl-radius); height: 340px; display: flex; align-items: center; justify-content: center; font-size: 60px; color: var(--tl-gray-500); }

/* -- Hero image card (About page company photo) -- */
.tl-hero-image-card { position: relative; padding: 22px 22px 0 0; margin-top: 80px; }
.tl-hero-image-card img,
.tl-hero-image-card .tl-image-placeholder {
    position: relative; z-index: 2; width: 100%; height: 400px; object-fit: cover;
    border-radius: var(--tl-radius); box-shadow: 0 20px 50px rgba(10,20,32,.22);
}
.tl-hero-image-card__badge {
    position: absolute; top: 0; left: 0; z-index: 3;
    background: var(--tl-accent); color: var(--tl-dark);
    font-weight: 700; font-size: 13px; letter-spacing: .5px;
    padding: 10px 18px; border-radius: 8px;
    box-shadow: 0 10px 24px rgba(201,162,39,.35);
}
.tl-hero-image-card__caption {
    position: absolute; left: 20px; right: 42px; bottom: 18px; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    background: rgba(7,20,32,.72); backdrop-filter: blur(2px);
    color: #fff; font-size: 13.5px; font-weight: 500;
    padding: 12px 16px; border-radius: 8px;
}
.tl-hero-image-card__caption i { color: var(--tl-accent); }

/* =========================================================
   SPECIAL SERVICE TEASER (on Services page)
   ========================================================= */
.tl-special-teaser { background: var(--tl-dark); padding: 46px 0; }
.tl-special-teaser__inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.tl-special-teaser__icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(201,162,39,.15); color: var(--tl-accent); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.tl-special-teaser__text { flex: 1; min-width: 260px; }
.tl-special-teaser__text h2 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.tl-special-teaser__text p { color: #B9C2CB; margin: 0; }

/* =========================================================
   PROCESS STEPS (Gold / Diamond / SKR / Track)
   ========================================================= */
.tl-process__list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.tl-process__item { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--tl-gray-200); }
.tl-process__item:last-child { border-bottom: none; }
.tl-process__number {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    background: var(--tl-primary); color: #fff; font-family: 'Playfair Display', serif; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.tl-process__content h3 { font-size: 19px; margin-bottom: 6px; }
.tl-process__content p { margin: 0; font-size: 14.5px; }

.tl-compliance-note__box { max-width: 880px; margin: 0 auto; display: flex; gap: 18px; background: rgba(10,61,98,.06); border: 1px solid rgba(10,61,98,.15); border-radius: var(--tl-radius); padding: 26px 30px; }
.tl-compliance-note__box i { color: var(--tl-primary); font-size: 26px; flex-shrink: 0; margin-top: 4px; }
.tl-note-box { max-width: 880px; margin: 40px auto 0; display: flex; gap: 18px; background: var(--tl-gray-100); border-radius: var(--tl-radius); padding: 26px 30px; }
.tl-note-box i { color: var(--tl-primary); font-size: 26px; flex-shrink: 0; margin-top: 4px; }

/* =========================================================
   STORAGE VIDEO CARDS
   ========================================================= */
.tl-storage-cards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.tl-video-card { border-radius: var(--tl-radius); overflow: hidden; box-shadow: var(--tl-shadow); background: #fff; }
.tl-video-card__media { position: relative; height: 260px; overflow: hidden; }
.tl-video-card__media video, .tl-video-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tl-video-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); }
.tl-video-card__content { padding: 30px; }
.tl-video-card__icon { font-size: 26px; color: var(--tl-accent); margin-bottom: 12px; }
.tl-video-card__content h3 { font-size: 22px; }

/* =========================================================
   FEES SECTION
   ========================================================= */
.tl-fees__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; margin: 0 auto 24px; }
.tl-fee-card { background: #fff; border-radius: var(--tl-radius); box-shadow: var(--tl-shadow); padding: 32px; text-align: center; }
.tl-fee-card i { font-size: 30px; color: var(--tl-accent); margin-bottom: 12px; }
.tl-fee-card__amount { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: var(--tl-primary); margin: 8px 0; }
.tl-fee-card p { font-size: 13.5px; margin: 0; }
.tl-fees__note { text-align: center; max-width: 700px; margin: 0 auto 30px; font-size: 14px; font-style: italic; }
.tl-storage-fee-note { max-width: 880px; margin: 0 auto; display: flex; gap: 16px; background: #fff; border: 1px solid var(--tl-gray-200); border-radius: var(--tl-radius); padding: 24px 28px; }
.tl-storage-fee-note i { color: var(--tl-primary); font-size: 22px; flex-shrink: 0; margin-top: 3px; }

/* =========================================================
   CONTACT PAGE — IMAGE HERO SLIDER (rotates every 4s)
   ========================================================= */
.tl-image-hero { position: relative; height: 60vh; min-height: 420px; overflow: hidden; }
.tl-image-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }
.tl-image-hero__slide.is-active { opacity: 1; }
.tl-image-hero__slide--placeholder { background: linear-gradient(120deg, var(--tl-primary-dark), var(--tl-primary)); }
.tl-image-hero__overlay { position: absolute; inset: 0; background: rgba(7,20,32,.55); }
.tl-image-hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 0 auto; }
.tl-image-hero__content h1 { color: #fff; font-size: 42px; }
.tl-image-hero__content p { color: #E4EBF1; }

.tl-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.tl-contact-info { display: flex; flex-direction: column; }
.tl-contact-info__list { display: flex; flex-direction: column; gap: 22px; margin: 24px 0; }
.tl-contact-info__list li { display: flex; gap: 16px; }
.tl-contact-info__list i { width: 42px; height: 42px; border-radius: 50%; background: rgba(10,61,98,.08); color: var(--tl-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tl-contact-info__list strong { display: block; font-size: 14px; color: var(--tl-gray-900); }
.tl-contact-info__list span { font-size: 14.5px; color: var(--tl-gray-700); }
/* Map fills the remaining height of the (grid-stretched) info column, so
   its bottom edge lines up with the message form's bottom edge on desktop. */
.tl-contact-map { flex: 1; display: flex; min-height: 200px; }
.tl-contact-map iframe { width: 100%; height: 100%; border: 0; border-radius: var(--tl-radius); }

.tl-contact-form-wrap { background: var(--tl-gray-100); padding: 40px; border-radius: var(--tl-radius); }
.tl-form-row { margin-bottom: 18px; }
.tl-form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tl-contact-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--tl-gray-900); }
.tl-contact-form input, .tl-contact-form textarea {
    width: 100%; padding: 13px 16px; border: 1px solid var(--tl-gray-200); border-radius: 6px;
    font-family: inherit; font-size: 14.5px; background: #fff; transition: border-color .2s;
}
.tl-contact-form input:focus, .tl-contact-form textarea:focus { outline: none; border-color: var(--tl-primary); }
.tl-form-notice { padding: 14px 18px; border-radius: 6px; margin-bottom: 20px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.tl-form-notice--success { background: #E4F6E9; color: #1E7B3A; }
.tl-form-notice--error { background: #FBE7E7; color: #B23A3A; }

/* =========================================================
   SKR — "ENTER YOUR SKR NUMBER" VERIFICATION FORM
   ========================================================= */
.tl-skr-lookup { max-width: 720px; margin: 0 auto; text-align: center; }
.tl-skr-lookup__text p { margin-bottom: 0; }
.tl-skr-lookup__form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.tl-skr-lookup__form input {
    flex: 1; min-width: 220px; padding: 14px 18px; border-radius: 6px;
    border: 1px solid var(--tl-gray-200); background: #fff; font-family: inherit; font-size: 14.5px;
    transition: border-color .2s;
}
.tl-skr-lookup__form input:focus { outline: none; border-color: var(--tl-primary); }
.tl-skr-lookup__form button { flex-shrink: 0; }
.tl-skr-lookup .tl-form-notice { text-align: left; margin: 20px 0 0; }
@media (max-width: 640px) {
    .tl-skr-lookup__form { flex-direction: column; }
    .tl-skr-lookup__form input, .tl-skr-lookup__form button { width: 100%; }
}

/* =========================================================
   COMPLIANCE PAGE — GOLD / DIAMOND FRAMEWORK BLOCKS
   ========================================================= */
.tl-compliance-block__intro { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.tl-compliance-block__intro h2 { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 32px; }
.tl-compliance-block__intro h2 i { color: var(--tl-accent); font-size: 26px; }
.tl-compliance-block__link { text-align: center; margin-top: 34px; }

/* =========================================================
   TRACK SHIPPING / SKR — BACKGROUND-IMAGE HERO
   ========================================================= */
.tl-map-hero { position: relative; padding: 150px 0 100px; background-size: cover; background-position: center; text-align: center; }
.tl-map-hero--default {
    background-color: var(--tl-primary-dark);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0, transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.05) 0, transparent 40%),
        linear-gradient(120deg, #072944, #0A3D62);
}
.tl-warehouse-hero--default { background: linear-gradient(120deg, #1a1a1a, #3a3a3a); }
.tl-map-hero__overlay { position: absolute; inset: 0; background: rgba(4,15,26,.55); }
.tl-map-hero__content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.tl-map-hero__content h1 { color: #fff; font-size: 42px; }
.tl-map-hero__content p { color: #E4EBF1; margin-bottom: 30px; }

.tl-track-form { display: flex; gap: 12px; max-width: 560px; margin: 0 auto; flex-wrap: wrap; }
.tl-track-form input { flex: 1; min-width: 240px; padding: 15px 18px; border-radius: 6px; border: none; font-size: 14.5px; }
.tl-track-form__hint { font-size: 13px; color: #B9C2CB; margin-top: 14px; margin-bottom: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.tl-footer { background: var(--tl-dark); color: #AEB9C2; padding: 70px 0 0; }
.tl-footer__grid { display: grid; grid-template-columns: 1.3fr 0.85fr 0.95fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.tl-footer__logo img { max-height: var(--tl-footer-logo-h, 46px); width: auto !important; height: auto !important; object-fit: contain; margin-bottom: 16px; }
.tl-footer__logo-text { display: block; font-size: 20px; font-family: 'Playfair Display', serif; color: #fff; margin-bottom: 16px; }
.tl-footer__tagline { font-size: 14px; margin-bottom: 20px; }
.tl-footer__about-text { font-size: 13.5px; line-height: 1.7; color: #AEB9C2; margin-bottom: 20px; }
.tl-footer__social { display: flex; gap: 10px; }
.tl-footer__social a { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.tl-footer__social a:hover { background: var(--tl-accent); color: var(--tl-dark); }
.tl-footer__heading { color: #fff; font-family: var(--tl-font); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.tl-footer__links li { margin-bottom: 12px; }
.tl-footer__links a { font-size: 14px; transition: color .2s; }
.tl-footer__links a:hover { color: var(--tl-accent); }
.tl-footer__contact li { display: flex; gap: 10px; margin-bottom: 14px; font-size: 13.5px; align-items: flex-start; }
.tl-footer__contact i { color: var(--tl-accent); margin-top: 3px; }
.tl-footer__hours { font-size: 13px; margin-top: 10px; }
.tl-footer-widget-title { color: #fff; font-size: 15px; }
.tl-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.tl-footer__bottom-inner { text-align: center; font-size: 13px; }
.tl-footer__bottom p { margin: 0; color: #8492a0; }

.tl-footer__banner-text {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    color: #fff;
    max-width: 780px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* =========================================================
   404 / GENERIC
   ========================================================= */
.tl-404__inner { text-align: center; padding: 140px 0; }
.tl-404__inner h1 { font-size: 90px; color: var(--tl-primary); }
.tl-generic-content { padding: 60px 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .tl-cards--4, .tl-cards--3 { grid-template-columns: repeat(2, 1fr); }
    .tl-about-intro__grid, .tl-mv__grid, .tl-contact-grid, .tl-storage-cards__grid, .tl-fees__grid { grid-template-columns: 1fr; }
    .tl-hero-image-card { margin-top: 0; }
    .tl-footer__grid { grid-template-columns: 1fr 1fr; }
    .tl-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .tl-special-grid { grid-template-columns: repeat(2, 1fr); }
    .tl-header__identity { display: none; }
    .tl-nav { padding-left: 0; }
    /* Stacked single-column layout: the flex-stretch trick that aligns the
       map with the form's bottom edge on desktop has nothing to stretch
       against once the grid drops to one column, so give the map back a
       fixed height instead of letting it collapse to min-height. */
    .tl-contact-map { flex: none; height: 280px; }
}

@media (max-width: 640px) {
    .tl-special-grid { grid-template-columns: 1fr; }
    .tl-special-grid .tl-card--special .tl-card__image { height: 170px; }
}

@media (max-width: 860px) {
    .tl-nav { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: #fff; flex-direction: column; padding: 90px 24px 24px; box-shadow: -10px 0 30px rgba(0,0,0,.1); transition: right .3s ease; z-index: 400; overflow-y: auto; }
    .tl-nav.is-open { right: 0; }
    .tl-menu { flex-direction: column; align-items: stretch; width: 100%; }
    .tl-menu-link { width: 100%; }
    .tl-sub-menu, .tl-sub-menu--flyout { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; margin-left: 14px; width: calc(100% - 14px); }
    .tl-menu-item.is-expanded > .tl-sub-menu { display: block; }
    .tl-menu-toggle { display: flex; }
    .tl-header__cta { display: none; }
    .tl-topbar__contact span:nth-child(3) { display: none; }
    .tl-hero-title { font-size: 34px; }
    .tl-hero-subtitle { font-size: 16px; }
    .tl-hero-arrow { display: none; }
}

@media (max-width: 600px) {
    .tl-cards--4, .tl-cards--3 { grid-template-columns: 1fr; }
    .tl-footer__grid { grid-template-columns: 1fr; }
    .tl-stats__grid { grid-template-columns: 1fr 1fr; }
    .tl-form-row--split { grid-template-columns: 1fr; }
    .tl-cta-banner__inner { flex-direction: column; text-align: center; }
    .tl-special-teaser__inner { flex-direction: column; text-align: center; }
    .tl-page-hero__content h1, .tl-map-hero__content h1, .tl-image-hero__content h1 { font-size: 30px; }
}

/* =========================================================
   CREATE SKR — STAFF FORM (page-create-skr.php)
   ========================================================= */
.tl-skr-create-page h3 { margin: 28px 0 4px; font-size: 18px; color: var(--tl-gray-900); }
.tl-skr-create-page h3:first-of-type { margin-top: 6px; }
.tl-skr-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--tl-gray-900); }
.tl-skr-form input, .tl-skr-form select, .tl-skr-form textarea {
    width: 100%; padding: 12px 15px; border: 1px solid var(--tl-gray-200); border-radius: 6px;
    font-family: inherit; font-size: 14px; background: #fff; transition: border-color .2s;
}
.tl-skr-form input:focus, .tl-skr-form select:focus, .tl-skr-form textarea:focus { outline: none; border-color: var(--tl-primary); }
.tl-skr-form input[readonly] { background: var(--tl-gray-100); color: var(--tl-gray-700); }
.tl-skr-form input[type="file"] { padding: 9px 12px; }
.tl-skr-form button[type="submit"] { margin-top: 18px; }
.tl-skr-form__hint { font-size: 13px; color: var(--tl-gray-500); margin: -10px 0 18px; }
.tl-skr-form__hint--inline { display: inline-block; margin: 14px 0 0 16px; }
.tl-skr-form__preview { max-width: 90px; height: auto; display: block; margin-bottom: 6px; border: 1px solid var(--tl-gray-200); border-radius: 4px; }
.tl-skr-form__preview-note { font-size: 12.5px; color: var(--tl-gray-500); }

.tl-skr-create-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.tl-skr-confirm-container { max-width: 720px; margin: 0 auto; text-align: center; }
.tl-skr-confirm-grid { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 22px; padding: 24px; background: var(--tl-gray-100); border-radius: var(--tl-radius); }
.tl-skr-confirm-number { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.tl-skr-confirm-label { font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--tl-gray-500); font-weight: 700; }
.tl-skr-confirm-value { font-size: 20px; font-weight: 800; color: var(--tl-primary); margin-top: 2px; }
.tl-skr-confirm-qr { width: 140px; height: 140px; background: #fff; border: 1px solid var(--tl-gray-200); border-radius: 6px; padding: 6px; }

@media (max-width: 600px) {
    .tl-skr-confirm-grid { flex-direction: column; }
    .tl-skr-confirm-number { align-items: center; text-align: center; }
}

/* =========================================================
   SKR — VERIFY RESULT (template-skr.php real lookup)
   ========================================================= */
.tl-skr-verify-container { max-width: 720px; margin: 0 auto; text-align: center; }
.tl-skr-verify-head p { margin-bottom: 0; }
.tl-skr-verify-result { display: block; text-align: left; margin-top: 22px; align-items: normal; gap: 0; }
.tl-skr-verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 6px 0 4px; }
.tl-skr-verify-label { display: block; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; font-weight: 700; opacity: .75; }
.tl-skr-verify-value { display: block; font-size: 15px; font-weight: 700; margin-top: 2px; }
.tl-skr-verify-download { margin: 16px 0 4px; }
.tl-skr-verify-download-note { font-size: 12.5px; opacity: .8; margin: 0; }
@media (max-width: 600px) {
    .tl-skr-verify-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   AWB — Location / Destination status badge (Track Shipping public result)
   ========================================================= */
.tl-awb-status { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; margin-top: 2px; }
.tl-awb-status--in-transit { background: #dff1ff; color: #0A3D62; }
.tl-awb-status--on-hold { background: #ffe9c7; color: #8a5a00; }
.tl-awb-status--pending { background: #eee; color: #555; }
.tl-awb-status--canceled, .tl-awb-status--cancelled { background: #fddede; color: #a3271e; }
.tl-awb-status--booked { background: #eef2ff; color: #3a3a8c; }
.tl-awb-status--at-customs { background: #f5e6ff; color: #6b2fa3; }
.tl-awb-status--arrived-at-destination { background: #e3f7e8; color: #1e7a34; }
.tl-awb-status--delivered { background: #dcf7e3; color: #146c2e; }

/* AWB — optional Checkpoint History list (Track Shipping public result).
   Each checkpoint may show a Location and a Destination side by side
   (each with its own status badge) plus an optional Carrier Name/Number
   for that leg — the richer per-checkpoint shape used by TerraVault
   Tracking Manager; a checkpoint with only a Location (the older,
   simpler shape) still renders correctly since the destination/carrier
   lines are omitted whenever empty. */
.tl-awb-cp-history { margin-top: 18px; border-top: 1px solid rgba(10,61,98,.12); padding-top: 14px; }
.tl-awb-cp-history__title { font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; font-weight: 700; opacity: .75; margin: 0 0 8px; }
.tl-awb-cp-history__row { padding: 10px 0; border-bottom: 1px solid rgba(10,61,98,.08); }
.tl-awb-cp-history__row:last-child { border-bottom: none; }
.tl-awb-cp-history__route { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tl-awb-cp-history__leg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-awb-cp-history__leg-label { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; font-weight: 700; opacity: .65; }
.tl-awb-cp-history__name { font-size: 14px; font-weight: 700; }
.tl-awb-cp-history__arrow { opacity: .5; font-weight: 700; }
.tl-awb-cp-history__carrier { font-size: 12.5px; opacity: .8; margin-top: 4px; }
.tl-awb-cp-history__time { font-size: 12.5px; opacity: .7; }
@media (max-width: 600px) {
    .tl-awb-cp-history__route { flex-direction: column; align-items: flex-start; gap: 6px; }
    .tl-awb-cp-history__arrow { display: none; }
}

/* =========================================================
   v1.17.5 — HERO IMAGES: SHOW FROM THE TOP, CLEARLY
   Every hero on every page (Home, Services, Special Service,
   Gold, Diamonds, Storage, Compliance, About, Contact, Track
   Shipping, SKR) now anchors its photo to the TOP edge instead
   of the centre, so the top of each image is never cropped off.
   The dark tint over the photos is also lighter so the images
   read clearly; a soft text shadow keeps the headings legible.
   ========================================================= */
.tl-hero-video,
.tl-hero-media img,
.tl-hero-media video { object-position: center top; }
.tl-image-hero__slide,
.tl-page-hero,
.tl-map-hero { background-position: center top; }

.tl-hero-overlay { background: linear-gradient(90deg, rgba(7,41,68,.62) 0%, rgba(7,41,68,.32) 55%, rgba(7,41,68,.12) 100%); }
.tl-image-hero__overlay,
.tl-page-hero__overlay { background: rgba(7,20,32,.38); }
.tl-map-hero__overlay { background: rgba(4,15,26,.42); }

.tl-hero-title,
.tl-hero-subtitle,
.tl-image-hero__content h1,
.tl-image-hero__content p,
.tl-page-hero__content h1,
.tl-page-hero__content p,
.tl-map-hero__content h1,
.tl-map-hero__content p { text-shadow: 0 2px 14px rgba(0,0,0,.5); }

@media (max-width: 900px) {
    /* On phones the text spans the full width, so use an even tint. */
    .tl-hero-overlay { background: rgba(7,41,68,.45); }
}

/* =========================================================
   v1.17.7 — HERO IMAGES FIT FULLY INSIDE THE HERO BOX (ALL PAGES)
   The hero box now takes the exact shape of the photo you upload,
   so the whole image fills the box edge to edge — no cropping and
   no blurred side bands. Text sits on top of the photo.
   ========================================================= */

/* --- Image sliders: Home, Services, Special Service, Gold, Diamonds, Storage, Compliance --- */
.tl-hero-slider,
.tl-hero-slider--short { height: auto; min-height: 0; }
.tl-hero-slide { display: grid; }
.tl-hero-slide.is-active { position: relative; inset: auto; }          /* active slide sets the box height */
.tl-hero-slide .tl-hero-media { position: relative; inset: auto; grid-area: 1 / 1; }
.tl-hero-slide .tl-hero-media img.tl-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tl-hero-slide .tl-hero-video--placeholder { width: 100%; height: 100%; aspect-ratio: 16 / 9; }
.tl-hero-slide .tl-hero-content { grid-area: 1 / 1; height: auto; align-self: center; padding-top: 60px; padding-bottom: 70px; }

/* --- Contact page image slider --- */
.tl-image-hero { display: grid; height: auto; min-height: 0; }
.tl-image-hero__slide { z-index: 0; }
.tl-image-hero__slide.is-active { position: relative; inset: auto; grid-area: 1 / 1; }
.tl-image-hero__slide--placeholder.is-active { aspect-ratio: 16 / 9; }
.tl-image-hero__overlay { z-index: 1; }
.tl-image-hero__content { grid-area: 1 / 1; height: auto; align-self: center; z-index: 2; padding-top: 50px; padding-bottom: 50px; }

/* --- Single-image heroes: About, SKR, Track Shipping --- */
.tl-has-fit-img { display: grid; padding: 0; overflow: hidden; }
.tl-hero-fit-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tl-has-fit-img > .tl-hero-fit-img { grid-area: 1 / 1; }
.tl-has-fit-img > .tl-page-hero__overlay,
.tl-has-fit-img > .tl-map-hero__overlay { z-index: 1; }
.tl-has-fit-img > .tl-container { grid-area: 1 / 1; align-self: center; width: 100%; z-index: 2; padding-top: 60px; padding-bottom: 60px; }

/* Phones: a wide photo is short on a narrow screen, so the slide text
   moves just below the photo — the photo itself still shows in full. */
@media (max-width: 640px) {
    .tl-hero-slide .tl-hero-content { grid-area: 2 / 1; align-self: stretch; background: var(--tl-primary-dark); padding-top: 22px; padding-bottom: 56px; }
    .tl-hero-dots { bottom: 20px; }
    .tl-map-hero.tl-has-fit-img > .tl-container { grid-area: 2 / 1; align-self: stretch; background: var(--tl-primary-dark); padding-top: 26px; padding-bottom: 30px; }
    .tl-map-hero.tl-has-fit-img > .tl-map-hero__overlay { grid-area: 1 / 1; position: relative; inset: auto; }
}

/* =========================================================
   v1.17.8 — HERO BOX 70% AS TALL, WHOLE PHOTO SQUEEZED TO FIT
   Each hero box is now 70% of the photo's natural height. The
   entire photo is shown, stretched to fill the box exactly
   (object-fit: fill) — nothing is cropped and there are no side
   bands. The height is set per photo (see trilink_hero_img_ratio_attr()
   in inc/helpers.php and initHeroImageHeight() in main.js).
   ========================================================= */
.tl-hero-slide .tl-hero-media img.tl-hero-video,
.tl-hero-fit-img { object-fit: fill; }
.tl-hero-slide .tl-hero-video--placeholder,
.tl-image-hero__slide--placeholder.is-active { aspect-ratio: 16 / 6.3; }
.tl-hero-slide .tl-hero-content { padding-top: 40px; padding-bottom: 60px; }
.tl-has-fit-img > .tl-container { padding-top: 40px; padding-bottom: 40px; }
.tl-image-hero__content { padding-top: 36px; padding-bottom: 36px; }
@media (max-width: 640px) {
    .tl-image-hero__content { padding-top: 14px; padding-bottom: 14px; }
    .tl-image-hero__content h1 { font-size: 26px; margin-bottom: 6px; }
}

/* =========================================================
   v1.17.9
   ========================================================= */
/* Home hero headline on one straight horizontal line (desktop/tablet).
   main.js (initOneLineTitles) shrinks the font just enough to fit the
   screen width, so the full headline always stays on one line. */
.tl-hero-slide { grid-template-columns: minmax(0, 1fr); }
.tl-hero-slide .tl-hero-content { min-width: 0; width: 100%; box-sizing: border-box; }
@media (min-width: 641px) {
    .tl-hero-slider--home .tl-hero-content { max-width: 1240px; }
    .tl-hero-slider--home .tl-hero-content > .tl-btn { align-self: flex-start; }
    .tl-hero-slider--home .tl-hero-title { white-space: nowrap; font-size: 46px; letter-spacing: .5px; line-height: 1.15; }
}

/* Special Service (Gold, Diamond, Storage, SKR) and Services card photos:
   shown in full — the picture fills the top of the card completely at its
   own shape, nothing cropped. */
.tl-card:has(.tl-card__img) { overflow: hidden; }
.tl-card__img { display: block; width: calc(100% + 52px); max-width: none; height: auto; margin: -34px -26px 20px; }

/* Storage page Gold / Diamond photos (and videos): shown in full. */
.tl-video-card__media:has(img),
.tl-video-card__media:has(video) { height: auto; }
.tl-video-card__media img,
.tl-video-card__media video { display: block; width: 100%; height: auto; object-fit: fill; }

/* =========================================================
   v1.17.10 — EQUAL GOLD & DIAMOND PHOTOS
   Special Service cards (Gold, Diamond, Storage, SKR) and the
   Storage page Gold / Diamond photos are now all exactly the same
   size. Every photo is shown whole (nothing cropped), squeezed to
   fit the shared 4:3 shape — the same approach as the hero images.
   ========================================================= */
.tl-special-grid .tl-card__img { aspect-ratio: 4 / 3; object-fit: fill; }
.tl-storage-cards__grid .tl-video-card__media img,
.tl-storage-cards__grid .tl-video-card__media video,
.tl-storage-cards__grid .tl-video-card__media .tl-hero-video--placeholder { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: fill; }
.tl-storage-cards__grid .tl-video-card__media { height: auto; }