/*
Theme Name: Trankad Child (Baldan)
Theme URI: https://trankad.modeltheme.com/
Description: Child theme of Trankad for the Baldan UK site. Adds the homepage hero slider, the page-banner strap line, and small helpers used by the converted page content.
Author: Quest Studio
Template: trankad
Version: 2.0.0
Text Domain: trankad-child
*/

/* Baldan palette — Trankad's gold, Baldan's navy. */
:root {
    --baldan-gold: #FBC531;
    --baldan-gold-dark: #E1B12C;
    --baldan-navy: #06163a;
    --baldan-indigo: #2f3985;
}

/* -------------------------------------------------------------
   Page preloader

   Trankad ships a diagonal-stripe bar that reads as construction barrier
   tape — wrong industry for a shipping agent. Its markup is echoed straight
   from the parent header.php with no hook, so the bar is neutralised here and
   a ship riding waves drawn in its place with pseudo-elements.
   ------------------------------------------------------------- */
.trankad_preloader_holder .loader-42 {
    /* clear the parent's bar: border, gradient and its animation */
    width: 140px;
    height: 90px;
    border: 0;
    border-radius: 0;
    background: none;
    animation: none;
    position: relative;
    overflow: hidden;
}

/* the vessel */
.trankad_preloader_holder .loader-42::before {
    content: "\f21a";                 /* fa-ship */
    font-family: FontAwesome;
    font-size: 46px;
    line-height: 1;
    color: var(--baldan-gold);
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    animation: baldan-sail 2.4s ease-in-out infinite;
}

/* the swell beneath it — one tiling scallop, scrolled by exactly one tile so
   the loop is seamless */
.trankad_preloader_holder .loader-42::after {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    bottom: 16px;
    height: 14px;
    background-image: radial-gradient(circle at 12px 14px,
        transparent 9px, rgba(255, 255, 255, .75) 9px 11px, transparent 11px);
    background-size: 24px 14px;
    background-repeat: repeat-x;
    animation: baldan-swell 2.4s linear infinite;
}

@keyframes baldan-sail {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
    50%      { transform: translateX(-50%) translateY(-7px) rotate(5deg); }
}

@keyframes baldan-swell {
    0%   { background-position: 0 0; }
    100% { background-position: -24px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .trankad_preloader_holder .loader-42::before,
    .trankad_preloader_holder .loader-42::after { animation: none; }
}

/* -------------------------------------------------------------
   Buttons — Trankad's own accent, used by converted CTAs
   ------------------------------------------------------------- */
.btn.baldan-btn,
a.btn.baldan-btn {
    background: var(--baldan-gold);
    border: 2px solid var(--baldan-gold);
    color: #151515;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 13px 30px;
    border-radius: 3px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.btn.baldan-btn:hover,
.btn.baldan-btn:focus,
a.btn.baldan-btn:hover,
a.btn.baldan-btn:focus {
    background: var(--baldan-gold-dark);
    border-color: var(--baldan-gold-dark);
    color: #151515;
    text-decoration: none;
}

/* -------------------------------------------------------------
   Page banner — Trankad renders it; this is the strap line that
   used to sit under the title on the old build.
   ------------------------------------------------------------- */
.baldan-banner-subtitle {
    color: #fff;
    opacity: .92;
    margin: 12px 0 18px;
    max-width: 720px;
    font-size: 16px;
    line-height: 1.6;
    border-left: 3px solid var(--baldan-gold);
    padding-left: 14px;
}

/* Trankad pulls its breadcrumb up under the title; give it room once a
   strap line is sitting between the two. */
.header-title-breadcrumb-overlay .breadcrumb {
    margin-top: 6px;
    clear: both;
}

/* -------------------------------------------------------------
   Homepage hero slider (Owl Carousel 1.x, bundled with Trankad)
   ------------------------------------------------------------- */
.baldan-hero-wrap {
    position: relative;
    margin-bottom: 45px;
}

/* The homepage content sits in the theme container; the hero breaks out of it
   so the slider spans the viewport while the sections below stay aligned. */
.baldan-home .container .baldan-hero-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* No bottom padding: the last section carries its own, and a gap here would
   show as a white sliver between the closing tinted band and the newsletter. */
.baldan-home {
    padding-bottom: 0;
}

.baldan-hero .baldan-slide {
    position: relative;
    min-height: 560px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.baldan-hero .baldan-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 22, 58, .82) 0%, rgba(6, 22, 58, .55) 55%, rgba(6, 22, 58, .25) 100%);
}

.baldan-hero .container {
    position: relative;
    z-index: 2;
}

.baldan-hero .baldan-slide-inner {
    max-width: 640px;
    padding: 60px 0;
    color: #fff;
}

.baldan-hero .baldan-slide-title {
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 18px;
}

.baldan-hero .baldan-slide-title::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    background: var(--baldan-gold);
    margin-top: 18px;
}

.baldan-hero .baldan-slide-text {
    color: #eef1f7;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 26px;
}

/* Owl 1.x controls */
.baldan-hero .owl-pagination {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
}

.baldan-hero .owl-page span {
    background: rgba(255, 255, 255, .55);
    width: 11px;
    height: 11px;
    margin: 0 5px;
    border-radius: 50%;
    display: block;
}

.baldan-hero .owl-page.active span {
    background: var(--baldan-gold);
}

.baldan-hero .owl-buttons div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    opacity: 1;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    transition: background .2s ease;
}

.baldan-hero .owl-buttons div:hover {
    background: var(--baldan-gold);
    border-color: var(--baldan-gold);
}

.baldan-hero .owl-buttons .owl-prev { left: 24px; }
.baldan-hero .owl-buttons .owl-next { right: 24px; }

