/* ==========================================================================
   Developercode theme — site chrome for Tandheelkundig Centrum Huissen
   Header, navigation, footer and the layout overrides Elementor full-width
   sections need. Tokens are declared locally so the chrome never depends on
   the widget stylesheet being present.
   ========================================================================== */

:root {
    --dc-ink: #16282F;
    --dc-ink-2: #2C4550;
    --dc-ink-3: #556B73;
    --dc-ink-4: #5E6E75;
    --dc-cream: #FBF9F5;
    --dc-sand: #F4F0E9;
    --dc-mist: #EEF5FA;
    --dc-moss: #EFF4E9;
    --dc-blue: #2E7FA6;
    --dc-blue-deep: #1F5E7D;
    --dc-blue-soft: #87C3E7;
    --dc-green-soft: #A5CB8B;
    --dc-line: #E3DDD3;
    --dc-line-invert: rgba(255, 255, 255, .16);
    --dc-font-display: "SUSE", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dc-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dc-gutter: clamp(1.25rem, .55rem + 3vw, 4.5rem);
    --dc-max: 1360px;
    --dc-ease: cubic-bezier(.22, .61, .36, 1);
    --dc-header-h: 5.25rem;
    --dc-cta-h: 3.5rem;
    --dc-radius: 12px;
}

/* ==========================================================================
   Base
   ========================================================================== */

/* The base stylesheet resets margin/padding but not the box model; without
   this every padded full-width element is wider than the viewport. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* --- top surface ---
   PHP stamps the surface of the first section on the page onto the body, and
   the header wears it too: utility bar, main bar and hero then share one
   background so the page opens as a single sheet of colour instead of a white
   bar resting on a tinted hero. Because it sits on the body the colour also
   fills the overscroll bounce above the header.
   Dark sections are deliberately not mapped — the header's type and icons are
   drawn for a light background, so an 'ink' first section keeps a white bar. */
.dc-top-white { --dc-top-surface: #fff; }
.dc-top-cream { --dc-top-surface: var(--dc-cream); }
.dc-top-sand { --dc-top-surface: var(--dc-sand); }
.dc-top-mist { --dc-top-surface: var(--dc-mist); }
.dc-top-moss { --dc-top-surface: var(--dc-moss); }

body {
    font-family: var(--dc-font-body);
    color: var(--dc-ink);
    background: var(--dc-top-surface, #fff);
    overflow-x: hidden;
}

#app {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.dc-main {
    display: block;
}

img,
video,
iframe {
    max-width: 100%;
}

.screen-reader-text,
.dc-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dc-skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--dc-ink);
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}

.dc-skip-link:focus {
    top: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--dc-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   Buttons (chrome only — sections style their own)
   ========================================================================== */

.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.875rem;
    padding: .625rem 1.375rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--dc-font-body);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.dc-btn--primary {
    background: var(--dc-blue-deep);
    color: #fff;
}

.dc-btn--primary:hover,
.dc-btn--primary:focus-visible {
    background: var(--dc-ink);
    color: #fff;
    transform: translateY(-1px);
}

.dc-btn--ghost {
    background: transparent;
    color: var(--dc-ink);
    border-color: rgba(22, 40, 47, .2);
}

.dc-btn--ghost:hover,
.dc-btn--ghost:focus-visible {
    background: var(--dc-ink);
    border-color: var(--dc-ink);
    color: #fff;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* The header scrolls away with the page — the sticky CTA bar at the bottom
   carries phone and booking once the hero is out of view. It keeps its
   stacking context so the mobile drawer layers correctly against it. */
.dc-header {
    position: relative;
    z-index: 100;
    background: var(--dc-top-surface, #fff);
}

/* Both bars stay above the fixed mobile drawer so the logo and the close
   button remain visible and tappable while the menu is open. */
.dc-header__utility,
.dc-header__bar {
    position: relative;
    z-index: 95;
}

/* --- utility bar ---
   Deliberately chrome-free: no background and no divider, so the USP row reads
   as part of the page instead of a second bar stacked on the header. */
.dc-header__utility {
    background: transparent;
    border: 0;
    color: var(--dc-ink-3);
    font-size: .8125rem;
}

/* Same width formula as the .tch-shell the sections use, so the header
   content sits on the exact edges of the hero instead of a gutter inside
   them: the shell caps at --dc-max first and only then subtracts the
   gutter, where padding on a max-width box subtracts it twice over. */
.dc-header__utility-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    width: min(var(--dc-max), 100% - 2 * var(--dc-gutter));
    margin-inline: auto;
    padding-block: .5rem;
}

/* --- usps --- */
.dc-usps {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-usp {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1.4;
    white-space: nowrap;
}

.dc-usp__icon {
    flex: none;
    color: var(--dc-blue);
}

/* --- google reviews --- */
.dc-greview {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: inherit;
    line-height: 1.4;
    white-space: nowrap;
}

.dc-greview:hover .dc-greview__score,
.dc-greview:hover .dc-greview__count {
    color: var(--dc-blue-deep);
}

.dc-greview__logo {
    display: inline-flex;
    flex: none;
}

.dc-greview__logo svg {
    display: block;
}

.dc-greview__stars {
    position: relative;
    display: inline-flex;
    flex: none;
    color: #D8D2C7;
}

.dc-greview__stars-track,
.dc-greview__stars-fill {
    display: inline-flex;
    gap: 1px;
}

.dc-greview__stars-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--dc-star-fill, 100%);
    overflow: hidden;
    color: #FBBC05;
}

