/* AI Product Development Main - styles copied from website/ai-development/index.html */
/* assets/shared-styles/c39cbed56fd7d2c2.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Serif+Display&display=swap');

:root {
    --ink: #0b2430;
    --deep: #0d2934;
    --teal: #216755;
    --mint: #b5e6c4;
    --paper: #f5f7f3;
    --line: #c8d9ce;
    --serif: 'DM Serif Display', Georgia, serif;
    --sans: 'DM Sans', Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 16px/1.62 var(--sans);
    font-family: var(--sans);
    overflow-x: hidden;
}

/* Default font-family isolation for all content inside main#main and template sections */
main#main,
main#main :is(p, span, a, li, ul, ol, dl, dt, dd, button, input, textarea, select, label, strong, b, em, i, small, mark, article, aside, details, summary, figcaption, figure, table, th, td, div, form, nav, section, time, blockquote) {
    font-family: var(--sans);
}

main#main :is(h1, h2, h3),
.hero h1,
.block h2,
.close h2,
.idea-card h3,
.case-panel h3,
.ai-evidence article h3 {
    font-family: var(--serif);
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.wrap {
    width: min(100% - 44px, 1160px);
    margin: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
}

.skip {
    position: absolute;
    left: -9999px
}

.skip:focus {
    left: 15px;
    top: 10px;
    background: white;
    padding: 10px;
    z-index: 100
}

.top {
    background: #0d2934;
    color: #fff;
    border-bottom: 1px solid #43786e
}

.top .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px
}

.brand {
    text-decoration: none;
    font-weight: 850;
    letter-spacing: .07em
}

.brand small {
    display: block;
    font-size: 10px;
    letter-spacing: .17em;
    color: #b5e6c4
}

.top nav {
    display: flex;
    gap: 24px;
    align-items: center;
    font-size: 14px;
    font-weight: 700
}

.top nav a {
    text-decoration: none
}

.top nav a:hover {
    text-decoration: underline !important;
}

a:hover {
    color: #206b4d !important;
}

.top nav .talk {
    background: var(--mint);
    color: #0b2922;
    padding: 10px 14px
}

.hero {
    color: #fff;
    background: radial-gradient(circle at 85% 5%, #28695d, #0d2934 58%);
    padding: 74px 0 77px
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(275px, .65fr);
    gap: clamp(34px, 5vw, 78px);
    align-items: center
}

.eyebrow,
.kicker {
    display: block;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b6e6c7;
    margin-bottom: 15px
}

#ai-ownership {
    background: #f5f7f3;
}

#ai-calculation {
    background: #f5f7f3;
}

.hero h1 {
    font: 400 clamp(2.9rem, 5.3vw, 5.4rem)/1.02 'DM Serif Display', Georgia, serif;
    letter-spacing: -.035em;
    margin: 0 0 24px;
    max-width: 840px;
    color: #fff;
}

.hero p {
    font-size: 18px;
    max-width: 730px;
    color: #d7ebe1;
    margin: 0 0 19px
}

.hero p.identity {
    font-size: 19px;
    font-weight: 750;
    color: #fff
}

.buttons {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin: 26px 0 15px
}

.ai-btn,
.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 17px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border: 1px solid var(--mint) !important;
    background: var(--mint) !important;
    color: #15372b !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--sans) !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ai-btn.ai-btn-ghost,
.ai-btn-ghost,
.button.ghost {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid var(--mint) !important;
}

.ai-btn:hover,
.button:hover {
    background: #e7f8e9 !important;
    color: #17372c !important;
    border-color: #b5e6c4 !important;
}

.ai-btn.ai-btn-ghost:hover,
.ai-btn-ghost:hover,
.button.ghost:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.hero .sub {
    font-size: 14px;
    color: #c8dccf
}

.hero aside {
    padding: 26px;
    background: #e3f2e8;
    color: #173b33;
    border: 1px solid #9ac9a9;
    box-shadow: 10px 10px 0 #071a22
}

.hero aside strong {
    font: 400 27px/1.13 Georgia, serif !important;
}

.hero aside p {
    font-size: 15px;
    color: #315344;
    margin: 12px 0
}

.hero aside ul {
    padding-left: 20px;
    margin: 12px 0;
    font-size: 15px
}

.hero aside li {
    margin: 9px 0
}

main section.block {
    padding: clamp(56px, 6vw, 85px) 0
}

.block h2 {
    font: 400 clamp(2.2rem, 4vw, 3.8rem)/1.09 'DM Serif Display', Georgia, serif;
    letter-spacing: -.03em;
    max-width: 850px;
    margin: 0 0 18px;
    color: #0b2430 !important;
}