.baldan-hero .owl-buttons div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    text-indent: 0;
}

.baldan-hero .owl-buttons .owl-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.baldan-hero .owl-buttons .owl-next::before { transform: translate(-70%, -50%) rotate(45deg); }

@media (max-width: 991px) {
    .baldan-hero .baldan-slide { min-height: 420px; }
    .baldan-hero .baldan-slide-title { font-size: 32px; }
    .baldan-hero .owl-buttons div { display: none; }
}

@media (max-width: 600px) {
    .baldan-hero .baldan-slide { min-height: 360px; }
    .baldan-hero .baldan-slide-title { font-size: 25px; }
    .baldan-hero .baldan-slide-text { font-size: 15px; }
}

/* -------------------------------------------------------------
   Shipping services card grid
   ------------------------------------------------------------- */
/* Section heading and its call to action share a line. */
.baldan-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    padding-top: 20px;
}

.baldan-section-head h2 {
    margin: 0;
    color: var(--baldan-navy);
    font-weight: 700;
}

.baldan-section-head p {
    margin: 0;
}

@media (max-width: 600px) {
    .baldan-section-head { display: block; }
    .baldan-section-head p { margin-top: 14px; }
}

.baldan-services {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.baldan-service-col {
    display: flex;
    margin-bottom: 30px;
    float: none;            /* override Bootstrap 3's float grid */
}

.baldan-service-card {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-top: 3px solid transparent;
    border-radius: 4px;
    padding: 34px 28px 30px;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}

a.baldan-service-card:hover,
a.baldan-service-card:focus {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(6, 22, 58, .12);
    border-top-color: var(--baldan-gold);
    text-decoration: none;
    color: inherit;
}

.baldan-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(251, 197, 49, .16);
    color: var(--baldan-gold);
    font-size: 25px;
    margin-bottom: 20px;
    transition: background .25s ease, color .25s ease;
}

a.baldan-service-card:hover .baldan-service-icon {
    background: var(--baldan-gold);
    color: #fff;
}

.baldan-service-title {
    color: var(--baldan-navy);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.baldan-service-text {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 16px;
}

.baldan-service-more {
    display: inline-block;
    color: var(--baldan-indigo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.baldan-service-more::after {
    content: "\f178";       /* fa-long-arrow-right */
    font-family: FontAwesome;
    margin-left: 8px;
    transition: margin-left .2s ease;
}

a.baldan-service-card:hover .baldan-service-more {
    color: var(--baldan-gold-dark);
}

a.baldan-service-card:hover .baldan-service-more::after {
    margin-left: 13px;
}

@media (max-width: 767px) {
    .baldan-service-col { width: 100%; }
    .baldan-service-card { padding: 28px 22px; }
}

/* -------------------------------------------------------------
   Full-width photo band
   (Logzee used these as parallax backdrops; here they are a
   controlled-height strip rather than full-bleed stacked photos)
   ------------------------------------------------------------- */
.baldan-image-band {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100vw;
    margin: 45px 0 45px calc(50% - 50vw);
    overflow: hidden;
}

.baldan-band-item {
    flex: 1 1 0;
    min-width: 280px;
    margin: 0;
    height: 330px;
    overflow: hidden;
    position: relative;
}

.baldan-band-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 6s ease;
}

.baldan-band-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 22, 58, .10) 0%, rgba(6, 22, 58, .38) 100%);
    pointer-events: none;
}

.baldan-band-item:hover img {
    transform: scale(1.06);
}

@media (max-width: 767px) {
    .baldan-band-item { height: 210px; }
}

/* -------------------------------------------------------------
   About Us block
   ------------------------------------------------------------- */
.baldan-about {
    margin-bottom: 20px;
}

.baldan-about .wpb_column {
    display: flex;
    align-items: center;
}

.baldan-about-copy {
    padding-right: 30px;
}

.baldan-about-copy h2 {
    color: var(--baldan-navy);
    font-weight: 700;
    margin: 0 0 6px;
}

.baldan-about-copy h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 16px 0 22px;
}

.baldan-about-copy p {
    color: #5b6472;
    font-size: 16px;
    line-height: 1.85;
}

/* Laid out with flex rather than inline-block: the buttons are inline-block with
   vertical-align:middle, so any difference in their bottom margins offsets them
   by half that amount against each other. Flex + gap sidesteps it entirely. */
.baldan-about-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.baldan-about-actions a {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.baldan-btn-outline,
a.btn.baldan-btn-outline {
    background: transparent;
    border: 2px solid var(--baldan-navy);
    color: var(--baldan-navy);
    font-weight: 700;
    letter-spacing: .4px;
    padding: 13px 30px;
    border-radius: 3px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.btn.baldan-btn-outline:hover,
.btn.baldan-btn-outline:focus,
a.btn.baldan-btn-outline:hover,
a.btn.baldan-btn-outline:focus {
    background: var(--baldan-navy);
    border-color: var(--baldan-navy);
    color: #fff;
    text-decoration: none;
}

.baldan-about-media {
    text-align: center;
    width: 100%;
}

.baldan-about-media img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .baldan-about .wpb_column { display: block; }
    .baldan-about-copy { padding-right: 0; margin-bottom: 30px; }
}

/* -------------------------------------------------------------
   "Why Ship with Us" — points either side of the illustration
   ------------------------------------------------------------- */
.baldan-why {
    margin-bottom: 20px;
}

.baldan-why-head {
    text-align: center;
    margin-bottom: 38px;
}

.baldan-why-head h2 {
    color: var(--baldan-navy);
    font-weight: 700;
    margin: 0;
}

.baldan-why-head h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 16px auto 0;
}

