/*
 * Kawka Legal — site-specific overrides.
 * Loaded after theme.css on every page.
 */

/* Header: keep the nav menu on ONE row down to ~1200px (both languages wrap
   at ~1280 otherwise). The header used to carry a WhatsApp block on the right,
   which is what made these gaps so tight; it was removed 2026-08-19 (see
   LAUNCH.md §7a - it invited "quick question" traffic). The progressive gap
   reduction stays, because the Polish menu labels still crowd at laptop
   widths. */
@media (max-width: 1450px) {
    .main-header__right { gap: 40px; }
}
@media (max-width: 1320px) {
    .main-header__right { gap: 24px; }
    .main-menu .main-menu__list > li + li { margin-left: 26px; }
}

/* Polish menu labels are longer — never let the list wrap, and give the
   longer labels extra headroom at laptop widths */
html[lang="pl"] .main-header__nav .main-menu__list { flex-wrap: nowrap; }

@media (max-width: 1420px) {
    html[lang="pl"] .main-menu .main-menu__list > li > a { font-size: 15px; }
    html[lang="pl"] .main-menu .main-menu__list > li + li { margin-left: 24px; }
}

@media (max-width: 1300px) {
    html[lang="pl"] .main-menu .main-menu__list > li > a { font-size: 14px; }
    html[lang="pl"] .main-menu .main-menu__list > li + li { margin-left: 18px; }
    html[lang="pl"] .main-header__language { margin: 0 14px; }
}

/* Breadcrumbs in Polish: sentence case, not Title Case */
html[lang="pl"] .procounsel-breadcrumb,
html[lang="pl"] .procounsel-breadcrumb a,
html[lang="pl"] .procounsel-breadcrumb span {
    text-transform: none;
}

/* Menu is a nav label, not a title: keep template's own casing off in PL
   ("Strona główna" not "Strona Główna") */
html[lang="pl"] .main-menu__list > li > a { text-transform: none; }

/* Polish typography: the template forces text-transform:capitalize on many
   titles, which wrongly capitalises Polish conjunctions ("Umowy I Ich",
   "Radca Prawny"). Polish uses sentence case, and our PL copy is already
   correctly cased, so disable capitalize on visible titles for lang="pl".
   (uppercase labels are left intact — they read fine in Polish.) */
html[lang="pl"] .main-slider-one__title,
html[lang="pl"] .sec-title__title,
html[lang="pl"] .feature-one__item__title,
html[lang="pl"] .service-one__item__title,
html[lang="pl"] .service-details__title,
html[lang="pl"] .service-details__sub-title,
html[lang="pl"] .service-details__sub-title-two,
html[lang="pl"] .service-details__item__title,
html[lang="pl"] .service-sidebar__title,
html[lang="pl"] .service-sidebar__contact__title,
html[lang="pl"] .why-choose-four__item__title,
html[lang="pl"] .why-choose-one__item__title,
html[lang="pl"] .why-choose-one__booking__text,
html[lang="pl"] .about-four__count__text,
html[lang="pl"] .team-card__title,
html[lang="pl"] .team-card__designation,
html[lang="pl"] .blog-card__title,
html[lang="pl"] .blog-card__user__name,
html[lang="pl"] .blog-card__user__designation,
html[lang="pl"] .testimonials-card__name,
html[lang="pl"] .testimonials-card__designation,
html[lang="pl"] .portfolio-one__item__title,
html[lang="pl"] .portfolio-one__item__cat,
html[lang="pl"] .footer-widget__title,
html[lang="pl"] .error-404__title,
html[lang="pl"] .cv-item__title,
html[lang="pl"] .page-header__title {
    text-transform: none;
}

/* Signature rendered as text in the Whisper script font
   (replaces the missing signature.png image) */
.about-one__image__signature--text {
    font-family: 'Whisper', cursive;
    font-size: 44px;
    line-height: 1;
    color: #c7954a;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    pointer-events: none;
}

/* Footer offices list (replaces the removed newsletter widget) */
.footer-widget__offices li {
    color: inherit;
}

/* Language switcher in the header */
.main-header__language {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 22px;
}

.main-header__language .lang-link {
    color: inherit;
    font-size: 14px;
    letter-spacing: 1px;
}