.dc-greview__stars svg {
    display: block;
}

.dc-greview__score {
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-greview__count {
    color: var(--dc-ink-3);
}

/* --- main bar --- */
.dc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(var(--dc-max), 100% - 2 * var(--dc-gutter));
    margin-inline: auto;
    padding-block: .75rem;
    min-height: var(--dc-header-h);
}

.dc-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.dc-brand__mark {
    display: block;
    width: auto;
    height: 2.375rem;
    max-height: 2.375rem;
    object-fit: contain;
}

.dc-brand__name {
    display: flex;
    flex-direction: column;
    font-family: var(--dc-font-display);
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.dc-brand__name-strong {
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-brand__name-soft {
    font-weight: 500;
    color: var(--dc-ink-3);
}

.dc-brand__logo {
    display: block;
    width: auto;
    height: 3.25rem;
    max-height: 3.25rem;
    object-fit: contain;
}

.dc-brand__text {
    font-family: var(--dc-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--dc-ink);
    max-width: 14rem;
    line-height: 1.15;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.dc-nav__list {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Label and chevron must share one line; as shrinkable flex items they would
   otherwise wrap and double the header height. */
.dc-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.dc-nav__link {
    display: inline-flex;
    align-items: center;
    padding: .625rem .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--dc-ink-2);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: color .25s ease, background-color .25s ease;
}

/* Seven top-level items plus a brand and a CTA is a full bar; the phone
   number is dropped first — it stays one tap away in the utility bar. */
@media (max-width: 1400px) {
    .dc-header__phone {
        display: none;
    }

    .dc-header__inner {
        gap: 1rem;
    }
}

.dc-nav__link:hover,
.dc-nav__link.is-current {
    color: var(--dc-ink);
    background: var(--dc-sand);
}

.dc-nav__item--parent > .dc-nav__link {
    padding-right: .375rem;
}

.dc-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--dc-ink-3);
    cursor: pointer;
    transition: transform .3s var(--dc-ease), color .25s ease;
}

.dc-nav__toggle[aria-expanded="true"] {
    transform: rotate(180deg);
    color: var(--dc-ink);
}

/* --- mega menu ---
   A dropdown of bare links makes a visitor guess; the panel answers with an
   intro, the links in columns, an image, the practice's proof points and one
   action. The card sits on .dc-mega__inner so the wrapper stays transparent
   and can bridge the gap between the nav item and the panel. */
.dc-nav__mega {
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .28s var(--dc-ease), visibility .28s;
}

.dc-nav__item--parent:hover > .dc-nav__mega,
.dc-nav__item--parent:focus-within > .dc-nav__mega,
.dc-nav__toggle[aria-expanded="true"] + .dc-nav__mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dc-mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    gap: clamp(1.5rem, 1rem + 1.4vw, 2.75rem);
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: 16px;
    box-shadow: 0 28px 60px rgba(22, 40, 47, .16);
}

.dc-mega__intro {
    margin: 0 0 1.125rem;
    max-width: 52ch;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--dc-ink-3);
}

/* Capped at a readable column width: stretched across the whole panel the two
   columns drift so far apart they stop reading as one list. */
.dc-mega__links {
    display: grid;
    grid-template-columns: repeat(var(--dc-mega-cols, 2), minmax(0, 1fr));
    gap: .25rem 1.5rem;
    /* One column gets a wider cap than half of two: a single column of links
       with a description under each needs the room, and there is nothing
       beside it to drift away from. */
    max-width: max(26rem, calc(var(--dc-mega-cols, 2) * 20rem));
    /* The gap the overview link keeps from the last link even when it is not
       pushed to the foot of the panel. */
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

/* Icon, then label: the drawing is a second way to recognise a link, so it
   sits on the reading edge where the eye lands first. It is a fixed column so
   the labels of a whole panel line up whatever the icon inside it is. */
.dc-mega__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .2s ease;
}

/* A link with a description is two lines tall; the icon then belongs beside
   the title rather than centred against the whole block. */
.dc-mega__link:has(.dc-mega__link-text) {
    align-items: start;
}

.dc-mega__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--dc-sand);
    color: var(--dc-blue-deep);
    transition: background-color .2s ease, color .2s ease;
}