.ai-p {
    color: #0b2430 !important;
}

.block p {
    max-width: 790px;
    margin: 0 0 20px
}

.note {
    color: #436357;
    font-size: 14px
}

.split {
    display: grid;
    grid-template-columns: .76fr 1.24fr;
    gap: clamp(30px, 6vw, 95px)
}

.dark {
    background: #122f39;
    color: #f3f8f2
}

.dark .note {
    color: #b9d4c2
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.card {
    border: 1px solid #cedbd1;
    background: white;
    padding: 23px
}

.card strong {
    display: block;
    font-size: 19px;
    line-height: 1.25;
    color: #0b2430;
}

.card p {
    font-size: 15px;
    color: #344e42;
    line-height: 1.6;
    margin: 10px 0
}

.card a {
    font-weight: 800;
    color: #196950
}

.case-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 24px 0 16px
}

.case-buttons button {
    font: 750 15px 'DM Sans', Arial, sans-serif;
    padding: 12px 16px;
    background: #fff;
    color: var(--ink);
    border: 1px solid #a9c4b0;
    cursor: pointer;
    text-align: left
}

.case-buttons button[aria-pressed=true],
.case-buttons button:hover {
    background: #b6e6c7;
    border-color: #367457
}

.case-buttons button:focus-visible,
.ai-btn:focus-visible,
.button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid #fdaf68;
    outline-offset: 3px
}

.case-panel {
    background: #fff;
    border: 1px solid var(--line);
    padding: 27px;
    min-height: 225px
}

.case-panel h3 {
    font: 400 29px/1.14 Georgia, serif;
    margin: 0 0 13px
}

.case-panel p {
    max-width: 850px
}

.case-panel .label {
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #276b55;
    margin-bottom: 8px
}

.ai-ready .case-panel:not(.chosen) {
    display: none
}

.path-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 25px
}

.path-steps div {
    border-top: 2px solid var(--mint);
    padding-top: 16px
}

.path-steps b {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
    color: #0b2430;
}

.dropdown {
    color: #0b2430;
}

.para {
    color: #0b2430;
}

.path-steps p {
    font-size: 15px;
    color: #0b2430;
}

.proof {
    background: #e5f2e8;
    padding: 33px;
    border-left: 4px solid #34865b;
    color: #0b2430;
}

.proof strong {
    color: #0b2430;
}

.proof p:last-child {
    margin-bottom: 0
}

.directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 25px
}

.directory a {
    background: white;
    border: 1px solid var(--line);
    padding: 13px 15px;
    text-decoration: none;
    font-weight: 750;
    font-size: 14px
}

.directory a:hover {
    border-color: #268052;
    background: #e4f3e9
}

#faq {
    background: #f5f7f3;
}

.ai-faq details,
.faq details {
    border-top: 1px solid #b8cebc !important;
    padding: 15px 0 !important;
}

.ai-faq summary,
.faq summary {
    font-size: 17px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    color: inherit !important;
    list-style: none !important;
}

.ai-faq details p,
.faq details p {
    color: #3b5849 !important;
    margin: 9px 0 !important;
}

.close {
    background: #c9ebcb;
    padding: 70px 0
}

.close h2 {
    max-width: 790px
}

.close p {
    font-size: 17px
}

.float-wa {
    position: fixed;
    z-index: 20;
    right: 15px;
    bottom: 16px;
    border-radius: 45px;
    background: #b9e9c4;
    color: #0e3423;
    text-decoration: none;
    padding: 11px 17px;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 3px 18px #0005
}

@media(max-width:850px) {

    .hero-grid,
    .split {
        grid-template-columns: 1fr
    }

    .cards,
    .directory {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .hero aside {
        box-shadow: none
    }

    .path-steps {
        grid-template-columns: 1fr
    }
}

@media(max-width:620px) {
    .wrap {
        width: min(100% - 34px, 1160px)
    }

    .top nav a:not(.talk) {
        display: none
    }

    .hero {
        padding: 50px 0
    }

    .hero h1 {
        font-size: clamp(2.5rem, 10vw, 4rem)
    }

    .hero p {
        font-size: 16px
    }

    .cards,
    .directory {
        grid-template-columns: 1fr
    }

    .buttons .ai-btn,
    .buttons .button {
        width: 100% !important;
    }

    .case-buttons {
        display: grid
    }

    .case-panel {
        padding: 19px
    }

    .block h2 {
        font-size: 2.45rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
}

.ai-products {
    background: #eef3ef
}

.ai-section-heading {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 45px;
    align-items: end;
    margin-bottom: 22px
}

.ai-section-heading p {
    font-size: 17px;
    color: #31574b
}

.idea-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.idea-card {
    background: #fff;
    border: 1px solid #b7d1c2;
    padding: 27px;
    display: flex;
    flex-direction: column
}

.idea-count {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #27745a
}

.idea-card h3 {
    font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.12 Georgia, serif;
    margin: 15px 0;
    color: #0b2430;
}

.idea-card p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 13px;
    color: #29433b
}

.idea-card p b {
    display: block;
    color: #0b352b
}

.idea-card .idea-signal {
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #d6e2db;
    font-weight: 700;
    color: #1f5946
}

section#work {
    background: #f5f7f3;
}

