/* ==========================================================================
   FOOTER — rebuilt to the supplied reference composition.

   Presentation only. Every link, route, aria-label, heading and the
   newsletter form keep the markup and behaviour they already had; this
   sheet only lays them out and colours them.

   REFERENCE -> OURS
     The reference's green is the only intentional difference: every UI
     accent here is the site's existing --primary-color (#0073FC). Nothing
     inside a logo or image asset is recoloured.

   TOKENS (all already used elsewhere in the redesign)
     --primary-color       #0073FC     --primary-color-dark  #005BC7
     dark ground           #0B0B0B     dark control          #1B1F23
     dark hairline         rgba(255,255,255,.08)
     light ground          #FFFFFF     light control         #EDF1F5
     light ink             #0A0D0F primary / #4A535D secondary / #626B75 muted
     light hairline        rgba(15,23,42,.10)

   SPECIFICITY
     The legacy footer rules live in the layout's <head> <style> and are up
     to (0,3,2) — e.g. `.footer .footer-content .footer-links ul a`. This
     sheet is linked after that block, so equal specificity already wins on
     order; where a legacy rule is deeper the selectors below are deepened
     to match rather than reaching for !important.
   ========================================================================== */

/* ==========================================================================
   SHELL
   ========================================================================== */
.tk-footer {
    background-color: #0B0B0B;
    font-size: 15px;
}

.tk-footer .footer-content {
    padding: 68px 0 0;
}

.tk-footer > .footer-content > .container,
.tk-footer .footer-legal > .container {
    max-width: 1180px;
}

/* brand | nav — the footer has no newsletter/CTA block, so the nav columns
   take the rest of the row and the last one ends on the container edge */
.tk-footer .tk-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "brand nav";
    gap: 48px 64px;
    align-items: start;
    padding-bottom: 54px;
}

.tk-footer .tk-footer-brand { grid-area: brand; }
.tk-footer .tk-footer-nav   { grid-area: nav; }
.tk-footer .tk-footer-cta   { grid-area: cta; }

/* ==========================================================================
   BRAND COLUMN — logo + theme toggle, contact block, socials
   ========================================================================== */
.tk-footer .tk-footer-brand-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.tk-footer .tk-footer-logo {
    display: inline-flex;
    line-height: 0;
}

.tk-footer .tk-footer-logo img {
    width: auto;
    height: 36px !important;
    max-width: 230px;
    /* the brand mark is now a raster PNG, so contain keeps its aspect ratio
       and prevents any crop or stretch if the box is ever constrained */
    object-fit: contain;
}

/* ---- Theme toggle -------------------------------------------------------
   Same vertical-pill concept, geometry and blue as the navbar control, so
   the two controls read as the same thing in two places. The behaviour is
   the navbar's too — see [data-tk-theme-toggle] in tbtk-navbar-redesign.js. */
.tk-footer .tk-footer-theme-toggle {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 25px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color, #0073FC);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tk-footer .tk-footer-theme-toggle:hover {
    background: var(--primary-color-dark, #005BC7);
}

.tk-footer .tk-footer-theme-toggle .tk-theme-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #14161A;
    /* The thumb travels with transform, not `top`. Chromium does not
       re-resolve a transitioned property when a live theme toggle changes
       which rule matches, so animating `top` left the thumb stuck at the
       previous theme's position until the next reload. */
    transition: transform 0.25s ease;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-theme-toggle .tk-theme-toggle-thumb {
    transform: translateY(17px);
}

.tk-footer .tk-footer-theme-toggle .tk-theme-toggle-thumb svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
}

/* only one glyph is ever shown */
.tk-footer .tk-footer-theme-toggle .tk-icon-sun { display: none; }
html[data-tk-theme="light"] .tk-footer .tk-footer-theme-toggle .tk-icon-moon { display: none; }
html[data-tk-theme="light"] .tk-footer .tk-footer-theme-toggle .tk-icon-sun { display: block; }

/* ---- Contact block (our equivalent of the reference's description) ------- */
.tk-footer .footer-links.contact-details {
    margin-bottom: 26px;
    padding-left: 0;   /* legacy rule indents this by 50px */
}