.dc-mega__link:has(.dc-mega__link-text) .dc-mega__link-icon {
    margin-top: .05rem;
}

.dc-mega__link-icon svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.dc-mega__link-body {
    display: block;
    min-width: 0;
}

.dc-mega__link-title {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dc-ink);
    transition: color .2s ease;
}

.dc-mega__link-text {
    display: block;
    margin-top: .125rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--dc-ink-3);
}

.dc-mega__link:hover,
.dc-mega__link:focus-visible {
    background: var(--dc-mist);
}

.dc-mega__link:hover .dc-mega__link-title,
.dc-mega__link:focus-visible .dc-mega__link-title,
.dc-mega__link.is-current .dc-mega__link-title {
    color: var(--dc-blue-deep);
}

/* The tile fills in on hover: the sand tile would disappear into the row's
   own hover background, and the flip is what makes the row feel picked up. */
.dc-mega__link:hover .dc-mega__link-icon,
.dc-mega__link:focus-visible .dc-mega__link-icon,
.dc-mega__link.is-current .dc-mega__link-icon {
    background: var(--dc-blue);
    color: #fff;
}

.dc-mega__link.is-current {
    background: var(--dc-sand);
}

/* A column, so the overview link can be pushed to the foot of the panel
   rather than left hanging under a short list of links. */
.dc-mega__main {
    display: flex;
    flex-direction: column;
}

/* Set as a block-level flex row so the rule above it spans the whole column
   while the label itself stays left-aligned. */
.dc-mega__all {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--dc-line);
    font-size: .875rem;
    font-weight: 600;
    color: var(--dc-blue-deep);
    text-decoration: none;
}

.dc-mega__all svg {
    flex: none;
    transition: transform .25s var(--dc-ease);
}

.dc-mega__all:hover svg,
.dc-mega__all:focus-visible svg {
    transform: translateX(3px);
}

.dc-mega__promo {
    display: flex;
    flex-direction: column;
    background: var(--dc-sand);
    border-radius: 14px;
    overflow: hidden;
}

.dc-mega__figure {
    flex: 1 1 0;
    min-height: 8.5rem;
    margin: 0;
    background: var(--dc-line);
}

.dc-mega__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-mega__promo-body {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1rem 1.125rem 1.125rem;
}

.dc-mega__promo-title {
    margin: 0;
    font-family: var(--dc-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--dc-ink);
}

.dc-mega__usps {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-mega__usp {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--dc-ink-3);
}

.dc-mega__usp-icon {
    flex: none;
    margin-top: .15rem;
    color: var(--dc-blue);
}

.dc-mega__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .25rem;
}

.dc-mega__cta {
    width: 100%;
}

.dc-mega__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dc-ink);
    text-decoration: none;
    transition: color .25s ease;
}

.dc-mega__phone svg {
    flex: none;
    color: var(--dc-blue);
}

.dc-mega__phone:hover,
.dc-mega__phone:focus-visible {
    color: var(--dc-blue-deep);
}

/* --- mega menu, desktop placement ---
   The panel is anchored to the header bar rather than to its own menu item, so
   it lines up with the container no matter which item opened it. */
@media (min-width: 1360px) {
    /* Full-height items keep :hover alive across the bar's bottom padding on
       the way down to the panel. */
    /* The bar is a three-part flex row; auto margin collapses the slack on the
       brand side so the menu ends up right-aligned, against the actions. */
    .dc-nav {
        align-self: stretch;
        margin-left: auto;
    }

    .dc-nav__list {
        height: 100%;
        align-items: stretch;
    }

    .dc-nav__item--parent {
        position: static;
    }

    .dc-nav__mega {
        position: absolute;
        top: 100%;
        left: 50%;
        width: min(var(--dc-max), 100% - 2 * var(--dc-gutter));
        transform: translate(-50%, -8px);
    }

    .dc-nav__item--parent:hover > .dc-nav__mega,
    .dc-nav__item--parent:focus-within > .dc-nav__mega,
    .dc-nav__toggle[aria-expanded="true"] + .dc-nav__mega {
        transform: translateX(-50%);
    }

    /* A short delay keeps the panel from flashing open when the pointer only
       crosses the item on its way somewhere else. */
    .dc-nav__item--parent:hover > .dc-nav__mega {
        transition-delay: .08s;
    }

    /* Invisible bridge over the bar's bottom padding: it belongs to the panel,
       so the pointer never leaves the item on its way there. */
    .dc-nav__mega::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 100%;
        height: 1.5rem;
    }
}

.dc-nav__mobile-actions {
    display: none;
}

/* --- header actions --- */
/* The drawer is a sibling inside the bar, so logo and burger need to sit
   above it to stay visible and tappable while the menu is open. Neither may
   shrink, or the brand name and buttons start wrapping. */
.dc-header__brand,
.dc-header__actions {
    position: relative;
    z-index: 95;
    flex: 0 0 auto;
}