#sx-section-2 {
    color: #fff !important;
}

.idea-card a {
    font-size: 15px;
    font-weight: 800;
    text-underline-offset: 3px;
    color: #0b2430;
}

.ai-fine {
    font-size: 13px !important;
    color: #507061 !important;
    margin: 17px 0 0 !important
}

.ai-flow {
    background: #102b36;
    color: #fff
}

.flow-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(24px, 5vw, 74px);
    align-items: center
}

.flow-layout>div>p {
    color: #d5e9db;
    font-size: 17px
}

.flow-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 25px 0
}

.flow-controls button {
    border: 1px solid #8cbb9f;
    background: transparent;
    color: #ecf8ef;
    font: 700 14px/1.25 'DM Sans', Arial, sans-serif;
    padding: 12px 15px;
    cursor: pointer
}

.flow-controls button[aria-pressed=true],
.flow-controls button:hover {
    background: #b6e6c7;
    color: #12362a
}

.flow-controls button:focus-visible {
    outline: 3px solid #ffa757;
    outline-offset: 2px
}

.flow-screen {
    background: #e5f2e8;
    color: #14382f;
    min-height: 250px;
    padding: clamp(24px, 4vw, 38px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 11px 11px 0 #071923
}

.flow-stage small {
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 800;
    color: #2a7359
}

.flow-stage p {
    font: 400 clamp(1.35rem, 2.5vw, 2.05rem)/1.35 Georgia, serif !important;
    margin: 24px 0
}

.flow-progress {
    display: flex;
    gap: 6px
}

.flow-progress i {
    height: 5px;
    flex: 1;
    background: #b7d4c2
}

.flow-progress i.active {
    background: #237f5d
}

.ai-real {
    background: #e2eee5
}

.real-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    color: #0b2430;
}

#dark-heading {
    color: #fff !important;
}

.real-grid article {
    border-top: 2px solid #2c7558;
    padding: 16px 10px 10px 0
}

.real-grid p {
    font-size: 15px
}

.real-grid a {
    font-weight: 800;
    color: #14573f
}

.calc-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(24px, 6vw, 80px);
    align-items: center
}

.calc-panel {
    background: white;
    border: 1px solid #adc6b6;
    padding: clamp(21px, 4vw, 32px)
}

.calc-panel label,
.brief-fields label {
    display: block;
    font-size: 15px;
    font-weight: 750;
    margin-bottom: 16px;
    color: #0b2430;
}

.calc-panel input:not([type=range]),
.brief-fields input,
.brief-fields textarea,
.brief-fields select {
    display: block;
    width: 100%;
    font: inherit;
    padding: 12px;
    border: 1px solid #8da99a;
    background: #fff;
    color: #102b36;
    margin-top: 6px;
    border-radius: 0
}

.calc-panel input[type=range] {
    width: calc(100% - 65px);
    vertical-align: middle;
    accent-color: #217350
}

.calc-panel output {
    display: inline-block;
    width: 50px;
    text-align: right
}

.calc-result {
    border-top: 1px solid #c7d8cc;
    padding-top: 20px;
    display: flex;
    align-items: baseline;
    gap: 13px;
    flex-wrap: wrap
}

.calc-result strong {
    font: 400 clamp(2rem, 3vw, 3rem)/1 Georgia, serif;
    color: #185a41
}

.calc-result span {
    font-size: 15px;
    color: #0b2430;
}

.calc-panel>p {
    font-size: 14px;
    margin: 17px 0 0;
    color: #0b2430;
}

.brief-builder {
    background: #fff;
    border: 1px solid #78ae87;
    padding: clamp(22px, 5vw, 38px);
    margin-top: 24px;
    max-width: 860px
}