.baldan-why-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.baldan-why-col {
    flex: 1 1 280px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.baldan-why-media {
    flex: 0 1 340px;
    text-align: center;
}

.baldan-why-media img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.baldan-why-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Left-hand points mirror inward, toward the illustration. */
.baldan-why-left .baldan-why-item {
    flex-direction: row-reverse;
    text-align: right;
}

.baldan-why-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(251, 197, 49, .16);
    color: var(--baldan-gold);
    font-size: 21px;
    transition: background .25s ease, color .25s ease;
}

.baldan-why-item:hover .baldan-why-icon {
    background: var(--baldan-gold);
    color: #fff;
}

.baldan-why-copy h4 {
    color: var(--baldan-navy);
    font-size: 17px;
    font-weight: 700;
    margin: 4px 0 7px;
}

.baldan-why-copy p {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .baldan-why-media { order: -1; flex-basis: 260px; }
    .baldan-why-left .baldan-why-item { flex-direction: row; text-align: left; }
}

/* -------------------------------------------------------------
   Section background rhythm

   The row stays at container width so the WPBakery grid is untouched;
   the band is painted full-bleed by a pseudo-element behind it.
   ------------------------------------------------------------- */
.baldan-section {
    position: relative;
    padding: 72px 0;
    margin-bottom: 0 !important;
}

.baldan-section::before {
    content: "";
    /* Bootstrap's clearfix sets display:table on .vc_row::before. An absolutely
       positioned table box ignores top/bottom stretching and collapses to its
       (empty) content, so the band must be forced back to a block with an
       explicit height. */
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: calc(50% - 50vw);
    width: 100vw;
    background: transparent;
    z-index: 0;
}

.baldan-section > * {
    position: relative;
    z-index: 1;
}

.baldan-section-tint::before { background: #f4f7fb; }

.baldan-section-navy::before { background: var(--baldan-navy); }

.baldan-section-navy h1, .baldan-section-navy h2, .baldan-section-navy h3,
.baldan-section-navy h4, .baldan-section-navy p, .baldan-section-navy li,
.baldan-section-navy label {
    color: #fff;
}

/* The photo band sits between sections, so drop its own margins. */
.baldan-image-band {
    margin-top: 0;
    margin-bottom: 0;
}

/* -------------------------------------------------------------
   Quote form panel (the one navy band)

   Same field treatment as the contact form, inverted for the dark background:
   labels in white, inputs solid white so they stay clearly visible.
   ------------------------------------------------------------- */
.baldan-quote-intro h2 {
    color: #fff;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.baldan-quote-intro h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 18px 0 0;
}

.baldan-quote-panel {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    padding: 34px;
}

.baldan-quote-panel .baldan-form-grid .baldan-field label {
    color: #fff;
}

.baldan-quote-panel .baldan-req { color: var(--baldan-gold); }

.baldan-quote-panel input[type="text"],
.baldan-quote-panel input[type="email"],
.baldan-quote-panel input[type="date"],
.baldan-quote-panel select,
.baldan-quote-panel textarea {
    width: 100%;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 16px;
    height: 52px;
    font-size: 15px;
    color: #1d2533;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.baldan-quote-panel ::placeholder { color: #9aa3b2; }

.baldan-quote-panel select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.baldan-quote-panel textarea {
    height: 130px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

/* file input can't take a fixed height cleanly across browsers */
.baldan-quote-panel input[type="file"] {
    width: 100%;
    background: rgba(255, 255, 255, .12);
    border: 1px dashed rgba(255, 255, 255, .35);
    border-radius: 4px;
    color: #fff;
    padding: 14px 16px;
    font-size: 14px;
}

.baldan-quote-panel input:focus,
.baldan-quote-panel select:focus,
.baldan-quote-panel textarea:focus {
    border-color: var(--baldan-gold);
    box-shadow: 0 0 0 3px rgba(251, 197, 49, .28);
    outline: none;
}

.baldan-quote-panel .baldan-field-submit { text-align: right; }

.baldan-quote-panel input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--baldan-gold);
    color: #151515;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 13px;
    height: 52px;
    padding: 0 40px;
    width: auto;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}

.baldan-quote-panel input[type="submit"]:hover {
    background: var(--baldan-gold-dark);
    box-shadow: 0 10px 22px rgba(251, 197, 49, .35);
    transform: translateY(-1px);
}

.baldan-quote-panel .wpcf7-spinner { display: none; }

.baldan-quote-panel .wpcf7-not-valid { border-color: #e74c3c; }

.baldan-quote-panel .wpcf7-not-valid-tip {
    color: #ffb4ab;
    font-size: 13px;
    margin-top: 6px;
}

.baldan-quote-panel .wpcf7-response-output {
    flex: 1 1 100%;
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    margin: 16px 0 0;
    font-size: 14px;
}

@media (max-width: 991px) {
    .baldan-quote-intro { margin-bottom: 26px; }
    .baldan-quote-panel { padding: 24px 20px; }
}

/* -------------------------------------------------------------
   Latest news cards
   ------------------------------------------------------------- */
.baldan-news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.baldan-news-card {
    flex: 1 1 300px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 4px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.baldan-news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(6, 22, 58, .12);
}

.baldan-news-media {
    display: block;
    height: 210px;
    overflow: hidden;
}

.baldan-news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 4s ease;
}

.baldan-news-card:hover .baldan-news-media img { transform: scale(1.07); }

.baldan-news-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.baldan-news-meta {
    font-size: 13px;
    color: #8a9099;
    margin: 0 0 10px;
}

.baldan-news-meta a { color: var(--baldan-gold-dark); }

.baldan-news-body h4 {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 10px;
}

.baldan-news-body h4 a { color: var(--baldan-navy); }
.baldan-news-body h4 a:hover { color: var(--baldan-gold-dark); text-decoration: none; }

.baldan-news-excerpt {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.baldan-news-body .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* -------------------------------------------------------------
   Contact page
   ------------------------------------------------------------- */

/* Map as a full-bleed band rather than a box inside the container. */
#primary .wpb_row.baldan-contact-map {
    margin-bottom: 0;
}

/* This page opens with the map and closes with a tinted band, so the content
   area's own padding just adds white above and below them (74px on #primary
   plus 80px on Trankad's <article>, at each end). Removing it lets the map meet
   the page banner and the contact band run straight into the call to action.
   Body class set in functions.php. */
.baldan-flush-top #primary,
.baldan-flush-top #primary article {
    padding-top: 0;
    padding-bottom: 0;
}