.tk-footer .tk-footer-brand .footer-links.contact-details h3 {
    margin: 0 0 14px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tk-footer .tk-footer-brand .footer-links.contact-details ul {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 290px;
}

.tk-footer .tk-footer-brand .footer-links.contact-details ul li {
    display: flex;
    align-items: flex-start;
    /* smaller type, looser rhythm — the items read as a list, not a block */
    padding: 0 0 13px;
}

.tk-footer .tk-footer-brand .footer-links.contact-details ul li .tk-footer-contact-text {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    color: #9AA1A9;
    font-size: 14px;
    line-height: 1.5;
}

.tk-footer .tk-footer-brand .footer-links.contact-details ul li a {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    margin-top: 0;
    color: #9AA1A9;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    /* Must be declared, not just omitted: the theme ships a global
       `a { transition: .3s }`, which resolves to transition-property: all
       and therefore covers `color`. See THEME-SAFE HOVER below. */
    transition: transform 0.2s ease;
}

.tk-footer .tk-footer-brand .footer-links.contact-details ul li a:hover {
    color: var(--primary-color, #0073FC);
    transition: color 0.18s ease;
}

.tk-footer .footer-links.contact-details i {
    width: 24px;
    flex: 0 0 24px;
    margin-top: 4px;
    color: var(--primary-color, #0073FC);
    font-size: 13px;
}

/* ---- Social buttons ----------------------------------------------------- */
.tk-footer .social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tk-footer .social-icons li {
    display: inline-block;
    margin: 0;
}

.tk-footer .social-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: #1B1F23;
    color: var(--primary-color, #0073FC);
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    /* border-color is not transitioned on purpose: Chromium does not
       re-resolve a transitioned property when a live theme toggle changes
       which rule matches, so the control would keep the other theme's
       hairline until the next reload. */
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.tk-footer .social-icons li a:hover,
.tk-footer .social-icons li a:focus-visible {
    transform: translateY(-2px);
    background: #232830;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* the legacy sheet colours the glyph on hover only; keep it blue always */
.tk-footer .social-icons li a i,
.tk-footer .social-icons li a svg,
.tk-footer .social-icons li i:hover {
    color: var(--primary-color, #0073FC);
}

.tk-footer .social-icons li a svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    /* The layout's older `.footer-content .social-icons li svg` rule nudges SVG
       social icons by `margin-top:-3px; margin-left:1px`, which was written for
       the previous button that centred its icon with padding. This footer's
       button is a 40x40 inline-flex box that centres its own content, so those
       offsets now push the icon 1.5px off-centre. Clearing them here lines an
       SVG icon up exactly like the <i> glyphs beside it; the older rule is left
       untouched for the non-redesigned markup that still relies on it. */
    margin: 0;
}

/* ==========================================================================
   NAVIGATION COLUMNS
   ========================================================================== */
.tk-footer .tk-footer-nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 30px 32px;
}

.tk-footer .tk-footer-nav .footer-links {
    margin-bottom: 0;
}

.tk-footer .tk-footer-nav .footer-links h4 {
    margin: 0 0 18px;
    padding-bottom: 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tk-footer .tk-footer-nav .footer-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tk-footer .tk-footer-nav .footer-links ul li {
    display: block;
    /* the links were reading as one compressed block; smaller type plus a
       little more room between items fixes it without adding footer height */
    padding: 0 0 14px;
}

.tk-footer .tk-footer-nav .footer-links ul li:last-child {
    padding-bottom: 0;
}

.tk-footer .tk-footer-nav .footer-links ul li a {
    display: inline-block;
    color: #9AA1A9;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
    /* THEME-SAFE HOVER
       `color` is deliberately absent from this base transition. Chromium
       does not re-resolve a transitioned property when a live theme toggle
       changes which rule matches, and with `transition: color` here every
       footer link kept the other theme's colour — verified: it stayed at the
       light value for 2.5s and through a forced reflow, and snapped to the
       correct dark value the instant transitions were disabled.

       Declaring the colour transition on :hover instead still animates the
       hover in (it snaps back out), and the theme change resolves at once. */
    transition: transform 0.2s ease;
}

.tk-footer .tk-footer-nav .footer-links ul li a:hover,
.tk-footer .tk-footer-nav .footer-links ul li a:focus-visible {
    color: var(--primary-color, #0073FC);
    transform: translateX(2px);
    transition: color 0.18s ease, transform 0.2s ease;
}

/* A column item that isn't live yet (Blog): plain text in the link colour,
   no hover, with a small "Coming soon" pill in the brand blue. */
.tk-footer .tk-footer-nav .footer-links ul li .tk-footer-soon {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #9AA1A9;
    font-size: 14px;
    line-height: 1.45;
    cursor: default;
}

.tk-footer .tk-footer-nav .footer-links ul li .tk-footer-soon-badge {
    padding: 2px 8px;
    border: 1px solid rgba(0, 115, 252, 0.35);
    border-radius: 999px;
    background: rgba(0, 115, 252, 0.14);
    color: #5AA2FF;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.5;
    white-space: nowrap;
}

/* ==========================================================================
   CTA CARD — our newsletter, in the reference's card
   ========================================================================== */
.tk-footer .tk-footer-cta .newsletter {
    padding: 22px 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: #17191D;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 22px rgba(0, 0, 0, 0.35);
}

.tk-footer .tk-footer-cta .newsletter h3 {
    margin: 0 0 14px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* GF chrome that carries no content */
.tk-footer .tk-footer-cta .gform_heading,
.tk-footer .tk-footer-cta .gform_validation_container,
.tk-footer .tk-footer-cta .gfield--type-honeypot,
.tk-footer .tk-footer-cta .gfield_label {
    display: none;
}

.tk-footer .tk-footer-cta form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.tk-footer .tk-footer-cta .gform-body,
.tk-footer .tk-footer-cta .gform_fields,
.tk-footer .tk-footer-cta .ginput_container_email {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.tk-footer .tk-footer-cta .ginput_container_email input[type="email"] {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: #0F1113;
    color: #F3F5F7;
    font-size: 13.5px;
    outline: none;
    transition: box-shadow 0.18s ease;
}

/* ---- Keep the footer identical on every public page -------------------- */
/* Service, portfolio and website pages inject a legacy stylesheet stored with
   their page content. It carries
     .gform_wrapper input, .gform_wrapper select { height:60px; border-radius:50px; ... }
     #gform_24 .gfield input.large        { height:60px; ... }
   The homepage does not inject that sheet, so the newsletter field rendered
   44px/10px there and 60px/50px everywhere else — and that single difference
   cascaded into the newsletter box (176px vs 214px) and the whole footer
   (1391px vs 1495px tall). Re-stating the canonical geometry with the form's
   own id lifts it above those selectors, so the homepage footer is what every
   page renders.

   Geometry only, and deliberately NOT theme-gated: the footer's light and dark
   palettes are unchanged and still live in their own blocks below.

   Three of these declarations carry !important in those legacy sheets
     custome5bf.css        .gform_wrapper input { border-radius:50px !important;
                                                  padding-left:20px !important }
     project-details8991.css  input[type="email"] { font-size:16px !important }
   which is the only reason !important is repeated here. */
.tk-footer .tk-footer-cta #gform_24 .ginput_container_email input[type="email"],
.tk-footer .tk-footer-cta #gform_24 .gfield input.large {
    min-height: 44px;
    height: 44px;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    /* the same sheet paints the field #1e1d1d; the footer's own dark surface
       is #0F1113. The light palette is set in the light block further down,
       which is scoped by the theme attribute and so still wins there. */
    background: #0F1113;
    color: #F3F5F7;
}

/* The same legacy sheet also carries
     #gform_24 .gform_footer.top_label { position:absolute; top:-1px; right:9px }
   which lifts the submit button out of the form's flex row. The field then
   stretched to the full 219px and the button sat on top of it, instead of the
   homepage's 165px field + 46px button laid out side by side. Putting the
   button back in flow restores the approved layout. */
.tk-footer .tk-footer-cta #gform_24 .gform_footer.top_label {
    position: static;
}

/* …and `#gform_wrapper_24 { margin-bottom:30px }`, which made the newsletter
   card 165px tall on service pages against the homepage's 135px. Matched by
   the same id so it outranks that selector. */
.tk-footer .tk-footer-cta .newsletter #gform_wrapper_24 {
    margin: 0;
}

/* The same sheet forces the language switcher blue with !important; on the
   homepage it inherits the footer's own legal-link colour. That existing
   !important is the only reason one is needed here. */
.tk-footer .footer-language .trp-language-switcher .trp-ls-shortcode-language a {
    color: #9AA1A9 !important;
}

html[data-tk-theme="light"] .tk-footer .footer-language .trp-language-switcher .trp-ls-shortcode-language a {
    color: #4A535D !important;
}

.tk-footer .tk-footer-cta .ginput_container_email input[type="email"]::placeholder {
    color: #7F878F;
    opacity: 1;
}

.tk-footer .tk-footer-cta .ginput_container_email input[type="email"]:focus {
    border-color: var(--primary-color, #0073FC);
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.18);
}

.tk-footer .tk-footer-cta .gform_footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.tk-footer .tk-footer-cta .gform_button.gform_image_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 115, 252, 0.24);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tk-footer .tk-footer-cta .gform_button.gform_image_button:hover {
    background: linear-gradient(var(--primary-color-light, #66ACFF), var(--primary-color, #0073FC));
    transform: translateY(-1px);
}

/* The legacy sheet recolours this icon with a hue-rotate meant for a green
   source. On a blue button the icon simply needs to be white, which
   brightness(0) invert(1) does regardless of the source colour. */
.tk-footer .tk-footer-cta .gform_button.gform_image_button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.tk-footer .tk-footer-cta .gfield_description,
.tk-footer .tk-footer-cta .validation_message {
    color: #FF8585;
    font-size: 12px;
}

/* ==========================================================================
   BOTTOM ROW
   ========================================================================== */
/* side gutters match the columns' container above (12px, 20px on phones),
   so the bottom row lines up with the brand and nav columns */
.tk-footer .footer-legal .container {
    padding: 0 12px;
    border-top: 0;
}

.tk-footer .tk-footer-legal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 22px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-footer .footer-legal .copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin: 0;
    color: #7F878F;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
}

.tk-footer .footer-legal .copyright span {
    color: #7F878F;
}

.tk-footer .footer-legal .container a {
    color: #9AA1A9;
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none;
    /* overrides the global `a { transition: .3s }` (= property `all`, which
       includes colour). See THEME-SAFE HOVER above. */
    transition: transform 0.2s ease;
}

.tk-footer .footer-legal .container a:hover {
    color: var(--primary-color, #0073FC);
    transition: color 0.18s ease;
}

.tk-footer .footer-legal .footer-language {
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   LIGHT THEME — screenshot 2: a clean white footer, not grey-on-grey
   ========================================================================== */
html[data-tk-theme="light"] .tk-footer {
    background-color: #FFFFFF;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-brand .footer-links.contact-details h3,
html[data-tk-theme="light"] .tk-footer .tk-footer-nav .footer-links h4,
html[data-tk-theme="light"] .tk-footer .tk-footer-cta .newsletter h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-brand .footer-links.contact-details ul li a,
html[data-tk-theme="light"] .tk-footer .tk-footer-brand .footer-links.contact-details ul li .tk-footer-contact-text,
html[data-tk-theme="light"] .tk-footer .tk-footer-nav .footer-links ul li a {
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-brand .footer-links.contact-details ul li a:hover,
html[data-tk-theme="light"] .tk-footer .tk-footer-nav .footer-links ul li a:hover {
    color: var(--primary-color, #0073FC);
}

html[data-tk-theme="light"] .tk-footer .tk-footer-nav .footer-links ul li .tk-footer-soon {
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-nav .footer-links ul li .tk-footer-soon-badge {
    border-color: rgba(0, 115, 252, 0.25);
    background: rgba(0, 115, 252, 0.08);
    color: var(--primary-color-dark, #005BC7);
}

html[data-tk-theme="light"] .tk-footer .social-icons li a {
    border-color: rgba(15, 23, 42, 0.09);
    background: #EDF1F5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html[data-tk-theme="light"] .tk-footer .social-icons li a:hover,
html[data-tk-theme="light"] .tk-footer .social-icons li a:focus-visible {
    background: #E4EAF1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

html[data-tk-theme="light"] .tk-footer .tk-footer-cta .newsletter {
    border-color: rgba(15, 23, 42, 0.07);
    background: #EEF2F6;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 22px rgba(15, 23, 42, 0.06);
}

/* `#gform_24` and `#gform_submit_button_24` are carried in the legacy
   stylesheet stored with the site's static page content, which is injected on
   every page. Being ID selectors they outranked the class-based rules below,
   so in light mode the newsletter field kept its dark-theme pill
   (background #1e1d1d, white text) on the light footer card, and the submit
   button kept `width:40px; margin-top:5px`, which shrank it and pushed it off
   centre against the 60px field.

   Adding those ids here lifts these rules above that sheet. Only light mode is
   amended, so the dark footer renders exactly as before. Presentation only —
   the form id, action, method, field names and submit behaviour are untouched. */
html[data-tk-theme="light"] .tk-footer .tk-footer-cta #gform_24 .ginput_container_email input[type="email"],
html[data-tk-theme="light"] .tk-footer .tk-footer-cta #gform_24 .gfield input.large {
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #FFFFFF;
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-cta #gform_24 .ginput_container_email input[type="email"]::placeholder,
html[data-tk-theme="light"] .tk-footer .tk-footer-cta #gform_24 .gfield input.large::placeholder {
    color: #8A929B;
    opacity: 1;
}

/* restore the button's own intended size and centring */
html[data-tk-theme="light"] .tk-footer .tk-footer-cta #gform_submit_button_24.gform_image_button {
    width: 46px;
    height: 44px;
    margin-top: 0;
    padding: 0;
    border-radius: 999px;
}

html[data-tk-theme="light"] .tk-footer .tk-footer-legal-row {
    border-top-color: rgba(15, 23, 42, 0.1);
}

html[data-tk-theme="light"] .tk-footer .footer-legal .copyright,
html[data-tk-theme="light"] .tk-footer .footer-legal .copyright span {
    color: #626B75;
}

html[data-tk-theme="light"] .tk-footer .footer-legal .container a {
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-footer .footer-legal .container a:hover {
    color: var(--primary-color, #0073FC);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .tk-footer .tk-footer-grid {
        gap: 44px 40px;
    }
}

@media (max-width: 991px) {
    .tk-footer .footer-content {
        padding-top: 52px;
    }

    .tk-footer .tk-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "nav";
    }
}

@media (max-width: 767px) {
    .tk-footer .footer-content {
        padding-top: 40px;
    }

    .tk-footer .footer-legal .container {
        padding: 0 20px;
    }

    .tk-footer .tk-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "nav";
        gap: 32px;
        padding-bottom: 32px;
    }

    .tk-footer .tk-footer-nav {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* the legacy mobile accordion collapses these lists; restore the
       breathing room it removes between headings */
    .tk-footer .tk-footer-nav .footer-links {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .tk-footer .tk-footer-nav .footer-links h4 {
        margin-bottom: 0;
    }

    .tk-footer .tk-footer-nav .footer-links.active h4 {
        margin-bottom: 14px;
    }

    .tk-footer .tk-footer-legal-row {
        justify-content: flex-start;
        padding: 20px 0 26px;
    }

    .tk-footer .footer-legal .copyright {
        gap: 6px 16px;
    }
}

@media (max-width: 767px) {
    html[data-tk-theme="light"] .tk-footer .tk-footer-nav .footer-links {
        border-bottom-color: rgba(15, 23, 42, 0.1);
    }
}


/* ==========================================================================
   CONTACT US POPUP — partials/footer-contact-modal.blade.php
   The shell and fields are the booking modal's (.tk-bc-*, dark). These rules
   size it for a short form and give it a light version so it follows the
   site theme like the footer does.
   ========================================================================== */
.tk-ct-overlay .tk-ct {
    max-width: 560px;
    padding-top: 52px;
}

.tk-ct-overlay .tk-ct-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tk-ct-overlay .tk-ct-grid {
    margin-bottom: 12px;
}

.tk-ct-overlay .tk-ct-field {
    margin-bottom: 12px;
}

.tk-ct-overlay .tk-cx-field {
    margin-bottom: 18px;
}

.tk-ct-overlay .tk-cx-error:empty {
    display: none;
}

html[data-tk-theme="light"] .tk-ct-overlay {
    background: rgba(15, 23, 42, 0.45);
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-ct {
    border-color: rgba(15, 23, 42, 0.10);
    background: #FFFFFF;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-lede {
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-close {
    border-color: rgba(15, 23, 42, 0.10);
    background: #EDF1F5;
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-close:hover {
    background: #E4EAF1;
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-input {
    border-color: rgba(15, 23, 42, 0.14);
    background: #FFFFFF;
    color: #0A0D0F;
    box-shadow: none;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-input::placeholder {
    color: #8A929B;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-input:focus {
    border-color: var(--primary-color, #0073FC);
    box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.15);
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-input.has-error {
    border-color: #E5484D;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-error {
    border-color: rgba(229, 72, 77, 0.35);
    background: rgba(229, 72, 77, 0.08);
    color: #B42318;
}

html[data-tk-theme="light"] .tk-ct-overlay .tk-bc-body {
    scrollbar-color: rgba(15, 23, 42, 0.22) rgba(15, 23, 42, 0.05);
}