@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;450;500;600;700&display=swap"); :root {
    --ink: #0C0D10;
    --charcoal: #16181D;
    --graphite: #23262E;
    --slate: #3A3F4A;
    --steel: #7C828E;
    --mist: #B7BCC5;
    --fog: #E6E7EA;
    --paper: #EDF2F5;
    --white: #FFFFFF;
    --coral: #F07858;
    --coral-deep: #DE5A38;
    --coral-soft: #FBEDE7;
    --coral-line: #F5C7B7;
    --ok: #2E9E6B;
    --ok-soft: #E4F4EC;
    --warn: #C9871E;
    --warn-soft: #FBF0DC;
    --danger: #D6483B;
    --danger-soft: #FBE9E7;
    --info: #3A6EA5;
    --bg: var(--paper);
    --surface: var(--white);
    --surface-2: #F7FAFC;
    --surface-sunk: #E5EBEF;
    --text: var(--ink);
    --text-soft: #4A4F59;
    /* --steel (#7C828E) only reaches ~3.5:1 on the paper background,
       and .muted is used for real body copy — darken it to clear 4.5:1. */
    --text-muted: #5F6672;
    --border: #DCE4E9;
    --border-strong: #C9D4DB;
    --ring: var(--coral);
    --on-coral: #FFFFFF;
    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --s9: 96px;
    --s10: 128px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;
    --sh-1: 0 1px 2px rgba(12, 13, 16, .06), 0 1px 1px rgba(12, 13, 16, .04);
    --sh-2: 0 4px 14px rgba(12, 13, 16, .07), 0 2px 4px rgba(12, 13, 16, .05);
    --sh-3: 0 18px 44px rgba(12, 13, 16, .12), 0 6px 14px rgba(12, 13, 16, .06);
    --sh-coral: 0 10px 30px rgba(240, 120, 88, .28);
    --e-out: cubic-bezier(.16, 1, .3, 1);
    --e-in-out: cubic-bezier(.65, 0, .35, 1);
    --t-fast: 160ms;
    --t: 240ms;
    --maxw: 1200px;
    --nav-h: 74px;
    --z-nav: 100;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 700;
}

[data-theme="dark"] {
    --bg: #0A0B0D;
    --surface: #131519;
    --surface-2: #16181D;
    --surface-sunk: #0E1013;
    --text: #F3F3F1;
    --text-soft: #C4C8CF;
    --text-muted: #8B909B;
    --border: #262A31;
    --border-strong: #333842;
    --coral-soft: #241611;
    --coral-line: #4A2A1E;
    --on-coral: #10110F;
}

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

* {
    margin: 0px;
}

html {
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

    *, ::before, ::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 450;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    overflow-x: hidden;
    letter-spacing: -0.006em;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    cursor: pointer;
    background: none;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
}

:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--coral);
    color: rgb(255, 255, 255);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--text);
}

h1 {
    font-size: clamp(2.6rem, 6.5vw, 5rem);
}

h2 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
}

h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    letter-spacing: -0.02em;
}

p {
    text-wrap: pretty;
}

.wrap {
    max-width: var(--maxw);
    margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

.wrap-wide {
    max-width: 1360px;
    margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

.section {
    padding-block: clamp(64px, 9vw, 128px); }

.section-sm {
    padding-block: clamp(48px, 6vw, 80px); }

.stack > * + * {
    margin-top: var(--s5);
}

.eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* currentColor so the rule adapts to whatever surface the eyebrow sits on.
       Dark surfaces override this to white/coral further down. */
    color: var(--coral-deep);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
    display: inline-block;
    flex: 0 0 auto;
}

.background {
    padding: 3px 13px;
    border-radius: 50px;
    color: rgb(255, 255, 255);
    background-color: rgb(240, 120, 88);
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
}

.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--text-soft);
    line-height: 1.55;
    max-width: 62ch;
}

.muted {
    color: var(--text-muted);
}

.center {
    text-align: center;
}

.center .eyebrow {
    justify-content: center;
}

.center .lead {
    margin-inline: auto; }

.btn {
    --_bg: var(--ink);
    --_fg: #fff;
    --_bd: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    min-height: 52px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    background: var(--_bg);
    color: var(--_fg);
    border: 1.5px solid var(--_bd);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: transform var(--t-fast) var(--e-out), box-shadow var(--t) var(--e-out), background var(--t), color var(--t), border-color var(--t);
    text-align: center;
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-3);
}

.btn:active {
    transform: translateY(0px);
}

.btn--coral {
    --_bg: var(--coral);
    --_fg: var(--on-coral);
    --_bd: var(--coral);
    box-shadow: var(--sh-coral);
}

.btn--coral:hover {
    --_bg: var(--coral-deep);
    --_bd: var(--coral-deep);
}

.btn--ghost {
    --_bg: transparent;
    --_fg: var(--text);
    --_bd: var(--border-strong);
}

.btn--ghost:hover {
    --_bd: var(--ink);
    background: var(--surface);
}

.btn--light {
    --_bg: #fff;
    --_fg: var(--ink);
    --_bd: #fff;
}

.btn--outline-light {
    --_bg: transparent;
    --_fg: #fff;
    --_bd: rgba(255, 255, 255, .4);
}

.btn--outline-light:hover {
    --_bd: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.btn--sm {
    min-height: 42px;
    padding: 10px 18px;
    font-size: 0.88rem;
}

.btn--block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--coral-deep);
}

.link-cta svg {
    width: 16px;
    transition: transform var(--t) var(--e-out);
}

.link-cta:hover svg {
    transform: translateX(4px);
}

.nav {
    position: sticky;
    top: 0px;
    z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t), background var(--t);
    width: 100%;
    justify-content: center;
}

.nav.is-scrolled {
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* A fixed 150px gap pushed the CTA off the right edge on 1440px
       screens; scale it with the viewport instead. */
    gap: clamp(14px, 2.6vw, 44px);
    width: 100%;
    max-width: 100% !important;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    height: 42px;
    width: auto;
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand__name span {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 3px;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
}

.nav__link {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: 0.94rem;
    white-space: nowrap;
    color: var(--text-soft);
    transition: color var(--t), background var(--t);
}

.nav__link:hover, .nav__link.is-active {
    color: var(--text);
    background: var(--surface-sunk);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-pill);
    overflow: hidden;
    height: 40px;
}

.lang-toggle button {
    padding: 0px 12px;
    height: 100%;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--t), background var(--t);
}

.lang-toggle button.is-active {
    background: var(--ink);
    color: rgb(255, 255, 255);
}

.hero__grid {
    align-items: center;
}

.nav__burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    align-items: center;
    justify-content: center;
}

.nav__burger svg {
    width: 24px;
    height: 24px;
}

/* Eight menu items plus the CTA stop fitting comfortably below
   ~1080px — hand over to the drawer there rather than letting the
   links crowd or wrap. */
@media (max-width: 1080px) {
    .nav__links, .nav__actions .btn {
        display: none;
    }

    .nav__burger {
        display: inline-flex;
    }
}

.drawer {
    position: fixed;
    inset: 0px;
    z-index: var(--z-overlay);
    visibility: hidden;
}

.drawer.is-open {
    visibility: visible;
}