.brief-heading strong {
    display: block;
    font: 400 clamp(1.5rem, 2.8vw, 2.2rem)/1.2 Georgia, serif;
    color: #0b2430 !important;
}

.brief-heading span {
    display: block;
    color: #3a5547;
    font-size: 15px;
    margin: 8px 0 22px
}

.brief-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px
}

.brief-wide {
    grid-column: 1/-1
}

.brief-fields textarea {
    resize: vertical;
    min-height: 96px
}

.brief-actions {
    display: flex;
    align-items: center;
    gap: 19px;
    flex-wrap: wrap
}

.brief-mail {
    font-weight: 800;
    color: #165b42
}

.brief-fields input:focus-visible,
.brief-fields select:focus-visible,
.brief-fields textarea:focus-visible,
.calc-panel input:focus-visible {
    outline: 3px solid #ffa757;
    outline-offset: 2px
}

.ai-stack {
    background: #f5f7f3
}

.ai-stack>div>p {
    font-size: 17px
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 27px;
    color: #0b2430;
}

.stack-grid article {
    border-top: 2px solid #287556;
    padding: 15px 12px 0 0
}

.stack-grid b {
    font-size: 15px
}

.stack-grid p {
    font-size: 15px;
    line-height: 1.55;
    margin-top: 9px
}

@media(max-width:850px) {

    .ai-section-heading,
    .flow-layout,
    .calc-layout {
        grid-template-columns: 1fr
    }

    .real-grid,
    .stack-grid {
        grid-template-columns: 1fr 1fr
    }

    .flow-screen {
        box-shadow: none
    }
}

@media(max-width:620px) {

    .idea-grid,
    .real-grid,
    .brief-fields,
    .stack-grid {
        grid-template-columns: 1fr
    }

    .brief-wide {
        grid-column: 1
    }

    .brief-actions .ai-btn,
    .brief-actions .button {
        width: 100% !important;
    }
}

.close {
    background: #e6f1e8
}

.close .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 6vw, 80px);
    align-items: start
}

.close .contact-copy {
    padding: 22px 0
}

.close .contact-copy .kicker {
    color: #216a50
}

.close .contact-copy h2 {
    font: 400 clamp(2.3rem, 4vw, 3.8rem)/1.08 'DM Serif Display', Georgia, serif;
    letter-spacing: -.03em;
    margin: 0 0 20px;
    color: #0b2430 !important;
}

.close .contact-copy p {
    font-size: 17px;
    color: #315344;
    line-height: 1.6
}

.close .contact-copy ul {
    margin: 20px 0;
    padding-left: 19px;
    color: #24533d;
    font-size: 15px
}

.close .contact-copy li {
    padding: 3px 0
}

.close .brief-builder {
    margin: 0;
    max-width: none;
    box-shadow: 10px 10px 0 #b7d7bf;
    background: #fff;
    padding: clamp(22px, 4vw, 35px)
}

.close .brief-fields label {
    font-size: 14px;
    margin-bottom: 10px
}

.close .brief-fields .optional {
    color: #60766b;
    font-size: 13px;
    font-weight: 500
}

.close .brief-fields input,
.close .brief-fields textarea,
.close .brief-fields select {
    margin-top: 7px;
    border: 1px solid #91ad9a;
    border-radius: 2px;
    min-height: 45px;
    padding: 10px 12px
}

.close .brief-heading span {
    margin: 5px 0 19px
}

.close .brief-actions button.ai-btn,
.close .brief-actions button.button {
    font-family: inherit !important;
    cursor: pointer !important;
}

.close .brief-mail {
    padding: 12px 0;
    text-underline-offset: 3px;
    text-decoration: underline !important;
}

.close .ai-fine {
    font-size: 13px !important;
    line-height: 1.5
}

@media(max-width:850px) {
    .close .contact-grid {
        grid-template-columns: 1fr;
        gap: 17px
    }

    .close .contact-copy {
        padding: 0
    }

    .close .brief-builder {
        box-shadow: none
    }
}

.dark .case-panel {
    background: #eef6ef;
    color: #123a30;
    border: 1px solid #8cb9a1;
    min-height: 0;
    padding: clamp(22px, 3vw, 34px)
}

.dark .case-panel h3 {
    color: #113b2e;
    max-width: none;
    margin: 8px 0 24px;
    font-size: clamp(1.5rem, 2.4vw, 2.3rem)
}

.case-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(15px, 3vw, 30px)
}

.case-details>div {
    border-top: 2px solid #7aaf8b;
    padding-top: 14px
}

.case-details strong {
    color: #16553e;
    display: block;
    font-size: 15px
}