.dc-header__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.dc-header__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dc-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.dc-header__phone svg {
    color: var(--dc-blue);
}

.dc-header__phone:hover {
    color: var(--dc-blue-deep);
}

.dc-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--dc-line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--dc-ink);
}

/* --- burger icon ---
   A molar outline instead of the generic three bars: the lines inside the
   crown keep the "this opens a menu" reading, the silhouette says dentist.
   Menu and close are two stacked SVGs that cross-fade on aria-expanded, so
   the state lives entirely in the attribute the script already toggles. */
.dc-burger__icon {
    position: relative;
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}

.dc-burger__icon svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .2s ease, transform .3s var(--dc-ease);
}

.dc-burger__tooth {
    color: var(--dc-blue);
}

.dc-burger__close {
    opacity: 0;
    transform: rotate(-90deg) scale(.7);
}

.dc-burger:hover .dc-burger__tooth {
    color: var(--dc-blue-deep);
}

.dc-burger[aria-expanded="true"] .dc-burger__tooth {
    opacity: 0;
    transform: scale(.7);
}

.dc-burger[aria-expanded="true"] .dc-burger__close {
    opacity: 1;
    transform: none;
}

/* --- tablet / mobile nav ---
   Seven top-level items need roughly 1310px of bar; below that the drawer is
   the better pattern, so it starts well above the usual tablet breakpoint. */
@media (max-width: 1359px) {
    .dc-usp--last {
        display: none;
    }

    .dc-brand__name {
        font-size: .9375rem;
    }

    .dc-burger {
        display: inline-flex;
    }

    .dc-header__cta,
    .dc-header__phone {
        display: none;
    }

    .dc-nav {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        padding: calc(var(--dc-header-h) + 3.25rem) var(--dc-gutter) 2.5rem;
        /* The drawer opens out of the header, so it carries the same surface —
           a white panel under a tinted bar reads as a seam. */
        background: var(--dc-top-surface, #fff);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-1rem);
        transition: opacity .3s ease, transform .35s var(--dc-ease), visibility .3s;
    }

    .dc-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .dc-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .dc-nav__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        align-items: center;
        border-bottom: 1px solid var(--dc-line);
    }

    .dc-nav__item--child {
        border-bottom: 0;
    }

    .dc-nav__link {
        padding: .9375rem 0;
        font-size: 1.125rem;
        font-weight: 600;
        border-radius: 0;
        min-height: 3rem;
    }

    .dc-nav__link:hover,
    .dc-nav__link.is-current {
        background: none;
        color: var(--dc-blue-deep);
    }

    .dc-nav__toggle {
        width: 2.75rem;
        height: 2.75rem;
        justify-self: end;
    }

    /* In the drawer the panel is an accordion: the toggle is the only thing
       that opens it, so hover and focus must not. */
    .dc-nav__mega {
        position: static;
        display: none;
        grid-column: 1 / -1;
        margin: 0 0 1rem;
        padding: 0 0 0 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .dc-nav__toggle[aria-expanded="true"] + .dc-nav__mega {
        display: block;
    }

    .dc-nav__item--parent:hover > .dc-nav__mega,
    .dc-nav__item--parent:focus-within > .dc-nav__mega {
        display: none;
    }

    .dc-nav__item--parent:has(.dc-nav__toggle[aria-expanded="true"]) > .dc-nav__mega {
        display: block;
    }

    .dc-mega__inner {
        display: block;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* The drawer is already a long scroll; the intro is the first thing that
       can go without costing the visitor a link. */
    .dc-mega__intro {
        display: none;
    }

    .dc-mega__links {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: none;
        margin-bottom: 0;
    }

    .dc-mega__link {
        gap: .625rem;
        padding: .5rem 0;
        min-height: 2.75rem;
        border-radius: 0;
    }

    .dc-mega__link:hover,
    .dc-mega__link:focus-visible,
    .dc-mega__link.is-current {
        background: none;
    }

    /* In the drawer the row has no background to lift, so the tile keeps its
       sand fill and only the ink changes. */
    .dc-mega__link:hover .dc-mega__link-icon,
    .dc-mega__link:focus-visible .dc-mega__link-icon,
    .dc-mega__link.is-current .dc-mega__link-icon {
        background: var(--dc-mist);
        color: var(--dc-blue-deep);
    }

    .dc-mega__link-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 9px;
    }

    .dc-mega__link-icon svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .dc-mega__link-title {
        font-size: 1rem;
        font-weight: 500;
    }

    .dc-mega__all {
        margin-top: .5rem;
        padding-top: .75rem;
        font-size: .9375rem;
    }

    .dc-mega__promo {
        margin-top: 1rem;
    }

    .dc-mega__figure {
        flex: none;
        aspect-ratio: 16 / 9;
    }

    .dc-nav__mobile-actions {
        display: grid;
        gap: .625rem;
        margin-top: 2rem;
    }

    .dc-nav__mobile-actions .dc-btn {
        width: 100%;
        min-height: 3.125rem;
        font-size: 1rem;
    }

    body.dc-nav-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   Footer
   A white band that continues the page instead of closing it with a dark slab.
   Layout: a wide brand column (logo, tagline, rating, socials) plus two menus
   and the contact channels on the left, and a bordered "visit us" card with
   the map, address and opening hours on the right.
   ========================================================================== */

.dc-footer {
    background: #fff;
    border-top: 1px solid var(--dc-line);
    color: var(--dc-ink-3);
    font-size: .9375rem;
    line-height: 1.6;
}

.dc-footer__inner {
    width: 100%;
    max-width: var(--dc-max);
    margin-inline: auto;
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--dc-gutter) 1.5rem;
}

.dc-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* The brand column is deliberately the widest: it carries the logo, the
   tagline, the proof points, the rating and the socials, so the left of the
   footer reads as a block of content rather than a column of leftover links.
   Contact is the runner-up — the e-mail address must not wrap mid-word. */
.dc-footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 2.75rem 2rem;
}