.baldan-map {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    line-height: 0;
}

.baldan-map iframe {
    display: block;
    width: 100%;
    height: 430px;
    border: 0;
}

/* Tinted band behind the card. */
.baldan-contact-main {
    position: relative;
    padding-top: 74px;
    /* tinted, and the call-to-action band follows immediately with its own
       72px of top padding — so this is the base of the band, not a gap */
    padding-bottom: 54px;
}

.baldan-contact-main::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: calc(50% - 50vw);
    width: 100vw;
    background: #f4f7fb;
    z-index: 0;
}

.baldan-contact-main > * {
    position: relative;
    z-index: 1;
}

/* One card, split: navy details panel beside the white form. */
.baldan-contact-panel {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 54px rgba(6, 22, 58, .10);
}

.baldan-contact-side {
    flex: 0 1 360px;
    background: var(--baldan-navy);
    color: #fff;
    padding: 46px 38px;
    /* the panel stretches to the form's height; centre the details rather than
       leaving a tall empty block of navy beneath them */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.baldan-contact-side h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.baldan-contact-side h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 16px 0 30px;
}

.baldan-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.baldan-contact-list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 26px;
    font-size: 15px;
    line-height: 1.65;
    color: #eef1f7;
}

.baldan-contact-list li:last-child { margin-bottom: 0; }

.baldan-contact-list strong {
    display: block;
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px;
}

.baldan-contact-list a { color: #fff; }
.baldan-contact-list a:hover { color: var(--baldan-gold); text-decoration: none; }

.baldan-ci {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(251, 197, 49, .16);
    color: var(--baldan-gold);
    font-size: 16px;
}

.baldan-contact-body {
    flex: 1 1 460px;
    padding: 46px 42px;
    min-width: 300px;
}

.baldan-contact-body h2 {
    color: var(--baldan-navy);
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

.baldan-contact-body h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 16px 0 30px;
}

/* Form grid — two fields per row, message and submit full width. */
.baldan-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.baldan-form-grid .baldan-field {
    flex: 1 1 calc(50% - 10px);
    min-width: 200px;
}

.baldan-form-grid .baldan-field-wide { flex: 1 1 100%; }

.baldan-form-grid .baldan-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--baldan-navy);
    margin-bottom: 8px;
}

.baldan-req { color: var(--baldan-gold-dark); }

.baldan-form-grid p { margin: 0; }
.baldan-form-grid .wpcf7-form-control-wrap { display: block; }

/* Fields: white on white card with a definite border — the earlier pale grey
   fill and hairline border made them hard to see. */
.baldan-contact-body input[type="text"],
.baldan-contact-body input[type="email"],
.baldan-contact-body select,
.baldan-contact-body textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #c8d1e0;
    border-radius: 4px;
    padding: 0 16px;
    height: 52px;
    font-size: 15px;
    color: #1d2533;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.baldan-contact-body ::placeholder { color: #9aa3b2; }

/* Selects default to the OS control, which never matches the text inputs. */
.baldan-contact-body select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.baldan-contact-body textarea {
    height: 150px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

.baldan-contact-body input:focus,
.baldan-contact-body select:focus,
.baldan-contact-body textarea:focus {
    border-color: var(--baldan-gold);
    box-shadow: 0 0 0 3px rgba(251, 197, 49, .22);
    outline: none;
}

.baldan-field-submit { text-align: right; }

.baldan-contact-body input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--baldan-gold);
    color: #151515;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 13px;
    height: 52px;
    padding: 0 40px;
    width: auto;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .15s ease;
}

.baldan-contact-body input[type="submit"]:hover {
    background: var(--baldan-gold-dark);
    box-shadow: 0 10px 22px rgba(251, 197, 49, .35);
    transform: translateY(-1px);
}

.baldan-contact-body .wpcf7-spinner { display: none; }

.baldan-contact-body .wpcf7-not-valid {
    border-color: #e74c3c;
    background: #fff6f5;
}

.baldan-contact-body .wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 6px;
}

.baldan-contact-body .wpcf7-response-output {
    flex: 1 1 100%;
    margin: 16px 0 0;
    font-size: 14px;
}

@media (max-width: 991px) {
    .baldan-contact-side,
    .baldan-contact-body { flex: 1 1 100%; padding: 34px 26px; }
}

/* -------------------------------------------------------------
   Alternating image / text sections

   The conversion put every picture in the right-hand column. Flipping every
   second row makes the images zig-zag instead of stacking down one edge.
   The markup order is untouched (heading still precedes its picture) —
   only the visual order changes.
   ------------------------------------------------------------- */
.baldan-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.baldan-media > .wpb_column {
    float: none;
}