.dark .case-panel .case-details p {
    color: #234537;
    font-size: 15px;
    line-height: 1.55;
    margin: 7px 0 0
}

.ai-evidence {
    background: #edf5ef
}

.ai-evidence .evidence-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.ai-evidence article {
    background: #fff;
    border: 1px solid #bfd6c7;
    padding: 26px
}

.ai-evidence article h3 {
    font: 400 27px/1.15 Georgia, serif;
    margin: 0 0 12px;
    color: #0b2430;
}

.ai-evidence article p {
    font-size: 15px;
    color: #31564a
}

.ai-evidence article a {
    color: #165b40;
    font-weight: 800;
    text-underline-offset: 3px
}

@media(max-width:750px) {

    .case-details,
    .ai-evidence .evidence-cards {
        grid-template-columns: 1fr;
        gap: 19px
    }
}

#explore {
    background: #f5f7f3;
}

/* cluster-footer-start */
.site-explore,
.cluster-footer {
    box-sizing: border-box;
    font: 16px/1.55 'DM Sans', Arial, sans-serif
}

.site-explore *,
.cluster-footer * {
    box-sizing: border-box
}

.site-explore {
    position: relative;
    isolation: isolate;
    background: radial-gradient(circle at 8% 5%, #25534a, #153b3a 48%, #102d33);
    color: #edf6ee;
    border-top: 4px solid #aee2b4;
    padding: clamp(43px, 5vw, 72px) 0 28px
}

.site-explore a,
.cluster-footer a {
    color: inherit
}

.site-explore .shelf-inner,
.cluster-footer .shelf-inner {
    width: min(100% - 44px, 1140px);
    margin: auto
}

.site-explore .shelf-top {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
    gap: clamp(30px, 6vw, 94px);
    align-items: end
}

.site-explore .shelf-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #b0dfb5;
    margin: 0 0 11px
}

.site-explore h2 {
    font: 400 clamp(2.3rem, 4vw, 4.2rem)/1.04 'DM Serif Display', Georgia, serif;
    letter-spacing: -.035em;
    max-width: 590px;
    margin: 0 0 18px;
    color: #fff
}

.site-explore .shelf-lead {
    font-size: 16px;
    line-height: 1.68;
    color: #d5e8d8;
    max-width: 600px;
    margin: 0
}

.site-explore .shelf-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 3px
}

.site-explore .shelf-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    text-decoration: none;
    padding: 11px 17px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid #9dcfb0
}

.site-explore .shelf-actions .shelf-primary {
    background: #b6e8bd;
    color: #163727;
    border-color: #b6e8bd
}

.site-explore .shelf-actions .shelf-primary:hover {
    background: #d7f4d8
}

.site-explore .shelf-actions .shelf-secondary:hover {
    background: #ffffff1a
}

.site-explore .directory-intro {
    border-top: 1px solid #5b8475;
    margin: 42px 0 14px;
    padding-top: 22px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px
}

.site-explore .directory-intro h3 {
    font-size: 17px;
    line-height: 1.25;
    color: #fff;
    margin: 0
}

.site-explore .directory-intro p {
    font-size: 13px;
    color: #c6dec9;
    margin: 0
}

.site-explore .market-nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px
}

.site-explore .market-trigger {
    width: 100%;
    min-height: 73px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 17px 20px;
    color: #f7fcf4;
    background: #ffffff0b;
    border: 1px solid #74a18d;
    font: 700 18px/1.2 'DM Sans', Arial, sans-serif;
    cursor: pointer
}

.site-explore .market-trigger:after {
    content: '↗';
    font-size: 22px;
    font-weight: 400;
    color: #a8dfb4
}

.site-explore .market-trigger:hover,
.site-explore .market-trigger[aria-expanded=true] {
    background: #bce9c2;
    color: #143629;
    border-color: #bce9c2
}

.site-explore .market-trigger:hover:after,
.site-explore .market-trigger[aria-expanded=true]:after {
    color: #143629
}

.site-explore .market-panel {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    background: #f6f8f2;
    color: #203d36;
    border: 1px solid #b7d7bc;
    box-shadow: 0 -17px 45px #051e1d66;
    padding: 25px 29px 28px
}

.site-explore [hidden] {
    display: none !important
}

.site-explore .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #ccddcf;
    padding-bottom: 17px;
    margin-bottom: 18px
}

.site-explore .panel-header strong {
    font: 400 25px/1.15 'DM Serif Display', Georgia, serif;
    color: #173a33
}

