:root {
    --swd-orange: #c2410c;
    --swd-orange-dark: #9a3412;
    --swd-amber: #ffb300;
    --swd-amber-dark: #7a4b00;
    --swd-ink: #2b1b12;
    --swd-cream: #fff7ea;
    --swd-line: #ebdcc8;
    --swd-bg: #fff;
    --swd-surface: #fff;
    --swd-text: #4a3a2e;
    --swd-text-soft: #5b4637;
    --swd-muted: #6b5a4a;
    --swd-muted-2: #8a7766;
    --swd-line-strong: #e3b774;
    --swd-input-hover: #d9b98d;
    --swd-icon-bg: #fff0cc;
    --swd-tag-bg: #ffe3a8;
    --swd-tag-text: #7a4b00;
    --swd-orange-text: #c2410c;
    --swd-outline: #9a3412;
    --swd-on-amber: #2b1b12;
    --bs-primary: var(--swd-orange);
    --bs-primary-rgb: 194, 65, 12;
    /* Bootstrap 5.3 colours links from the -rgb variables, so these are the ones that count. */
    --bs-link-color: var(--swd-orange);
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color: var(--swd-orange-dark);
    --bs-link-hover-color-rgb: 154, 52, 18;
    --bs-body-color: var(--swd-ink);
    --bs-body-bg: var(--swd-bg);
    --bs-secondary-rgb: 107, 90, 74;
    --bs-border-color: var(--swd-line);
}

body { color: var(--swd-ink); background: var(--swd-bg); }

.swd-nav { background: var(--swd-bg); border-bottom: 1px solid var(--swd-line); }
.swd-brand { display: flex; align-items: center; gap: .65rem; font-weight: 500; color: var(--swd-ink); }
.swd-logo-mark { flex: 0 0 auto; }
.swd-logo-ring { fill: none; stroke: var(--swd-orange-text); stroke-width: 5; }
.swd-logo-dots { fill: var(--swd-amber); transform-origin: 48px 48px; }
.swd-logo-hub { fill: var(--swd-orange-text); }
.swd-logo-mark { width: 60px; height: 60px; }
.swd-wordmark { display: block; height: 60px; width: auto; }
.swd-brand { gap: .8rem; }
@media (max-width: 575.98px) {
    .swd-logo-mark { width: 44px; height: 44px; }
    .swd-wordmark { height: 44px; }
    .swd-brand { gap: .55rem; margin-right: .5rem; }
}