.dc-footer__brand {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 1.25rem;
}

.dc-brand--footer .dc-brand__logo {
    height: 4.25rem;
    max-height: 4.25rem;
    width: auto;
}

.dc-brand--footer .dc-brand__text {
    color: var(--dc-ink);
    font-family: var(--dc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.dc-footer__tagline {
    margin: 0;
    max-width: 26rem;
    color: var(--dc-ink-3);
}

/* --- proof points --- */
.dc-footer__usps {
    display: grid;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-footer__usp {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    line-height: 1.45;
}

.dc-footer__usp svg {
    flex: none;
    margin-top: .2rem;
    color: var(--dc-blue);
}

/* --- google rating --- */
.dc-greview--footer {
    padding: .5rem .875rem;
    background: var(--dc-cream);
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    transition: border-color .25s ease, background-color .25s ease;
}

.dc-greview--footer:hover,
.dc-greview--footer:focus-visible {
    background: #fff;
    border-color: var(--dc-blue-soft);
}

/* --- socials ---
   Resting state is monochrome so five logos never fight each other; the brand
   colour only appears on hover, passed in per link as --dc-social. */
.dc-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    color: var(--dc-ink-2);
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: 50%;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.dc-footer__social:hover,
.dc-footer__social:focus-visible {
    color: #fff;
    background: var(--dc-social, var(--dc-ink));
    border-color: var(--dc-social, var(--dc-ink));
    transform: translateY(-2px);
}

.dc-footer__social svg {
    display: block;
}

/* --- headings & menus --- */
.dc-footer__heading {
    margin: 0 0 1.25rem;
    font-family: var(--dc-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-ink);
}

.dc-footer__heading::after {
    content: "";
    display: block;
    width: 1.75rem;
    height: 2px;
    margin-top: .625rem;
    background: var(--dc-blue-soft);
    border-radius: 2px;
}

.dc-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .125rem;
}

/* Comfortable tap targets — this site is used by older visitors too. */
.dc-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--dc-ink-3);
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}

.dc-footer__list a:hover,
.dc-footer__list a:focus-visible {
    color: var(--dc-blue-deep);
    transform: translateX(2px);
}

/* --- contact channels --- */
.dc-footer__contact {
    display: grid;
    gap: .875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.dc-footer__contact-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--dc-blue-deep);
    background: var(--dc-mist);
    border-radius: 10px;
}

.dc-footer__contact-body {
    display: grid;
    gap: .0625rem;
    min-width: 0;
}

.dc-footer__contact-label {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dc-ink-4);
}

.dc-footer__contact-value {
    color: var(--dc-ink);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}

.dc-footer__contact-value:hover,
.dc-footer__contact-value:focus-visible {
    color: var(--dc-blue-deep);
}

.dc-footer__cta {
    margin-top: 1.5rem;
}

/* --- visit card --- */
.dc-footer__visit {
    display: grid;
    align-content: start;
    gap: 1.125rem;
    padding: 1.25rem;
    background: var(--dc-cream);
    border: 1px solid var(--dc-line);
    border-radius: 18px;
}

/* Muted by default so the map sits behind the content; it comes to full
   colour on hover, when the visitor is actually looking at it. */
.dc-footer__map {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--dc-sand);
    border: 1px solid var(--dc-line);
    border-radius: 12px;
    overflow: hidden;
}

.dc-footer__map iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) contrast(.92);
    transition: filter .4s var(--dc-ease);
}

.dc-footer__map:hover iframe,
.dc-footer__map:focus-within iframe {
    filter: none;
}

.dc-footer__visit-info {
    display: grid;
    align-content: start;
    gap: 1.125rem;
}