.baldan-media-flip {
    flex-direction: row-reverse;
}

/* give the copy a little room away from the picture, on whichever side it is */
.baldan-media > .wpb_column .wpb_text_column {
    padding-right: 24px;
}

.baldan-media-flip > .wpb_column .wpb_text_column {
    padding-right: 0;
    padding-left: 24px;
}

@media (max-width: 767px) {
    .baldan-media,
    .baldan-media-flip {
        display: block;
    }
    .baldan-media > .wpb_column .wpb_text_column,
    .baldan-media-flip > .wpb_column .wpb_text_column {
        padding-left: 0;
        padding-right: 0;
    }
}

/* -------------------------------------------------------------
   Statement panel — a heading + single paragraph with no artwork
   ------------------------------------------------------------- */
.baldan-statement {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.baldan-statement h2 {
    color: var(--baldan-navy);
    font-weight: 700;
    margin: 0;
    text-transform: capitalize;
}

.baldan-statement h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 16px auto 24px;
}

.baldan-statement p {
    color: #5b6472;
    font-size: 18px;
    line-height: 1.85;
    margin: 0;
}

@media (max-width: 767px) {
    .baldan-statement p { font-size: 16px; }
}

/* -------------------------------------------------------------
   PDF download buttons

   The source emitted these as inline-block links separated by <br> with no
   margin, so they overlapped one another. A flex grid gives them real gaps
   and lets them wrap.
   ------------------------------------------------------------- */
.baldan-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 8px 0 10px;
}

.baldan-downloads a.btn,
.baldan-downloads a.btn.baldan-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    text-transform: none;
    font-size: 14px;
    letter-spacing: 0;
    padding: 12px 22px;
}

.baldan-downloads a.btn::before {
    content: "\f1c1";           /* fa-file-pdf-o */
    font-family: FontAwesome;
    font-size: 16px;
    line-height: 1;
}

/* Inside a centred section (About Us) the buttons centre under the heading. */
.baldan-block-head + .baldan-downloads { justify-content: center; margin: 0; }

@media (max-width: 600px) {
    .baldan-downloads { gap: 10px; }
    .baldan-downloads a.btn { width: 100%; justify-content: flex-start; }
}

/* -------------------------------------------------------------
   Call to action
   ------------------------------------------------------------- */
.baldan-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
    text-align: center;
}

.baldan-cta-inner h4 {
    margin: 0;
    color: var(--baldan-navy);
    font-size: 23px;
    font-weight: 700;
}

/* -------------------------------------------------------------
   Direct contact: Email Us / WhatsApp Us
   (replaces the old quote and enquiry forms site-wide)
   ------------------------------------------------------------- */
.baldan-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.baldan-cta-inner .baldan-contact-actions { justify-content: center; }

/* -------------------------------------------------------------
   Partner service page (Scomed Line)
   ------------------------------------------------------------- */
.baldan-partner-logo {
    display: block;
    width: 240px;
    max-width: 70%;
    height: auto;
    margin: 0 0 26px;
}

.baldan-lead { font-size: 17px; line-height: 1.75; }

.baldan-block-head { text-align: center; margin-bottom: 34px; }

.baldan-block-head h2 {
    color: var(--baldan-navy);
    font-weight: 700;
    margin: 0;
}

.baldan-block-head h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    background: var(--baldan-gold);
    margin: 16px auto 0;
}