.main-header__language .lang-link.active {
    color: #c7954a;
    font-weight: 600;
}

/* About page CV blocks */
.about-page__image img {
    border-radius: 8px;
}

.cv-section {
    margin-top: 36px;
}

/* About page: tighter vertical rhythm for the CV area */
.service-details--about {
    padding: 60px 0 80px;
}

.cv-section__heading {
    font-size: 24px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #c7954a;
    display: inline-block;
}

.cv-item {
    background: #f8f6f2;
    border-left: 3px solid #c7954a;
    border-radius: 6px;
    padding: 18px 22px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cv-item__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c7954a, #e0b877);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(199, 149, 74, 0.35);
}

.cv-item__badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    background: #c7954a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.cv-item__title {
    font-size: 17px;
    margin-bottom: 4px;
}

.cv-item__meta {
    color: #c7954a;
    font-size: 14px;
    margin-bottom: 0;
}

/* Language badges */
.lang-badges {
    margin: 0;
}

.lang-badges li {
    background: #f8f6f2;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.lang-badges__flag {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--procounsel-primary, #19223a), #2a3654);
    border: 2px solid #c7954a;
    color: #c7954a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.lang-badges__content {
    flex-grow: 1;
    min-width: 0;
}

.lang-badges__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.lang-badges__bar {
    height: 6px;
    border-radius: 999px;
    background: #e4ded2;
    overflow: hidden;
}

.lang-badges__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #c7954a, #e0b877);
}