.dc-footer__address {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-style: normal;
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-footer__address-icon {
    flex: none;
    display: inline-flex;
    color: var(--dc-blue-deep);
    margin-top: .125rem;
}

.dc-footer__address-line {
    display: block;
}

.dc-footer__hours {
    margin: 0;
    display: grid;
    gap: .125rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--dc-line);
}

.dc-footer__hours dt {
    color: var(--dc-ink-4);
    font-size: .8125rem;
}

.dc-footer__hours dd {
    margin: 0 0 .625rem;
    color: var(--dc-ink);
    font-weight: 600;
}

.dc-footer__hours dd:last-of-type {
    margin-bottom: 0;
}

.dc-footer__hours dd span {
    display: block;
}

.dc-footer__route {
    justify-content: center;
    width: 100%;
    background: #fff;
}

/* --- bottom bar --- */
.dc-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dc-line);
}

.dc-footer__copy {
    margin: 0;
    font-size: .8125rem;
    color: var(--dc-ink-4);
}

.dc-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-footer__legal-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: .8125rem;
    color: var(--dc-ink-4);
    text-decoration: none;
    transition: color .25s ease;
}

.dc-footer__legal-list a:hover,
.dc-footer__legal-list a:focus-visible {
    color: var(--dc-blue-deep);
}

.dc-footer__credit {
    margin: 0;
    font-size: .8125rem;
    color: var(--dc-ink-4);
}

.dc-footer__credit a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    transition: color .25s ease;
}

.dc-footer__credit a:hover,
.dc-footer__credit a:focus-visible {
    color: var(--dc-blue-deep);
}

/* Below the wide layout the visit card turns on its side — map beside the
   address — so it stays a card instead of a very tall stack. */
@media (max-width: 1180px) {
    .dc-footer__main {
        grid-template-columns: minmax(0, 1fr);
    }

    .dc-footer__visit {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "map info";
        gap: 1.25rem 1.5rem;
        padding: 1.5rem;
    }

    .dc-footer__visit > .dc-footer__heading {
        grid-area: title;
        margin-bottom: 0;
    }

    .dc-footer__map {
        grid-area: map;
        aspect-ratio: 16 / 10;
    }

    .dc-footer__visit-info {
        grid-area: info;
    }
}

/* The brand block takes the full width from here down and the three remaining
   columns share the row, so the menus never sit beside an empty cell. */
@media (max-width: 980px) {
    .dc-footer__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dc-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .dc-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The utility bar is a convenience, not a container to squeeze: the USPs drop
   away one by one and below tablet only the Google rating is left. */
@media (max-width: 1100px) {
    .dc-usp:nth-child(2) {
        display: none;
    }
}

/* Below this the USP row is already gone and the utility bar is a single lone
   review badge above the logo — on a phone that reads as clutter, so the whole
   bar steps aside and the header starts at the logo. The Google rating still
   lives in the footer. */
@media (max-width: 860px) {
    .dc-header__utility {
        display: none;
    }

    .dc-greview {
        min-height: 2rem;
    }
}

@media (max-width: 480px) {
    .dc-greview__count {
        display: none;
    }
}

@media (max-width: 480px) {
    .dc-brand__mark {
        height: 2rem;
    }

    .dc-brand__name {
        font-size: .875rem;
    }
}

@media (max-width: 380px) {
    .dc-brand__name {
        font-size: .8125rem;
    }

    .dc-brand__mark {
        height: 1.75rem;
    }
}

@media (max-width: 720px) {
    /* No room for map and text side by side — the card goes back to a stack. */
    .dc-footer__visit {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "map"
            "info";
    }

    .dc-footer__map {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 560px) {
    .dc-footer__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
    }

    .dc-footer__inner {
        padding-top: 3rem;
    }

    .dc-footer__cta {
        width: 100%;
    }

    .dc-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
}

/* ==========================================================================
   Global sticky footer CTA — expandable bottom bar
   Logo + phone + Reserveer nu + WhatsApp, collapsible. Hidden until the hero
   has scrolled out of view; JavaScript adds .is-visible / .is-collapsed.
   ========================================================================== */

/* Not a full-width band: the bar shrinks to its contents and parks against
   the right gutter, so it covers as little of the page as possible. It stays
   anchored to the bottom edge, which keeps the collapse transform exact. */
.dc-cta-bar {
    position: fixed;
    left: auto;
    right: var(--dc-gutter);
    bottom: 0;
    width: max-content;
    max-width: calc(100% - (var(--dc-gutter) * 2));
    /* Below the mobile drawer (90) so the open menu covers the bar, and below
       the header (100) so nothing fights over the top of the page. */
    z-index: 85;
    background: #fff;
    border: 1px solid var(--dc-line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 34px rgba(22, 40, 47, .1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(calc(100% + 4rem));
    opacity: 0;
    visibility: hidden;
    transition: transform .45s var(--dc-ease), opacity .3s ease, visibility 0s linear .45s;
}

.dc-cta-bar.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform .45s var(--dc-ease), opacity .3s ease, visibility 0s;
}

/* Collapsed slides the bar exactly one bar-height down, which parks the
   toggle tab — anchored to the bar's top edge — on the viewport floor. */
.dc-cta-bar.is-visible.is-collapsed {
    transform: translateY(100%);
    box-shadow: none;
}

.dc-cta-bar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    width: auto;
    min-height: var(--dc-cta-h);
    padding: .5rem .875rem;
    transition: visibility 0s;
}

/* Hidden rather than merely off-screen so collapsed links leave the tab order.
   The delay lets the slide finish before the content disappears. */
.dc-cta-bar.is-collapsed .dc-cta-bar__inner {
    visibility: hidden;
    transition: visibility 0s linear .45s;
}

/* --- toggle tab --- */
.dc-cta-bar__toggle {
    position: absolute;
    right: .875rem;
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 1.875rem;
    padding: 0;
    background: #fff;
    color: var(--dc-ink-2);
    border: 1px solid var(--dc-line);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease;
}

.dc-cta-bar__toggle:hover,
.dc-cta-bar__toggle:focus-visible {
    background: var(--dc-mist);
    color: var(--dc-ink);
}

.dc-cta-bar__chevron {
    transition: transform .35s var(--dc-ease);
}

.dc-cta-bar.is-collapsed .dc-cta-bar__chevron {
    transform: rotate(180deg);
}

/* --- brand --- */
.dc-cta-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: .25rem;
    text-decoration: none;
    flex-shrink: 0;
}