.site-explore .panel-header p {
    font-size: 13px;
    color: #5e7166;
    margin: 4px 0 0
}

.site-explore .panel-close {
    background: transparent;
    border: 1px solid #bbd0bf;
    color: #21473c;
    width: 34px;
    height: 34px;
    font-size: 21px;
    line-height: 1;
    cursor: pointer
}

.site-explore .panel-close:hover {
    background: #e4efe4
}

.site-explore .panel-body {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    gap: 28px
}

.site-explore .service-list {
    max-height: min(490px, 65vh);
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 4px;
    border-right: 1px solid #d4e3d6;
    padding-right: 14px
}

.site-explore .service-choice {
    width: 100%;
    border: 0;
    background: transparent;
    color: #39534a;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    font: 700 14px/1.25 'DM Sans', Arial, sans-serif
}

.site-explore .service-choice:hover,
.site-explore .service-choice[aria-expanded=true] {
    background: #dfeee0;
    color: #153d32
}

.site-explore .service-choice[aria-expanded=true]:after {
    content: '→';
    float: right
}

.site-explore .destination-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 15px
}

.site-explore .destination-top h4 {
    font: 400 23px/1.15 'DM Serif Display', Georgia, serif;
    color: #173a33;
    margin: 0
}

.site-explore .destination-top a {
    font-size: 13px;
    font-weight: 800;
    color: #205747;
    text-underline-offset: 3px;
    white-space: nowrap
}

.site-explore .destination-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 17px;
    max-height: min(360px, 52vh);
    overflow: auto;
    align-content: start
}

.site-explore .destination-links a {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    color: #334e43;
    padding: 6px 0;
    border-bottom: 1px solid #dbe7da
}

.site-explore .destination-links a:hover {
    color: #0e704d;
    text-decoration: underline;
    text-underline-offset: 3px
}

.site-explore .destination-links a[aria-current=page] {
    font-weight: 800;
    color: #0a5d44
}

.site-explore .shelf-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-top: 18px;
    font-size: 12px;
    color: #c5ddc8
}

.site-explore .shelf-bottom a {
    font-weight: 800;
    text-underline-offset: 3px
}

.cluster-footer {
    background: #102d33;
    color: #d6e7dc;
    border-top: 1px solid #3f7067;
    padding: 19px 0 24px
}

.cluster-footer .shelf-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap
}

.cluster-footer .shelf-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .035em;
    line-height: 1.05;
    color: #fff
}

.cluster-footer .shelf-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: #b6e8bd;
    color: #153c2c;
    font: 400 24px/1 Georgia, serif
}

.cluster-footer .shelf-brand small {
    display: block;
    color: #b7d3bd;
    font-size: 9px;
    letter-spacing: .17em
}

.cluster-footer nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.cluster-footer nav a {
    font-size: 12px;
    text-decoration: none;
    color: #d0e1d4
}

.cluster-footer a:hover {
    color: #bde8c4;
    text-decoration: underline;
    text-underline-offset: 4px
}

.site-explore a:focus-visible,
.site-explore button:focus-visible,
.cluster-footer a:focus-visible {
    outline: 3px solid #ffc887;
    outline-offset: 2px
}

@media(max-width:900px) {
    .site-explore .shelf-top {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .site-explore h2 {
        max-width: 600px
    }

    .site-explore .directory-intro {
        margin-top: 35px
    }

    .site-explore .market-nav {
        grid-template-columns: 1fr;
        gap: 6px
    }

    .site-explore .market-trigger {
        min-height: 57px
    }

    .site-explore .market-panel {
        position: relative;
        grid-column: 1;
        bottom: auto;
        left: auto;
        right: auto;
        box-shadow: none;
        padding: 18px 14px 20px;
        margin-top: -6px
    }

    .site-explore .panel-header {
        padding-bottom: 12px;
        margin-bottom: 10px
    }

    .site-explore .panel-header strong {
        font-size: 22px
    }

    .site-explore .panel-body {
        grid-template-columns: 1fr;
        gap: 15px;
        min-height: 0
    }

    .site-explore .service-list {
        border-right: 0;
        border-bottom: 1px solid #d4e3d6;
        padding: 0 0 10px;
        display: flex;
        overflow-x: auto;
        gap: 4px
    }

    .site-explore .service-choice {
        width: auto;
        min-width: max-content;
        padding: 9px 11px
    }

    .site-explore .service-choice[aria-expanded=true]:after {
        display: none
    }

    .site-explore .destination-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 310px
    }

    .site-explore .directory-intro {
        display: block
    }

    .site-explore .directory-intro p {
        margin-top: 5px
    }

    .site-explore .shelf-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }

    .cluster-footer .shelf-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px
    }
}