.baldan-ports {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.baldan-port-card {
    flex: 1 1 320px;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-top: 3px solid var(--baldan-gold);
    border-radius: 4px;
    padding: 30px 30px 24px;
}

.baldan-port-card h3 {
    color: var(--baldan-navy);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.baldan-port-card h3 .fa { color: var(--baldan-gold); margin-right: 10px; }

.baldan-port-card ul { list-style: none; margin: 0; padding: 0; }

.baldan-port-card li {
    padding: 9px 0;
    border-bottom: 1px solid #eef1f6;
    font-size: 16px;
    color: #1d2533;
}

.baldan-port-card li:last-child { border-bottom: 0; }

.baldan-services.baldan-services-equal { display: flex; flex-wrap: wrap; }
.baldan-services-equal .baldan-service-col { float: none; margin-bottom: 24px; display: flex; }

.baldan-service-title a { color: inherit; }
.baldan-service-title a:hover { color: var(--baldan-gold-dark); text-decoration: none; }
a.baldan-service-more { display: inline-block; text-decoration: none; }

.baldan-reach {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Theme list rules (colour, indent, ::before bullets) reach into page content;
   these lists need them cleared at a matching depth. */
.vc_row .baldan-port-card ul,
.vc_row ul.baldan-reach { padding-left: 0 !important; margin-left: 0 !important; }

.vc_row .baldan-port-card li,
.vc_row .baldan-reach li { margin-left: 0 !important; }

.vc_row .baldan-port-card li::before,
.vc_row .baldan-reach li::before { display: none; content: none; }

.vc_row .baldan-port-card li { color: #1d2533; }

.vc_row .baldan-reach li { color: #fff; }

.baldan-reach li {
    background: var(--baldan-navy);
    color: #fff;
    border-radius: 30px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 15px;
}

.baldan-reach.baldan-reach-left { justify-content: flex-start; margin-top: 22px; }
.baldan-reach-left li { padding: 7px 16px; font-size: 14px; }

/* -------------------------------------------------------------
   Service page components: process steps, photo strip, callout,
   region grid
   ------------------------------------------------------------- */
.baldan-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    counter-reset: baldan-step;
}

.baldan-step {
    flex: 1 1 210px;
    position: relative;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 4px;
    padding: 30px 24px 24px;
    counter-increment: baldan-step;
}

.baldan-step::before {
    content: counter(baldan-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--baldan-gold);
    color: #151515;
    font-weight: 700;
    margin-bottom: 16px;
}

/* arrow between steps on wide screens */
@media (min-width: 992px) {
    .baldan-steps { flex-wrap: nowrap; }
    .baldan-step:not(:last-child)::after {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        right: -17px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--baldan-gold);
        font-size: 26px;
        z-index: 1;
    }
}

.baldan-step h4 {
    color: var(--baldan-navy);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.baldan-step p { margin: 0; font-size: 15px; line-height: 1.6; }

.baldan-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.baldan-gallery img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

@media (max-width: 767px) {
    .baldan-gallery { grid-template-columns: 1fr; }
    .baldan-gallery img { height: 210px; }
}

.baldan-note {
    background: #fff;
    border-left: 4px solid var(--baldan-gold);
    border-radius: 4px;
    padding: 30px 34px;
    box-shadow: 0 14px 36px rgba(6, 22, 58, .07);
}

.baldan-note h2 { color: var(--baldan-navy); font-weight: 700; margin: 0 0 14px; }

.baldan-note p:last-child { margin-bottom: 0; }

.baldan-note-caveat { font-weight: 600; color: var(--baldan-navy); }

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

@media (max-width: 991px) { .baldan-region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .baldan-region-grid { grid-template-columns: 1fr; } }

.baldan-region-card {
    display: block;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-top: 3px solid transparent;
    border-radius: 4px;
    padding: 22px 22px 20px;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}

.baldan-region-card:hover,
.baldan-region-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(6, 22, 58, .10);
    border-top-color: var(--baldan-gold);
    text-decoration: none;
}

.baldan-region-card img { width: 100%; height: auto; display: block; margin-bottom: 16px; }

.baldan-region-card h3 { color: var(--baldan-navy); font-size: 20px; font-weight: 700; margin: 0 0 6px; }

.baldan-region-card h3 a { color: inherit; text-decoration: none; }

a.baldan-region-more { color: var(--baldan-navy); font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; text-decoration: none; }

a.baldan-region-more:hover { color: var(--baldan-gold-dark); }

.baldan-ports.baldan-ports-compact .baldan-port-card { flex: 1 1 240px; padding: 24px 24px 18px; }

.baldan-ports-compact .baldan-port-card h3 { font-size: 18px; }

.baldan-ports-compact .baldan-port-card li { font-size: 15px; padding: 7px 0; }

.baldan-text-link { font-weight: 700; color: var(--baldan-navy); }

.baldan-text-link:hover { color: var(--baldan-gold-dark); text-decoration: none; }

/* -------------------------------------------------------------
   Main menu: show where the visitor is
   Trankad colours only the exact current item (gold), and inside the dropdown
   its navy link colour overrides even that. So on a sub-page such as Auction
   Shipping nothing visible was highlighted. Highlight the top-level parent in
   the same gold, and mark the current page (and its parent) in the dropdown.
   ------------------------------------------------------------- */
body #navbar .menu > .current-menu-ancestor > a,
body #navbar .menu > .current-menu-parent > a,
body #navbar .menu > .current-page-ancestor > a {
    color: #fbc233 !important;
}

body #navbar ul.sub-menu li.current-menu-item > a,
body #navbar ul.sub-menu li.current_page_item > a,
body #navbar ul.sub-menu li.current-menu-ancestor > a {
    color: #fbc233 !important;
}

/* Underline the active items (top level and dropdown) in the same gold. */
body #navbar .menu > .current-menu-item > a,
body #navbar .menu > .current_page_item > a,
body #navbar .menu > .current-menu-ancestor > a,
body #navbar .menu > .current-menu-parent > a,
body #navbar .menu > .current-page-ancestor > a,
body #navbar ul.sub-menu li.current-menu-item > a,
body #navbar ul.sub-menu li.current_page_item > a,
body #navbar ul.sub-menu li.current-menu-ancestor > a {
    text-decoration: underline !important;
    text-decoration-color: #fbc233 !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px !important;
}

/* Homepage contact strip (navy variant of the closing band) */
.baldan-cta-strip .baldan-cta-inner h4 { color: #fff; font-size: 26px; }

.baldan-contact-actions .btn .fa {
    margin-right: 8px;
    font-size: 1.15em;
    vertical-align: -1px;
}

a.btn.baldan-btn.baldan-btn-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

a.btn.baldan-btn.baldan-btn-whatsapp:hover,
a.btn.baldan-btn.baldan-btn-whatsapp:focus {
    background: #1ebe5a;
    border-color: #1ebe5a;
    color: #fff;
}

.baldan-contact-phone {
    margin: 16px 0 0;
    font-size: 15px;
}

.baldan-contact-phone a { font-weight: 700; color: var(--baldan-navy); }

.vc_row ul.baldan-contact-direct {
    list-style: none;
    margin: 0 0 30px !important;
    padding: 0 !important;
}

.vc_row .baldan-contact-direct li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #eef1f6;
    margin: 0 !important;
}

.vc_row .baldan-contact-direct li::before { display: none; content: none; }