.dc-cta-bar__mark {
    display: block;
    width: auto;
    height: 1.75rem;
    max-height: 1.75rem;
    object-fit: contain;
}

.dc-cta-bar__brand-name {
    display: flex;
    flex-direction: column;
    font-family: var(--dc-font-display);
    font-size: .875rem;
    line-height: 1.15;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.dc-cta-bar__brand-strong {
    font-weight: 700;
    color: var(--dc-ink);
}

.dc-cta-bar__brand-soft {
    font-weight: 500;
    color: var(--dc-ink-3);
}

/* --- actions --- */
.dc-cta-bar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dc-cta-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    min-height: 2.375rem;
    padding: .375rem .75rem;
    color: var(--dc-ink);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color .3s ease, color .3s ease;
}

.dc-cta-bar__phone:hover,
.dc-cta-bar__phone:focus-visible {
    background: var(--dc-mist);
    color: var(--dc-blue-deep);
}

/* The bar's own buttons sit a size below the page buttons — the bar is
   chrome, not a section, so it stays out of the way. */
.dc-cta-bar__book {
    min-height: 2.375rem;
    padding: .5rem 1rem;
    font-size: .875rem;
}

.dc-cta-bar__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    min-height: 2.375rem;
    padding: .5rem .875rem;
    background: #25D366;
    color: #0B2F1A;
    font-family: var(--dc-font-body);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 999px;
    transition: background-color .3s ease, transform .3s ease;
}

.dc-cta-bar__wa:hover,
.dc-cta-bar__wa:focus-visible {
    background: #1EBE5A;
    transform: translateY(-1px);
}

/* The bar overlaps the page while it is visible; the footer keeps a band of
   its own height free so the legal row is never covered. */
.dc-footer {
    padding-bottom: var(--dc-cta-h);
}

@media (max-width: 900px) {
    .dc-cta-bar__brand-name {
        display: none;
    }
}

/* Phones have no room to spare beside the bar, so below tablet it goes back
   to the full-width band it was, with the actions filling the row. */
