/* ==========================================================================
   Travel Consulting landing page ([wpic_travel_consulting])
   Landing-specific niceties only. All base typography, buttons, cards, hero,
   sections and grids come from public.css. Every readable size stays >= 15px.
   Colours use design tokens so light + dark modes work automatically.
   ========================================================================== */

.wpic-tc-hero { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(64px, 8vw, 104px); }
.wpic-tc-hero-copy .wpic-lead { max-width: 40ch; }

/* Hero split layout: centered stack on mobile, copy + visual side by side on
   desktop. The shared .wpic-hero-grid/.wpic-sp-wrap rules in public.css are
   scoped to .wpic-home, so this page needs its own copy of them. */
.wpic-tc .wpic-hero-grid {
    display: grid;
    gap: clamp(32px, 5vw, 56px);
    grid-template-columns: 1fr;
    align-items: center;
    position: relative;
    z-index: 1;
    text-align: center;
}
.wpic-tc .wpic-hero-grid .wpic-h1,
.wpic-tc .wpic-hero-grid .wpic-eyebrow { text-align: center; }
.wpic-tc .wpic-hero-copy .wpic-lead { margin-left: auto; margin-right: auto; }
.wpic-tc .wpic-hero-grid .wpic-cta-row,
.wpic-tc .wpic-hero-grid .wpic-trust { justify-content: center; }
.wpic-tc .wpic-sp-wrap { position: relative; display: flex; justify-content: center; }
.wpic-tc .wpic-tc-hero-visual { width: 100%; max-width: 520px; }
@media (min-width: 980px) {
    .wpic-tc .wpic-hero-grid { grid-template-columns: 1.05fr .95fr; text-align: left; }
    .wpic-tc .wpic-hero-grid .wpic-h1,
    .wpic-tc .wpic-hero-grid .wpic-eyebrow { text-align: left; }
    .wpic-tc .wpic-hero-copy .wpic-lead { margin-left: 0; margin-right: 0; }
    .wpic-tc .wpic-hero-grid .wpic-cta-row { justify-content: flex-start; }
    .wpic-tc .wpic-hero-grid .wpic-trust { justify-content: flex-start; }
}

/* Gradient headline accent */
.wpic-tc-grad {
    background: var(--wpic-grad-btn);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Full-width section intros read as centered marketing headers on this page.
   The two-column sections (Included, Request) use their own left-aligned copy
   blocks, not .wpic-sect-head, so they are unaffected. */
.wpic-tc .wpic-sect-head {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(36px, 4vw, 48px);
}
.wpic-tc .wpic-sect-head .wpic-lead { margin-left: auto; margin-right: auto; }

/* Keep in-page anchor jumps (#how, #pricing, #request) clear of the sticky header. */
.wpic-tc section[id] { scroll-margin-top: 96px; }

/* --- Hero visual + floating cards ---------------------------------------- */
.wpic-tc-hero-visual { position: relative; margin: 0; }
.wpic-tc-hero-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--wpic-radius-xl, 28px);
    box-shadow: var(--wpic-shadow-lg);
    display: block;
}
.wpic-tc-badge-free {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--wpic-grad-accent2);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em;
    padding: 7px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 22px -8px rgba(224,127,0,.7);
}
.wpic-tc-hero-card {
    position: absolute;
    left: 14px;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--wpic-radius);
    background: color-mix(in srgb, var(--wpic-surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, #fff 30%, var(--wpic-line));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--wpic-shadow);
}
.wpic-tc-hero-card-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--wpic-grad-btn);
    color: #fff;
}
.wpic-tc-hero-card-ic .wpic-icon { width: 22px; height: 22px; }
.wpic-tc-hero-card-txt { display: flex; flex-direction: column; line-height: 1.3; }
.wpic-tc-hero-card-txt strong { font-size: 16px; color: var(--wpic-ink-900); }
.wpic-tc-hero-card-txt span { font-size: 15px; color: var(--wpic-ink-500); }