.baldan-contact-direct li:first-child { border-top: 1px solid #eef1f6; }

.baldan-contact-direct .baldan-cd-label {
    flex: 0 0 110px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #8a93a5;
}

.baldan-contact-direct a {
    font-size: 19px;
    font-weight: 600;
    color: var(--baldan-navy);
    word-break: break-word;
}

.baldan-contact-direct a:hover { color: var(--baldan-gold-dark); text-decoration: none; }

@media (max-width: 480px) {
    .vc_row .baldan-contact-direct li { flex-direction: column; gap: 2px; }
    .baldan-contact-direct .baldan-cd-label { flex-basis: auto; }
}

.baldan-contact-body .baldan-contact-intro {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 26px;
}

/* Why Ship With Us: centre image is now a real cargo photograph, not a cut-out */
.baldan-why-media img { border-radius: 8px; }

@media (max-width: 600px) {
    .baldan-section-head .baldan-contact-actions { margin-top: 14px; }
}

@media (max-width: 480px) {
    .baldan-contact-actions .btn { flex: 1 1 100%; text-align: center; }
}




/* -------------------------------------------------------------
   Converted page content
   ------------------------------------------------------------- */

/* Section backdrops carried over from the old build (were CSS backgrounds). */
.baldan-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 45px 35px;
    border-radius: 4px;
    position: relative;
    color: #fff;
}

.baldan-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 22, 58, .55);
    border-radius: 4px;
}

.baldan-bg > * {
    position: relative;
    z-index: 1;
}

.baldan-bg h1, .baldan-bg h2, .baldan-bg h3,
.baldan-bg h4, .baldan-bg p, .baldan-bg li {
    color: #fff;
}

/* Images inside converted columns */
.wpb_column img.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

/* Give converted rows room to breathe.
   Scoped to #primary — Trankad's page template — because the homepage uses its
   own template (.baldan-home) where the tinted bands already supply padding. */
#primary {
    padding-top: 74px;
    padding-bottom: 74px;
}

#primary .wpb_row {
    margin-bottom: 74px;
}

#primary .wpb_row:last-child {
    margin-bottom: 0;
}

/* Full-bleed bands carry their own padding, so they must not add margin too. */
#primary .wpb_row.baldan-section {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    #primary { padding-top: 46px; padding-bottom: 46px; }
    #primary .wpb_row { margin-bottom: 46px; }
}

/* Pages close straight into the call-to-action band. #primary's bottom padding
   plus Trankad's 80px on .page article.type-page left ~150px of white between
   the last section and the band. A closing full-bleed section (.baldan-section)
   already carries its own padding; any other last row keeps one normal gap so
   its text doesn't touch the band. */
.page #primary { padding-bottom: 0; }

.page #primary article.type-page { padding-bottom: 0; }

.page #primary .wpb_row:last-child:not(.baldan-section) { margin-bottom: 74px; }

@media (max-width: 767px) {
    .page #primary .wpb_row:last-child:not(.baldan-section) { margin-bottom: 46px; }
}

/* Port / service lists read better in two columns when long. */
.wpb_column .wpb_text_column ul {
    padding-left: 18px;
}

.wpb_column .wpb_text_column ul li {
    margin-bottom: 6px;
}

/* -------------------------------------------------------------
   Newsletter band (sits above the footer, as on baldan.co.uk)
   ------------------------------------------------------------- */
.baldan-newsletter {
    background: #f4f7fb;
    padding: 46px 0;
    border-top: 1px solid #e8ebf1;
}

.baldan-newsletter-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.baldan-newsletter-head {
    flex: 0 0 auto;
    line-height: 1.15;
}

.baldan-newsletter-head span {
    display: block;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
}

.baldan-newsletter-head strong {
    display: block;
    font-size: 27px;
    font-weight: 800;
    color: var(--baldan-navy);
    letter-spacing: .5px;
}

.baldan-newsletter-form {
    flex: 1 1 420px;
}

.baldan-nl-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

.baldan-nl-fields .baldan-nl-field {
    flex: 1 1 170px;
}

.baldan-nl-fields .baldan-nl-submit {
    flex: 0 0 auto;
}

.baldan-nl-fields .wpcf7-form-control-wrap {
    display: block;
}

.baldan-nl-fields p { margin: 0; }

.baldan-nl-fields input[type="text"],
.baldan-nl-fields input[type="email"] {
    width: 100%;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 3px;
    padding: 13px 15px;
    font-size: 15px;
    height: auto;
    box-shadow: none;
}

.baldan-nl-fields input:focus {
    border-color: var(--baldan-gold);
    outline: none;
}

.baldan-nl-fields input[type="submit"] {
    flex: 0 0 auto;
    background: var(--baldan-gold);
    color: #151515;
    border: none;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-size: 13px;
    padding: 13px 34px;
    cursor: pointer;
    transition: background .25s ease;
}

.baldan-nl-fields input[type="submit"]:hover { background: var(--baldan-gold-dark); }

.baldan-newsletter .wpcf7-spinner { display: none; }

/* Line the Send button up with the fields: theme/CF7 rules give inputs and the
   submit different heights and margins, so pin all four to the same box. */
.baldan-nl-fields { align-items: flex-start; }

.baldan-newsletter .baldan-nl-fields input[type="text"],
.baldan-newsletter .baldan-nl-fields input[type="email"],
.baldan-newsletter .baldan-nl-fields input[type="submit"] {
    box-sizing: border-box;
    height: 50px;
    margin: 0 !important;
    line-height: normal;
    vertical-align: top;
}

.baldan-newsletter .baldan-nl-fields input[type="submit"] {
    padding-top: 0;
    padding-bottom: 0;
}

.baldan-newsletter .baldan-nl-submit p,
.baldan-newsletter .baldan-nl-field p { margin: 0; line-height: 0; }

.baldan-newsletter .wpcf7-form-control-wrap { line-height: normal; }

.baldan-newsletter .wpcf7-response-output,
.baldan-newsletter .wpcf7-not-valid-tip {
    flex: 1 1 100%;
    font-size: 13px;
    margin: 6px 0 0;
}