.lang-badges__name {
    font-weight: 600;
    color: var(--procounsel-primary, #19223a);
}

.lang-badges__name small {
    display: block;
    font-weight: 400;
    color: #7c7c7c;
    font-size: 13px;
}

.lang-badges__level {
    background: #c7954a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.cv-note {
    font-size: 14px;
    color: #7c7c7c;
    margin-top: 16px;
}

/* Policy pages (privacy / cookies) */
.policy-content > .cv-item__meta {
    display: inline-block;
    background: var(--procounsel-primary, #19223a);
    color: #c7954a;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.policy-content .service-details__sub-title {
    display: inline-block;
    font-size: 22px;
    border-bottom: 2px solid #c7954a;
    padding-bottom: 8px;
    margin-top: 42px;
    margin-bottom: 18px;
}

.policy-content .service-details__list li {
    margin-bottom: 10px;
}

.policy-card {
    background: #f8f6f2;
    border-left: 3px solid #c7954a;
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 10px;
}

/* Policy table of contents */
.policy-toc ol {
    columns: 2;
    column-gap: 40px;
    margin: 10px 0 0;
    padding-left: 18px;
}

.policy-toc li {
    margin-bottom: 6px;
    break-inside: avoid;
}

.policy-toc a {
    color: var(--procounsel-primary, #19223a);
}

.policy-toc a:hover {
    color: #c7954a;
}

@media (max-width: 767px) {
    .policy-toc ol {
        columns: 1;
    }
}

/* Homepage About: clean layout — natural portrait beside the text, no
   decorative frames (client removed the engraved card + gold offset frame
   and the size cap). Only the WhatsApp badge styling is kept. */
@media (min-width: 992px) {
    .about-one .row {
        align-items: center;
    }

    .about-one__image > img:first-child {
        width: 100%;
        height: auto;
        border-radius: 6px;
    }
}

.about-one__image {
    position: relative;
}

/* WhatsApp badge on the portrait: discreet navy pill at the lower corner */
@media (max-width: 991px) {
    .about-one__content {
        margin-top: 40px;
    }
}

/* Service cards: matched icons, gold badges, hover lift, equal heights */
.service-one__item {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-one__item__text {
    flex-grow: 1;
}

.service-one__item__btn {
    margin-top: auto;
}

.service-one__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(25, 34, 58, 0.14);
}

.service-one__item__icon {
    background: linear-gradient(135deg, #c7954a, #e0b877);
    color: #ffffff;
    font-size: 28px;
    border-top-right-radius: 14px;
    box-shadow: 0 6px 16px rgba(199, 149, 74, 0.4);
    transition: background 0.35s ease, color 0.35s ease;
}

.service-one__item:hover .service-one__item__icon {
    background: var(--procounsel-primary, #19223a);
    color: #c7954a;
}

.service-one__item__image {
    overflow: hidden;
    border-radius: 8px;
}

.service-one__item__image img {
    transition: transform 0.5s ease;
}

.service-one__item:hover .service-one__item__image img {
    transform: scale(1.05);
}

/* Testimonial cards: join the card family (cream, gold accent, hover lift) */
.testimonials-card {
    background-color: #f8f6f2;
    border-top: 3px solid #c7954a;
    border-radius: 10px;
}

.testimonials-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(25, 34, 58, 0.12);
}

/* Blog cards: gentle hover lift to match */
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(25, 34, 58, 0.12);
}

/* Small ornament under section headings */
.sec-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.sec-title.text-left .sec-ornament {
    justify-content: flex-start;
}

.sec-ornament span {
    display: block;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c7954a);
}

.sec-ornament span:last-child {
    background: linear-gradient(90deg, #c7954a, transparent);
}

.sec-ornament i {
    color: #c7954a;
    font-size: 22px;
    line-height: 1;
}

.sec-ornament__mark {
    height: 28px;
    width: auto;
}

/* Blog article / case study bottom buttons */
.blog-article__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

/* Areas of expertise tile grid */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.expertise-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8f6f2;
    border: 1px solid #eee7d9;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.expertise-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(25, 34, 58, 0.08);
}

.expertise-tile i {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c7954a, #e0b877);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(199, 149, 74, 0.35);
}

.expertise-tile span {
    font-size: 15px;
    font-weight: 500;
    color: var(--procounsel-primary, #19223a);
    line-height: 1.4;
}

/* Ceremony photo: fixed moderate size, centered in its column */
.why-choose-four__right.h-100 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-four__img--full {
    width: 100%;
}

.why-choose-four__img--full img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 12px;
    border: 1px solid rgba(199, 149, 74, 0.5);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
    .why-choose-four__img--full img {
        height: auto;
        max-height: 460px;
    }
}

.cv-personal {
    margin-top: 24px;
    font-style: italic;
}

/* About page: compact top section (photo + intro) */
.about-four-about {
    padding: 60px 0 40px;
}

.about-four-about .sec-title__title {
    font-size: 30px;
    line-height: 1.3;
}

/* Toga portrait: equal height with the neighbouring columns on desktop */
.about-four-about .about-four__img {
    margin-right: 0;
}

.about-four-about .about-four__img img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(25, 34, 58, 0.15);
}

@media (min-width: 1200px) {
    .about-four-about .about-four__img {
        height: 100%;
    }

    .about-four-about .about-four__img img {
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
}

@media (max-width: 1199px) {
    .about-four-about .about-four__img img {
        height: auto;
        max-height: 500px;
        object-fit: cover;
        object-position: top center; /* keep the head in frame when capped */
    }
}

/* Booking CTA on the About intro: slightly larger than default */
.procounsel-btn--xl {
    font-size: 14px;
    padding: 16px 38px;
}

.about-four-about .about-four__btns {
    margin-top: 30px;
}

/* Education cards in a responsive grid (full-width row) */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.edu-grid .cv-item {
    margin-bottom: 0;
}

/* Languages badges side by side (full-width row) */
.lang-badges--row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.lang-badges--row li {
    margin-bottom: 0;
}

/* About page: compact variant of the blue why-choose band */
.why-choose-four--compact {
    padding: 45px 0;
}

.why-choose-four--compact .sec-title {
    padding-bottom: 14px;
}

.why-choose-four--compact .sec-title__title {
    font-size: 24px;
    line-height: 1.3;
}

.why-choose-four--compact .why-choose-four__content__text {
    font-size: 14px;
    line-height: 23px;
    margin-bottom: 20px;
}

.why-choose-four--compact .why-choose-four__list {
    margin-bottom: 24px;
}

.why-choose-four--compact .why-choose-four__item {
    padding: 14px 20px 10px;
}

.why-choose-four--compact .why-choose-four__item__title {
    font-size: 15px;
}

.why-choose-four--compact .why-choose-four__item__text {
    font-size: 13px;
    margin-top: 6px;
}

.why-choose-four--compact .why-choose-four__item__icon i {
    font-size: 28px;
}


/* About page: three stacked items in the why-choose pill (template default
   is a horizontal box designed for exactly two items) */
.why-choose-four__list--stacked {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
}

.why-choose-four__list--stacked .why-choose-four__item:first-child {
    border-right: none;
}

.why-choose-four__list--stacked .why-choose-four__item:not(:last-child) {
    border-bottom: 2px solid var(--procounsel-base, #c7954a);
}

/* About page "Experience From Three Perspectives" cards — more refined:
   gold-ringed icon, hairline gold divider instead of a heavy 2px rule,
   subtle hover lift and a gold accent bar on the left. */
.why-choose-four--compact .why-choose-four__list--stacked {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(199, 149, 74, 0.22);
    overflow: hidden;
}

.why-choose-four--compact .why-choose-four__item {
    position: relative;
    padding: 22px 26px 22px 30px;
    transition: background 0.3s ease;
}

.why-choose-four--compact .why-choose-four__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #c7954a, #e0b877);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.why-choose-four--compact .why-choose-four__item:hover {
    background: rgba(199, 149, 74, 0.06);
}

.why-choose-four--compact .why-choose-four__item:hover::before {
    opacity: 1;
}

.why-choose-four--compact .why-choose-four__list--stacked .why-choose-four__item:not(:last-child) {
    border-bottom: 1px solid rgba(199, 149, 74, 0.28);
}

.why-choose-four--compact .why-choose-four__list--stacked .why-choose-four__item__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(199, 149, 74, 0.14) !important;
    border: 1px solid rgba(199, 149, 74, 0.5);
    color: #d4a862 !important;
    font-size: 22px;
}

/* Inline signature next to buttons (Whisper font, replaces signature image) */
.signature-inline {
    font-family: 'Whisper', cursive;
    font-size: 40px;
    line-height: 1;
    color: #c7954a;
    margin-left: 24px;
    white-space: nowrap;
}

/* Anti-spam honeypot: invisible to humans, tempting to bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Skip-to-content link (visible only on keyboard focus) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--procounsel-primary, #19223a);
    color: #c7954a;
    padding: 12px 22px;
    font-weight: 600;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
    color: #c7954a;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #c7954a;
    outline-offset: 2px;
}

/* Print: clean article/policy printouts */
@media print {
    header.main-header,
    .main-header,
    footer.main-footer,
    .mobile-nav__wrapper,
    .search-popup,
    .scroll-to-top,
    .skip-link,
    #cookieConsent,
    .custom-cursor__cursor,
    .custom-cursor__cursor-two,
    .preloader,
    .blog-article__cta,
    .procounsel-btn,
    .service-sidebar__contact,
    .page-header__bg {
        display: none !important;
    }

    .page-header {
        min-height: auto !important;
        background: none !important;
        padding: 10px 0 !important;
    }

    .page-header__title,
    body {
        color: #000 !important;
        background: #fff !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    .policy-content > .cv-item__meta {
        background: none;
        color: #000;
        padding: 0;
    }

    .policy-card,
    .cv-item {
        border: 1px solid #999;
        background: none;
    }

    section {
        padding: 10px 0 !important;
    }
}

/* 'How I Can Help' image: slightly reduced with breathing room from the text
   (full-bleed crop felt too zoomed-in on large screens) */
.service-details__image {
    text-align: center;
    padding-right: 20px;
}

.service-details__image img {
    max-width: 100%;
    border-radius: 8px;
}

/* Compact contact card on the services overview page */
.services-cta {
    max-width: 420px;
    margin: 50px auto 0;
}

/* Service cards: identical image size regardless of source file
   (4/3 per client: square version looked too tall) */
.service-one__item__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Contact card: elegant centered layout - gold-ringed portrait medallion
   above the title (matches the medallion motif used on the About page) */
.service-sidebar__contact {
    text-align: center;
    min-height: auto;
    padding: 38px 30px 36px;
}

.service-sidebar__contact__image {
    position: static;
    width: 132px;
    height: 132px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #c7954a;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.service-sidebar__contact__image img {
    object-position: top center;
}

.service-sidebar__contact__title {
    max-width: none;
}

.service-sidebar__contact .procounsel-btn {
    margin-top: 4px;
}

.service-sidebar__contact__title {
    font-size: 20px;
    line-height: 1.4;
}

/* ============ BRAND PALETTE (final, 2026-07-18) ============
   Hybrid: deeper navy stays the visible face of the site (survives dim
   and uncalibrated screens with a clear blue identity); the deepest
   layers use the ink tones sampled from the logo background
   (Kawka logo black.png: #0b0a14 mid, #05040c darkest corner), so the
   site's shadows are literally the logo's material. */
:root {
    --procounsel-primary: #141b30;
    --procounsel-primary-rgb: 20, 27, 48;
    --procounsel-black: #0b0a14;
    --procounsel-black-rgb: 11, 10, 20;
    --procounsel-black2: #05040c;
    --procounsel-black2-rgb: 5, 4, 12;
}
/* ============ /BRAND PALETTE ============ */

/* Feature strip: the three headline cards are now links */
.feature-one__item__title a {
    color: inherit;
    transition: color 0.3s ease;
}
.feature-one__item__title a:hover {
    color: #c7954a;
}

/* Case-study highlight boxes (key risk / takeaway) */
.case-highlight {
    background: #f8f6f2;
    border-left: 3px solid #c7954a;
    border-radius: 6px;
    padding: 18px 22px;
    margin: 24px 0;
}
.case-highlight p { margin: 0; }
.case-highlight strong { color: var(--procounsel-primary, #19223a); }

/* Micro-polish: branded selection + scrollbar (2026-07-18) */
::selection {
    background: #c7954a;
    color: #ffffff;
}

html {
    scrollbar-color: #2a3450 #f0ede7;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #f0ede7; }
::-webkit-scrollbar-thumb {
    background: #2a3450;
    border-radius: 6px;
    border: 2px solid #f0ede7;
}
::-webkit-scrollbar-thumb:hover { background: #c7954a; }

/* "How I work" three-step strip (homepage) */
.how-i-work {
    padding: 96px 0 106px;
}

.how-i-work .sec-title {
    text-align: center;
}

.how-step {
    position: relative;
    height: 100%;
    text-align: center;
    background: #faf8f3;
    border: 1px solid rgba(199, 149, 74, 0.28);
    border-radius: 6px;
    padding: 38px 30px 34px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20, 27, 48, 0.12);
}

.how-step__number {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c7954a, #e0b877);
    color: #ffffff;
    font-family: 'Marcellus', serif;
    font-size: 26px;
    line-height: 58px;
    box-shadow: 0 6px 16px rgba(199, 149, 74, 0.35);
}

.how-step__title {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--procounsel-primary, #141b30);
}

.how-step__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
}

/* Credentials trust strip (homepage, under About) — surfaces verified
   qualifications as a quiet proof band between navy sections */
.trust-strip {
    background: var(--procounsel-primary, #141b30);
    border-top: 1px solid rgba(199, 149, 74, 0.28);
    border-bottom: 1px solid rgba(199, 149, 74, 0.28);
    padding: 34px 0;
}

.trust-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-strip__item {
    position: relative;
    text-align: center;
    padding: 6px 26px;
}

.trust-strip__item + .trust-strip__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, rgba(199, 149, 74, 0.45), transparent);
}

.trust-strip__icon {
    display: block;
    font-size: 22px;
    color: #c7954a;
    margin-bottom: 10px;
}

.trust-strip__label {
    display: block;
    font-family: 'Marcellus', serif;
    font-size: 17px;
    color: #ffffff;
    letter-spacing: 0.01em;
    margin-bottom: 3px;
}

.trust-strip__value {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #9fb0c2;
}

@media (max-width: 767px) {
    .trust-strip__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 0;
    }
    .trust-strip__item:nth-child(odd)::before { display: none; }
    .trust-strip__item:nth-child(3)::before,
    .trust-strip__item:nth-child(4)::before {
        content: "";
        position: absolute;
        top: -13px;
        left: 15%;
        right: 15%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(199, 149, 74, 0.4), transparent);
        transform: none;
    }
}