.drawer__scrim {
    position: absolute;
    inset: 0px;
    background: rgba(12, 13, 16, 0.5);
    opacity: 0;
    transition: opacity var(--t);
}

.drawer.is-open .drawer__scrim {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: min(86vw, 360px);
    background: var(--surface);
    box-shadow: var(--sh-3);
    padding: var(--s5);
    transform: translateX(100%);
    transition: transform var(--t) var(--e-out);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    overflow-y: auto;
}

.drawer.is-open .drawer__panel {
    transform: none;
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}

.drawer a.nav__link {
    font-size: 1.1rem;
    padding: 14px 12px;
    border-radius: var(--r-md);
}

.drawer .lang-toggle {
    align-self: flex-start;
    margin-top: var(--s3);
}

.nav__dropdown{
    position:relative;
}

.dropdown__menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    padding:10px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s;
    z-index:1000;
}

.nav__dropdown:hover .dropdown__menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown__link{
    display:block;
    padding:12px 20px;
    color:#333;
    text-decoration:none;
    white-space:nowrap;
    transition:.4s all;
}

.dropdown__link:hover{
    background:#f5f5f5;
    color:#ff6b57;
}

.hero {
    position: relative;
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(48px, 6vw, 80px);
    overflow: hidden;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.hero__copy {
    max-width: 620px;
}

.hero h1 {
    margin: 18px 0px 22px;
}

.hero h1 .accent {
    color: var(--coral);
    position: relative;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero__phone {
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero__phone a {
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--coral-line);
}

.hero__stats {
    display: flex;
    gap: clamp(20px, 4vw, 44px);
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.hero__stat b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    display: block;
    letter-spacing: -0.02em;
}

.hero__stat span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.reveal-card {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--sh-3);
    background: var(--graphite);
    user-select: none;
    touch-action: pan-y;
}

.reveal-card img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reveal-card__after {
    clip-path: inset(0 0 0 var(--pos, 50%));
}

.reveal-card__label {
    position: absolute;
    top: 16px;
    z-index: 3;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(12, 13, 16, 0.62);
    color: rgb(255, 255, 255);
    backdrop-filter: blur(4px);
}

.reveal-card__label.is-before {
    left: 16px;
}

.reveal-card__label.is-after {
    right: 16px;
    background: var(--coral);
}

.reveal-handle {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: var(--pos, 50%);
    width: 2px;
    z-index: 4;
    background: linear-gradient(var(--coral), var(--coral-deep));
    transform: translateX(-50%);
    box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 0px 1px;
}

.reveal-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23F07858' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8l4 4-4 4M6 16l-4-4 4-4'/%3E%3C/svg%3E") center center / 22px no-repeat rgb(255, 255, 255);
    box-shadow: var(--sh-2);
}

.reveal-range {
    position: absolute;
    inset: 0px;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    margin: 0px;
}

.bolt-rule {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--coral);
}

.bolt-rule::before, .bolt-rule::after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1 1 0%;
}

.bolt-rule svg {
    width: 20px;
    height: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s6);
    box-shadow: var(--sh-1);
    transition: transform var(--t) var(--e-out), box-shadow var(--t), border-color var(--t);
}

.card--pad-lg {
    padding: clamp(28px, 4vw, 44px);
}

.card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--coral-soft);
    color: var(--coral-deep);
    margin-bottom: var(--s5);
}

.card__icon svg {
    width: 26px;
    height: 26px;
}

.card__icon img{
    width: 33px;
    color: #de5a38;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
}

.space-card {
    position: relative;
    min-height: 420px;
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 3.5vw, 40px);
    color: rgb(255, 255, 255);
    isolation: isolate;
    border: 1px solid var(--border);
    box-shadow: var(--sh-2);
    transition: transform var(--t) var(--e-out), box-shadow var(--t);
}

.space-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-3);
}

.space-card__bg {
    position: absolute;
    inset: 0px;
    z-index: -2;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 600ms var(--e-out);
}

.space-card:hover .space-card__bg {
    transform: scale(1.05);
}

.space-card::after {
    content: "";
    position: absolute;
    inset: 0px;
    z-index: -1;
    background: linear-gradient(rgba(12, 13, 16, 0.1) 0%, rgba(12, 13, 16, 0.35) 45%, rgba(12, 13, 16, 0.86) 100%);
}

.space-card h3 {
    color: rgb(255, 255, 255);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.space-card p {
    color: rgba(255, 255, 255, 0.82);
    margin-top: 8px;
    max-width: 34ch;
}

.space-card .link-cta {
    color: rgb(255, 255, 255);
    margin-top: 20px;
}

.space-card .link-cta svg {
    color: var(--coral);
}

.space-card__tag {
    position: absolute;
    top: 22px;
    left: 22px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s5);
    counter-reset: step 0;
    list-style: none;
}

.step {
    position: relative;
}

.step__n {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: rgb(255, 255, 255);
    margin-bottom: var(--s4);
}

.step h3,
.step h4 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    margin-bottom: 8px;
}

.step p {
    font-size: 0.95rem;
    color: var(--text-soft);
}

.step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 46px;
    right: -14px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
}

.feature-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--border);
}

.feature-row:last-child {
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
}

.feature-row__ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--surface-sunk);
    color: var(--coral-deep);
}

.feature-row__ic svg {
    width: 22px;
    height: 22px;
}

.feature-row h3,
.feature-row h4 {
    font-family: var(--font-display);
    font-size: 1.14rem;
    line-height: 1.25;
    margin-bottom: 6px;
}

.contact-heading h4 {
    color: rgb(255, 255, 255);
}

.feature-row p {
    color: var(--text-soft);
    font-size: 0.96rem;
    line-height: 1.62;
}

.standard-grid {
    align-items: start;
}

.standard-intro {
    min-width: 0px;
}

.standard-visual {
    position: relative;
    display: block;
    margin-top: 42px;
    height: 290px;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-2);
    isolation: isolate;
}

.standard-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 650ms var(--e-out);
}

.standard-visual::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(transparent 40%, rgba(8, 10, 13, 0.86));
    z-index: 1;
}

.standard-visual span {
    position: absolute;
    inset: auto 24px 22px;
    z-index: 2;
    color: rgb(255, 255, 255);
}

.standard-visual b, .standard-visual small {
    display: block;
}

.standard-visual b {
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.standard-visual small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.82rem;
}

.standard-visual:hover img {
    transform: scale(1.04);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 0.9rem;
    font-weight: 500;
}

.chip svg {
    width: 16px;
    height: 16px;
    color: var(--coral-deep);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--surface-sunk);
    color: var(--text-soft);
    border: 1px solid var(--border);
}

.badge--coral {
    background: var(--coral-soft);
    color: var(--coral-deep);
    border-color: var(--coral-line);
}

.badge--ok {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: transparent;
}

.badge--warn {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: transparent;
}

.badge--danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: transparent;
}

.badge--info {
    background: rgb(231, 239, 247);
    color: var(--info);
    border-color: transparent;
}

.badge--dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentcolor;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 13px;
}

.field > label, .label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}

.label .req {
    color: var(--coral-deep);
    margin-left: 2px;
}

.hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.input, .select, .textarea {
    width: 100%;
    padding: 13px 15px;
    min-height: 50px;
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: 0.96rem;
    color: var(--text);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.55;
}