@media (max-width: 767px) {
    .baldan-newsletter-inner { gap: 22px; }
    .baldan-nl-fields input[type="submit"] { width: 100%; }
}

/* -------------------------------------------------------------
   Footer blocks
   ------------------------------------------------------------- */
.baldan-foot-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.baldan-foot-logo img {
    max-width: 180px;
    height: auto;
    /* the mark is navy artwork; lift it off the dark footer */
    background: #fff;
    padding: 9px 12px;
    border-radius: 3px;
}

.baldan-foot-blurb {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 22px;
}

.baldan-foot-marks {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.baldan-foot-marks img {
    height: 46px;
    width: auto;
    background: #fff;
    padding: 6px 9px;
    border-radius: 3px;
}

.baldan-foot-social-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
}

.baldan-foot-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.baldan-foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-size: 16px;
    transition: background .25s ease, color .25s ease;
}

.baldan-foot-social a:hover {
    background: var(--baldan-gold);
    color: #151515;
}

/* recent posts */
.baldan-foot-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.baldan-foot-posts li {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.baldan-foot-post-thumb {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    overflow: hidden;
    border-radius: 3px;
}

.baldan-foot-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.baldan-foot-post-body h4 {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 5px;
}

.baldan-foot-post-body h4 a { color: #fff; }
.baldan-foot-post-body h4 a:hover { color: var(--baldan-gold); text-decoration: none; }

.baldan-foot-post-body p {
    color: #aab3c6;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 4px;
}

.baldan-foot-post-date {
    color: var(--baldan-gold);
    font-size: 12px;
    font-weight: 600;
}

/* quick links */
.baldan-foot-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.baldan-foot-links-list li {
    margin-bottom: 11px;
}

.baldan-foot-links-list a {
    color: #ffffff;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    transition: color .2s ease, padding-left .2s ease;
}

.baldan-foot-links-list a::before {
    content: "\f105";                 /* fa-angle-right */
    font-family: FontAwesome;
    color: var(--baldan-gold);
    margin-right: 10px;
    font-size: 14px;
}

.baldan-foot-links-list a:hover,
.baldan-foot-links-list a:focus {
    color: var(--baldan-gold);
    padding-left: 4px;
    text-decoration: none;
}

/* get in touch */
.baldan-foot-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.baldan-foot-contact li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 17px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.55;
}

.baldan-foot-contact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(251, 197, 49, .16);
    color: var(--baldan-gold);
    font-size: 15px;
    margin-top: 1px;
}

.baldan-foot-contact li:hover .baldan-foot-contact-icon {
    background: var(--baldan-gold);
    color: #151515;
}

.baldan-foot-contact-text { padding-top: 6px; }

.baldan-foot-contact a { color: #ffffff; }

.baldan-foot-contact a:hover,
.baldan-foot-contact a:focus {
    color: var(--baldan-gold);
    text-decoration: none;
}

/* Trankad paints widget text inside the footer mid-grey —
   `footer .textwidget p {color:#666;line-height:32px}` and
   `.textwidget {color:#828282}`. These blocks sit on the navy band, so the
   white has to be re-asserted at a selector depth that clears those. */
footer .textwidget .baldan-foot-blurb,
footer .textwidget .baldan-foot-contact li,
footer .textwidget .baldan-foot-contact-text,
footer .textwidget .baldan-foot-contact p {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

/* That same parent rule also zeroes the paragraph's bottom margin, which left
   the association marks sitting flush against the last line of the blurb. */
footer .textwidget .baldan-foot-blurb {
    margin-bottom: 30px;
}

footer .textwidget .baldan-foot-contact a,
footer .textwidget .baldan-foot-links-list a {
    color: #ffffff;
}

footer .textwidget .baldan-foot-contact a:hover,
footer .textwidget .baldan-foot-contact a:focus,
footer .textwidget .baldan-foot-links-list a:hover,
footer .textwidget .baldan-foot-links-list a:focus {
    color: var(--baldan-gold);
}

/* copyright bar */
.copyright .baldan-foot-links a {
    color: #d7dce8;
    font-size: 13px;
    letter-spacing: .3px;
}

.copyright .baldan-foot-links a:hover { color: var(--baldan-gold); }

.copyright .baldan-foot-links span {
    color: rgba(255, 255, 255, .3);
    margin: 0 10px;
}

.copyright .baldan-foot-copy {
    float: right;
    color: #aab3c6;
    font-size: 13px;
}

@media (max-width: 767px) {
    .copyright .baldan-foot-copy { float: none; display: block; margin-top: 10px; }
}

/* -------------------------------------------------------------
   Footer — Trankad's widget titles are dark, the Baldan footer is navy
   ------------------------------------------------------------- */
/* Trankad's theme options paint widget titles in the body text colour, which
   disappears against the navy footer. Matched at the same depth as that rule
   so it wins without !important. */
footer .footer-top .widget .widget-title,
footer .footer-top .widget .widgettitle,
footer .footer-top .widget h3,
.footer-row .widget-title,
.footer-row .widgettitle,
footer .widget-title,
footer .widgettitle {
    color: #ffffff;
}

footer .baldan-footer-nav,
footer .baldan-footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer .baldan-footer-nav li,
footer .baldan-footer-contact li {
    margin-bottom: 8px;
    line-height: 1.6;
}

footer .baldan-footer-nav a { color: #d7dce8; transition: color .2s ease; }
footer .baldan-footer-contact a { color: #ffffff; }

footer .baldan-footer-nav a:hover,
footer .baldan-footer-nav a:focus,
footer .baldan-footer-contact a:hover,
footer .baldan-footer-contact a:focus {
    color: var(--baldan-gold);
}