/* --- Floating trust bar -------------------------------------------------- */
.wpic-tc-trustbar {
    position: relative;
    z-index: 2;
    margin-top: clamp(36px, 5vw, 56px);
    margin-bottom: calc(-1 * clamp(64px, 8vw, 104px) - 28px);
    background: var(--wpic-surface);
    border: 1px solid var(--wpic-line);
    border-radius: var(--wpic-radius-lg);
    box-shadow: var(--wpic-shadow-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 22px 20px;
}
.wpic-tc-trust-item { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 14px; }
.wpic-tc-trust-item + .wpic-tc-trust-item { border-left: 1px solid var(--wpic-line); }
.wpic-tc-trust-ic {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--wpic-grad-pill);
    color: var(--wpic-brand-600);
}
.wpic-tc-trust-ic .wpic-icon { width: 20px; height: 20px; }
.wpic-tc-trust-item strong { display: block; font-size: 16px; color: var(--wpic-ink-900); line-height: 1.25; }
.wpic-tc-trust-item span { display: block; font-size: 15px; color: var(--wpic-ink-500); }

/* --- Pillars: numbered gradient tiles ------------------------------------ */
.wpic-tc-pillar { position: relative; overflow: hidden; }
.wpic-tc-pillar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--wpic-grad-btn);
    opacity: 0;
    transition: opacity .2s ease;
}
.wpic-tc-pillar:hover::before { opacity: 1; }
.wpic-tc-pillar-num {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--wpic-brand-500) 32%, transparent);
}
.wpic-tc-pillar-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px; height: 54px;
    border-radius: 16px;
    background: var(--wpic-grad-btn);
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 12px 24px -12px rgba(0,0,187,.6);
}
.wpic-tc-pillar-ic .wpic-icon { width: 26px; height: 26px; }
.wpic-tc-pillar h3 { margin: 0 0 8px; }

/* --- How it works: connected step timeline ------------------------------- */
.wpic-tc-steps {
    position: relative;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: 8px;
}
.wpic-tc-step {
    position: relative;
    background: var(--wpic-surface);
    border: 1px solid var(--wpic-line);
    border-radius: var(--wpic-radius-lg);
    padding: 30px 24px 24px;
    box-shadow: var(--wpic-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wpic-tc-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--wpic-shadow-lg);
    border-color: color-mix(in srgb, var(--wpic-brand-500) 25%, var(--wpic-line));
}
.wpic-tc-step-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wpic-grad-btn);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 16px;
    box-shadow: 0 12px 24px -12px rgba(0,0,187,.6);
}
.wpic-tc-step h3 { margin: 0 0 8px; }
/* Dotted connector between step badges (large screens only) */
@media (min-width: 981px) {
    .wpic-tc-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 54px;
        left: calc(100% + 1px);
        width: 18px;
        border-top: 2px dashed color-mix(in srgb, var(--wpic-brand-500) 35%, var(--wpic-line));
    }
}

/* --- How pricing works: honest three-step process rail ------------------- */
.wpic-tc-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 8px;
    counter-reset: wpic-pr;
}
.wpic-tc-price-step {
    position: relative;
    counter-increment: wpic-pr;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--wpic-surface);
    border: 1px solid var(--wpic-line);
    border-radius: var(--wpic-radius-lg);
    padding: 26px 24px;
    box-shadow: var(--wpic-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wpic-tc-price-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--wpic-shadow-lg);
    border-color: color-mix(in srgb, var(--wpic-brand-500) 25%, var(--wpic-line));
}
/* Faint step number, echoing the pillar numbering for a consistent language. */
.wpic-tc-price-step::after {
    content: counter(wpic-pr, decimal-leading-zero);
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--wpic-brand-500) 30%, transparent);
}
.wpic-tc-price-ic {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--wpic-grad-pill);
    color: var(--wpic-brand-600);
}
.wpic-tc-price-ic .wpic-icon { width: 22px; height: 22px; }
.wpic-tc-price-txt strong { display: block; font-size: 17px; color: var(--wpic-ink-900); margin-bottom: 5px; line-height: 1.3; padding-right: 26px; }
.wpic-tc-price-txt span { display: block; font-size: var(--wpic-fs-body); color: var(--wpic-ink-500); line-height: 1.55; }
/* Chevron connector signals the left-to-right sequence (desktop only). */
@media (min-width: 861px) {
    .wpic-tc-price-step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 45px;
        right: -13px;
        width: 11px;
        height: 11px;
        border-top: 2px solid color-mix(in srgb, var(--wpic-brand-500) 45%, var(--wpic-line));
        border-right: 2px solid color-mix(in srgb, var(--wpic-brand-500) 45%, var(--wpic-line));
        transform: rotate(45deg);
        z-index: 1;
    }
}