.btn-swd-orange { background: var(--swd-orange); border-color: var(--swd-orange); color: #fff; }
.btn-swd-orange:hover, .btn-swd-orange:focus { background: var(--swd-orange-dark); border-color: var(--swd-orange-dark); color: #fff; }
.btn-swd-amber { background: var(--swd-amber); border-color: var(--swd-amber); color: var(--swd-on-amber); }
.btn-swd-amber:hover, .btn-swd-amber:focus { background: #e6a100; border-color: #e6a100; color: var(--swd-on-amber); }

.swd-footer { background: var(--swd-orange); color: #fff; padding: 1.5rem 0; font-size: .95rem; }
.swd-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .55); transition: text-decoration-color .25s ease, color .25s ease; }
.swd-footer a:hover, .swd-footer a:focus-visible { color: #ffe3a8; text-decoration-color: #ffe3a8; }

.swd-legal-head { background: var(--swd-cream); border-bottom: 1px solid var(--swd-line); padding: 2.5rem 0 2rem; }
.swd-legal-head h1 { font-weight: 500; margin-bottom: .25rem; }
.swd-legal-head p { margin: 0; color: var(--swd-muted); }
.swd-legal { padding-top: 2.5rem; padding-bottom: 3.5rem; max-width: 46rem; }
.swd-legal h2 { font-size: 1.25rem; font-weight: 500; margin: 2rem 0 .75rem; }
.swd-legal h2:first-child { margin-top: 0; }
.swd-legal .table { --bs-table-bg: transparent; font-size: .9rem; }
.swd-legal .table th { font-weight: 500; white-space: nowrap; }
.swd-callout {
    background: var(--swd-cream); border: 1px solid var(--swd-line);
    border-left: 4px solid var(--swd-amber); border-radius: 0 8px 8px 0;
    padding: .9rem 1.1rem; margin: 1rem 0;
}

/* Homepage */
.swd-hero { background: var(--swd-cream); padding: 5.5rem 0 5rem; min-height: min(80vh, 46rem); display: flex; align-items: center; }
.swd-hero > .container { width: 100%; }
.swd-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; margin: 1rem 0 1.25rem; }
.swd-hero h1 em { font-style: normal; color: var(--swd-orange-text); }
.swd-hero .lead { color: var(--swd-text-soft); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; margin-bottom: 2rem; max-width: 36rem; }
.swd-tag { display: inline-block; background: var(--swd-tag-bg); color: var(--swd-tag-text); font-size: .95rem; font-weight: 500; padding: .35rem 1rem; border-radius: 99px; }
.swd-ticks li { margin-right: 1.25rem; font-size: 1rem; color: var(--swd-text-soft); }
.swd-hero .swd-ticks { margin-top: 1.5rem; }
.swd-ticks i, .swd-list i { color: var(--swd-orange-text); margin-right: .4rem; }
.btn-outline-swd { border: 1px solid var(--swd-orange-text); color: var(--swd-outline); background: transparent; }
.btn-outline-swd:hover { background: var(--swd-orange); color: #fff; }
.swd-card { background: var(--swd-surface); border: 1px solid var(--swd-line); border-radius: 12px; padding: 1.25rem; }
.swd-price { font-size: 1.5rem; font-weight: 500; color: var(--swd-orange-text); }
.swd-hero .swd-card { padding: 2rem 2rem 1.75rem; border-radius: 16px; }
.swd-hero .swd-price { font-size: 1.85rem; line-height: 1.2; }
.swd-hero .swd-card .small { font-size: .95rem; }
.swd-hero .swd-list li { font-size: 1.05rem; padding: .3rem 0; }
.swd-hero .swd-card .btn { padding: .8rem 1rem; font-size: 1.05rem; }
@media (max-width: 767.98px) {
    .swd-hero { padding: 3.5rem 0 3.25rem; min-height: 0; }
    .swd-hero .swd-card { padding: 1.5rem; }
}
.swd-list li { padding: .2rem 0; font-size: .92rem; }
.swd-band { background: var(--swd-orange); color: #fff; padding: 2.25rem 0; }
.swd-band i { display: block; margin-bottom: .75rem; font-size: 2.75rem; line-height: 1; color: #ffc93c; }
.swd-band b { display: block; font-size: 1.6rem; font-weight: 500; color: #fff; }
.swd-band span { font-size: .85rem; color: #fff1d6; }
.swd-section { padding: 4.5rem 0; }
.swd-section h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 500; line-height: 1.2; margin-bottom: .75rem; }
.swd-alt { background: var(--swd-cream); }
/* One size for every eyebrow (the small orange label above a heading) across the site. */
:root { --swd-eyebrow-size: 1.15rem; }
.swd-eyebrow { color: var(--swd-orange-text); font-size: var(--swd-eyebrow-size); font-weight: 500; line-height: 1.3; margin-bottom: .35rem; }
.swd-svc { border: 1px solid var(--swd-line); border-radius: 12px; padding: 1.75rem 1.25rem; background: var(--swd-surface); text-align: center; display: flex; flex-direction: column; align-items: center; }
.swd-svc h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: .4rem; }
.swd-svc p { font-size: .92rem; line-height: 1.55; color: var(--swd-muted); margin: 0; }
.swd-ic { width: 52px; height: 52px; border-radius: 12px; background: var(--swd-icon-bg); color: var(--swd-orange-text); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; }
.swd-n { width: 32px; height: 32px; border-radius: 50%; background: var(--swd-amber); color: var(--swd-on-amber); font-weight: 500; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; }
.swd-q { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border: 1px solid var(--swd-line); border-radius: 8px; padding: .7rem .9rem; background: var(--swd-surface); color: var(--swd-ink); text-decoration: none; }
a.swd-q:hover { border-color: var(--swd-orange-text); }
a.swd-q i { color: var(--swd-orange-text); }
.swd-q-soon { color: var(--swd-muted-2); }
.swd-contact li { display: flex; gap: .75rem; margin-bottom: .6rem; }
.swd-contact i { color: var(--swd-orange-text); width: 1.1rem; margin-top: .25rem; flex: 0 0 auto; }
.swd-contact address { font-style: normal; line-height: 1.5; }
.swd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-control:focus { border-color: var(--swd-orange-text); box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .2); }

/* Section headings: centred block with an optional short intro */
.swd-head { text-align: center; max-width: 38rem; margin: 0 auto 2.75rem; }
.swd-head .swd-eyebrow { margin-bottom: .5rem; }
.swd-sub { color: var(--swd-muted); margin: 0; }

/* How it works: numbered steps joined by a line on wide screens */
.swd-step { text-align: center; position: relative; }
.swd-step .swd-n { width: 64px; height: 64px; font-size: 1.6rem; margin: 0 auto 1.25rem; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--swd-cream); }
.swd-step h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: .4rem; }
.swd-step p { font-size: .92rem; line-height: 1.55; color: var(--swd-muted); margin: 0 auto; max-width: 15rem; }
@media (min-width: 992px) {
    .swd-step:not(:last-child)::before {
        content: ""; position: absolute; top: 32px; left: calc(50% + 46px); width: calc(100% - 92px + var(--bs-gutter-x, 1.5rem));
        border-top: 2px dashed var(--swd-line-strong);
    }
}
@media (max-width: 575.98px) {
    .swd-section { padding: 3.25rem 0; }
    .swd-head { margin-bottom: 2rem; }
}

/* What we do and How it works: the larger layout. Scoped by id so the other sections keep their size. */
#services, #how-it-works { padding: 6.5rem 0; }
#services .swd-head, #how-it-works .swd-head { max-width: 46rem; margin-bottom: 4rem; }
#services h2, #how-it-works h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; margin-bottom: 1rem; }
#services .swd-sub, #how-it-works .swd-sub { font-size: 1.15rem; line-height: 1.6; }

#services .swd-svc { padding: 2.5rem 1.75rem; border-radius: 16px; }
#services .swd-ic { width: 76px; height: 76px; border-radius: 18px; font-size: 1.9rem; margin-bottom: 1.5rem; }
#services .swd-svc h3 { font-size: 1.3rem; margin-bottom: .6rem; }
#services .swd-svc p { font-size: 1.05rem; line-height: 1.6; }

#how-it-works .swd-step h3 { font-size: 1.3rem; margin-bottom: .6rem; }
#how-it-works .swd-step p { font-size: 1.05rem; line-height: 1.6; max-width: 17rem; }

@media (max-width: 767.98px) {
    #services, #how-it-works { padding: 4rem 0; }
    #services .swd-head, #how-it-works .swd-head { margin-bottom: 2.5rem; }
    #services .swd-svc { padding: 2rem 1.5rem; }
}

/* Questions page */
.swd-faq { max-width: 46rem; padding-top: 2.5rem; padding-bottom: 4rem; }
.swd-faq .accordion { --bs-accordion-bg: var(--swd-surface); --bs-accordion-border-color: var(--swd-line); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(194, 65, 12, .2); --bs-accordion-active-bg: var(--swd-cream); --bs-accordion-active-color: var(--swd-ink); --bs-accordion-btn-color: var(--swd-ink); }
.swd-faq .accordion-item { border-radius: 12px; overflow: hidden; margin-bottom: .6rem; border: 1px solid var(--swd-line); }
.swd-faq .accordion-item:not(:first-of-type) { border-top: 1px solid var(--swd-line); }
.swd-faq .accordion-button { font-weight: 500; gap: .75rem; padding: 1rem 1.15rem; }
.swd-faq .accordion-button:not(.collapsed) { box-shadow: none; }
.swd-faq .accordion-body { padding: .25rem 1.15rem 1.25rem 3.4rem; color: var(--swd-text); }
.swd-faq .accordion-body p:last-child, .swd-faq .accordion-body ul:last-child { margin-bottom: 0; }
.swd-faq-n { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--swd-amber); color: var(--swd-on-amber); font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.swd-faq-cta { margin-top: 2.5rem; padding: 2rem 1.5rem; background: var(--swd-cream); }
.swd-faq-cta h2 { font-size: 1.35rem; font-weight: 500; }
@media (max-width: 575.98px) { .swd-faq .accordion-body { padding-left: 1.15rem; } }

/* Get in touch: the larger layout, scoped by id. */
#contact { padding: 6.5rem 0; }
#contact h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; margin-bottom: 1rem; }
#contact .col-lg-5 > p:not(.swd-eyebrow) { font-size: 1.2rem; line-height: 1.6; color: var(--swd-text-soft); margin-bottom: 2rem; }
#contact .swd-contact li { gap: 1rem; margin-bottom: 1.25rem; font-size: 1.15rem; }
#contact .swd-contact i { width: 1.5rem; font-size: 1.3rem; margin-top: .3rem; }
#contact .swd-card { padding: 2.5rem; border-radius: 16px; }
#contact .form-label { font-size: 1rem; font-weight: 500; margin-bottom: .4rem; }
#contact .form-control { font-size: 1.05rem; padding: .8rem 1rem; border-radius: 10px; }
#contact textarea.form-control { min-height: 9.5rem; }
#contact .btn[type="submit"] { padding: 1rem 1.25rem; font-size: 1.15rem; border-radius: 10px; }
#contact .btn[type="submit"] + p { font-size: .95rem; }
#contact .alert { font-size: 1.05rem; }
@media (max-width: 767.98px) {
    #contact { padding: 4rem 0; }
    #contact .swd-card { padding: 1.5rem; }
}
.swd-footer-small { font-size: .85rem; opacity: 1; color: #fff1d6; margin-top: .15rem; }

/* Service cards are links */
a.swd-svc { color: var(--swd-ink); text-decoration: none; }
a.swd-svc:hover h3 { color: var(--swd-orange-text); }

/* About page */
.swd-intro { padding: 4rem 0 4.5rem; font-size: 1.1rem; line-height: 1.7; color: var(--swd-text); }
.swd-intro p { margin-bottom: 1.1rem; }
.swd-about-lead { font-size: 1.5rem; line-height: 1.4; font-weight: 500; color: var(--swd-ink); }
.swd-about-small { font-size: .95rem; color: var(--swd-muted); margin-top: 1.5rem; }

/* Services page */
.swd-service { padding: 4.5rem 0; }
.swd-service .swd-ic { width: 76px; height: 76px; border-radius: 18px; font-size: 1.9rem; margin-bottom: 1.25rem; }
.swd-service h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; line-height: 1.2; margin-bottom: .6rem; }
.swd-service-tagline { color: var(--swd-muted); font-size: 1.1rem; margin: 0; }
.swd-service-intro { font-size: 1.1rem; line-height: 1.7; color: var(--swd-text); }
.swd-service-label { font-weight: 500; margin: 1.5rem 0 .75rem; color: var(--swd-ink); }
.swd-includes { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .65rem; }
.swd-includes li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.02rem; line-height: 1.5; }
.swd-includes i { color: var(--swd-orange-text); margin-top: .25rem; flex: 0 0 auto; }
.swd-bestfor { background: var(--swd-surface); border: 1px solid var(--swd-line); border-left: 4px solid var(--swd-amber); border-radius: 0 8px 8px 0; padding: .85rem 1.1rem; margin-bottom: 1.5rem; color: var(--swd-text); }
@media (max-width: 767.98px) { .swd-service { padding: 3.25rem 0; } }

/* Sticky footer: the page is at least as tall as the window, so a short page pushes the footer to the
   bottom of the window and a long page lets it follow the content. dvh is the window height on phones
   whose address bar comes and goes; vh is the fallback for browsers without it. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .swd-footer { flex-shrink: 0; }

/* FAQ cards: question text centred vertically, and tiles in a row the same height. */
.swd-q { min-height: 4rem; align-items: center; line-height: 1.35; }
.swd-q > i { flex: 0 0 auto; }
.swd-faq .accordion-button { align-items: center; min-height: 3.75rem; line-height: 1.35; }
.swd-faq-n { align-self: center; }

/* The accordion header is an h2, and inside a .swd-section the section heading rules (font size, bottom margin)
   were leaking onto it, adding a gap under every question. Reset it to just a wrapper for the button. */
.swd-faq .accordion-header { margin: 0; font-size: 1rem; line-height: inherit; font-weight: inherit; }

/* Homepage feature band: custom apps and databases */
.swd-feature { background: var(--swd-orange); color: #fff; padding: 6rem 0; position: relative; overflow: hidden; }
.swd-feature::before {
    content: ""; position: absolute; width: 560px; height: 560px; right: -160px; bottom: -240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 201, 60, .35), rgba(255, 201, 60, 0) 70%); pointer-events: none;
}
.swd-feature > .container { position: relative; }
.swd-feature .swd-eyebrow { color: #fff1d6; }
.swd-feature h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin-bottom: 1rem; }
.swd-feature-text { font-size: 1.15rem; line-height: 1.6; color: #fff1d6; margin-bottom: 1.75rem; }
.swd-feature-item { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 1.4rem; }
.swd-feature-item i { color: #ffc93c; }
.swd-feature-item h3 { color: #fff; }
.swd-feature-item p { font-size: .95rem; line-height: 1.5; color: #fff1d6; margin: 0; }
.swd-feature .btn-outline-light:hover { color: var(--swd-orange-text); }
@media (max-width: 767.98px) { .swd-feature { padding: 4rem 0; } }

/* Custom software page */
.swd-sub-left { color: var(--swd-muted); font-size: 1.1rem; line-height: 1.6; margin: 0; }
.swd-includes-card { background: var(--swd-surface); border: 1px solid var(--swd-line); border-radius: 16px; padding: 1.75rem; margin: 0; }

/* Homepage band: website hosting */
.swd-hosting-item { background: var(--swd-surface); border: 1px solid var(--swd-line); border-radius: 14px; padding: 1.4rem; transition: transform .4s var(--swd-ease, ease), border-color .4s ease; }
.swd-hosting-item:hover { transform: translateY(-3px); border-color: var(--swd-line-strong); }
.swd-hosting-item i { color: var(--swd-orange-text); }
.swd-hosting-item p { font-size: .95rem; line-height: 1.5; color: var(--swd-muted); margin: 0; }

/* Homepage feature and hosting blocks: the icon sits to the left of the title. */
.swd-item-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.swd-item-head i { flex: 0 0 auto; width: 1.6rem; text-align: center; font-size: 1.4rem; line-height: 1; }
.swd-item-head h3 { font-size: 1.1rem; font-weight: 500; line-height: 1.25; margin: 0; }

/* ---------- Phones and tablets ---------- */

/* Touch targets: buttons at least 44px tall on anything without a fine pointer or on narrow screens. */
@media (pointer: coarse), (max-width: 991.98px) {
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { min-height: 40px; }
    .swd-footer a { display: inline-block; padding: .7rem .35rem; margin: -.35rem -.35rem; }
    .swd-contact a { display: inline-block; padding: .55rem 0; }
    .swd-contact li { align-items: center; margin-bottom: .25rem; }
    .swd-contact li:has(address) { align-items: flex-start; }
}

/* Phones */
@media (max-width: 575.98px) {
    /* A row of calls to action becomes a stack of full-width buttons, easy to hit with a thumb. */
    main .d-flex.flex-wrap > .btn { flex: 1 1 100%; }
    .swd-faq-cta .btn { width: 100%; }

    /* The four "What we do" cards sit two across instead of four tall cards in a row. */
    #services .swd-svc { padding: 1.4rem .85rem; border-radius: 14px; }
    #services .swd-ic { width: 56px; height: 56px; font-size: 1.4rem; border-radius: 14px; margin-bottom: 1rem; }
    #services .swd-svc h3 { font-size: 1.05rem; }
    #services .swd-svc p { font-size: .92rem; line-height: 1.5; }
    #services .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

    .swd-footer .container { flex-direction: column; }
    .swd-footer .container > span { margin-top: .25rem; }
}

/* Tablets: the hero quote card keeps a readable width instead of stretching edge to edge. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .swd-hero .col-lg-5 .swd-card { max-width: 34rem; }
}

/* The intro, policy and FAQ containers keep Bootstrap's side padding, so text never touches the screen edge.
   (They once set padding as a shorthand, which silently zeroed the left and right as well.) */

/* The privacy table becomes one block per row on phones, so its three columns are not squeezed. */
@media (max-width: 575.98px) {
    .swd-legal .table thead { display: none; }
    .swd-legal .table, .swd-legal .table tbody, .swd-legal .table tr, .swd-legal .table td { display: block; width: 100%; }
    .swd-legal .table tr { border: 1px solid var(--swd-line); border-radius: 10px; padding: .75rem .9rem; margin-bottom: .75rem; background: var(--swd-surface); }
    .swd-legal .table td { border: 0; padding: .3rem 0; }
    .swd-legal .table td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--swd-orange-text); }
}

/* Intro band: the text on the left, a summary card and contact details on the right. */
.swd-intro-aside { display: grid; gap: 1rem; }
@media (min-width: 992px) { .swd-intro-aside { position: sticky; top: 6.5rem; } }
.swd-summary { background: var(--swd-cream); border: 1px solid var(--swd-line); border-left: 4px solid var(--swd-amber); border-radius: 0 14px 14px 0; padding: 1.4rem 1.5rem; }
.swd-summary p { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.swd-summary .swd-summary-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--swd-orange-text); margin-bottom: .6rem; }
.swd-glance { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.swd-glance li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.02rem; line-height: 1.45; }
.swd-glance i { color: var(--swd-orange-text); width: 1.25rem; text-align: center; margin-top: .2rem; flex: 0 0 auto; }
.swd-talk { background: var(--swd-surface); border: 1px solid var(--swd-line); border-radius: 14px; padding: 1.2rem 1.5rem; }
.swd-talk .swd-talk-label { font-weight: 500; color: var(--swd-ink); margin: 0 0 .35rem; font-size: 1.02rem; }
.swd-talk-link { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; font-size: 1.02rem; }
.swd-talk-link i { color: var(--swd-orange-text); width: 1.25rem; text-align: center; }
/* The "Get in touch" link style: orange text with no underline, and an underline that draws in from the left on hover. */
.swd-talk-link { text-decoration: none; }
.swd-talk-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--swd-med, .4s) var(--swd-ease, ease); }
.swd-talk-link:hover span, .swd-talk-link:focus-visible span { background-size: 100% 1px; }
@media (max-width: 575.98px) { .swd-intro { padding: 2.75rem 0 3rem; } }
@media (pointer: coarse), (max-width: 991.98px) { .swd-talk-link { padding: .7rem 0; } }

