/* Hallmark · v2.0.0 · theme: Dusk (by request) · genre: modern-minimal · redesign: restyle · dusk: existing photos/graphite-sage-apricot/glass · signature: exchange rates on smoked glass */
/* critique: The existing photographs carry the atmosphere; a local scrim protects the headline and the rate rows sit on one readable surface. */
:root {
    --font-ui: "Wix Madefor Text", "Segoe UI", Arial, sans-serif;
    --font-display: "Wix Madefor Display", var(--font-ui);
    --bg: #161a1b;
    --bg-strong: #161a1b;
    --header-glass: #161a1bb3;
    --panel: #1c2223;
    --panel-strong: #272e2f;
    --border: #e5edeb26;
    --border-strong: #e5edeb42;
    --text: #f6f3f0;
    --muted: #b9c2c0;
    --muted-strong: #d5dddb;
    --text-on-image: var(--text);
    --text-on-image-muted: var(--muted-strong);
    --accent: #b5cdb1;
    --accent-strong: #d2e2ce;
    --accent-fill: #2b3735;
    --accent-fill-hover: #384744;
    --accent-fill-border: #697e77;
    --accent-ink: #f2f7ef;
    --accent-soft: #b5cdb120;
    --apricot: #ffd1a8;
    --glass: #1a2223db;
    --scrim: #161a1be8;
    --scrim-soft: #161a1b66;
    --glint: #e4edeb40;
    --surface-shadow: 0 20px 44px #080c0d80;
    --text-shadow: 0 2px 14px #0a0e0f;
    --radius-lg: 18px;
    --radius-pill: 999px;
}

html, body { overflow-x: clip; }
body { background: var(--bg); }
body::before, body::after { content: none; }

.header {
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--border);
}

.section--bg::before {
    background-image: var(--section-bg-image, none);
    background-blend-mode: normal;
}

.section--bg::after {
    background: linear-gradient(180deg, var(--bg), var(--scrim-soft) 32%, var(--scrim-soft) 65%, var(--bg));
}

.section--bg-hero::after {
    background:
        radial-gradient(ellipse at 12% 48%, var(--scrim), transparent 75%),
        linear-gradient(180deg, var(--scrim-soft), transparent 28%, var(--scrim-soft) 78%, var(--bg));
}

.hero__title, .section__title, .app-card__title, .calc-modal__title, .call-modal__title {
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.022em;
}

.hero__title, .section__title {
    text-shadow: var(--text-shadow);
    text-wrap: balance;
}
.hero__title-accent { color: inherit; }

.section--bg .hero__subtitle, .section--bg .section__subtitle {
    color: var(--text-on-image-muted);
    text-shadow: var(--text-shadow);
}

.panel, .step, .app-card {
    background: var(--panel);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--surface-shadow);
    border-radius: var(--radius-lg);
}

.mobile-menu__panel {
    background: var(--bg-strong);
    color: var(--text);
    border-left-color: var(--border);
}

.hero__rates-card {
    background: var(--glass);
    border-top-color: var(--glint);
    box-shadow: inset 0 1px 0 var(--glint), var(--surface-shadow);
    backdrop-filter: blur(20px);
}

.hero__rates-time {
    color: var(--muted-strong);
    border: 0;
}

.hero__rates-time-dot { display: none; }
.hero__rates-time.is-unavailable { color: var(--apricot); }

.rates-table td { border-color: var(--border); }
.rates-table__label { display: none; }
.rates-table th, .rates-table__label {
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted-strong);
}

.rates-table th:not(:first-child), .rates-table td:not(:first-child) { text-align: end; }