/* --- What's included ----------------------------------------------------- */
.wpic-tc-incl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.wpic-tc-incl-copy .wpic-eyebrow { margin-bottom: 12px; }
.wpic-tc-coord {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--wpic-surface);
    border: 1px solid var(--wpic-line);
    border-radius: var(--wpic-radius);
    padding: 16px 18px;
    margin: 22px 0;
    box-shadow: var(--wpic-shadow-sm);
}
.wpic-tc-coord-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--wpic-grad-pill);
    color: var(--wpic-brand-600);
}
.wpic-tc-coord p { margin: 0; font-size: var(--wpic-fs-body); color: var(--wpic-ink-700); line-height: 1.55; }
.wpic-tc-coord strong { color: var(--wpic-ink-900); }

.wpic-tc-incl-card {
    background: var(--wpic-surface);
    border: 1px solid transparent;
    background: linear-gradient(var(--wpic-surface), var(--wpic-surface)) padding-box,
               var(--wpic-grad-btn) border-box;
    border-radius: var(--wpic-radius-xl, 28px);
    padding: clamp(24px, 3vw, 34px);
    box-shadow: var(--wpic-shadow-lg);
}
.wpic-tc-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 15px;
}
.wpic-tc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--wpic-fs-body);
    color: var(--wpic-ink-800);
    line-height: 1.5;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--wpic-line);
}
.wpic-tc-checklist li:last-child { padding-bottom: 0; border-bottom: 0; }
.wpic-tc-checklist li .wpic-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--wpic-success);
    margin-top: 1px;
}

/* --- Request section: intro + form card ---------------------------------- */
.wpic-tc-request {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.wpic-tc-request-intro { position: sticky; top: 90px; }
.wpic-tc-assure {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.wpic-tc-assure li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--wpic-fs-body);
    color: var(--wpic-ink-700);
    line-height: 1.5;
}
.wpic-tc-assure li .wpic-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--wpic-brand-500); margin-top: 2px; }
.wpic-tc-assure a { color: var(--wpic-brand-600); font-weight: 600; }

.wpic-tc-form-card {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
}
.wpic-tc-form-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--wpic-grad-btn);
}
.wpic-tc-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
.wpic-tc-form-head h3 { margin: 0; }
.wpic-tc-form-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpic-brand-700);
    background: var(--wpic-grad-pill);
    padding: 6px 12px;
    border-radius: 999px;
}
.wpic-tc-form-badge .wpic-icon { width: 16px; height: 16px; }
.wpic-tc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.wpic-tc-form.wpic-form .wpic-field { margin-bottom: 16px; }
.wpic-tc-submit { width: 100%; justify-content: center; margin-top: 8px; }
.wpic-tc-form-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--wpic-ink-500);
}
.wpic-tc-form-foot .wpic-icon { width: 16px; height: 16px; color: var(--wpic-success); }
.wpic-req { color: var(--wpic-danger); }