@media(max-width:410px) {

    .site-explore .shelf-inner,
    .cluster-footer .shelf-inner {
        width: min(100% - 32px, 1140px)
    }

    .site-explore .destination-links {
        gap: 4px 10px
    }

    .site-explore .destination-links a {
        font-size: 12px
    }

    .site-explore .destination-top {
        display: block
    }

    .site-explore .destination-top a {
        display: inline-block;
        margin-top: 6px
    }
}

.site-explore .sf-country-label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #39534a;
    margin: 0 0 14px
}

.site-explore .sf-country-label select {
    display: block;
    width: 100%;
    max-width: 360px;
    min-height: 44px;
    margin-top: 6px;
    padding: 9px 12px;
    border: 1px solid #a7c5b1;
    background: #fff;
    color: #203d36;
    font: inherit;
    font-size: 14px
}

.site-explore .sf-country-overview {
    display: block;
    padding: 12px 14px;
    margin: 0 0 14px;
    background: #e5efe4;
    border: 1px solid #c7dcc8;
    color: #205747;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800
}

.site-explore .sf-city-heading {
    font-size: 14px;
    font-weight: 800;
    margin: 12px 0 9px;
    color: #39534a
}

.site-explore .sf-category-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    border-bottom: 1px solid #ccddcf;
    padding-bottom: 12px
}

.site-explore .sf-category-tabs button {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #b4cebb;
    background: #fff;
    color: #39534a;
    font: 700 14px/1.25 'DM Sans', Arial, sans-serif;
    cursor: pointer
}

.site-explore .sf-category-tabs button[aria-pressed=true] {
    background: #dfeee0;
    color: #153d32;
    border-color: #74a18d
}

.site-explore .sf-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap
}

.site-explore .sf-filter-row label {
    font-size: 12px;
    font-weight: 800;
    color: #39534a
}

.site-explore .sf-filter-row input {
    display: block;
    margin-top: 5px;
    min-height: 40px;
    width: 230px;
    max-width: 100%;
    padding: 8px 11px;
    background: #fff;
    border: 1px solid #b4cebb;
    color: #203d36;
    font: 400 14px/1.3 'DM Sans', Arial, sans-serif
}

.site-explore .sf-filter-count,
.site-explore .sf-empty {
    font-size: 12px;
    color: #5e7166;
    margin: 0
}

.site-explore .sf-empty {
    padding: 14px 0
}

.site-explore .sf-country-index {
    max-height: 260px
}

.site-explore .sf-filter-row input:focus-visible,
.site-explore .sf-country-label select:focus-visible {
    outline: 3px solid #ffc887;
    outline-offset: 2px
}

@media(max-width:900px) {
    .site-explore .sf-country-label select {
        max-width: none
    }

    .site-explore .sf-filter-row input {
        width: 100%
    }

    .site-explore .sf-filter-row label {
        flex: 1;
        min-width: 180px
    }
}

/* cluster-footer-end */
/* search-breadcrumb-css-start */
.seo-breadcrumb {
    background: #f1f5f0;
    color: #29473b;
    border-bottom: 1px solid #d5e0d6;
    font: 500 13px/1.5 "DM Sans", Arial, sans-serif;
    padding: 10px 0
}

.seo-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    width: min(100% - 44px, 1140px);
    margin: 0 auto;
    padding: 0
}

.seo-breadcrumb li:not(:last-child):after {
    content: "/";
    margin-left: 8px;
    color: #839b89
}

.seo-breadcrumb a {
    color: #27604b;
    text-decoration: underline;
    text-underline-offset: 3px
}

.seo-breadcrumb [aria-current=page] {
    font-weight: 700;
    color: #183c31
}

.seo-breadcrumb a:focus-visible {
    outline: 3px solid #f7ae82;
    outline-offset: 3px
}

/* search-breadcrumb-css-end */

/* assets/buyer-experience.css */
/* Shared buyer guidance: reading, deciding and preparing an enquiry. */
:root {
    --sx-ink: #16363b;
    --sx-muted: #435e63;
    --sx-green: #206b4d;
    --sx-mint: #d9eee3;
    --sx-line: #bad0c5
}

.sx-wrap {
    width: min(100% - 44px, 1160px);
    margin-inline: auto
}

.sx-answer,
.sx-planner,
.sx-jump {
    font-family: 'DM Sans', Arial, sans-serif;
    color: var(--sx-ink);
    font-size: 16px;
    line-height: 1.65
}