.rates-table strong, .rates-table td:last-child strong {
    color: var(--text);
    font-size: clamp(1.0625rem, 2vw, 1.4rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rates-table tr[data-rate-row]:hover, .rates-table tr.is-selected { background: var(--accent-soft); }
.rates-table tr.is-selected .rates-table__code { color: var(--accent-strong); }

.btn, .header__phone { border-radius: var(--radius-pill); }
.btn--primary {
    background: var(--accent-fill);
    border-color: var(--accent-fill-border);
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 var(--glint);
}

.btn:active { transform: scale(.98); }

.btn--primary:hover {
    background: var(--accent-fill-hover);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn--ghost, .btn--outline, .chip {
    background: var(--bg-strong);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--ghost:hover, .btn--outline:hover {
    background: var(--panel-strong);
    border-color: var(--accent);
}

.step__number, .contact-row__icon {
    background: var(--accent-soft);
    border-color: var(--border);
    color: var(--accent-strong);
}

.mobile-menu__link.is-current {
    color: var(--accent-strong);
    border-bottom-color: var(--border-strong);
}

.calc-field input, .calc-field select, .segmented { background-color: var(--bg-strong); }
.calc-field input:focus, .calc-field select:focus {
    border-color: var(--accent);
    background-color: var(--panel-strong);
    outline-color: var(--accent);
}

.calc-field:focus-within .calc-field__label { color: var(--accent-strong); }
.calc-result.has-result, .segmented__btn.is-active {
    color: var(--text);
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: none;
}

:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

/* Language choices sit directly on the header and drawer surfaces. */
.lang-switch, .mobile-menu__lang-actions {
    gap: .25rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.lang-switch__btn {
    min-height: 44px;
    padding: 0 .65rem;
    border-radius: var(--radius-pill);
    font-size: .875rem;
}

.lang-switch__btn:hover { color: var(--text); }

.lang-switch__btn.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

@media (max-width: 900px) {
    .rates-table { display: table; }
    .rates-table thead { display: table-header-group; }
    .rates-table tbody { display: table-row-group; }

    .rates-table tr[data-rate-row], .rates-table thead tr {
        display: table-row;
        background: transparent;
        box-shadow: none;
    }

    .rates-table th, .rates-table td { display: table-cell; width: auto; }
    .rates-table th { padding-inline: 0; }

    .rates-table td, .rates-table td + td,
    .rates-table td:first-child, .rates-table td:nth-child(2), .rates-table td:nth-child(3) {
        padding: .65rem 0;
        border: 0;
        border-top: 1px solid var(--border);
    }

    .rates-table th:not(:first-child), .rates-table td:not(:first-child) {
        padding-inline-start: .5rem;
    }

    .rates-table tr.is-selected { background: var(--accent-soft); }
    .rates-table strong, .rates-table td:last-child strong { font-size: 1rem; }
    .rates-table__pair-sub { font-size: .75rem; }
}

@media (max-width: 720px) {
    .hero { padding-top: 1.5rem; }

    .section--bg-hero::after {
        background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim) 35%, var(--scrim-soft) 70%, var(--bg));
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* Each photo frames a different section composition. */
.section[id] {
    scroll-margin-top: 4.5rem;
    padding-block: clamp(3.25rem, 7vw, 7rem);
}

.section .section__header {
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Shade the copy on the photos, fading beyond the text block. */
.section--bg .section__header > div:first-child {
    position: relative;
    isolation: isolate;
}

.section--bg .section__header > div:first-child::before {
    content: "";
    position: absolute;
    inset: -2rem -3rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse, var(--scrim-soft) 40%, transparent 75%);
}

.section .section__title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
    text-wrap: balance;
}

.section__note {
    max-width: 24rem;
    padding: .75rem 0 .75rem 1rem;
    border: 0;
    border-inline-start: 2px solid var(--apricot);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-shadow: var(--text-shadow);
}

.contacts-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.contacts-card {
    background: var(--glass);
    border-top-color: var(--glint);
    backdrop-filter: blur(16px);
}

.contacts-list { gap: 1rem; }
.contact-row { grid-template-columns: auto minmax(0, 1fr); }
.contact-row + .contact-row {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.contact-row__value a {
    display: inline-block;
    padding-block: .3rem;
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    color: var(--accent-strong);
}

.contact-row__value a:hover { text-decoration: underline; }
.contacts-grid .panel__title { font-family: var(--font-display); font-size: 1.375rem; }
.contacts-grid .services-list li + li { padding-top: .75rem; border-top: 1px solid var(--border); }
.contacts-grid .services-list li + li::before { top: 1.3rem; }

.steps {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}

.steps .step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    background: var(--glass);
    border-color: var(--border);
    border-radius: 14px;
    box-shadow: none;
}

.step .step__number {
    grid-row: span 2;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: var(--accent-fill);
    color: var(--accent-ink);
    font: 600 1.125rem/1 var(--font-display);
    font-variant-numeric: tabular-nums;
}

.step .step__title {
    font: 500 1.25rem/1.3 var(--font-display);
    color: var(--text);
    margin-bottom: .35rem;
}

.step .step__text { grid-column: 2; }

#app .app-card {
    max-width: 44rem;
    margin-inline: 0;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border-top-color: var(--glint);
}

#app .app-card__title { font-size: clamp(1.25rem, 3vw, 1.75rem); }
#app .store-buttons .btn { min-height: 44px; }
#app .store-buttons .btn:first-child {
    background: var(--accent-fill);
    border-color: var(--accent-fill-border);
    color: var(--accent-ink);
}

#app .store-buttons .btn:first-child:hover { background: var(--accent-fill-hover); }

@media (min-width: 961px) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .steps .step {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: .75rem;
    }

    .step .step__number { grid-row: auto; }
    .step .step__title { margin-bottom: 0; }
    .step .step__text { grid-column: auto; }
}

@media (max-width: 960px) {
    .contacts-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .section .section__title { font-size: clamp(1.875rem, 7vw, 2.5rem); }
    .section__note { font-size: .875rem; }
    .contacts-card { padding: 1.25rem; }

    .hero__rates-card {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .rates-table tr { border: 0; }

    .hero__rates-header {
        flex-direction: row;
        align-items: baseline;
        gap: .25rem .75rem;
        margin-bottom: .75rem;
    }

    .hero__rates-title { font-size: 1rem; }
    .hero__rates-meta { width: auto; }
    .hero__rates-time { min-height: 0; font-size: .75rem; }
    .hero__rates-time time { min-width: 0; }

    .rates-table { table-layout: fixed; }
    .rates-table th { font-size: .75rem; }
    .rates-table th:not(:first-child) { width: 25%; }

    .rates-table td, .rates-table td + td,
    .rates-table td:first-child, .rates-table td:nth-child(2), .rates-table td:nth-child(3) {
        padding-block: .625rem;
        vertical-align: middle;
    }

    .rates-table__pair { gap: .125rem; }
    .rates-table__pair-main { gap: .375rem; }
    .rates-table__code { letter-spacing: normal; }
    .rates-table__pair-sub {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: clip;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rates-table strong, .rates-table td:last-child strong {
        margin-top: 0;
        font-size: clamp(1.25rem, 5.6vw, 1.375rem);
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    .calc-modal {
        place-items: center;
        padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right))
            max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    }

    .calc-modal__panel {
        width: min(100%, 30rem);
        max-height: calc(100dvh - max(.75rem, env(safe-area-inset-top)) - max(.75rem, env(safe-area-inset-bottom)));
        padding: 1rem;
        border-radius: var(--radius-lg);
        scroll-padding-block: 1rem;
    }

    .calc-modal__header {
        align-items: center;
        gap: .5rem;
        margin-bottom: 1rem;
    }

    .calc-modal__title { font-size: 1.125rem; }
    .calc-modal__subtitle { margin-top: .125rem; font-size: .8125rem; line-height: 1.4; }
    .calc-modal__header .icon-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        background: var(--bg-strong);
        border-color: var(--border);
    }

    .calc-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .calc-grid { display: contents; }
    .calc-form > .calc-field:first-child { grid-column: 1 / -1; }
    .calc-grid > .calc-field:first-child { grid-column: 1 / -1; }
    .calc-field { gap: .375rem; }

    .calc-field input, .calc-field select, .calc-grid .segmented__btn {
        min-width: 0;
        min-height: 44px;
    }

    .calc-field input {
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
    }

    .calc-hint, .calc-result, .calc-meta { grid-column: 1 / -1; }
    .calc-hint { min-height: 0; line-height: 1.4; }

    .calc-result {
        gap: .75rem;
        padding: .75rem 1rem;
        background: var(--bg-strong);
        border-color: var(--border);
    }

    .calc-result__value { font-size: 1.5rem; line-height: 1.2; }
}

/* One green surface family across the page and its controls. */
.chip, .tag {
    border-radius: 12px;
    border-color: var(--border);
    background: var(--bg-strong);
    color: var(--muted-strong);
}

.chip strong { color: var(--text); }

.call-modal__item, .mobile-menu__close, .icon-btn, .menu-toggle {
    border-radius: 12px;
    border-color: var(--border);
    background: var(--bg-strong);
}

.header__phone:hover, .menu-toggle:hover, .icon-btn:hover, .call-modal__item:active {
    background: var(--accent-soft);
    border-color: var(--accent-fill-border);
    color: var(--text);
}

.footer { background: var(--bg); border-color: var(--border); }
.hero__title-accent { color: var(--accent-strong); }

.calc-modal .calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.calc-grid > .calc-field:first-child { grid-column: 1 / -1; }
.calc-modal .calc-hint { min-height: 0; }
.calc-modal .calc-field--receive input {
    background: var(--accent-soft);
    border-color: var(--accent-fill-border);
    color: var(--text);
}

.calc-modal .segmented__btn {
    min-height: 44px;
    white-space: normal;
}

.calc-modal .segmented__btn.is-active { color: var(--accent-strong); }