/* Lead-magnet download card (service sidebar) */
.lead-magnet {
    display: block;
    text-decoration: none;
    background: linear-gradient(160deg, #ffffff 0%, #faf6ee 100%);
    border: 1px solid rgba(199, 149, 74, 0.4);
    border-radius: 10px;
    padding: 26px 24px 22px;
    text-align: center;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.lead-magnet:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(20, 27, 48, 0.14);
    border-color: #c7954a;
}
.lead-magnet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c7954a, #e0b877);
    color: #fff;
    font-size: 22px;
    margin-bottom: 14px;
}
.lead-magnet__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c7954a;
    font-weight: 600;
    margin-bottom: 4px;
}
.lead-magnet__title {
    display: block;
    font-family: 'Marcellus', serif;
    font-size: 20px;
    color: var(--procounsel-primary, #141b30);
    line-height: 1.3;
    margin-bottom: 8px;
}
.lead-magnet__text {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6a6f7a;
    margin-bottom: 16px;
}
.lead-magnet__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--procounsel-primary, #141b30);
    border-bottom: 2px solid #c7954a;
    padding-bottom: 3px;
}
.lead-magnet:hover .lead-magnet__cta { color: #c7954a; }
html[lang="pl"] .lead-magnet__title { text-transform: none; }

/* Homepage vertical rhythm (2026-07-18): the template ships 120px (and one
   220px) section padding, which stacks into large empty bands on the long
   one-page homepage. Tighten to a consistent ~76px. Scoped to .homepage so
   the same section classes on other pages (services, cases) are untouched. */
.homepage .about-one { padding: 80px 0; }
.homepage .how-i-work { padding: 72px 0 76px; }
.homepage .service-one { padding: 76px 0 90px; }
.homepage .why-choose-one { padding: 76px 0; }
.homepage .portfolio-one { padding: 76px 0 0; }
.homepage .team-one { padding: 76px 0; }
.homepage .testimonials-one { padding: 76px 0; }
.homepage .blog-one { padding: 76px 0; }

/* Why-choose flanking photos: the template sized the two differently — left
   forced to min-height 633px and hung below its box, right to 882px bleeding
   250px above — so they never matched, and after the tighter homepage rhythm
   the right one jutted into the section above. Give both the same treatment:
   identical height, same alignment, cropped (not stretched), both contained. */
.homepage .why-choose-one__left,
.homepage .why-choose-one__right {
    height: 100%; /* template leaves these 0-tall, so nothing could align to them */
}

.homepage .why-choose-one__left img,
.homepage .why-choose-one__right img {
    position: absolute;
    top: 0;
    bottom: auto;
    transform: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(20, 27, 48, 0.18);
}

.homepage .why-choose-one__left img {
    left: 0;
    right: auto;
    object-position: center 40%; /* keeps the signing moment in frame */
}

.homepage .why-choose-one__right img {
    right: 0;
    left: auto;
    object-position: center 20%; /* keeps the head high in frame */
}

/* Bootstrap 5 sets html{scroll-behavior:smooth}, which re-smooths every
   frame of any JS scroll animation — it made the one-page menu links crawl
   and stall (and would do the same to the back-to-top button). Let
   JavaScript own scrolling; it passes behavior:"smooth" explicitly. */
:root {
    scroll-behavior: auto !important;
}

/* Subpage banner on large screens: the template pins .page-header to a fixed
   577px and anchors the background at 0% 0%, so on a wide monitor it becomes
   a thin letterbox showing only the upper-LEFT ~48% of the artwork. Scale the
   height with the viewport (capped so it never dominates) and centre the
   image. Mobile keeps the template's own heights. */
@media (min-width: 768px) {
    .page-header {
        min-height: clamp(460px, 38vw, 760px);
    }
}

.page-header__bg {
    background-position: center center;
}


/* Why-Choose (homepage): on screens >=1500px the template pads the text
   block with padding-right:200px (vs 94px on the left), leaving a dead
   band between the paragraph and the right-hand photo. Use the template's
   own smaller-screen value (100px) so the two side gaps are symmetric.
   Photos and column widths are untouched - nothing is resized. */
@media (min-width: 1500px) {
    .why-choose-one__content {
        padding-right: 100px;
    }
}

/* ---- Mobile header (2026-08-07) ----------------------------------------
   Client screenshot: the language switcher was clipped at the right edge and
   the header looked oversized. Cause: the logo is a square lockup rendered at
   160x160, eating ~40% of a phone's width and forcing a 200px-tall header;
   the switcher then sat 11px from the edge — enough to be cut off on smaller
   screens or when Android's font/display scaling is enlarged.
   Fix: smaller logo, tighter gaps, and the switcher is never allowed to
   shrink or wrap. */
@media (max-width: 767px) {
    .main-header__logo img {
        width: 104px !important;
        height: auto;
    }

    .main-header__inner {
        padding-right: 6px;
        min-height: 0;
    }

    .main-header__right {
        gap: 14px;
    }

    /* keep the EN | PL switcher fully on screen, always */
    .main-header__language {
        margin: 0 2px 0 0;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .main-header__language .lang-link {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .mobile-nav__btn {
        flex-shrink: 0;
    }
}

/* Very narrow phones (<=360px) — trim a little further */
@media (max-width: 360px) {
    .main-header__logo img {
        width: 88px !important;
    }

    .main-header__right {
        gap: 10px;
    }
}

/* ---- Homepage portrait: signature vs WhatsApp badge (2026-08-07) --------
   The template centres the signature at 64% of the photo while the WhatsApp
   badge is anchored bottom-left, so at some widths they collided (client
   screenshot). Pin them to opposite corners instead of relying on luck:
   badge bottom-left, signature bottom-right. On phones the photo is too
   narrow for both on one line, so the signature moves to the top-right. */
.about-one__image__signature--text {
    left: auto !important;
    right: 24px;
    bottom: 22px;
    transform: none !important;
}

@media (max-width: 991px) {
    .about-one__image__signature--text {
        top: 18px;
        bottom: auto;
        right: 18px;
        font-size: 34px;
    }
}

/* Blog date badge: now carries the year ("28 MAY 2026"), so the month+year
   line needs to be smaller than the day to stay comfortable in the circle. */
.blog-card__date {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* Publication-date / legal-state note on articles */
.law-as-at {
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--procounsel-primary, #141b30);
}

/* Images now carry width/height attributes (so the browser reserves space and
   CLS drops). Those attributes would otherwise FORCE the height wherever CSS
   only sets a width - squashing photos. This restores proportional scaling;
   class-based rules that deliberately set a height (why-choose pillars,
   service cards with aspect-ratio) have higher specificity and still win. */
:where(img[width][height]) {
    height: auto;
}

/* ---------------------------------------------------------------------------
   CLS: reserve space for the carousels before JavaScript initialises them

   owl-carousel ships `.owl-carousel { display: none }` and only flips it to
   block once its script has run. All four carousels on the homepage therefore
   start at ZERO height, and the moment theme.js lands the page grows by about
   2700px in one go - everything below each carousel jumps down. That, not the
   image dimensions, is what kept CLS at ~0.87.

   The fix reserves each carousel's final height up front. Heights below were
   measured on the live site at 375px, 768px and 1280px. `overflow: hidden`
   keeps the reservation exact whatever the content does. Owl removes the
   :not(.owl-loaded) state itself, so every rule here stops applying the
   instant the carousel is live.
--------------------------------------------------------------------------- */
.procounsel-owl__carousel:not(.owl-loaded) {
    display: block;
    overflow: hidden;
}

/* Slides are unstyled before owl wraps them, so only the hero - which shows
   one slide per view at every width - can safely render. The rest would be
   laid out at full container width and look wrong for the moment before init. */
.procounsel-owl__carousel:not(.owl-loaded) > * {
    display: none;
}

.main-slider-one__carousel:not(.owl-loaded) > *:first-child {
    display: block;
}

.main-slider-one__carousel:not(.owl-loaded) {
    height: 1000px;
}

.team-one__carousel:not(.owl-loaded) {
    height: 513px;
}

.testimonials-one__carousel:not(.owl-loaded) {
    height: 425px;
}

.blog-one__carousel:not(.owl-loaded) {
    height: 745px;
}

/* hero padding drops from 260/267 to 180/120 at this breakpoint (theme.css) */
@media (max-width: 991px) {
    .main-slider-one__carousel:not(.owl-loaded) {
        height: 668px;
    }

    .blog-one__carousel:not(.owl-loaded) {
        height: 750px;
    }

    /* Polish article titles wrap onto fewer lines than the English ones */
    html[lang="pl"] .blog-one__carousel:not(.owl-loaded) {
        height: 716px;
    }
}

@media (max-width: 767px) {
    /* headline wraps onto more lines, so the hero is taller here than at 768px */
    .main-slider-one__carousel:not(.owl-loaded) {
        height: 685px;
    }

    .team-one__carousel:not(.owl-loaded) {
        height: 440px;
    }

    .blog-one__carousel:not(.owl-loaded) {
        height: 726px;
    }

    /* the Polish headline is shorter and wraps one line less */
    html[lang="pl"] .main-slider-one__carousel:not(.owl-loaded) {
        height: 640px;
    }

    html[lang="pl"] .blog-one__carousel:not(.owl-loaded) {
        height: 726px;
    }
}

/* ---------------------------------------------------------------------------
   Case-study strip (portfolio-one)
   The template ships three side-by-side panels where the hovered one expands.
   That only works with a mouse and a wide viewport: below 1200px the panels
   collapse to 65-215px slivers of a 570px-wide photo, and the caption box
   (fixed at 375px) spills far outside them. Below 1200px we therefore drop the
   expand effect, stack the panels, and keep every caption permanently visible.
--------------------------------------------------------------------------- */

/* Long real-life case titles need more air than the template's line-height:100%,
   especially in Polish where diacritics sit below the baseline. */
.portfolio-one__item__title {
    font-size: 22px;
    line-height: 1.3;
}

/* The template pins the caption box to a fixed 375px, which is wider than the
   panel on any laptop screen (~370px per panel at 1280px). Let it size itself
   to the panel instead, so it can never hang over the edge of the photo. */
.portfolio-one__item__content {
    width: auto;
    left: 30px;
    right: 30px;
}

/* The passport/clipboard is left of centre, so the narrow (non-hovered) crop
   would otherwise show nothing but empty desk. */
.portfolio-one__item img[src$="portfolio-1-1.jpg"] {
    object-position: 15% center;
}

@media (max-width: 1199px) {
    .portfolio-one__wrapper {
        flex-wrap: wrap;
        gap: 24px;
    }

    /* every panel equal - no hover expand */
    .portfolio-one__item,
    .portfolio-one__item.active {
        flex: 1 1 calc(50% - 12px);
    }

    .portfolio-one__item img {
        height: 380px;
    }

    /* captions always on, sized to the panel instead of a fixed 375px */
    .portfolio-one__item__content,
    .portfolio-one__item.active .portfolio-one__item__content {
        visibility: visible;
        opacity: 1;
        transform: none;
        width: auto;
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 24px 22px;
        background: linear-gradient(90deg, #19223a 0%, rgba(25, 34, 58, 0.75) 100%);
    }

    /* the caption is permanently on and its height varies with the title, so
       park the arrow in the top-right corner instead of stacking it above. */
    .portfolio-one__item__rm,
    .portfolio-one__item.active .portfolio-one__item__rm {
        visibility: visible;
        opacity: 1;
        transform: none;
        top: 20px;
        right: 20px;
        bottom: auto;
        left: auto;
    }

    .portfolio-one__item__rm a,
    .portfolio-one__item.active .portfolio-one__item__rm a {
        width: 56px;
        height: 56px;
        background-color: var(--procounsel-white, #fff);
        color: var(--procounsel-base, #c7954a);
    }
}

@media (max-width: 767px) {
    .portfolio-one__item,
    .portfolio-one__item.active {
        flex: 1 1 100%;
    }

    .portfolio-one__item img {
        height: 300px;
    }

    .portfolio-one__item__title {
        font-size: 20px;
    }

    .portfolio-one__item__content,
    .portfolio-one__item.active .portfolio-one__item__content {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 20px 18px;
    }

    .portfolio-one__item__rm,
    .portfolio-one__item.active .portfolio-one__item__rm {
        top: 16px;
        right: 16px;
    }

    .portfolio-one__item__rm a,
    .portfolio-one__item.active .portfolio-one__item__rm a {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* ---------------------------------------------------------------------------
   Header CTA: readable label on the hover state

   The template deliberately flips the header button to white on hover
   (.main-header__btn .procounsel-btn > span), but never changes the label
   colour, which still inherits white from .procounsel-btn. The result was
   white text on a white panel - contrast 1:1, the words simply vanished
   while the pointer was on the button.

   Keep the white flip, which is clearly intentional against the navy header,
   and give the label the navy it needs to be read.
--------------------------------------------------------------------------- */
.main-header__btn .procounsel-btn > span {
    color: var(--procounsel-primary, #141b30);
}