/* Honeypot: visually removed but not display:none (some bots skip hidden). */
.wpic-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Success state after a submit */
.wpic-tc-success { text-align: center; padding: 22px 6px; }
.wpic-tc-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wpic-success) 16%, transparent);
    margin-bottom: 14px;
}
.wpic-tc-success-icon .wpic-icon { width: 34px; height: 34px; color: var(--wpic-success); }
.wpic-tc-success h3 { margin: 0 0 8px; }
.wpic-tc-success .wpic-btn { margin-top: 18px; }

/* --- FAQ ----------------------------------------------------------------- */
.wpic-tc-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.wpic-tc-faq-item {
    background: var(--wpic-surface);
    border: 1px solid var(--wpic-line);
    border-radius: var(--wpic-radius);
    padding: 4px 22px;
    box-shadow: var(--wpic-shadow-sm);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.wpic-tc-faq-item[open] {
    box-shadow: var(--wpic-shadow);
    border-color: color-mix(in srgb, var(--wpic-brand-500) 25%, var(--wpic-line));
}
.wpic-tc-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--wpic-fs-body);
    color: var(--wpic-ink-900);
    padding: 17px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.wpic-tc-faq-item summary::-webkit-details-marker { display: none; }
.wpic-tc-faq-item summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    color: var(--wpic-brand-500);
    line-height: 1;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.wpic-tc-faq-item[open] summary::after { transform: rotate(45deg); }
.wpic-tc-faq-item p {
    margin: 0 0 17px;
    color: var(--wpic-ink-500);
    font-size: var(--wpic-fs-body);
    line-height: 1.65;
}

/* --- Final CTA ----------------------------------------------------------- */
.wpic-tc-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(135deg, var(--wpic-brand-600), var(--wpic-accent));
    color: #fff;
    border-radius: clamp(20px, 3vw, 30px);
    padding: clamp(40px, 6vw, 72px) 24px;
    box-shadow: var(--wpic-shadow-lg);
}
.wpic-tc-cta-inner { position: relative; z-index: 1; }
.wpic-tc-cta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}
.wpic-tc-cta-blob-1 { width: 320px; height: 320px; background: rgba(255,153,0,.6); top: -120px; right: -80px; }
.wpic-tc-cta-blob-2 { width: 300px; height: 300px; background: rgba(124,58,237,.7); bottom: -140px; left: -70px; }
.wpic-tc-cta .wpic-h2 { color: #fff; }
.wpic-tc-cta .wpic-lead { color: rgba(255,255,255,.9); max-width: 620px; margin-left: auto; margin-right: auto; }
.wpic-tc-cta-row { justify-content: center; margin-top: 26px; }
.wpic-tc-cta .wpic-btn-primary {
    background: #fff;
    color: var(--wpic-brand-700);
}
.wpic-tc-cta .wpic-btn-primary:hover { background: #fff; transform: translateY(-2px); }
.wpic-tc-btn-wa {
    background: rgba(255,255,255,.14);
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.wpic-tc-btn-wa:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
    .wpic-tc-trustbar { grid-template-columns: repeat(2, 1fr); gap: 6px 4px; }
    .wpic-tc-trust-item:nth-child(odd) { border-left: 0; }
    .wpic-tc-trust-item:nth-child(3) { border-top: 1px solid var(--wpic-line); padding-top: 14px; }
    .wpic-tc-trust-item:nth-child(4) { border-top: 1px solid var(--wpic-line); padding-top: 14px; }
}
@media (max-width: 860px) {
    .wpic-tc-hero-copy .wpic-lead { max-width: none; }
    .wpic-tc-pricing { grid-template-columns: 1fr; }
    .wpic-tc-incl,
    .wpic-tc-request { grid-template-columns: 1fr; }
    .wpic-tc-request-intro { position: static; }
    .wpic-tc-form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
    .wpic-tc-trustbar { grid-template-columns: 1fr; }
    .wpic-tc-trust-item { border-left: 0 !important; }
    .wpic-tc-trust-item + .wpic-tc-trust-item { border-top: 1px solid var(--wpic-line); padding-top: 12px; }
    .wpic-tc-hero-card { position: static; margin-top: 12px; }
}