/* A card sits on the opposite colour to its band: cream on a white band, white on a cream band. */
.swd-alt .swd-faq-cta { background: var(--swd-surface); }
.swd-card-tint { background: var(--swd-cream); }

/* ---------- Dark mode ----------
   The same variables, redefined. Set on <html data-theme="dark"> by the script at the top of header.php
   (the visitor's saved choice for this tab, else their system setting) and by the switch in the corner. The
   brand-orange bands (stats strip, feature band, footer) and the orange buttons keep their fill in both
   themes; orange used as text, icons and outlines becomes a lighter orange so it stays readable. */
[data-theme="dark"] {
    color-scheme: dark;
    --swd-bg: #15100c;
    --swd-surface: #261c15;
    --swd-cream: #1d1510;
    --swd-ink: #f4eadf;
    --swd-text: #d9cabb;
    --swd-text-soft: #d0c0af;
    --swd-muted: #b6a593;
    --swd-muted-2: #9b8b7b;
    --swd-line: #3c2f25;
    --swd-line-strong: #6b4a2c;
    --swd-input-hover: #5c4838;
    --swd-icon-bg: #3a291a;
    --swd-tag-bg: #4a3416;
    --swd-tag-text: #ffd98a;
    --swd-orange-text: #ff9a63;
    --swd-outline: #ff9a63;
    --bs-secondary-rgb: 182, 165, 147;
    --bs-link-color-rgb: 255, 154, 99;
    --bs-link-hover-color-rgb: 255, 190, 150;
    --bs-link-color: #ff9a63;
    --bs-link-hover-color: #ffbe96;
}
[data-theme="dark"] .navbar-toggler { border-color: var(--swd-line); }