.input::placeholder, .textarea::placeholder {
    color: var(--mist);
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 4px var(--coral-soft);
}

.field.has-error .input, .field.has-error .select, .field.has-error .textarea {
    border-color: var(--danger);
}

.field .err {
    display: none;
    font-size: 0.8rem;
    color: var(--danger);
    font-weight: 500;
}

.field.has-error .err {
    display: block;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%237C828E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}

@media (max-width: 620px) {
    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }
}

.opt-grid {
    display: grid;
    gap: var(--s3);
}

.opt-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
}

.opt-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 620px) {
    .opt-grid.cols-2, .opt-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

.opt {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t-fast);
    width: 100%;
    min-height: 60px;
}

.opt:hover {
    border-color: var(--slate);
}

.opt:active {
    transform: scale(0.99);
}

.opt.is-selected {
    border-color: var(--coral);
    background: var(--coral-soft);
}

.opt__check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid var(--border-strong);
    display: grid;
    place-items: center;
    transition: all var(--t);
}

.opt.is-selected .opt__check {
    background: var(--coral);
    border-color: var(--coral);
}

.opt__check svg {
    width: 15px;
    height: 15px;
    color: rgb(255, 255, 255);
    opacity: 0;
    transition: opacity var(--t);
}

.opt.is-selected .opt__check svg {
    opacity: 1;
}

.opt--radio .opt__check {
    border-radius: 50%;
}

.opt__ic {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
    display: grid;
    place-items: center;
    color: var(--coral-deep);
}

.opt__ic svg {
    width: 22px;
    height: 22px;
}

.opt__body b {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}

.opt__body span {
    font-size: 0.84rem;
    color: var(--text-muted);
}

.stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-pill);
    overflow: hidden;
    width: 55%;
}

.stepper button {
    width: 44px;
    height: 46px;
    font-size: 1.3rem;
    color: var(--text);
    display: grid;
    place-items: center;
    transition: background var(--t);
}

.stepper button:hover {
    background: var(--surface-sunk);
}

.stepper input {
    width: 52px;
    text-align: center;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    background: transparent;
    font-weight: 600;
    height: 46px;
}

.stepper input:focus {
    outline: none;
}

.dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-lg);
    padding: var(--s6);
    text-align: center;
    background: var(--surface-2);
    transition: border-color var(--t), background var(--t);
    cursor: pointer;
}

.dropzone.is-drag {
    border-color: var(--coral);
    background: var(--coral-soft);
}

.dropzone svg {
    width: 34px;
    height: 34px;
    color: var(--steel);
    margin-bottom: 10px;
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: var(--s4);
}

.thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-sunk);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb__x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(12, 13, 16, 0.72);
    color: rgb(255, 255, 255);
    display: grid;
    place-items: center;
}

.thumb__x svg {
    width: 13px;
    height: 13px;
}

.thumb__name {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 0.58rem;
    padding: 3px 5px;
    background: rgba(12, 13, 16, 0.6);
    color: rgb(255, 255, 255);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.wizard__rail {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
}

.progress-line {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.progress-line li {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 22px;
}

.progress-line li:last-child {
    padding-bottom: 0px;
}

.progress-line li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0px;
    width: 2px;
    background: var(--border);
}

.progress-line li:last-child::before {
    display: none;
}

.pl__dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
    z-index: 1;
    transition: all var(--t);
}

.pl__dot .num {
    margin-top: 4px;
}

.pl__dot svg {
    width: 15px;
    height: 15px;
    opacity: 0;
}

.progress-line li.is-done .pl__dot {
    background: var(--coral);
    border-color: var(--coral);
    color: rgb(255, 255, 255);
}

.progress-line li.is-done .pl__dot svg {
    opacity: 1;
}

.progress-line li.is-done .pl__dot .num {
    display: none;
}

.progress-line li.is-active .pl__dot {
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: 0 0 0 4px var(--surface-sunk);
}

.pl__txt b {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
}

.pl__txt span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.progress-line li.is-active .pl__txt b {
    color: var(--text);
}

.progress-bar-mobile {
    display: none;
}

.wstep {
    display: none;
    animation: fadeUp .4s var(--e-out);
}

.wstep.is-active {
    display: block;
}

.home-feature-row .feature-row {
    text-align: left;
}

.home-feature-row .feature-row p {
    line-height: 1.6;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.wstep__head {
    margin-bottom: var(--s6);
}

.wstep__head .kicker {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--coral-deep);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wstep__head h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin-top: 6px;
}

.wstep__head p {
    color: var(--text-soft);
    margin-top: 10px;
    max-width: 52ch;
}

.wnav {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--border);
}

.fieldset-block {
    margin-bottom: var(--s6);
}

.fieldset-block > .label {
    display: block;
    margin-bottom: var(--s3);
}

.info-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--text-soft);
}

.info-note svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--coral-deep);
    margin-top: 1px;
}

.estimate {
    position: sticky;
    bottom: 16px;
    margin-top: var(--s5);
}

.price-box {
    background: var(--ink);
    color: rgb(255, 255, 255);
    border-radius: var(--r-lg);
    padding: var(--s6);
}

.price-box .amt {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.4rem;
    letter-spacing: -0.03em;
}

.price-box .amt small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mist);
}

.price-box ul {
    list-style: none;
    padding: 0px;
    margin: 14px 0px 0px;
    font-size: 0.86rem;
}

.price-box li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0px;
    color: var(--mist);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.price-box li b {
    color: rgb(255, 255, 255);
}

.price-box .review-msg {
    color: var(--coral);
    font-weight: 500;
}

.cal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s5);
    box-shadow: var(--sh-1);
}

.cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}

.cal__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: rgba(0, 0, 0, 0.68);
}

.cal__nav {
    display: flex;
    gap: 6px;
}

.cal__nav button {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    transition: background var(--t);
}

.cal__nav button:hover:not(:disabled) {
    background: var(--surface-sunk);
}

.cal__nav button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cal__nav svg {
    width: 18px;
    height: 18px;
    color: rgb(0, 0, 0);
}

.cal__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.cal__dow span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal__day {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 44px;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 500;
    background: var(--surface-2);
    transition: all var(--t-fast);
    cursor: pointer;
}

.cal__day.is-empty {
    background: transparent;
    cursor: default;
}

.cal__day:not(.is-disabled):hover {
    border-color: var(--slate);
}

.cal__day .st {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 3px;
}

.cal__day.s-available {
    background: var(--surface);
    border-color: var(--border);
}

.cal__day.s-available .st {
    background: var(--ok);
}

.cal__day.s-limited .st {
    background: var(--warn);
}

.cal__day.s-full, .cal__day.s-blocked, .cal__day.s-closed, .cal__day.s-past {
    cursor: not-allowed;
    color: var(--mist);
    background: var(--surface-sunk);
}

.cal__day.s-full .st {
    background: var(--danger);
}

.cal__day.is-disabled {
    pointer-events: none;
}

.cal__day.is-selected {
    background: var(--coral);
    border-color: var(--coral);
    color: rgb(255, 255, 255);
    box-shadow: var(--sh-coral);
}

.cal__day.is-selected .st {
    background: rgb(255, 255, 255);
}

.cal__day.is-today::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral);
}

.cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.cal__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cal__legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: var(--s5);
}

.slot {
    padding: 12px 8px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    transition: all var(--t-fast);
}

.slot:hover:not(:disabled) {
    border-color: var(--slate);
}

.slot.is-selected {
    background: var(--coral);
    color: rgb(255, 255, 255);
    border-color: var(--coral);
}

.slot:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.review-block {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: var(--s4);
    background: var(--surface);
}

.review-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.review-block__head h4 {
    font-family: var(--font-display);
    font-size: 1rem;
}

.review-block__head button {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--coral-deep);
}

.review-block dl {
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 0px;
    padding: 8px 18px 16px;
}

.review-block dt {
    font-size: 0.86rem;
    color: var(--text-muted);
    padding: 7px 0px;
}

.review-block dd {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 7px 0px;
    text-align: right;
}

.confirm-hero {
    text-align: center;
    padding: var(--s7) 0;
}

.confirm-hero__ic {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    display: grid;
    place-items: center;
    margin: 0 auto var(--s5);
    animation: pop .5s var(--e-out);
}

.confirm-hero__ic svg {
    width: 42px;
    height: 42px;
}

@keyframes pop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: var(--s4);
    white-space: nowrap;
    max-width: 100%;
}

.ref-pill svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.ref-pill span {
    white-space: nowrap;
}

.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.admin-side {
    background: var(--ink);
    color: rgb(255, 255, 255);
    padding: var(--s5);
    position: sticky;
    top: 0px;
    height: 100vh;
    overflow-y: auto;
}

.admin-side .brand__name, .admin-side .brand__name span {
    color: rgb(255, 255, 255);
}

.admin-side .brand__name span {
    color: var(--mist);
}

.admin-nav {
    list-style: none;
    padding: 0px;
    margin: var(--s6) 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    font-size: 0.94rem;
    transition: background var(--t), color var(--t);
}

.admin-nav button svg {
    width: 19px;
    height: 19px;
}

.admin-nav button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(255, 255, 255);
}

.admin-nav button.is-active {
    background: var(--coral);
    color: rgb(255, 255, 255);
}

.admin-main {
    padding: clamp(20px, 3vw, 40px);
    background: var(--bg);
    overflow-x: hidden;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s6);
    gap: 16px;
    flex-wrap: wrap;
}

.admin-topbar h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s4);
    margin-bottom: var(--s6);
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s5);
}

.kpi b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    display: block;
    letter-spacing: -0.03em;
}

.kpi span {
    font-size: 0.84rem;
    color: var(--text-muted);
}

.kpi.accent {
    background: var(--ink);
    color: rgb(255, 255, 255);
}

.kpi.accent span {
    color: var(--mist);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s5);
    margin-bottom: var(--s5);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
    gap: 12px;
    flex-wrap: wrap;
}

.panel__head h3 {
    font-size: 1.1rem;
}

.table-wrap {
    overflow-x: auto;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

table.data th {
    text-align: left;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

table.data td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: middle;
}

table.data tr:hover td {
    background: var(--surface-2);
}

.admin-view {
    display: none;
}

.admin-view.is-active {
    display: block;
}

.tab-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}

.tab-row button {
    padding: 9px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    font-size: 0.88rem;
    font-weight: 500;
    transition: all var(--t);
}

.tab-row button.is-active {
    background: var(--ink);
    color: rgb(255, 255, 255);
    border-color: var(--ink);
}

.admin-mobile-top {
    display: none;
}

.modal {
    position: fixed;
    inset: 0px;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
}

.modal.is-open {
    display: flex;
}

.modal__scrim {
    position: absolute;
    inset: 0px;
    background: rgba(12, 13, 16, 0.55);
    animation: 0.2s ease 0s 1 normal none running fade;
}

.grid-2 {
    gap: 40px;
}

.center {
    margin-bottom: 40px;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------
   "Why choose Thunder" — sticky intro on the left, numbered
   reasons on the right. Used on the homepage, about, and every
   service page (templates/service.php).
   --------------------------------------------------------------- */
.whythunder__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.whythunder__intro {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
}

.whythunder__intro h2 {
    margin-top: 18px;
}

.whythunder__intro .lead {
    margin-top: 20px;
}

.whythunder__aside {
    min-width: 0;
}

.whythunder__aside-head {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

/* Numbered reason list. Numbers come from a counter so the markup
   stays a plain <ol>. */
.why-list {
    list-style: none;
    counter-reset: why;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.why-list li {
    counter-increment: why;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: baseline;
    gap: 18px;
    padding: 22px 22px 22px 18px;
    margin: 0;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background var(--t), border-color var(--t), transform var(--t) var(--e-out);
}

.why-list li + li {
    box-shadow: 0 -1px 0 var(--border);
}

.why-list li::before {
    content: counter(why, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--coral-deep);
    font-variant-numeric: tabular-nums;
}

.why-list li:hover {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    box-shadow: var(--sh-1);
    transform: translateX(4px);
}

.whythunder__note {
    margin-top: 28px;
}

/* Titled "why" blocks (service pages that use `why.blocks` instead of a list) */
.why-blocks {
    margin-top: 8px;
}

.why-blocks .feature-row {
    padding: 22px 20px;
    border-bottom: 0;
    border-radius: var(--r-md);
    box-shadow: 0 1px 0 var(--border);
    transition: background var(--t), box-shadow var(--t), transform var(--t) var(--e-out);
}

.why-blocks .feature-row:last-child {
    box-shadow: none;
}

.why-blocks .feature-row:hover {
    background: var(--surface);
    box-shadow: var(--sh-1);
    transform: translateX(4px);
}

.why-blocks .feature-row h3 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: 1.14rem;
    line-height: 1.25;
    margin-bottom: 6px;
}

.why-blocks .feature-row p {
    font-size: 0.96rem;
    color: var(--text-soft);
}

/* "Professional Janitorial Service You Can Rely On" intro copy */
.rely-copy {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

/* "…services include:" lists inside the service cards */
.service-list__head {
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.service-list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.service-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.96rem;
    line-height: 1.5;
}

.service-list svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--coral-deep);
}

.modal__box {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    width: min(560px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: var(--s6);
    animation: fadeUp .3s var(--e-out);
}

.modal__box.lg {
    width: min(760px, 100%);
}

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--s5);
}