.sx-answer {
    background: #f3f7f4;
    border-bottom: 1px solid var(--sx-line);
    padding: 30px 0
}

.sx-answer .sx-wrap {
    max-width: 1160px
}

.sx-answer p:not(.sx-kicker) {
    max-width: 78ch;
    margin: 0
}

.sx-answer h2 {
    font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.3 Georgia, serif;
    margin: 8px 0 12px;
    max-width: 42ch
}

.sx-kicker {
    color: var(--sx-green);
    font-weight: 750;
    font-size: 13px;
    letter-spacing: .035em;
    margin: 0 0 12px
}

.sx-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    margin-right: 7px;
    flex: none
}

.sx-jump {
    background: #fff;
    border-bottom: 1px solid var(--sx-line);
    padding: 10px 0
}

.sx-jump .sx-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 16px
}

.sx-jump span {
    color: var(--sx-muted);
    font-size: 13px
}

.sx-jump a {
    color: var(--sx-green);
    font-size: 14px;
    font-weight: 700;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 4px
}

.sx-jump .sx-contact-link {
    margin-inline-start: auto
}

.sx-planner {
    padding: 48px 0;
    background: #ebf3ee;
    border-block: 1px solid var(--sx-line);
    scroll-margin-top: 24px
}

.sx-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: start
}

.sx-planner h2 {
    font: 400 clamp(2rem, 3.3vw, 2.8rem)/1.2 Georgia, serif;
    max-width: 20ch;
    margin: 0 0 18px
}

.sx-planner p {
    max-width: 68ch
}

.sx-planner label {
    display: block;
    font-weight: 750;
    margin-top: 22px
}

.sx-planner select {
    font: inherit;
    font-size: 16px;
    min-height: 48px;
    background: white;
    color: var(--sx-ink);
    border: 1px solid #779888;
    width: 100%;
    padding: 12px;
    margin: 8px 0 6px
}

.sx-context {
    font-size: 14px;
    color: var(--sx-muted)
}

.sx-result {
    background: white;
    border-top: 3px solid #3c805e;
    padding: clamp(20px, 3vw, 30px);
    min-width: 0
}

.sx-result h3 {
    font: 400 24px/1.3 Georgia, serif;
    margin: 0 0 14px
}

.sx-result p {
    margin: 0 0 16px;
    color: var(--sx-muted)
}

.sx-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-top: 5px
}

.sx-actions button {
    font: 700 16px/1.4 'DM Sans', Arial, sans-serif;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid #145337;
    background: #206b4d;
    color: white;
    cursor: pointer
}

.sx-actions button:hover {
    background: #154e38
}

.sx-actions a {
    color: #185739;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 700;
    min-height: 44px;
    display: inline-flex;
    align-items: center
}

.sx-result .sx-note {
    font-size: 13px;
    margin: 16px 0;
    color: var(--sx-muted)
}

.sx-proof {
    border-top: 1px solid var(--sx-line);
    padding-top: 14px
}

.sx-proof summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.6;
    min-height: 44px
}

.sx-proof p {
    margin-top: 14px;
    font-size: 15px
}

.sx-proof a {
    color: #185739
}

.sx-jump a:focus-visible,
.sx-planner :is(button, a, select, summary):focus-visible {
    outline: 3px solid #b45416;
    outline-offset: 4px
}

h2[id],
section[id] {
    scroll-margin-block-start: 25px
}

main :is(input, textarea, select) {
    font-size: max(16px, 1em)
}

main p {
    overflow-wrap: break-word
}

main :is(.split, .hero-grid, .grid, .question-body)>* {
    min-width: 0
}

body :is(.sup-conversion, .site-explore) input {
    font-size: 16px
}

body .float-wa {
    max-width: calc(100vw - 28px)
}

@media(max-width:700px) {
    .sx-grid {
        grid-template-columns: 1fr
    }

    .sx-planner {
        padding: 32px 0
    }

    .sx-wrap {
        width: calc(100% - 36px)
    }

    .sx-jump .sx-contact-link {
        margin-inline-start: 0
    }

    .sx-jump .sx-wrap {
        gap: 2px 14px
    }

    .sx-jump a {
        font-size: 13px;
        min-height: 42px
    }

    .sx-answer {
        padding: 24px 0
    }

    .sx-result {
        padding: 22px
    }

    .sx-actions button {
        width: 100%
    }

    .sx-actions a {
        font-size: 14px
    }

    .sx-answer h2 {
        font-size: 1.65rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto !important
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important
    }
}