/* The light and dark wordmarks: only one shows. */
.swd-wordmark-dark { display: none; }
[data-theme="dark"] .swd-wordmark-light { display: none; }
[data-theme="dark"] .swd-wordmark-dark { display: block; }

/* The floating light / dark switch, bottom right, just above the bottom edge of the window. */
.swd-theme { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 1045; }
.swd-theme-switch {
    display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .75rem; min-height: 44px;
    background: var(--swd-surface); color: var(--swd-ink); border: 1px solid var(--swd-line); border-radius: 99px;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .45); cursor: pointer; font: inherit; line-height: 1;
}
.swd-theme-switch i { font-size: .95rem; transition: color .25s ease, opacity .25s ease; }
.swd-theme-switch .fa-sun { color: var(--swd-amber); opacity: 1; }
.swd-theme-switch .fa-moon { color: var(--swd-muted); opacity: .75; }
[data-theme="dark"] .swd-theme-switch .fa-sun { color: var(--swd-muted); opacity: .75; }
[data-theme="dark"] .swd-theme-switch .fa-moon { color: #ffd98a; opacity: 1; }
.swd-theme-track { position: relative; width: 40px; height: 22px; border-radius: 99px; background: var(--swd-line-strong); transition: background-color .25s ease; flex: 0 0 auto; }
.swd-theme-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .3s var(--swd-ease, ease); }
.swd-theme-switch[aria-checked="true"] .swd-theme-track { background: var(--swd-orange); }
.swd-theme-switch[aria-checked="true"] .swd-theme-thumb { transform: translateX(18px); }
.swd-theme-switch:hover { border-color: var(--swd-line-strong); }
.swd-theme-switch:focus-visible { outline: 3px solid rgba(255, 179, 0, .7); outline-offset: 2px; }

/* Leave room under the footer text so the floating switch never sits on top of it. */
.swd-footer { padding-bottom: 4.5rem; }