.modal__x {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.modal__x:hover {
    background: var(--surface-sunk);
}

.toast-stack {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: min(420px, -32px + 100vw);
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: rgb(255, 255, 255);
    box-shadow: var(--sh-3);
    font-size: 0.92rem;
    font-weight: 500;
    animation: toastIn .3s var(--e-out);
    width: 100%;
}

.toast svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.toast.ok svg {
    color: rgb(110, 231, 183);
}

.toast.err svg {
    color: rgb(252, 165, 165);
}

.toast.info svg {
    color: var(--coral);
}

@keyframes toastIn {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.footer {
    background: var(--ink);
    color: var(--mist);
    padding-block: clamp(48px, 6vw, 80px) 32px; }

.footer a {
    transition: color var(--t);
}

.footer a:hover {
    color: rgb(255, 255, 255);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--s6);
    padding-bottom: var(--s6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand .brand__name, .footer__brand .brand__name span {
    color: rgb(255, 255, 255);
}

.footer__brand p {
    margin-top: var(--s4);
    max-width: 34ch;
    font-size: 0.92rem;
}

.footer h5 {
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--s4);
}

.footer ul {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.92rem;
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 26px;
    font-size: 0.82rem;
    color: var(--steel);
}

.footer__bottom .disclaimer {
    max-width: 60ch;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--e-out), transform .7s var(--e-out);
}

[data-reveal].in {
    opacity: 1;
    transform: none;
}

.input-num {
    width: 100%;
    min-width: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
    background: transparent;
    text-align: center;
    font: inherit;
    position: relative;
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

.hidden {
    display: none !important;
}

.mt-0 {
    margin-top: 0px;
}

.mt-4 {
    margin-top: var(--s4);
}

.mt-5 {
    margin-top: var(--s5);
}

.mt-6 {
    margin-top: var(--s6);
}

.text-c {
    text-align: center;
}

.divider {
    height: 1px;
    background: var(--border);
    margin-block: var(--s6); }

.dark-section {
    background: var(--ink);
    color: var(--fog);
}

.dark-section h2, .dark-section h3, .dark-section h4 {
    color: rgb(255, 255, 255);
}

.dark-section .lead, .dark-section p {
    color: var(--mist);
}

.dark-section .eyebrow {
    color: var(--coral);
}

.dark-section .feature-row {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-section .feature-row__ic {
    background: rgba(255, 255, 255, 0.06);
    color: var(--coral);
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mini-cal-preview {
    max-width: 380px;
}

@media (max-width: 980px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__media {
        max-width: 460px;
    }

    .split {
        grid-template-columns: 1fr;
    }

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

    .step:not(:last-child)::before {
        display: none;
    }

    .wizard {
        grid-template-columns: 1fr;
    }

    .wizard__rail {
        position: static;
    }

    .progress-line {
        display: none;
    }

    .progress-bar-mobile {
        display: block;
        margin-bottom: var(--s5);
    }

    .pbm__track {
        height: 6px;
        background: var(--surface-sunk);
        border-radius: var(--r-pill);
        overflow: hidden;
    }

    .pbm__fill {
        height: 100%;
        background: var(--coral);
        border-radius: inherit;
        transition: width var(--t) var(--e-out);
    }

    .pbm__label {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        margin-bottom: 8px;
        color: var(--text-muted);
    }

    .footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-side {
        display: none;
    }

    .admin-mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: var(--ink);
        color: rgb(255, 255, 255);
        position: sticky;
        top: 0px;
        z-index: 50;
    }

    .admin-mobile-top select {
        background: var(--graphite);
        color: rgb(255, 255, 255);
        border: 1px solid var(--slate);
        border-radius: var(--r-sm);
        padding: 8px 12px;
    }
}

@media (max-width: 560px) {
    .steps {
        grid-template-columns: 1fr;
        padding-left: 0px;
    }

    .footer__top {
        grid-template-columns: 1fr;
    }

    .hero__stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .review-block dl {
        grid-template-columns: 1fr;
    }

    .review-block dd {
        text-align: left;
        padding-top: 0px;
    }

    .review-block dt {
        padding-bottom: 0px;
    }
}

.page-hero {
    position: relative;
    padding-block: clamp(72px, 10vw, 138px); overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(135deg, rgb(16, 18, 22) 0%, rgb(37, 42, 50) 68%, rgb(49, 57, 68) 100%);
    z-index: -2;
}

.page-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    right: -150px;
    top: -230px;
    background: radial-gradient(circle, rgba(240, 120, 88, 0.24), transparent 68%);
    z-index: -1;
}

.page-hero h1, .page-hero h2 {
    color: rgb(255, 255, 255);
    max-width: 14ch;
}

.page-hero .lead {
    color: rgb(201, 209, 215);
    max-width: 55ch;
    margin-top: 24px;
}

.page-hero .eyebrow {
    color: rgb(255, 155, 126);
}

.page-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: end;
}

.page-hero__aside {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    color: rgb(220, 226, 230);
}

.page-hero__aside strong {
    display: block;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.page-hero .hero__cta a{
    color: #FFFFFF;
}

.wwa{
    text-align: center;
}

.wwa .lead {
    max-width: 100%;
}

p.res\.sub {
    font-size: 23px;
    font-weight: 700;
}

.residential-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.residential__services{
    margin-top: 30px;
    border: 1px solid #b7b7b785;
    padding: 28px;
    border-radius: 20px;
    /* min-height: 231px; */
    /* position: relative; */
}

.residential__services:hover{
    border-color: #f07858;
    box-shadow: 0px 0px 20px 0 #95949461;
}

.residential__services h3{
    font-size: 27px;
}

.residential__services p{
    line-height: 1.62;
    font-size: 15px;
    margin-top: 24px;
    color: var(--text-soft);
    margin-bottom: 32px;
}

.residential__services a{
    font-weight: 700;
    /* position: relative; */
    /* bottom: 0; */
}

.residential-grid2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ---------------------------------------------------------------
   "What's included" — grouped checklists on service pages.
   --------------------------------------------------------------- */
.included-heading {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 44px;
}

.included-heading p{
    font-size: 1.05rem;
    color: var(--text-soft);
    max-width: 62ch;
    margin-inline: auto;
    margin-top: 18px;
    line-height: 1.6;
}

.include-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.include-box{
    margin-top: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 30px 28px;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform var(--t) var(--e-out), box-shadow var(--t), border-color var(--t);
}

.include-box:hover{
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--sh-2);
}

.include-box h3,
.include-box h4{
    font-size: 1.22rem;
    line-height: 1.2;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.include-box .include-intro{
    font-size: 0.95rem;
    color: var(--text-soft);
    margin: -6px 0 16px;
    line-height: 1.6;
}

.include-box ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.include-box li{
    position: relative;
    padding-left: 26px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-soft);
}

/* Coral check mark drawn in CSS — keeps the markup a plain <li>. */
.include-box li::before{
    content: "";
    position: absolute;
    left: 2px;
    top: 0.42em;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--coral-deep);
    border-bottom: 2px solid var(--coral-deep);
    transform: rotate(-45deg);
}

.editorial-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(42px, 8vw, 110px);
    align-items: start;
}

/* Only sticks when it is the narrow column of a two-column editorial
   layout. On its own it is just a constrained block of copy. */
.editorial-grid > .editorial-copy {
    position: sticky;
    top: calc(var(--nav-h) + 38px);
}

/* ---------------------------------------------------------------
   Prose block — a heading and its body copy side by side. Replaces
   the full-bleed "heading + three paragraphs" runs that had no
   measure and no rhythm.
   --------------------------------------------------------------- */
.prose-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
}

.prose-grid__head {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
}

.prose-grid__head h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-top: 16px;
}

.prose-grid__body > * + * {
    margin-top: 20px;
}

.prose-grid__body p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-soft);
    max-width: 68ch;
}

.prose-grid__body .chips {
    margin-top: 26px;
}

/* Two prose blocks side by side (about → approach / trust). */
.prose-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.prose-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(28px, 3.4vw, 42px);
    box-shadow: var(--sh-1);
    transition: transform var(--t) var(--e-out), box-shadow var(--t), border-color var(--t);
}

.prose-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--sh-2);
}

