/*
 * CTN Group Sigorta — mobile experience layer
 * Loaded after every public stylesheet so the phone layout has one source of truth.
 */

@media (max-width: 900px) {
    html {
        scroll-padding-top: 76px;
    }

    body {
        min-width: 320px;
        padding-bottom: calc(62px + env(safe-area-inset-bottom));
        overflow-x: clip;
    }

    body.menu-open {
        overflow: hidden;
    }

    .ctn-site-header.site-header,
    .ctn-site-header.site-header.is-scrolled {
        box-shadow: none;
    }

    body.menu-open .ctn-site-header::after {
        position: fixed;
        z-index: 515;
        top: 0;
        right: 0;
        left: 0;
        height: 76px;
        border-bottom: 1px solid var(--border);
        background: #fff;
        content: "";
        pointer-events: none;
    }

    .ctn-nav-shell.nav-shell {
        min-height: 76px;
    }

    .ctn-header-logo.brand {
        position: relative;
        z-index: 520;
    }

    .ctn-main-nav.main-nav {
        height: 100vh;
        height: 100dvh;
        justify-content: flex-start;
        gap: 0;
        padding: calc(92px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
    }

    .ctn-main-nav.main-nav > a,
    .ctn-main-nav .ctn-mega-wrap,
    .ctn-main-nav .ctn-nav-dropdown {
        width: 100%;
    }

    .ctn-main-nav.main-nav > a,
    .ctn-main-nav .ctn-mega-wrap > a,
    .ctn-main-nav .ctn-nav-dropdown > a {
        display: flex;
        width: 100%;
        min-height: 58px;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        font-size: clamp(1.22rem, 5.4vw, 1.55rem);
        font-weight: 680;
        letter-spacing: -.035em;
        line-height: 1.15;
    }

    .ctn-main-nav.main-nav > a::after,
    .ctn-main-nav .ctn-mega-wrap > a::after,
    .ctn-main-nav .ctn-nav-dropdown > a::after {
        top: auto;
        right: auto;
        bottom: -1px;
        left: 0;
        width: 42px;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left;
    }

    .ctn-main-nav.main-nav > a.is-active::after,
    .ctn-main-nav .ctn-mega-wrap > a.is-active::after,
    .ctn-main-nav .ctn-nav-dropdown > a.is-active::after {
        transform: scaleX(1);
    }

    .ctn-main-nav .ctn-mega-wrap > a svg,
    .ctn-main-nav .ctn-nav-dropdown > a svg {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        margin-left: 16px;
        transition: transform .22s ease;
    }

    .ctn-main-nav .ctn-mega-wrap.is-mobile-open > a svg,
    .ctn-main-nav .ctn-nav-dropdown.is-mobile-open > a svg {
        transform: rotate(180deg);
    }

    .ctn-main-nav .ctn-mega-menu.mega-menu,
    .ctn-main-nav .ctn-corporate-menu.nav-dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        margin: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
    }

    .ctn-main-nav .ctn-mega-wrap.is-mobile-open > .ctn-mega-menu,
    .ctn-main-nav .ctn-nav-dropdown.is-mobile-open > .ctn-corporate-menu {
        display: block;
        animation: ctn-mobile-submenu-in .2s ease both;
    }

    .ctn-main-nav .ctn-mega-menu.mega-menu {
        padding: 0 0 18px;
        border: 0;
        border-bottom: 1px solid var(--border-strong);
        background: #fff;
    }

    .ctn-main-nav .ctn-mega-intro {
        display: block;
        min-height: 0;
        padding: 12px 0 8px;
        border: 0;
    }

    .ctn-main-nav .ctn-mega-intro > span,
    .ctn-main-nav .ctn-mega-intro > strong {
        display: none;
    }

    .ctn-main-nav .ctn-mega-intro > a {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 0 14px;
        border: 1px solid var(--primary);
        color: var(--primary);
        font-size: .78rem;
        font-weight: 780;
    }

    .ctn-main-nav .ctn-mega-columns.mega-columns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 4px 0 0;
    }

    .ctn-main-nav .ctn-mega-columns > div {
        display: grid;
        gap: 0;
        padding: 0;
        border-bottom: 1px solid var(--border);
    }

    .ctn-main-nav .ctn-mega-columns > div:last-child {
        border-bottom: 0;
    }

    .ctn-main-nav .ctn-mega-columns .mega-title {
        display: flex;
        min-height: 48px;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        margin: 0;
        padding: 0 4px;
        border: 0;
    }

    .ctn-main-nav .ctn-mega-columns .mega-title span {
        min-width: 22px;
        color: var(--accent);
        font-size: .54rem;
        letter-spacing: .12em;
    }

    .ctn-main-nav .ctn-mega-columns .mega-title strong {
        font-size: .82rem;
        font-weight: 800;
    }

    .ctn-main-nav .ctn-mega-columns > div > a:not(.mega-title) {
        display: flex;
        min-height: 42px;
        align-items: center;
        margin: 0 0 0 32px;
        padding: 0 8px 0 0;
        border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
        color: var(--text-secondary);
        font-size: .78rem;
        line-height: 1.35;
    }

    .ctn-main-nav .ctn-corporate-menu.nav-dropdown-menu {
        overflow: hidden;
        padding: 0 0 12px;
        border: 0;
        border-bottom: 1px solid var(--border-strong);
        border-radius: 0;
        background: #fff;
    }

    .ctn-main-nav .ctn-corporate-menu.nav-dropdown-menu::before {
        display: none;
    }

    .ctn-main-nav .ctn-corporate-menu-head {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        border-bottom: 1px solid var(--border);
    }

    .ctn-main-nav .ctn-corporate-menu-head span {
        font-size: .58rem;
        letter-spacing: .15em;
    }

    .ctn-main-nav .ctn-corporate-menu-head small {
        font-size: .66rem;
    }

    .ctn-main-nav .ctn-corporate-menu > a {
        display: grid;
        min-height: 64px;
        grid-template-columns: 26px minmax(0, 1fr) 18px;
        gap: 10px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .ctn-main-nav .ctn-corporate-menu > a:last-child {
        border-bottom: 0;
    }

    .ctn-main-nav .ctn-corporate-menu > a strong {
        font-size: .82rem;
    }

    .ctn-main-nav .ctn-corporate-menu > a small {
        margin-top: 3px;
        font-size: .66rem;
        line-height: 1.35;
    }

    @keyframes ctn-mobile-submenu-in {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .ctn-mobile-contact.mobile-contact {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .ctn-mobile-contact.mobile-contact a {
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border: 1px solid var(--border-strong);
        color: var(--primary);
        font-size: .76rem;
        font-weight: 750;
        text-align: center;
    }

    .ctn-mobile-contact.mobile-contact a:first-child {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff;
    }

    .ctn-search-panel.nav-search-panel,
    .ctn-site-header.is-scrolled .ctn-search-panel.nav-search-panel {
        top: 76px;
        max-height: calc(100dvh - 76px);
        padding: 20px 0 calc(88px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    .ctn-search-head {
        gap: 16px;
    }

    .ctn-search-head strong {
        font-size: clamp(1.65rem, 7vw, 2rem);
    }

    .ctn-search-field {
        min-height: 56px;
    }

    .ctn-search-field input {
        min-width: 0;
        font-size: 16px;
    }

    input[type="search"] {
        font-size: 16px !important;
    }

    .ctn-detail-phone {
        width: 100%;
        align-items: center;
        gap: 6px;
        min-height: 62px;
        justify-content: center;
        padding-block: 10px;
        text-align: center;
    }

    .ctn-detail-phone span {
        font-size: .62rem;
        letter-spacing: .14em;
    }

    .ctn-detail-phone strong {
        font-size: clamp(1.22rem, 5.4vw, 1.42rem);
        font-weight: 800;
        letter-spacing: .015em;
        line-height: 1.1;
    }

    .ctn-article-table-wrap {
        overflow: visible;
        border: 0;
    }

    .ctn-article-table-wrap table,
    .ctn-article-table-wrap tbody,
    .ctn-article-table-wrap tr,
    .ctn-article-table-wrap th,
    .ctn-article-table-wrap td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .ctn-article-table-wrap table {
        width: 100%;
        table-layout: auto;
    }

    .ctn-article-table-wrap thead {
        display: none;
    }

    .ctn-article-table-wrap tbody {
        display: grid;
        gap: 12px;
    }

    .ctn-article-table-wrap tbody tr {
        overflow: hidden;
        border: 1px solid var(--article-line);
        background: #fff;
    }

    .ctn-article-table-wrap tbody th,
    .ctn-article-table-wrap tbody td {
        display: grid;
        grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
        gap: 14px;
        padding: 13px 14px;
        border: 0;
        border-bottom: 1px solid var(--article-line);
        font-size: .75rem;
        line-height: 1.5;
    }

    .ctn-article-table-wrap tbody tr > *:last-child {
        border-bottom: 0;
    }

    .ctn-article-table-wrap tbody th::before,
    .ctn-article-table-wrap tbody td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: .56rem;
        font-weight: 800;
        letter-spacing: .1em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    form select,
    form textarea {
        font-size: 16px !important;
    }

    .ctn-search-shortcuts {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ctn-search-shortcuts::-webkit-scrollbar {
        display: none;
    }

    .ctn-search-results.nav-search-results {
        grid-template-columns: 1fr;
    }

    .mobile-sticky {
        height: calc(62px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: none;
    }

    .mobile-sticky a {
        display: flex;
        min-width: 0;
        min-height: 62px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: .76rem;
    }

    .mobile-sticky a svg {
        width: 17px;
        height: 17px;
    }

    .mobile-sticky .is-whatsapp {
        position: relative;
        border-right: 1px solid #cfe5d8;
        background: #fff;
        color: var(--primary);
        font-weight: 800;
    }

    .mobile-sticky .is-whatsapp::before {
        position: absolute;
        top: -1px;
        left: 50%;
        width: 38px;
        height: 2px;
        background: var(--accent);
        content: "";
        transform: translateX(-50%);
    }

    .mobile-sticky .is-whatsapp svg {
        width: 18px;
        height: 18px;
        color: var(--primary);
        stroke-width: 1.9;
    }

    .mobile-sticky .is-whatsapp span {
        letter-spacing: -.01em;
    }

    .mobile-sticky .is-whatsapp:active {
        background: #f1f4f2;
    }

    .cookie-banner {
        right: 12px;
        bottom: calc(74px + env(safe-area-inset-bottom));
        left: 12px;
        max-height: calc(100dvh - 110px);
        padding: 18px;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 680px) {
    :root {
        --gutter: 20px;
        --section: 3.5rem;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    .container {
        width: calc(100% - 40px);
        max-width: none;
    }

    .container-wide {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }

    main,
    main > article,
    main > section,
    .ctn-product-detail,
    .ctn-legal-page,
    .ctn-article,
    .ctn-quote-page {
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    p,
    a,
    strong,
    span {
        overflow-wrap: break-word;
    }

    [id] {
        scroll-margin-top: 88px;
    }

    .ctn-section {
        padding-block: 56px;
    }

    .ctn-section-head,
    .ctn-section-head--split {
        gap: 16px;
        margin-bottom: 32px;
    }

    .ctn-section-head h2,
    .ctn-section-head--split h2 {
        font-size: clamp(2.05rem, 10vw, 2.65rem);
        line-height: 1.02;
    }

    .ctn-section-head > p,
    .ctn-section-head--split > p {
        font-size: .92rem;
        line-height: 1.65;
    }

    .ctn-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .ctn-actions .ctn-button,
    .ctn-button--primary,
    .ctn-button--outline {
        width: 100%;
        min-height: 52px;
    }

    .ctn-button,
    .button {
        box-shadow: none !important;
        transform: none !important;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select {
        min-height: 52px;
    }

    textarea {
        min-height: 132px;
    }

    .form-grid,
    .form-grid--compact {
        grid-template-columns: 1fr;
    }

    .form-grid > *,
    .form-grid--compact > * {
        min-width: 0;
        grid-column: 1 !important;
    }

    .form-grid button[type="submit"],
    .form-grid--compact button[type="submit"] {
        width: 100%;
        min-height: 54px;
    }

    .check {
        align-items: flex-start;
    }

    .check input[type="checkbox"] {
        flex: 0 0 auto;
    }

    /* Home */
    .ctn-hero-layout {
        gap: 32px;
        padding: 46px 0 52px;
    }

    .ctn-hero-copy h1 {
        font-size: clamp(3rem, 14vw, 3.45rem);
        line-height: .95;
        letter-spacing: -.065em;
    }

    .ctn-hero-lead {
        margin-top: 24px;
        font-size: 1rem;
        line-height: 1.65;
    }

    .ctn-hero-copy .ctn-actions {
        margin-top: 28px;
    }

    .ctn-hero-promises {
        gap: 0;
        margin-top: 30px;
        border-top: 1px solid var(--border-strong);
    }

    .ctn-hero-promises li {
        min-height: 66px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .ctn-hero-promises small {
        font-size: .65rem;
    }

    .ctn-hero-visual {
        width: 100%;
        margin: 0;
    }

    .ctn-hero-visual::before {
        display: none;
    }

    .ctn-hero-visual-media {
        height: 285px;
    }

    .ctn-hero-visual-count {
        right: 12px;
        bottom: 12px;
        min-width: 118px;
        min-height: 60px;
        padding: 10px 12px;
        border-top-width: 2px;
    }

    .ctn-hero-visual-caption {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }

    .ctn-hero-visual-caption > div > strong br {
        display: none;
    }

    .ctn-branches .ctn-section-head {
        margin-bottom: 26px;
    }

    .ctn-branches .ctn-section-head h2 br {
        display: none;
    }

    .ctn-branch-selector {
        display: block;
        border: 0;
    }

    .ctn-branch-mobile-control {
        display: grid;
        gap: 9px;
        margin-bottom: 12px;
    }

    .ctn-branch-mobile-label {
        color: var(--text-secondary);
        font-size: .68rem;
        font-weight: 760;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .ctn-branch-mobile-picker {
        position: relative;
        z-index: 6;
    }

    .ctn-branch-mobile-picker summary {
        display: grid;
        min-height: 58px;
        grid-template-columns: 24px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 11px;
        padding: 0 16px;
        border: 1px solid var(--border-strong);
        background: #fff;
        color: var(--primary);
        cursor: pointer;
        list-style: none;
    }

    .ctn-branch-mobile-picker summary::-webkit-details-marker {
        display: none;
    }

    .ctn-branch-mobile-picker summary > svg {
        width: 19px;
        height: 19px;
        pointer-events: none;
    }

    .ctn-branch-mobile-picker summary strong {
        color: var(--text-primary);
        font-size: .96rem;
        font-weight: 720;
    }

    .ctn-branch-mobile-picker summary > svg:last-child {
        transition: transform .18s ease;
    }

    .ctn-branch-mobile-picker[open] summary > svg:last-child {
        transform: rotate(180deg);
    }

    .ctn-branch-mobile-picker summary:focus-visible {
        border-color: var(--primary);
        outline: 2px solid rgba(22, 58, 58, .1);
        outline-offset: 2px;
    }

    .ctn-branch-mobile-options {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: 0;
        max-height: calc(100dvh - 220px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--border-strong);
        background: #fff;
    }

    .ctn-branch-mobile-options button {
        display: grid;
        width: 100%;
        min-height: 52px;
        grid-template-columns: 22px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 11px;
        padding: 0 15px;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: #fff;
        color: var(--text-primary);
        text-align: left;
    }

    .ctn-branch-mobile-options button:last-child {
        border-bottom: 0;
    }

    .ctn-branch-mobile-options button > svg {
        width: 18px;
        height: 18px;
        color: var(--primary);
    }

    .ctn-branch-mobile-options button > svg:last-child {
        opacity: 0;
    }

    .ctn-branch-mobile-options button[aria-selected="true"] {
        background: var(--soft-surface);
        font-weight: 720;
    }

    .ctn-branch-mobile-options button[aria-selected="true"] > svg:last-child {
        opacity: 1;
    }

    .ctn-branch-tabs {
        display: none;
    }

    .ctn-branch-panel {
        display: block;
        border: 1px solid var(--border-strong);
        border-top: 3px solid var(--primary);
        background: #fff;
    }

    .ctn-branch-panel > header {
        min-height: 0;
        padding: 24px 20px 22px;
        border: 0;
        border-bottom: 1px solid var(--border);
        background: #fff;
        color: var(--text-primary);
    }

    .ctn-branch-panel > header > p {
        margin: 0 0 10px;
        color: #8b7352;
    }

    .ctn-branch-panel > header h3 {
        margin: 0 0 10px;
        color: var(--primary-dark);
        font-size: 1.85rem;
        line-height: 1;
    }

    .ctn-branch-panel > header > span {
        color: var(--text-secondary);
        font-size: .86rem;
        line-height: 1.65;
    }

    .ctn-branch-panel > header > a {
        margin-top: 18px;
        border-bottom-color: var(--primary);
        color: var(--primary);
    }

    .ctn-branch-products {
        padding: 0 20px 8px;
    }

    .ctn-branch-products > a,
    .ctn-branch-products > a:hover,
    .ctn-branch-products > a:focus-visible {
        min-height: 92px;
        gap: 12px;
        padding: 16px 0;
        background: transparent;
    }

    .ctn-branch-product-icon {
        width: 40px;
        height: 40px;
    }

    .ctn-branch-products small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Category navigation: show every destination without a hidden horizontal swipe. */
    .ctn-category-intro {
        padding: 24px 0 32px;
    }

    .ctn-category-breadcrumb {
        margin-bottom: 28px;
    }

    .ctn-category-intro-grid {
        gap: 14px;
        padding-block: 0;
    }

    .ctn-category-intro-copy {
        margin-top: 10px;
        padding-top: 18px;
    }

    .ctn-category-switcher {
        overflow: visible;
    }

    .ctn-category-switcher .container {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding-inline: 0;
    }

    .ctn-category-switcher a {
        min-width: 0;
        min-height: 54px;
        justify-content: center;
        padding: 0 5px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .ctn-category-switcher a:nth-child(even) {
        border-right: 0;
    }

    .ctn-category-switcher a:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .ctn-category-switcher a.is-active {
        background: var(--soft-surface);
        border-bottom-color: var(--primary);
    }

    .ctn-value-list article {
        min-height: 0;
        grid-template-columns: 30px 32px minmax(0, 1fr);
        gap: 10px;
        padding: 22px 0;
    }

    .ctn-value-list h3 {
        font-size: 1.2rem;
    }

    .ctn-process-line li,
    .ctn-process-line li:first-child,
    .ctn-process-line li:last-child {
        padding: 24px 0;
    }

    .ctn-process-line li > svg {
        margin: 16px 0 18px;
    }

    .ctn-assurance {
        padding-block: 58px;
    }

    .ctn-assurance-copy h2 {
        font-size: clamp(2.15rem, 10.5vw, 2.75rem);
    }

    .ctn-assurance-band {
        margin-top: 36px;
    }

    .ctn-assurance-method {
        min-height: 0;
        padding: 20px 0;
    }

    .ctn-assurance-facts div,
    .ctn-assurance-facts div:first-child {
        min-height: 0;
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 14px 0;
    }

    .ctn-assurance-facts dt {
        font-size: 2rem;
    }

    .ctn-claims-layout {
        gap: 36px;
    }

    .ctn-claims-steps li {
        min-height: 0;
        padding: 20px 0;
    }

    .ctn-claims-dossier {
        width: 100%;
        min-height: 390px;
        margin: 0;
        padding: 22px 20px;
    }

    .ctn-claims-dossier::before {
        display: none;
    }

    .ctn-claims-dossier footer {
        right: 20px;
        left: 20px;
    }

    .ctn-faq-layout {
        gap: 32px;
    }

    .ctn-faq-list button,
    .ctn-faq-accordion button,
    .ctn-claims-faq-list article > button {
        min-height: 76px;
    }

    /* Product details */
    .ctn-detail-hero {
        padding-bottom: 0;
    }

    .ctn-detail-breadcrumb {
        min-height: 0;
        margin-top: 12px;
        padding: 11px 12px;
        gap: 6px;
        overflow: hidden;
        border: 1px solid #e0e5e2;
        border-radius: 10px;
        background: #f8f9f8;
        color: #66706c;
        font-size: .66rem;
        line-height: 1.35;
        scrollbar-width: none;
    }

    .ctn-detail-breadcrumb a,
    .ctn-detail-breadcrumb > span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ctn-detail-breadcrumb span[aria-current="page"] {
        min-width: 0;
        overflow: hidden;
        flex: 1 1 auto;
        color: #23312e;
        text-overflow: ellipsis;
    }

    .ctn-detail-hero-grid {
        gap: 34px;
        padding-bottom: 48px;
    }

    .ctn-detail-hero-copy {
        min-height: 0;
        padding: 42px 0 0;
    }

    .ctn-detail-hero-copy h1 {
        font-size: clamp(2.65rem, 12vw, 3.1rem);
        line-height: .96;
    }

    .ctn-detail-lead {
        margin-top: 22px;
        font-size: .98rem;
        line-height: 1.65;
    }

    .ctn-detail-actions {
        width: 100%;
        align-items: stretch;
    }

    .ctn-detail-actions .ctn-button,
    .ctn-detail-button {
        width: 100%;
    }

    .ctn-detail-promises {
        gap: 0;
        margin-top: 22px;
        padding-top: 0;
        border-top: 1px solid #dce2df;
    }

    .ctn-detail-promises li {
        min-height: 72px;
        align-items: center;
        gap: 13px;
        padding: 12px 2px;
        border-bottom: 1px solid #e5e9e7;
    }

    .ctn-detail-promises li > svg {
        box-sizing: content-box;
        width: 18px;
        min-width: 18px;
        height: 18px;
        padding: 9px;
        border: 1px solid #d5ddda;
        border-radius: 50%;
        background: #fff;
        color: #173f3c;
    }

    .ctn-detail-promises li > span {
        gap: 4px;
    }

    .ctn-detail-promises strong {
        color: #1b2825;
        font-size: .82rem;
        line-height: 1.35;
    }

    .ctn-detail-promises small {
        color: #6b7470;
        font-size: .69rem;
        line-height: 1.45;
    }

    .ctn-detail-hero-visual::before {
        display: none;
    }

    .ctn-detail-hero-media {
        min-height: 0;
        height: 250px;
    }

    .ctn-detail-hero-caption {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }

    .ctn-detail-jump {
        position: relative;
        top: auto;
    }

    .ctn-detail-jump .container {
        display: grid;
        width: 100%;
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .ctn-detail-jump span {
        display: none;
    }

    .ctn-detail-jump a {
        display: flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        font-size: .67rem;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }

    .ctn-detail-jump a:nth-of-type(even) {
        border-right: 0;
    }

    .ctn-detail-jump a:last-child:nth-of-type(odd) {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .ctn-detail-section,
    .ctn-detail-boundaries,
    .ctn-detail-quote,
    .ctn-detail-related {
        padding-block: 50px;
    }

    .ctn-detail-editorial-grid,
    .ctn-detail-comparison-head,
    .ctn-detail-process-head,
    .ctn-detail-quote-grid,
    .ctn-detail-related > .container {
        gap: 30px;
    }

    .ctn-detail-section-heading h2,
    .ctn-detail-overview .ctn-detail-section-heading h2,
    .ctn-detail-coverage .ctn-detail-section-heading h2,
    .ctn-detail-comparison-head h2,
    .ctn-detail-process-head h2,
    .ctn-detail-quote-copy h2,
    .ctn-detail-related h2,
    .ctn-detail-boundaries-title h2 {
        font-size: clamp(2.05rem, 10vw, 2.65rem);
        line-height: 1.02;
    }

    .ctn-detail-overview-points li,
    .ctn-detail-coverage-list article {
        min-height: 0;
        padding: 20px 0;
    }

    .ctn-detail-coverage-list article {
        grid-template-columns: 26px 34px minmax(0, 1fr);
    }

    .ctn-detail-coverage-facts > div {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .ctn-detail-boundaries-title,
    .ctn-detail-boundaries-grid,
    .ctn-detail-process-list,
    .ctn-detail-dual-compare {
        grid-template-columns: 1fr;
    }

    .ctn-detail-boundaries-grid article,
    .ctn-detail-process-list li,
    .ctn-detail-boundaries-grid article:first-child,
    .ctn-detail-process-list li:first-child,
    .ctn-detail-boundaries-grid article:last-child,
    .ctn-detail-process-list li:last-child {
        min-height: 0;
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid currentColor;
    }

    .ctn-detail-compare-divider {
        min-height: 52px;
    }

    .ctn-detail-compare-product {
        padding: 24px 20px;
    }

    .ctn-detail-process-list li {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 14px;
    }

    .ctn-detail-form {
        padding: 20px;
    }

    .ctn-detail-related-links a {
        min-height: 72px;
    }

    /* Category and directory pages */
    .ctn-category-sign {
        width: 50px;
        height: 54px;
    }

    .ctn-category-intro-title h1 {
        font-size: clamp(2.55rem, 12vw, 3.2rem);
    }

    .ctn-category-intro-copy {
        padding-top: 24px;
    }

    .ctn-category-directory {
        padding-block: 50px;
    }

    .ctn-category-directory-head {
        gap: 16px;
        margin-bottom: 28px;
    }

    .ctn-category-product-list > a {
        min-height: 112px;
        grid-template-columns: 26px 40px minmax(0, 1fr);
        gap: 10px;
        padding: 18px 0;
    }

    .ctn-category-product-action {
        grid-column: 3;
        justify-self: start;
    }

    .ctn-category-help {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding-block: 28px;
    }

    .ctn-products-directory-page [class*="hero"] h1,
    .ctn-blog-hero h1,
    .ctn-faq-page-hero h1,
    .ctn-insurers-hero-copy h1,
    .ctn-about-hero-copy h1,
    .ctn-contact-hero h1,
    .ctn-claims-page h1,
    .ctn-error-page h1 {
        font-size: clamp(2.5rem, 11vw, 2.95rem);
        line-height: .96;
    }

    /* Blog article */
    .ctn-article {
        overflow-x: clip;
    }

    .ctn-article-heading {
        padding: 42px 0 48px;
    }

    .ctn-article-heading h1 {
        font-size: clamp(2.45rem, 10.8vw, 2.9rem);
        line-height: .98;
    }

    .ctn-article-intro {
        gap: 24px;
        margin-top: 28px;
    }

    .ctn-article-intro > p {
        font-size: 1.05rem;
        line-height: 1.6;
    }

    .ctn-article-byline {
        max-width: none;
    }

    .ctn-article-visual {
        height: 66vw;
        min-height: 250px;
        max-height: 340px;
        margin-top: 16px;
    }

    .ctn-article-content {
        padding: 56px 0;
    }

    .ctn-article-layout {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .ctn-article-toc,
    .ctn-article-body,
    .ctn-article-table-wrap {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ctn-article-toc ol,
    .ctn-article-body ul {
        grid-template-columns: 1fr;
    }

    .ctn-article-toc li:nth-child(odd),
    .ctn-article-toc li:nth-child(even) {
        padding-inline: 0;
        border-right: 0;
    }

    .ctn-article-lead {
        margin-bottom: 42px;
        padding-left: 14px;
        font-size: 1.12rem;
    }

    .ctn-article-body > section {
        padding: 40px 0;
    }

    .ctn-article-body h2,
    .ctn-article-body .ctn-article-sources h2 {
        font-size: clamp(1.85rem, 9vw, 2.35rem);
    }

    .ctn-article-body section > p {
        font-size: .95rem;
        line-height: 1.75;
    }

    .ctn-article-table-wrap table {
        width: 100%;
        min-width: 0;
    }

    .ctn-article-summary,
    .ctn-article-related {
        padding: 56px 0;
    }

    .ctn-article-related > .container > header {
        display: block;
        margin-bottom: 28px;
    }

    .ctn-article-related > .container > header .ctn-kicker {
        width: 100%;
        white-space: nowrap;
    }

    .ctn-article-related h2 {
        margin-top: 14px;
        font-size: clamp(2.25rem, 10.5vw, 2.75rem);
        line-height: .98;
    }

    .ctn-article-summary > .container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ctn-article-summary h2 {
        font-size: 2.6rem;
    }

    .ctn-article-summary li {
        min-height: 82px;
    }

    .ctn-article-related article {
        grid-template-columns: 118px minmax(0, 1fr);
        min-height: 168px;
    }

    .ctn-article-related-media {
        min-height: 142px;
    }

    .ctn-article-related article > div {
        min-height: 142px;
        padding: 4px 0 4px 16px;
    }

    .ctn-article-related h3 {
        margin: 12px 0;
        font-size: 1.18rem;
    }

    /* Quote and contact forms */
    .ctn-quote-hero {
        padding: 24px 0 38px;
    }

    .ctn-quote-breadcrumb {
        margin-bottom: 26px;
    }

    .ctn-quote-hero-grid {
        gap: 24px;
    }

    .ctn-quote-hero h1 {
        font-size: clamp(2.55rem, 11.5vw, 3.05rem);
        line-height: .95;
    }

    .ctn-quote-hero-copy {
        padding-top: 20px;
    }

    .ctn-quote-hero-copy > p {
        margin-bottom: 22px;
    }

    .ctn-quote-categories {
        overflow: visible;
    }

    .ctn-quote-categories .container {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 0;
    }

    .ctn-quote-categories a {
        min-width: 0;
        min-height: 58px;
        gap: 6px;
        padding-inline: 5px;
        border-bottom: 1px solid var(--border);
        font-size: .7rem;
    }

    .ctn-quote-categories a strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ctn-quote-categories a:last-child {
        grid-column: 1 / -1;
    }

    .ctn-quote-form-section,
    .ctn-quote-principles {
        padding: 56px 0;
    }

    .ctn-quote-form-layout,
    .ctn-quote-principles > .container {
        gap: 34px;
    }

    .ctn-quote-form-layout > aside h2,
    .ctn-quote-principles header h2 {
        font-size: clamp(2.15rem, 10vw, 2.65rem);
    }

    .ctn-quote-steps li {
        min-height: 82px;
    }

    .ctn-quote-form-panel > header,
    .ctn-contact-form-panel > header {
        min-height: 0;
        padding: 22px 20px;
    }

    .ctn-quote-form-panel > .form-grid,
    .ctn-contact-form.form-grid {
        padding: 20px;
    }

    .ctn-quote-form-panel > footer {
        grid-template-columns: 14px minmax(0, 1fr);
        gap: .55rem;
        padding: 18px 20px;
    }

    .ctn-quote-form-panel > footer svg {
        width: 14px;
        height: 14px;
        margin-top: .08rem;
    }

    .ctn-quote-principles li {
        min-height: 0;
        padding: 22px 0;
    }

    .ctn-contact-hero-grid {
        gap: 34px;
        padding: 42px 0 48px;
    }

    .ctn-contact-routes a,
    .ctn-contact-routes a:first-child,
    .ctn-contact-routes a:last-child {
        min-height: 92px;
    }

    .ctn-contact-form-section {
        padding: 56px 0;
    }

    .ctn-contact-form-layout {
        gap: 34px;
    }

    .ctn-contact-map iframe {
        height: 320px;
    }

    /* Corporate, insurers, FAQ and legal pages */
    .ctn-about-hero-grid,
    .ctn-corporate-page-hero-grid,
    .ctn-insurers-hero-grid,
    .ctn-faq-page-hero-grid,
    .ctn-blog-hero-grid,
    .ctn-claims-report-layout {
        gap: 32px;
        padding-block: 34px 42px;
    }

    .ctn-about-hero-media,
    .ctn-about-hero-visual,
    .ctn-insurers-index-card {
        min-height: 0;
        height: auto;
    }

    .ctn-about-hero-media {
        height: 330px;
    }

    .ctn-about-manifesto,
    .ctn-about-method,
    .ctn-about-scope,
    .ctn-about-principles {
        padding-block: 56px;
    }

    .ctn-about-manifesto h2,
    .ctn-about-method-intro h2,
    .ctn-about-principles header h2 {
        font-size: clamp(2.1rem, 10vw, 2.65rem);
    }

    .ctn-about-method-list li,
    .ctn-about-scope-list > a,
    .ctn-about-principles dl > div {
        min-height: 0;
        padding-block: 22px;
    }

    .ctn-about-contact-grid,
    .ctn-corporate-page-contact-grid,
    .ctn-insurer-contact-grid {
        min-height: 0;
        padding-block: 48px;
    }

    .ctn-insurer-contact-actions {
        width: 100%;
        align-items: stretch;
    }

    .ctn-insurer-contact-actions > a:first-child {
        width: 100%;
        min-height: 68px;
        align-content: center;
        justify-items: center;
        gap: 6px;
        padding-block: 10px;
        text-align: center;
    }

    .ctn-insurer-contact-actions > a:first-child span {
        font-size: .62rem;
        letter-spacing: .14em;
    }

    .ctn-insurer-contact-actions > a:first-child strong {
        font-size: clamp(1.22rem, 5.4vw, 1.42rem);
        font-weight: 800;
        letter-spacing: .015em;
        line-height: 1.1;
    }

    .ctn-insurers-index-card {
        min-height: 330px;
    }

    .ctn-insurer-logo-grid {
        gap: 10px;
    }

    .ctn-insurer-logo-grid > a {
        min-height: 160px;
    }

    .ctn-insurer-logo {
        min-height: 100px;
    }

    .ctn-faq-page-hero-grid {
        padding-block: 42px 48px;
    }

    .ctn-faq-directory,
    .ctn-faq-contact,
    .ctn-blog-featured,
    .ctn-blog-latest,
    .ctn-blog-guide {
        padding-block: 56px;
    }

    .ctn-blog-featured-card > div {
        padding: 24px 0;
    }

    .ctn-legal-page {
        overflow-x: clip;
    }

    .ctn-legal-hero {
        padding: 48px 0;
    }

    .ctn-legal-hero__grid {
        width: calc(100% - 40px);
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ctn-legal-hero__heading,
    .ctn-legal-hero__intro,
    .ctn-legal-meta,
    .ctn-legal-body__grid,
    .ctn-legal-document {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ctn-legal-hero h1 {
        font-size: clamp(2.6rem, 12vw, 3.25rem);
        line-height: .96;
    }

    .ctn-legal-hero__intro > p {
        margin-bottom: 24px;
        font-size: 1rem;
    }

    .ctn-legal-summary .container > div {
        padding: 18px 0;
    }

    .ctn-legal-body {
        padding: 56px 0;
    }

    .ctn-legal-body__grid {
        gap: 40px;
    }

    .ctn-legal-section {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px;
        padding: 36px 0;
    }

    .ctn-legal-section h2 {
        font-size: clamp(1.75rem, 8.5vw, 2.15rem);
    }

    .ctn-legal-contact-table > div,
    .ctn-legal-note,
    .ctn-legal-transfer-list > div,
    .ctn-legal-source-links a {
        min-width: 0;
    }

    /* Footer */
    .ctn-footer-top {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
        padding-block: 36px;
        text-align: center;
    }

    .ctn-footer-logo,
    .ctn-footer-logo img {
        width: 60px;
        height: 68px;
    }

    .ctn-footer-identity {
        min-height: 0;
        max-width: 320px;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding-left: 0;
        border-left: 0;
    }

    .ctn-footer-identity strong {
        font-size: .98rem;
        line-height: 1.35;
    }

    .ctn-footer-direct {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
        margin-top: 26px;
        padding: 24px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .ctn-footer-direct a {
        font-size: 1.35rem;
    }

    .ctn-footer-direct > span,
    .ctn-footer-direct address {
        grid-column: auto;
    }

    .ctn-footer-direct address {
        display: flex;
        width: 100%;
        max-width: 330px;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        margin-top: 4px;
        text-align: center;
        line-height: 1.55;
    }

    .ctn-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding-block: 42px;
        text-align: center;
    }

    .ctn-footer-about,
    .ctn-footer-support {
        grid-column: 1 / -1;
    }

    .ctn-footer-about {
        display: flex;
        max-width: none;
        align-items: center;
        flex-direction: column;
    }

    .ctn-footer-about p {
        max-width: 330px;
    }

    .ctn-footer-socials {
        justify-content: center;
    }

    .ctn-footer-column {
        align-items: center;
    }

    .ctn-footer-column:not(.ctn-footer-support) {
        gap: 0;
        padding: 10px 6px 0;
        border: 0;
    }

    .ctn-footer-column:not(.ctn-footer-support) h2 {
        width: 100%;
        margin-bottom: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
    }

    .ctn-footer-column:not(.ctn-footer-support) a {
        width: 100%;
        min-height: 38px;
        justify-content: space-between;
        gap: 8px;
        border-bottom: 0;
        text-align: left;
    }

    .ctn-footer-column:not(.ctn-footer-support) a:last-child {
        border-bottom: 0;
    }

    .ctn-footer-column:not(.ctn-footer-support) a::after {
        flex: 0 0 auto;
        opacity: .45;
        transform: none;
    }

    .ctn-footer-support {
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin-top: 12px;
        padding-top: 24px;
        border: 0;
        border-top: 1px solid var(--border);
    }

    .ctn-footer-support h2 {
        width: 100%;
        margin: 0;
        padding: 0 0 10px;
        border-bottom: 0;
    }

    .ctn-footer-support a {
        min-height: 34px;
        justify-content: center;
        padding: 4px 0;
        border: 0;
        font-size: .72rem;
        text-align: center;
    }

    .ctn-footer-support a:nth-of-type(odd) {
        border-right: 0;
    }

    .ctn-footer-support a:nth-last-of-type(-n + 2) {
        border-bottom: 0;
    }

    .ctn-footer-support a::after {
        display: none;
    }

    .ctn-footer-bottom,
    .ctn-footer-bottom > div {
        gap: 10px 16px;
    }

    .ctn-footer-bottom {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        padding-block: 22px 28px;
        text-align: center;
    }

    .ctn-footer-bottom > p {
        width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .ctn-footer-credit {
        width: 100%;
        justify-self: center;
        text-align: center;
    }

    .ctn-footer-bottom > div {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 18px;
        border: 0;
        text-align: center;
    }

    .ctn-footer-bottom > div a {
        display: inline-flex;
        min-height: 0;
        padding: 2px 0;
        border: 0;
        border-bottom: 1px solid transparent;
        line-height: 1.3;
    }

    .ctn-footer-bottom > div a:nth-child(odd) {
        border-right: 0;
    }

    .ctn-footer-bottom > div a:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

@media (max-width: 380px) {
    :root {
        --gutter: 16px;
    }

    .container {
        width: calc(100% - 32px);
    }

    .ctn-hero-copy h1,
    .ctn-detail-hero-copy h1,
    .ctn-quote-hero h1,
    .ctn-article-heading h1,
    .ctn-about-hero-copy h1,
    .ctn-contact-hero h1,
    .ctn-faq-page-hero h1,
    .ctn-insurers-hero-copy h1 {
        font-size: 2.72rem;
    }

    .ctn-main-nav.main-nav {
        padding-inline: 16px;
    }

    .ctn-mobile-contact.mobile-contact {
        grid-template-columns: 1fr;
    }

    .ctn-footer-main {
        grid-template-columns: 1fr;
    }

    .ctn-footer-about,
    .ctn-footer-support {
        grid-column: auto;
    }
}

/* Quote product picker — native select remains available on desktop and without JavaScript. */
.quote-insurance-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .42rem;
}

.quote-insurance-field > span {
    color: #344054;
    font-size: .73rem;
    font-weight: 700;
}

.quote-product-picker-trigger,
.quote-product-picker-backdrop,
.quote-product-picker-panel {
    display: none;
}

/* Detail-page quote forms: keep native selects as one calm, touch-friendly field.
   The global focus ring previously made the select look like two nested boxes. */
@media (max-width: 700px) {
    .ctn-detail-form .form-grid label:not(.check):not(.honeypot) {
        gap: 8px;
    }

    .ctn-detail-form .form-grid select {
        box-sizing: border-box;
        min-height: 54px;
        height: 54px;
        padding: 0 46px 0 16px;
        border: 1px solid #aebbb5;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a413f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
        box-shadow: none;
        color: #1a2523;
        font-size: 16px;
        line-height: 1;
    }

    .ctn-detail-form .form-grid select:focus,
    .ctn-detail-form .form-grid select:focus-visible {
        border-color: #1a413f;
        outline: none;
        box-shadow: none;
    }

    .quote-insurance-field {
        gap: 8px;
    }

    .quote-insurance-field > span {
        color: #5e6763;
        font-size: .68rem;
        font-weight: 750;
        letter-spacing: .01em;
    }

    .has-js .quote-insurance-field .quote-insurance-native {
        display: none;
    }

    .has-js .ctn-detail-form .form-grid .quote-product-picker-trigger,
    .has-js .ctn-contact-form.form-grid .quote-product-picker-trigger {
        display: flex;
        width: 100%;
        min-height: 54px;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 16px;
        border: 1px solid #aebbb5;
        border-radius: 4px;
        background: #fff;
        color: #1a2523;
        font: inherit;
        font-size: 16px;
        text-align: left;
    }

    .has-js .quote-product-picker-trigger > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .has-js .quote-product-picker-trigger svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: #1a413f;
    }

    .has-js .quote-insurance-field.is-open .quote-product-picker-trigger {
        border-color: #1a413f;
    }

    .has-js .ctn-detail-form .form-grid .quote-product-picker-backdrop,
    .has-js .ctn-contact-form.form-grid .quote-product-picker-backdrop {
        position: fixed;
        z-index: 1200;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
  background: rgb(17 18 18 / 30%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
    }

    .has-js .quote-product-picker-panel {
        position: fixed;
        z-index: 1201;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        max-height: min(72svh, 620px);
        overflow: hidden;
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -16px 42px rgba(14, 31, 29, .2);
    }

    .has-js .quote-product-picker-panel > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 20px 16px;
        border-bottom: 1px solid #e2e7e4;
    }

    .has-js .quote-product-picker-panel > header span,
    .has-js .quote-product-picker-list h3 {
        display: block;
        color: #68736e;
        font-size: .61rem;
        font-weight: 800;
        letter-spacing: .11em;
    }

    .has-js .quote-product-picker-panel > header strong {
        display: block;
        margin-top: 4px;
        color: #152b29;
        font-size: 1.12rem;
        letter-spacing: -.02em;
    }

    .has-js .quote-product-picker-panel > header button {
        display: grid;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        place-items: center;
        border: 1px solid #d8dfdb;
        border-radius: 50%;
        background: #fff;
        color: #1a413f;
    }

    .has-js .quote-product-picker-panel > header button svg {
        width: 18px;
        height: 18px;
    }

    .has-js .quote-product-picker-list {
        max-height: calc(min(72svh, 620px) - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10px 20px calc(88px + env(safe-area-inset-bottom));
    }

    .has-js .quote-product-picker-list section {
        padding: 15px 0 8px;
        border-bottom: 1px solid #edf0ee;
    }

    .has-js .quote-product-picker-list section:last-child {
        border-bottom: 0;
    }

    .has-js .quote-product-picker-list h3 {
        margin: 0 0 7px;
        color: #34413e;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .12em;
        line-height: 1.4;
        text-transform: uppercase;
    }

    .has-js .quote-product-picker-list section > div {
        display: grid;
        grid-template-columns: 1fr;
    }

    .has-js .quote-product-picker-list [data-quote-picker-option] {
        display: flex;
        width: 100%;
        min-height: 46px;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 4px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #273331;
        font: inherit;
        font-size: .88rem;
        font-weight: 600;
        text-align: left;
    }

    .has-js .quote-product-picker-list [data-quote-picker-option] svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: transparent;
    }

    .has-js .quote-product-picker-list [data-quote-picker-option].is-selected {
        color: #153d39;
        font-weight: 750;
    }

    .has-js .quote-product-picker-list [data-quote-picker-option].is-selected svg {
        color: #153d39;
    }

    body.has-quote-picker-open {
        overflow: hidden;
        touch-action: none;
    }

    body.has-quote-picker-open .mobile-sticky {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@media (hover: none) and (pointer: coarse) {
    a,
    button,
    [role="button"] {
        transition-property: color, background-color, border-color, opacity;
    }

    a:hover,
    button:hover,
    [role="button"]:hover {
        transform: none !important;
    }
}

/* Mobile breadcrumb standard — every inner page uses the same calm header path. */
@media (max-width: 700px) {
    :is(
        .ctn-article-breadcrumb,
        .ctn-category-breadcrumb,
        .ctn-detail-breadcrumb,
        .ctn-products-directory-breadcrumb,
        .ctn-about-breadcrumb,
        .ctn-insurers-breadcrumb,
        .ctn-claims-breadcrumb,
        .ctn-contact-breadcrumb,
        .ctn-faq-page-breadcrumb,
        .ctn-blog-breadcrumb,
        .ctn-corporate-page-breadcrumb,
        .ctn-quote-breadcrumb,
        .product-hero .breadcrumb,
        .ctn-legal-breadcrumb .container
    ) {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        min-height: 0;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        margin-bottom: 28px;
        padding: 11px 12px;
        overflow: hidden;
        border: 1px solid #e0e5e2;
        border-radius: 10px;
        background: #f8f9f8;
        color: #66706c;
        font-size: .66rem;
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;
        scrollbar-width: none;
    }

    :is(
        .ctn-article-breadcrumb,
        .ctn-category-breadcrumb,
        .ctn-detail-breadcrumb,
        .ctn-products-directory-breadcrumb,
        .ctn-about-breadcrumb,
        .ctn-insurers-breadcrumb,
        .ctn-claims-breadcrumb,
        .ctn-contact-breadcrumb,
        .ctn-faq-page-breadcrumb,
        .ctn-blog-breadcrumb,
        .ctn-corporate-page-breadcrumb,
        .ctn-quote-breadcrumb,
        .product-hero .breadcrumb,
        .ctn-legal-breadcrumb .container
    ) > a {
        min-width: 0;
        max-width: 36%;
        overflow: hidden;
        flex: 0 1 auto;
        color: #59635f;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :is(
        .ctn-article-breadcrumb,
        .ctn-category-breadcrumb,
        .ctn-detail-breadcrumb,
        .ctn-products-directory-breadcrumb,
        .ctn-about-breadcrumb,
        .ctn-insurers-breadcrumb,
        .ctn-claims-breadcrumb,
        .ctn-contact-breadcrumb,
        .ctn-faq-page-breadcrumb,
        .ctn-blog-breadcrumb,
        .ctn-corporate-page-breadcrumb,
        .ctn-quote-breadcrumb,
        .product-hero .breadcrumb,
        .ctn-legal-breadcrumb .container
    ) > :is(svg, i, span:not([aria-current="page"])) {
        width: 11px;
        min-width: 11px;
        height: 11px;
        flex: 0 0 11px;
        color: #98a19d;
    }

    :is(
        .ctn-article-breadcrumb,
        .ctn-category-breadcrumb,
        .ctn-detail-breadcrumb,
        .ctn-products-directory-breadcrumb,
        .ctn-about-breadcrumb,
        .ctn-insurers-breadcrumb,
        .ctn-claims-breadcrumb,
        .ctn-contact-breadcrumb,
        .ctn-faq-page-breadcrumb,
        .ctn-blog-breadcrumb,
        .ctn-corporate-page-breadcrumb,
        .ctn-quote-breadcrumb,
        .product-hero .breadcrumb,
        .ctn-legal-breadcrumb .container
    ) > :is([aria-current="page"], :last-child:not(svg):not(i)) {
        min-width: 0;
        max-width: none;
        overflow: hidden;
        flex: 1 1 auto;
        color: #23312e;
        font-weight: 750;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ctn-legal-breadcrumb .container {
        width: calc(100% - (2 * var(--gutter)));
        margin-top: 10px;
        margin-bottom: 10px;
    }
}