@media (max-width: 720px) {
    .dc-cta-bar {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .dc-cta-bar__toggle {
        right: var(--dc-gutter);
    }

    .dc-cta-bar__inner {
        gap: .75rem;
        padding-inline: var(--dc-gutter);
    }

    .dc-cta-bar__actions {
        flex: 1;
        justify-content: flex-end;
    }

    /* Below tablet the number itself is redundant — the icon is the tap
       target and the label eats the room the booking button needs. */
    .dc-cta-bar__phone-number,
    .dc-cta-bar__wa-label {
        display: none;
    }

    .dc-cta-bar__phone,
    .dc-cta-bar__wa {
        width: 2.625rem;
        min-width: 2.625rem;
        min-height: 2.625rem;
        padding: 0;
        border-radius: 50%;
    }

    .dc-cta-bar__phone {
        background: var(--dc-mist);
        color: var(--dc-blue-deep);
    }

    .dc-cta-bar__book {
        flex: 1;
        max-width: 14rem;
        min-height: 2.625rem;
    }
}

/* On phones the logo costs 90px the booking button needs more; the brand is
   already in the header and the footer, so the actions get the whole bar. */
@media (max-width: 560px) {
    .dc-cta-bar__brand {
        display: none;
    }

    .dc-cta-bar__actions {
        width: 100%;
    }

    .dc-cta-bar__book {
        max-width: none;
    }
}

/* ==========================================================================
   Elementor — full width sections
   The homepage builds its own edge-to-edge sections, so no boxed container,
   no default section padding and no theme content width may interfere.
   ========================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
}

.elementor-widget-wrap {
    padding: 0 !important;
}

body.elementor-page .dc-main > .elementor,
body.elementor-page .elementor > .elementor-element,
.elementor > .e-con,
.elementor > .elementor-section {
    max-width: 100%;
}

/* Containers used by the homepage: full-bleed rows with no own spacing. */
.e-con.dc-section-row,
.e-con.dc-section-row > .e-con-inner {
    --container-max-width: 100%;
    --content-width: 100%;
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    --margin-block-start: 0px;
    --margin-block-end: 0px;
    --margin-inline-start: 0px;
    --margin-inline-end: 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    max-width: 100%;
    width: 100%;
}

.dc-section-row > .e-con-inner > .elementor-element,
.dc-section-row > .elementor-element {
    width: 100%;
    max-width: 100%;
}

/* The section widgets provide their own <section> element. */
.dc-section-row .elementor-widget-container {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Content pages (non-Elementor) — readable defaults
   ========================================================================== */

.page-wrapper {
    padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) var(--dc-gutter) clamp(3.5rem, 2.4rem + 4vw, 6rem);
}

.page-content-wrapper {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

.page-content-wrapper :is(h1, h2, h3, h4) {
    font-family: var(--dc-font-display);
    letter-spacing: -.02em;
    margin: 2rem 0 .75rem;
}

.page-content-wrapper > :first-child {
    margin-top: 0;
}

.page-content-wrapper h1 {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
}

.page-content-wrapper h2 {
    font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
}

.page-content-wrapper h3 {
    font-size: clamp(1.25rem, 1.12rem + .6vw, 1.5rem);
}

.page-content-wrapper p,
.page-content-wrapper li {
    color: var(--dc-ink-2);
    line-height: 1.75;
}

.page-content-wrapper ul,
.page-content-wrapper ol {
    padding-left: 1.25rem;
    margin: 0 0 1.25rem;
}

.page-content-wrapper li {
    margin-bottom: .375rem;
}

.page-content-wrapper a {
    color: var(--dc-blue-deep);
}

.page-content-wrapper table {
    width: 100%;
    margin: 0 0 1.5rem;
    border-collapse: collapse;
    text-align: left;
}

.page-content-wrapper :is(th, td) {
    padding: .75rem 1rem .75rem 0;
    border-bottom: 1px solid var(--dc-line);
    vertical-align: top;
}

.page-content-wrapper th {
    font-weight: 600;
}

/* ==========================================================================
   Contact Form 7
   ========================================================================== */

.wpcf7 {
    margin-top: 2.5rem;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
    background: var(--dc-cream);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
}

.wpcf7 h2 {
    margin: 2rem 0 1rem;
    font-family: var(--dc-font-display);
    font-size: 1.125rem;
    letter-spacing: -.01em;
}

.wpcf7 h2:first-child {
    margin-top: 0;
}

.tch-form__row {
    display: grid;
    gap: .375rem;
    margin: 0 0 1.125rem;
}

.tch-form__row label {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dc-ink);
}

.tch-form__row label span[aria-hidden] {
    color: var(--dc-blue-deep);
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea) {
    width: 100%;
    padding: .75rem .875rem;
    min-height: 3rem;
    font-family: var(--dc-font-body);
    font-size: 1rem;
    color: var(--dc-ink);
    background: #fff;
    border: 1px solid var(--dc-line);
    border-radius: 8px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.wpcf7 :is(input, textarea):focus {
    outline: none;
    border-color: var(--dc-blue);
    box-shadow: 0 0 0 3px rgba(46, 127, 166, .18);
}

.wpcf7 textarea {
    min-height: 8rem;
    resize: vertical;
}

.wpcf7 .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wpcf7 .wpcf7-list-item {
    margin: 0;
}

.wpcf7 .wpcf7-list-item-label {
    margin-left: .375rem;
}

.tch-form__note {
    margin: 1.25rem 0;
    padding: .875rem 1.125rem;
    background: var(--dc-mist);
    border-radius: 8px;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--dc-ink-2);
}

.wpcf7 .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.125rem;
    padding: .75rem 2rem;
    background: var(--dc-blue-deep);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--dc-font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s ease, transform .3s ease;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus-visible {
    background: var(--dc-ink);
    transform: translateY(-1px);
}

.wpcf7 .wpcf7-not-valid-tip {
    margin-top: .25rem;
    font-size: .875rem;
    color: #B3261E;
}

.wpcf7 .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: .875rem 1.125rem;
    border-radius: 8px;
    font-size: .9375rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}