.prose-card h2,
.prose-card h3 {
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
    line-height: 1.14;
    margin-top: 16px;
}

.prose-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-soft);
    max-width: 60ch;
}

.prose-card p + p {
    margin-top: 16px;
}

.prose-card > p:first-of-type {
    margin-top: 20px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.value-card {
    padding: 28px;
    background: var(--surface);
    border-radius: 23px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 20px 0px;
}

.value-card:hover {
    border: 1px solid var(--coral);
}

.value-card b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.project-card {
    grid-column: span 6;
    position: relative;
    min-height: 520px;
    border-radius: var(--r-xl);
    overflow: hidden;
    color: rgb(255, 255, 255);
    box-shadow: var(--sh-2);
    isolation: isolate;
}

.project-card.is-wide {
    grid-column: span 12;
    min-height: 560px;
}

.project-card img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 700ms var(--e-out);
}

.project-card:hover img {
    transform: scale(1.035);
}

.project-card::after {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(transparent 35%, rgba(8, 10, 13, 0.9));
    z-index: -1;
}

.project-card__copy {
    position: absolute;
    inset: auto 0px 0px;
    padding: clamp(26px, 4vw, 44px);
}

.project-card h2, .project-card h3 {
    color: rgb(255, 255, 255);
}

.project-card p {
    color: rgba(255, 255, 255, 0.78);
    margin-top: 10px;
    max-width: 52ch;
}

.testimonial-shell {
    padding: clamp(34px, 6vw, 64px);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--surface), #f4f8fa);
    box-shadow: var(--sh-1);
    text-align: center;
}

.testimonial-mark {
    width: 56px;
    height: 56px;
    margin: 0px auto 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--coral-soft);
    color: var(--coral-deep);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.home-link-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.home-link-card {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(30px, 6vw, 80px);
    align-items: start;
}

.contact-panel {
    background: var(--ink);
    color: rgb(255, 255, 255);
    border-radius: var(--r-xl);
    padding: clamp(30px, 5vw, 52px);
}

.contact-panel h2, .contact-panel h3 {
    color: rgb(255, 255, 255);
}

.contact-panel a {
    color: rgb(255, 255, 255);
}

@media (max-width: 900px) {
    .page-hero__grid, .editorial-grid, .contact-layout {
        grid-template-columns: 1fr;
    }

    .editorial-copy {
        position: static;
    }

    .value-grid, .home-link-grid {
        grid-template-columns: 1fr;
    }

    .project-card, .project-card.is-wide {
        grid-column: span 12;
        min-height: 460px;
    }
}

@media (max-width: 560px) {
    .project-card, .project-card.is-wide {
        min-height: 410px;
    }
}

:root {
    --maxw: 1180px;
    --nav-h: 78px;
    --r-lg: 20px;
    --r-xl: 30px;
    --sh-1: 0 1px 2px rgba(12, 13, 16, .04), 0 8px 24px rgba(12, 13, 16, .035);
    --sh-2: 0 12px 32px rgba(12, 13, 16, .075), 0 2px 8px rgba(12, 13, 16, .04);
    --sh-3: 0 28px 70px rgba(12, 13, 16, .14), 0 8px 24px rgba(12, 13, 16, .07);
}

body {
    line-height: 1.65;
}

h1 {
    font-size: clamp(3rem, 6vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

h2 {
    font-size: clamp(2.15rem, 4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

h3 {
    line-height: 1.08;
}

.wrap-wide {
    max-width: 1320px;
}

.section {
    padding-block: clamp(76px, 9vw, 85px);
    }

.section-sm {
    padding-block: clamp(58px, 6vw, 58px);
    }

.center > h1, .center > h2 {
    max-width: 18ch;
    margin-inline: auto; }

.center .eyebrow + h1, .center .eyebrow + h2 {
    margin-top: 16px;
}

.center h1 + .lead, .center h2 + .lead {
    margin-top: 18px;
}

.nav {
    box-shadow: transparent 0px 1px 0px;
}

.nav.is-scrolled {
    box-shadow: rgba(12, 13, 16, 0.043) 0px 8px 30px;
}

.nav__link {
    font-size: 0.9rem;
    padding-inline: 13px; }

.brand {
    flex: 0 0 auto;
}

.brand img {
    height: 46px;
}

.btn {
    min-height: 54px;
    padding-inline: 28px; font-weight: 650;
}

.btn--sm {
    min-height: 44px;
    padding-inline: 20px; }

.btn:hover {
    transform: translateY(-2px);
    box-shadow: rgba(12, 13, 16, 0.14) 0px 14px 34px;
}

.btn--coral:hover {
    box-shadow: rgba(222, 90, 56, 0.3) 0px 14px 34px;
}

.hero {
    padding-top: clamp(54px, 7vw, 92px);
    padding-bottom: clamp(68px, 8vw, 108px);
}

.hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 120, 88, 0.11), transparent 68%);
    pointer-events: none;
}

.hero__grid {
    grid-template-columns: minmax(0px, 1.07fr) minmax(380px, 0.93fr);
    gap: clamp(48px, 6.5vw, 92px);
}

.hero__grid > * {
    min-width: 0px;
}

.hero__copy {
    max-width: 650px;
}

.hero h1 {
    margin: 20px 0px 26px;
}

.hero .lead {
    max-width: 54ch;
}

.hero__cta {
    margin-top: 38px;
}

.hero__stats {
    margin-top: 48px;
    padding-top: 28px;
    justify-content: space-between;
}

.hero__stat {
    min-width: 0px;
}

.hero__stat b {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.15;
}

.hero__stat span {
    display: block;
    margin-top: 5px;
}

.hero__media {
    position: relative;
}

.hero__media::before {
    content: "";
    position: absolute;
    inset: 22px -18px -22px 18px;
    border-radius: var(--r-xl);
    border: 1px solid var(--coral-line);
    opacity: 0.7;
    pointer-events: none;
}

.reveal-card {
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: rgba(12, 13, 16, 0.18) 0px 34px 80px;
}

.reveal-card__label {
    top: 18px;
    padding: 7px 13px;
    box-shadow: rgba(12, 13, 16, 0.14) 0px 4px 16px;
}

.reveal-card__label.is-before {
    left: 18px;
}

.reveal-card__label.is-after {
    right: 18px;
}

.reveal-handle {
    width: 3px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(12, 13, 16, 0.1) 0px 0px 0px 1px;
}

.reveal-handle::after {
    width: 48px;
    height: 48px;
}

.card {
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
}

.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--sh-2);
}

.space-card {
    min-height: 460px;
    box-shadow: rgba(12, 13, 16, 0.14) 0px 20px 54px;
}

.space-card::after {
    background: linear-gradient(rgba(12, 13, 16, 0.04), rgba(12, 13, 16, 0.12) 38%, rgba(12, 13, 16, 0.9));
}

.space-card__tag {
    top: 24px;
    left: 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
}

.space-card p {
    line-height: 1.55;
}

.space-card .link-cta {
    margin-top: 24px;
}

.dark-section {
    background: linear-gradient(135deg, rgb(12, 13, 16), rgb(23, 25, 31));
}

.step__n {
    width: 42px;
    height: 42px;
    background: var(--coral);
    box-shadow: rgba(240, 120, 88, 0.25) 0px 8px 24px;
}

.step:not(:last-child)::before {
    top: 21px;
    left: 52px;
}

.feature-row {
    padding-block: 27px; }

.feature-row__ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.chip {
    padding: 11px 17px;
    box-shadow: rgba(12, 13, 16, 0.02) 0px 1px 0px;
}

.input, .select, .textarea {
    min-height: 52px;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
}

.footer__top {
    gap: clamp(30px, 5vw, 72px);
}

.mini-cal-preview {
    width: 100%;
    margin: 0px auto !important;
}

.drawer {
    overflow: hidden;
}

.svg-check svg {
    width: 20px;
}

.cal {
    background: var(--surface);
}

/* ---------------------------------------------------------------
   FAQ — sticky heading column + <details> accordion.
   --------------------------------------------------------------- */
.faq h2{
    margin-top: 14px;
}

.faq-grid{
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.faq-content{
    position: sticky;
    top: calc(var(--nav-h) + 40px);
}

.faq-content .lead{
    margin-top: 18px;
}

.questions-content{
    padding: 0px;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border);
}

.questions{
    padding: 0;
    border-bottom: 1px solid var(--border);
}

/* The clickable question row. <summary> holds the heading so the
   whole row is a native disclosure control — no JS needed. */
.questions > summary{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 4px;
    cursor: pointer;
    list-style: none;
    transition: color var(--t);
}

.questions > summary::-webkit-details-marker{
    display: none;
}

.questions > summary:hover h3,
.questions > summary:hover h4{
    color: var(--coral-deep);
}

.questions[open] > summary h3,
.questions[open] > summary h4{
    color: var(--coral-deep);
}

.questions h3,
.questions h4{
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.35;
    margin-bottom: 0;
    transition: color var(--t);
}

/* Plus / minus toggle drawn with two bars. */
.questions__ic{
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    transition: background var(--t), border-color var(--t), transform var(--t) var(--e-out);
}

.questions__ic::before,
.questions__ic::after{
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    translate: -50% -50%;
    transition: opacity var(--t), rotate var(--t) var(--e-out);
}

.questions__ic::after{
    rotate: 90deg;
}

.questions > summary:hover .questions__ic{
    border-color: var(--coral);
    color: var(--coral-deep);
}

.questions[open] .questions__ic{
    background: var(--coral);
    border-color: var(--coral);
    color: var(--on-coral);
}

.questions[open] .questions__ic::after{
    rotate: 0deg;
    opacity: 0;
}

.questions p{
    color: var(--text-soft);
    margin-bottom: 0;
}

.questions-row__desc {
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.72;
    max-width: 68ch;
    margin: 0;
    padding: 0 54px 26px 4px;
}

/* Progressive enhancement: browsers that support interpolate-size
   animate the panel open. Everywhere else it just snaps, as before. */
@supports (interpolate-size: allow-keywords) {
    .questions{
        interpolate-size: allow-keywords;
    }

    .questions::details-content{
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        transition: block-size var(--t) var(--e-out), content-visibility var(--t) allow-discrete, opacity var(--t);
    }

    .questions[open]::details-content{
        block-size: auto;
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .nav__link {
        padding-inline: 9px;
        font-size: 0.86rem;
    }

    .nav__actions {
        gap: 7px;
    }
}

@media (max-width: 980px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__copy {
        max-width: 760px;
    }

    .hero__media {
        width: min(100%, 540px);
        max-width: none;
        margin-top: 10px;
    }

    .hero__stats {
        max-width: 680px;
    }
}

@media (max-width: 560px) {
    :root {
        --nav-h: 70px;
        --r-xl: 24px;
    }

    .wrap, .wrap-wide {
        padding-inline: 20px; }

    h1 {
        font-size: clamp(2.65rem, 13vw, 3.65rem);
    }

    h2 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .hero {
        padding-top: 42px;
    }

    .hero__cta {
        flex-direction: row;
        align-items: stretch;
    }

    .hero__cta .btn {
        width: 100%;
    }

    .hero__phone {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 14px;
    }

    .hero__stat:last-child {
    }

    .hero__media::before {
        inset: 12px 0px -12px 8px;
    }

    .space-card {
        min-height: 390px;
    }

    .card {
        padding: 24px;
    }

    .footer__top {
        gap: 38px;
    }
}

@media only screen and (max-width: 1600px) {
    .section {
        padding: 60px 0px;
    }

    .hero {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .btn {
        padding-inline: 22px; }

    .hero__grid h1 {
        font-size: 5.1rem;
    }

    .hero__stats {
        margin-top: 35px;
    }

    .center h2 + .lead {
        margin-top: 10px;
    }
}

@media only screen and (max-width: 430px) {
    .nav__inner {
        padding: 10px;
    }

    .brand {
        width: 120px;
    }

    .lang-toggle {
        height: 28px;
    }

    .hero {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .wrap-wide {
        padding: 0px 18px;
    }

    .hero__grid h1 {
        font-size: 47px;
    }

    .hero h1 {
        margin-bottom: 15px;
        font-size: 41px;
    }

    .hero .lead {
        font-size: 15px;
        width: 100%;
        line-height: 1.6;
    }

    .hero__cta {
        margin-top: 30px;
    }

    /* Share the row evenly instead of a fixed width plus 76px of
       inline padding, which pushed the label past the button edge. */
    .hero__cta .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding-inline: 14px;
        white-space: normal;
    }

    .btn {
        padding: 8px 16px;
        min-height: 44px;
        font-size: 13px;
        letter-spacing: 0.2px;
        line-height: 1.25;
    }

    .hero__stats {
        margin-top: 20px;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 22px 5px;
    }

    .hero ::before {
        display: none;
    }

    .hero__grid {
        gap: 20px;
        text-align: center;
    }

    .section {
        padding: 48px 0px;
    }

    .feature-row {
        padding: 18px 0px;
    }

    .center .eyebrow + h2 {
        font-size: 34px;
    }

    .lead {
        font-size: 16px;
    }

    .split {
        gap: 10px;
    }

    .standard-intro h2 {
        font-size: 37px;
        margin-top: 13px;
    }

    .mt-6 {
        margin-top: 10px;
    }

    .standard-visual {
        margin-top: 29px;
    }

    .section-sm {
        padding: 40px 0px;
    }

    .chip {
        padding: 7px 12px;
        font-size: 0.82rem;
    }

    .center {
        margin-bottom: 30px;
    }

    .card {
        padding: 20px;
    }

    .card__icon {
        margin-bottom: 15px;
        width: 40px;
        height: 40px;
    }

    .card__icon svg {
        height: 20px;
        width: 20px;
    }

    .home-link-card {
        justify-content: space-around;
    }

    .home-link-card {
        min-height: 200px;
    }

    .home-link-grid {
        gap: 5px;
    }

    .testimonial-shell {
        padding: 13px;
    }

    .testimonial-shell h3 {
        font-size: 19px;
    }

    .mt-5 {
        margin-top: 15px;
    }

    .dark-section h2 {
        font-size: 31px;
    }

    .footer {
        padding: 30px 0px;
    }

    .footer__brand p {
        max-width: 100%;
    }

    .footer__top {
        gap: 15px;
        padding-bottom: 20px;
    }

    .footer ul {
        gap: 1px;
    }

    .footer__bottom {
        padding-top: 20px;
        gap: 12px;
    }

    .page-hero {
        padding-block: 30px; }

    .page-hero h1 {
        font-size: 50px;
        margin-top: 15px;
    }

    .page-hero .lead {
        margin-top: 19px;
        font-size: 14px;
    }

    .page-hero__grid {
        gap: 25px;
    }

    .page-hero__aside {
        padding: 18px;
    }

    .review-block dl {
        padding: 10px 0px 0px;
    }

    .wizard {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .calendar-card .card {
        padding: 18px;
    }

    .footer__bottom .disclaimer {
        line-height: 1.6;
    }

    .nav__inner {
        gap: 12px;
    }
}

/* =================================================================
   UI POLISH LAYER
   Sits last so it wins over the earlier override blocks. Grouped by
   the section it affects rather than by property.
   ================================================================= */

/* ---- Eyebrows on dark surfaces -------------------------------- */
.project-card .eyebrow,
.hero-dark .eyebrow,
.contact-panel .eyebrow,
.card.dark-section .eyebrow {
    color: rgb(255, 255, 255);
}

.eyebrow.background {
    color: rgb(255, 255, 255);
}

/* ---- Card grids: 16px was too tight for padded cards ---------- */
.grid-2,
.grid-3 {
    gap: 24px;
}

.split {
    gap: 24px;
}

/* ---- Section headers ------------------------------------------ */
.center > h1,
.center > h2 {
    max-width: 20ch;
}

.center .lead {
    max-width: 64ch;
}

/* Keep a consistent gap between a section header and its content. */
.center + .grid-2,
.center + .grid-3,
.center + .split,
.center + .chips,
.center + .steps {
    margin-top: 8px;
}

/* ---- "Choose your space" cards -------------------------------- */
.card--pad-lg {
    display: flex;
    flex-direction: column;
}

/* Push the CTA to the bottom so buttons line up across the row even
   when the descriptions are different lengths. */
.card--pad-lg > .btn:last-child {
    margin-top: auto;
    align-self: flex-start;
}

.card--pad-lg .service-list {
    margin-bottom: 28px;
}

.card__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* ---- Steps ---------------------------------------------------- */
.steps {
    gap: 32px var(--s5);
}

/* ---- Value cards: reserve the hover border so nothing shifts --- */
.value-card {
    border: 1px solid transparent;
    transition: border-color var(--t), transform var(--t) var(--e-out);
}

.value-card:hover {
    border-color: var(--coral);
    transform: translateY(-3px);
}

/* ---- Testimonials --------------------------------------------- */
.testimonial-shell h3 {
    max-width: 46ch;
    margin-inline: auto;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    line-height: 1.3;
    font-weight: 700;
}

/* ---- "Rely on" intro ------------------------------------------ */
.rely-copy .lead,
.rely-copy .muted {
    margin-inline: auto;
    max-width: 68ch;
}

.rely-copy .muted {
    line-height: 1.7;
}

/* ---- Contact panel (dark ink card) ---------------------------- */
.contact-panel p,
.contact-panel .feature-row p {
    color: var(--mist);
}

.contact-panel .feature-row {
    border-color: rgba(255, 255, 255, .12);
}

.contact-panel .feature-row__ic {
    background: rgba(255, 255, 255, .07);
    color: var(--coral);
}

/* ---- Dark surfaces: keep new components legible --------------- */
.dark-section .why-list li,
.dark-section .questions h3 {
    color: rgb(255, 255, 255);
}

.dark-section .why-list li:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}

/* ---- Responsive ------------------------------------------------ */

/* The `.hero__grid` rule in the later override block re-declared
   grid-template-columns with a `minmax(380px, …)` second track, which
   beat the @media (max-width:980px) collapse further up the file
   (media queries add no specificity) — so the hero stayed two columns
   on phones and pushed the layout wider than the viewport. Restated
   here, after everything else. */
@media (max-width: 980px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__media {
        width: min(100%, 540px);
        max-width: 540px;
    }

    .split,
    .editorial-grid,
    .page-hero__grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .whythunder__grid,
    .faq-grid,
    .prose-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .whythunder__intro,
    .faq-content,
    .prose-grid__head {
        position: static;
    }

    .prose-grid__head h2,
    .whythunder__intro h2 {
        max-width: 22ch;
    }
}

@media (max-width: 700px) {
    .why-list li {
        grid-template-columns: 34px 1fr;
        gap: 12px;
        padding: 18px 12px;
        font-size: 1rem;
    }

    .questions > summary {
        padding: 20px 0;
        gap: 14px;
    }

    .questions__ic {
        width: 30px;
        height: 30px;
    }

    .questions-row__desc {
        padding: 0 44px 22px 0;
    }

    .include-box {
        padding: 24px 22px;
    }

    .prose-grid__body p,
    .prose-card p {
        font-size: 1rem;
    }
}

/* ===========================================================
   ACCESSIBILITY & NO-JS
   Appended last on purpose: nothing here restyles an existing
   element, so it cannot disturb the layout rules above.
   =========================================================== */

/* Skip link — off-screen until it is given keyboard focus. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    background: #ff6b5a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: top .18s ease;
}

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

/* Where the skip link lands. Never visible, but focusable. */
.skip-target {
    display: block;
    height: 0;
    overflow: hidden;
}

.skip-target:focus {
    outline: none;
}

/* Honeypot. Positioned off-screen rather than display:none, so it stays
   a real field that a script will find and fill in, while a person on a
   keyboard or screen reader never reaches it. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Seen only when JavaScript is unavailable. */
.noscript-note {
    margin: 0;
    padding: 14px 20px;
    background: #fff4e5;
    border-bottom: 1px solid #f0d6ae;
    color: #6a4b16;
    font-size: .95rem;
    text-align: center;
}

.noscript-note a {
    color: inherit;
    font-weight: 700;
}

.noscript-note span[lang="es"] {
    display: block;
    margin-top: 4px;
    opacity: .85;
}

/* ===========================================================
   HEADER DROPDOWN ("Our Services")
   =========================================================== */

.nav__group {
    position: relative;
}

.nav__group-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.nav__group.is-active > .nav__group-btn {
    color: var(--text);
    background: var(--surface-sunk);
}

.nav__caret {
    width: 15px;
    height: 15px;
    transition: transform var(--t);
}

.nav__group:hover .nav__caret,
.nav__group:focus-within .nav__caret,
.nav__group.is-open .nav__caret {
    transform: rotate(180deg);
}

.nav__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: var(--z-overlay);
    min-width: 232px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
}

/* Bridges the gap between button and panel, so the menu does not
   close when the pointer travels down to it. */
.nav__menu::before {
    content: "";
    position: absolute;
    inset: -8px 0 100% 0;
}

.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__group.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav__menu-link {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-soft);
    transition: color var(--t), background var(--t);
}

.nav__menu-link:hover,
.nav__menu-link.is-active {
    color: var(--text);
    background: var(--surface-sunk);
}

/* A dropdown cannot open on a phone, so the drawer lists the group
   as a heading with its pages indented underneath. */
.drawer__group {
    display: block;
    padding: 16px 14px 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    opacity: 0.75;
}

.drawer__sub {
    padding-left: 26px;
}