:root {
    --blue: #0d3b66;
    --blue-deep: #082746;
    --blue-soft: #dceaf5;
    --yellow: #ffd447;
    --yellow-deep: #e6b900;

    --ink: #17202a;
    --ink-soft: #4f5d69;
    --muted: #77838d;

    --white: #ffffff;
    --paper: #f7f9fa;
    --steel: #e8edf0;
    --steel-dark: #cfd8dd;
    --line: #d9e0e4;

    --success: #287d4f;

    --shadow-small: 0 12px 32px rgba(13, 59, 102, 0.08);
    --shadow-medium: 0 24px 65px rgba(13, 59, 102, 0.13);

    --radius-small: 8px;
    --radius-medium: 18px;
    --radius-large: 30px;

    --page-width: 1240px;
    --page-gutter: clamp(1.25rem, 4vw, 3rem);

    --font:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* =======================================================
   RESET
======================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

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

a {
    color: inherit;
}

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

button {
    cursor: pointer;
}

figure,
blockquote,
dl,
dd,
p,
h1,
h2,
h3 {
    margin-top: 0;
}

::selection {
    background: var(--yellow);
    color: var(--ink);
}

/* =======================================================
   ACCESSIBILITY
======================================================= */

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    transform: translateY(-180%);
    padding: 0.8rem 1rem;
    background: var(--yellow);
    color: var(--ink);
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}

/* =======================================================
   SHARED
======================================================= */

.section-shell {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--page-width)
    );
    margin-inline: auto;
}

.section-label {
    margin-bottom: 1rem;
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-label::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 3px;
    margin-right: 0.7rem;
    vertical-align: middle;
    background: var(--yellow);
}

.button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border: 0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 160ms ease,
        background-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 10px 24px rgba(13, 59, 102, 0.2);
}

.button--primary:hover {
    background: var(--blue-deep);
    box-shadow: 0 14px 32px rgba(13, 59, 102, 0.28);
}

.button--full {
    width: 100%;
}

.text-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
}

.text-arrow span {
    transition: transform 160ms ease;
}

.text-arrow:hover span {
    transform: translateX(5px);
}

/* =======================================================
   HEADER
======================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.site-header__inner {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--page-width)
    );
    min-height: 82px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
}

.brand {
    display: grid;
    gap: 0.05rem;
    text-decoration: none;
    line-height: 1;
}

.brand__name {
    color: var(--blue);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.brand__tag {
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.3vw, 2.25rem);
}

.primary-nav a {
    position: relative;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.primary-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 160ms ease;
}

.primary-nav a:hover {
    color: var(--blue);
}

.primary-nav a:hover::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-phone {
    display: grid;
    text-align: right;
    text-decoration: none;
    line-height: 1.1;
}

.header-phone__label {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-phone__number {
    margin-top: 0.2rem;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 900;
}

.button--header {
    min-height: 42px;
    padding-inline: 1.05rem;
    background: var(--blue);
    color: var(--white);
}

.button--header:hover {
    background: var(--yellow);
    color: var(--ink);
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 42px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--steel-dark);
    border-radius: 8px;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 5px auto;
    background: var(--blue);
    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

/* =======================================================
   HERO
======================================================= */

.hero {
    min-height: 680px;
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(0, 1.16fr);
    background: var(--paper);
    overflow: hidden;
}

.hero__copy {
    align-self: center;
    max-width: 660px;
    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(2rem, 6vw, 6rem)
        clamp(4rem, 7vw, 7rem)
        max(var(--page-gutter), calc((100vw - var(--page-width)) / 2));
}

.hero__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-bottom: 2rem;
    color: var(--blue);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__kicker::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 5px rgba(255, 212, 71, 0.22);
}

.hero__kicker span {
    color: var(--muted);
    font-weight: 750;
}

.hero h1 {
    max-width: 670px;
    margin-bottom: 1.5rem;
    color: var(--ink);
    font-size: clamp(3.8rem, 6.8vw, 7.4rem);
    font-weight: 950;
    letter-spacing: -0.072em;
    line-height: 0.9;
}

.hero h1 em {
    display: inline-block;
    position: relative;
    color: var(--blue);
    font-style: normal;
}

.hero h1 em::after {
    content: "";
    position: absolute;
    right: -0.05em;
    bottom: -0.02em;
    left: 0;
    z-index: -1;
    height: 0.2em;
    background: var(--yellow);
    transform: rotate(-1.5deg);
}

.hero__lead {
    max-width: 570px;
    margin-bottom: 2rem;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    line-height: 1.7;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.3rem;
}

.hero__text-link {
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.hero__note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: 470px;
    margin-top: 2.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 650;
}

.hero__note-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--success);
}

.hero__visual {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    background: var(--steel);
}

.hero__visual::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 2rem;
    left: 2rem;
    width: 86px;
    height: 16px;
    border-top: 4px solid var(--yellow);
    border-left: 4px solid var(--yellow);
}

.hero__image {
    height: 100%;
    object-fit: cover;
}

.hero__identity {
    position: absolute;
    z-index: 3;
    right: 2rem;
    bottom: 2rem;
    display: grid;
    min-width: 230px;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 12px;
    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(10px);
}

.hero__identity span {
    color: var(--blue);
    font-size: 1.15rem;
    font-weight: 950;
}

.hero__identity strong {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.63rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__availability {
    position: absolute;
    z-index: 3;
    top: 2rem;
    right: 2rem;
    display: grid;
    padding: 0.8rem 1rem;
    background: var(--yellow);
    color: var(--ink);
    border-radius: 8px;
    transform: rotate(1.5deg);
}

.hero__availability span {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__availability strong {
    font-size: 0.85rem;
}

/* =======================================================
   QUICK FACTS
======================================================= */

.quick-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--white);
    border-bottom: 1px solid var(--line);
}

.quick-facts__item {
    position: relative;
    min-height: 140px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-content: center;
    padding: 2rem clamp(1.25rem, 4vw, 3rem);
    border-right: 1px solid var(--line);
}

.quick-facts__item:last-child {
    border-right: 0;
}

.quick-facts__item > span {
    grid-row: 1 / 3;
    align-self: start;
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 900;
}

.quick-facts__item strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
}

.quick-facts__item small {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.74rem;
}

/* =======================================================
   SERVICES
======================================================= */

.services {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--white);
}

.section-intro {
    max-width: 780px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-intro h2,
.results__header h2,
.about__copy h2,
.mobile-setup__copy h2,
.process__header h2,
.reviews__intro h2,
.faq__intro h2,
.booking__intro h2 {
    margin-bottom: 1.4rem;
    color: var(--ink);
    font-size: clamp(3rem, 5.8vw, 6rem);
    font-weight: 950;
    letter-spacing: -0.065em;
    line-height: 0.92;
}

.section-intro h2 span,
.results__header h2 span,
.about__copy h2 span,
.mobile-setup__copy h2 span,
.reviews__intro h2 span,
.faq__intro h2 span,
.booking__intro h2 span {
    color: var(--blue);
}

.section-intro > p:last-child,
.results__header > p:last-child,
.mobile-setup__copy > p,
.reviews__intro > p:last-child,
.faq__intro > p:last-child,
.booking__intro > p {
    max-width: 590px;
    color: var(--ink-soft);
    font-size: 1.03rem;
}

.service-board {
    border-top: 2px solid var(--ink);
}

.service-row {
    display: grid;
    grid-template-columns:
        minmax(290px, 1.5fr)
        minmax(250px, 1.1fr)
        minmax(90px, 0.5fr)
        minmax(95px, 0.45fr)
        auto;
    gap: 1.4rem;
    align-items: center;
    min-height: 170px;
    padding: 1.7rem 0;
    border-bottom: 1px solid var(--line);
    transition:
        background-color 160ms ease,
        padding 160ms ease;
}

.service-row:hover {
    margin-inline: -1rem;
    padding-inline: 1rem;
    background: var(--paper);
}

.service-row--featured {
    position: relative;
    background: var(--blue-soft);
}

.service-row--featured::before {
    content: "MOST REQUESTED";
    position: absolute;
    top: -1px;
    left: 1rem;
    padding: 0.32rem 0.6rem;
    background: var(--yellow);
    color: var(--ink);
    font-size: 0.53rem;
    font-weight: 950;
    letter-spacing: 0.09em;
}

.service-row--featured:hover {
    background: var(--blue-soft);
}

.service-row__name {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 1rem;
    align-items: start;
}

.service-row__name > span {
    padding-top: 0.3rem;
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 900;
}

.service-row__eyebrow {
    margin-bottom: 0.35rem;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.service-row h3 {
    margin-bottom: 0;
    color: var(--ink);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.service-row__includes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.service-row__includes span {
    padding: 0.34rem 0.55rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 700;
}

.service-row--featured .service-row__includes span {
    background: rgba(255, 255, 255, 0.65);
}

.service-row__time,
.service-row__price {
    display: grid;
    gap: 0.1rem;
}

.service-row__time small,
.service-row__price small {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.service-row__time strong {
    color: var(--ink);
    font-size: 0.83rem;
}

.service-row__price strong {
    color: var(--blue);
    font-size: 1.45rem;
    font-weight: 950;
}

.service-row__book {
    display: inline-flex;
    min-width: 108px;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--steel-dark);
    border-radius: 999px;
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
}

.service-row__book:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.service-disclaimer {
    max-width: 850px;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.7;
}

/* =======================================================
   RESULTS
======================================================= */

.results {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--paper);
}

.results__header {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3rem;
}

.results__header .section-label,
.results__header h2 {
    grid-column: 1;
}

.results__header h2 {
    margin-bottom: 0;
}

.results__header > p:last-child {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin-bottom: 0.4rem;
}

.comparison {
    --comparison-position: 50%;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8.6;
    overflow: hidden;
    background: var(--steel);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-medium);
    user-select: none;
}

.comparison__image {
    position: absolute;
    inset: 0;
}

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

.comparison__image--before {
    clip-path: inset(
        0
        calc(100% - var(--comparison-position))
        0
        0
    );
}

.comparison__label {
    position: absolute;
    z-index: 3;
    top: 1.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.comparison__label--before {
    left: 1.25rem;
    background: var(--white);
    color: var(--ink);
}

.comparison__label--after {
    right: 1.25rem;
    background: var(--blue);
    color: var(--white);
}

.comparison__handle {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: var(--comparison-position);
    width: 3px;
    background: var(--yellow);
    transform: translateX(-50%);
    pointer-events: none;
}

.comparison__handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    border: 4px solid var(--white);
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.23);
    transform: translate(-50%, -50%);
}

.comparison__handle span {
    position: absolute;
    z-index: 2;
    top: 50%;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 900;
    transform: translateY(-50%);
}

.comparison__handle span:first-child {
    right: 7px;
}

.comparison__handle span:last-child {
    left: 7px;
}

.comparison__control {
    position: absolute;
    z-index: 5;
    inset: 0;
}

.comparison__control input {
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: ew-resize;
    opacity: 0;
}

.result-gallery {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    grid-template-rows: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.result-card {
    position: relative;
    min-height: 260px;
    margin: 0;
    overflow: hidden;
    background: var(--steel);
    border-radius: var(--radius-medium);
}

.result-card--large {
    grid-row: 1 / 3;
    min-height: 540px;
}

.result-card img {
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
}

.result-card:hover img {
    transform: scale(1.025);
}

.result-card figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.result-card figcaption span {
    color: var(--blue);
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.result-card figcaption strong {
    color: var(--ink);
    font-size: 0.85rem;
}

/* =======================================================
   ABOUT
======================================================= */

.about {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
    background: var(--white);
}

.about__photo {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    background: var(--steel);
}

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

.about__photo-note {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    display: grid;
    min-width: 160px;
    padding: 1rem 1.2rem;
    background: var(--yellow);
    border-radius: 12px;
    color: var(--ink);
    box-shadow: var(--shadow-medium);
}

.about__photo-note span {
    font-size: 0.6rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about__photo-note strong {
    font-size: 2rem;
    line-height: 1;
}

.about__copy {
    align-self: center;
    max-width: 720px;
    padding:
        clamp(4rem, 8vw, 8rem)
        max(var(--page-gutter), calc((100vw - var(--page-width)) / 2))
        clamp(4rem, 8vw, 8rem)
        clamp(2rem, 7vw, 7rem);
}

.about__copy h2 {
    margin-bottom: 1.7rem;
}

.about__lead {
    color: var(--ink);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.5;
}

.about__copy > p:not(.section-label):not(.about__lead) {
    color: var(--ink-soft);
}

.about__staff-list {
    margin: 2.5rem 0 0;
    border-top: 2px solid var(--ink);
}

.about__staff-list > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.about__staff-list dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.about__staff-list dd {
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: right;
}

/* =======================================================
   MOBILE SETUP
======================================================= */

.mobile-setup {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--blue);
    color: var(--white);
}

.mobile-setup__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(360px, 1.25fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.mobile-setup .section-label {
    color: var(--white);
}

.mobile-setup__copy h2 {
    color: var(--white);
}

.mobile-setup__copy h2 span {
    color: var(--yellow);
}

.mobile-setup__copy > p {
    color: rgba(255, 255, 255, 0.72);
}

.mobile-setup .text-arrow {
    margin-top: 1rem;
    color: var(--white);
}

.mobile-setup__image {
    position: relative;
    min-height: 500px;
}

.mobile-setup__image::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -14px;
    right: 22px;
    width: 120px;
    height: 28px;
    background: var(--yellow);
    transform: rotate(2deg);
}

.mobile-setup__image img {
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    border-radius: var(--radius-medium);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

/* =======================================================
   PROCESS
======================================================= */

.process {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--white);
}

.process__header {
    margin-bottom: 3rem;
}

.process__header h2 {
    margin-bottom: 0;
}

.process__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding-top: 2.4rem;
}

.process__track::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 10%;
    left: 10%;
    height: 3px;
    background: var(--blue-soft);
}

.process-step {
    position: relative;
}

.process-step__dot {
    position: absolute;
    top: -2.4rem;
    left: 0;
    width: 20px;
    height: 20px;
    border: 5px solid var(--white);
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 2px var(--blue-soft);
}

.process-step:nth-child(3) .process-step__dot {
    background: var(--yellow);
    box-shadow: 0 0 0 2px var(--yellow-deep);
}

.process-step small {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--blue);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.process-step h3 {
    margin-bottom: 0.7rem;
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: 900;
}

.process-step p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

/* =======================================================
   REVIEWS
======================================================= */

.reviews {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--paper);
}

.reviews__layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.reviews__intro {
    position: sticky;
    top: 130px;
}

.reviews__stack {
    display: grid;
    gap: 1.2rem;
}

.review {
    margin: 0;
}

.review--primary {
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--white);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-small);
}

.review__stars {
    margin-bottom: 1.4rem;
    color: var(--yellow-deep);
    letter-spacing: 0.16em;
}

.review--primary > p {
    margin-bottom: 2rem;
    color: var(--ink);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.25;
}

.review footer {
    display: grid;
    gap: 0.1rem;
}

.review footer strong {
    color: var(--blue);
    font-size: 0.78rem;
}

.review footer span {
    color: var(--muted);
    font-size: 0.65rem;
}

.review--message {
    justify-self: end;
    width: min(80%, 560px);
    padding: 1.2rem 1.3rem;
    background: var(--blue);
    color: var(--white);
    border-radius: 22px 22px 6px 22px;
}

.review--message p {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

.review--message footer strong,
.review--message footer span {
    color: rgba(255, 255, 255, 0.72);
}

.review--message-alt {
    justify-self: start;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 22px 22px 22px 6px;
}

.review--message-alt footer strong {
    color: var(--blue);
}

.review--message-alt footer span {
    color: var(--muted);
}

/* =======================================================
   FAQ
======================================================= */

.faq {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--white);
}

.faq__layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.faq__intro {
    position: sticky;
    top: 130px;
}

.faq__list {
    border-top: 2px solid var(--ink);
}

.faq__list details {
    border-bottom: 1px solid var(--line);
}

.faq__list summary {
    position: relative;
    padding: 1.5rem 3.5rem 1.5rem 0;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 850;
}

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

.faq__list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--steel-dark);
    border-radius: 50%;
    color: var(--blue);
    font-size: 1.15rem;
    transform: translateY(-50%);
}

.faq__list details[open] summary::after {
    content: "−";
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.faq__list details p {
    max-width: 700px;
    margin-bottom: 1.5rem;
    color: var(--ink-soft);
    font-size: 0.91rem;
}

/* =======================================================
   BOOKING
======================================================= */

.booking {
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: var(--blue-soft);
}

.booking__layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.booking__intro {
    padding-top: 1rem;
}

.booking__phone {
    display: grid;
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(13, 59, 102, 0.18);
}

.booking__phone small {
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.booking__phone a {
    margin-top: 0.2rem;
    color: var(--blue);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 950;
    text-decoration: none;
}

.service-ticket {
    background: var(--white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

.service-ticket__top {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem clamp(1.4rem, 4vw, 2.5rem);
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 10px,
            transparent 10px,
            transparent 20px
        ),
        var(--blue);
    color: var(--white);
}

.service-ticket__top > div {
    display: grid;
}

.service-ticket__top span,
.service-ticket__top small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.service-ticket__top strong {
    margin-top: 0.15rem;
    font-size: 1rem;
}

.service-ticket__number {
    text-align: right;
}

.booking-form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.booking-form label {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.booking-form label > span {
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--steel-dark);
    border-radius: 8px;
    outline: none;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.booking-form input,
.booking-form select {
    min-height: 52px;
}

.booking-form textarea {
    min-height: 135px;
    resize: vertical;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    background: var(--white);
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(13, 59, 102, 0.08);
}

.booking-form__note {
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: 0.67rem;
    text-align: center;
}

/* =======================================================
   FOOTER
======================================================= */

.site-footer {
    background: var(--ink);
    color: var(--white);
}

.site-footer__main {
    padding: 4.5rem 0;
}

.site-footer__inner {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--page-width)
    );
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.8fr 0.9fr;
    gap: clamp(2rem, 5vw, 5rem);
}

.footer-brand {
    display: grid;
    gap: 0.1rem;
    text-decoration: none;
}

.footer-brand__name {
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.footer-brand__tag {
    color: var(--yellow);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer__tagline {
    max-width: 340px;
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 700;
}

.site-footer__small {
    max-width: 340px;
    margin: 0.6rem 0 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
}

.site-footer__heading {
    margin-bottom: 1rem;
    color: var(--yellow);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer__nav,
.site-footer__contact {
    display: grid;
    gap: 0.55rem;
}

.site-footer__nav a,
.site-footer__contact a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
    text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
    color: var(--white);
}

.site-footer__text {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
}

.site-footer__bottom {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--page-width)
    );
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.66rem;
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 1100px) {
    .site-header__inner {
        grid-template-columns: auto 1fr;
    }

    .primary-nav {
        position: fixed;
        top: 82px;
        right: 0;
        left: 0;
        z-index: 999;
        display: grid;
        gap: 0;
        padding: 0 var(--page-gutter) 1rem;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 30px rgba(13, 59, 102, 0.08);
        transform: translateY(-130%);
        opacity: 0;
        pointer-events: none;
        transition:
            transform 200ms ease,
            opacity 160ms ease;
    }

    .primary-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .primary-nav a {
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
    }

    .primary-nav a::after {
        display: none;
    }

    .header-actions {
        justify-self: end;
    }

    .nav-toggle {
        display: block;
    }

    .header-phone {
        display: none;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .service-row {
        grid-template-columns:
            minmax(280px, 1.5fr)
            minmax(230px, 1fr)
            minmax(90px, 0.5fr)
            auto;
    }

    .service-row__time {
        display: none;
    }

    .process__track {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 3.5rem;
    }

    .process__track::before {
        display: none;
    }

    .process-step__dot {
        position: static;
        display: block;
        margin-bottom: 1rem;
    }

    .site-footer__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .hero__copy {
        max-width: none;
        padding:
            clamp(4rem, 12vw, 6rem)
            var(--page-gutter);
    }

    .hero__visual {
        min-height: 560px;
    }

    .quick-facts {
        grid-template-columns: 1fr;
    }

    .quick-facts__item {
        min-height: 110px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .service-row {
        grid-template-columns: 1fr auto;
        gap: 1.4rem 2rem;
        padding-block: 2rem;
    }

    .service-row__name {
        grid-column: 1 / -1;
    }

    .service-row__includes {
        grid-column: 1;
    }

    .service-row__time {
        display: none;
    }

    .service-row__price {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .service-row__book {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .results__header {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .results__header .section-label,
    .results__header h2,
    .results__header > p:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    .comparison {
        aspect-ratio: 4 / 3;
    }

    .result-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .result-card--large {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 460px;
    }

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

    .about__photo {
        min-height: 640px;
    }

    .about__copy {
        max-width: none;
        padding:
            clamp(4rem, 10vw, 6rem)
            var(--page-gutter);
    }

    .mobile-setup__grid,
    .reviews__layout,
    .faq__layout,
    .booking__layout {
        grid-template-columns: 1fr;
    }

    .reviews__intro,
    .faq__intro {
        position: static;
    }

    .mobile-setup__image {
        min-height: 420px;
    }

    .mobile-setup__image img {
        min-height: 420px;
    }

    .process__track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    html {
        scroll-padding-top: 74px;
    }

    .site-header__inner {
        min-height: 72px;
    }

    .primary-nav {
        top: 72px;
    }

    .button--header {
        display: none;
    }

    .brand__name {
        font-size: 0.95rem;
    }

    .hero__copy {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .hero h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
    }

    .hero__actions {
        align-items: stretch;
    }

    .hero__actions .button {
        width: 100%;
    }

    .hero__text-link {
        text-align: center;
    }

    .hero__visual {
        min-height: 460px;
    }

    .hero__identity {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        min-width: 0;
    }

    .hero__availability {
        top: 1rem;
        right: 1rem;
    }

    .section-intro h2,
    .results__header h2,
    .about__copy h2,
    .mobile-setup__copy h2,
    .process__header h2,
    .reviews__intro h2,
    .faq__intro h2,
    .booking__intro h2 {
        font-size: clamp(2.7rem, 13vw, 4.4rem);
    }

    .service-row {
        grid-template-columns: 1fr;
    }

    .service-row__includes,
    .service-row__price,
    .service-row__book {
        grid-column: 1;
        grid-row: auto;
    }

    .service-row__price {
        text-align: left;
    }

    .comparison {
        aspect-ratio: 1 / 1;
        border-radius: 16px;
    }

    .comparison__handle::before {
        width: 52px;
        height: 52px;
    }

    .result-gallery {
        grid-template-columns: 1fr;
    }

    .result-card--large,
    .result-card {
        grid-column: auto;
        min-height: 360px;
    }

    .about__photo {
        min-height: 520px;
    }

    .about__photo-note {
        right: 1rem;
        bottom: 1rem;
    }

    .mobile-setup__image,
    .mobile-setup__image img {
        min-height: 340px;
    }

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

    .process-step {
        padding-left: 2.2rem;
    }

    .process-step__dot {
        position: absolute;
        top: 0.2rem;
        left: 0;
        margin: 0;
    }

    .review--message {
        width: 92%;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .service-ticket__top {
        flex-direction: column;
        gap: 0.8rem;
    }

    .service-ticket__number {
        text-align: left;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        flex-direction: column;
    }
}

/* =======================================================
   REDUCED MOTION
======================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* =======================================================
   WASH & BEHOLD - WIDTH + TYPOGRAPHY CORRECTION

   Goals:
   - Stop ultrawide screens from stretching the composition.
   - Remove viewport-width padding that squeezes text.
   - Reduce oversized headings.
   - Prevent one-word-per-line headline stacking.
   - Keep photography and copy visually balanced.
======================================================= */

:root {
    --page-width: 1280px;
    --wide-section-width: 1480px;
}

body {
    overflow-x: clip;
}

/* -------------------------------------------------------
   GLOBAL CONTENT LIMITS
------------------------------------------------------- */

.site-header__inner,
.section-shell,
.site-footer__inner,
.site-footer__bottom {
    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--page-width)
    );
}

/*
   These sections previously had no practical desktop
   ceiling and could keep growing with the viewport.
*/

.hero,
.quick-facts,
.about {
    width: min(100%, var(--wide-section-width));
    margin-inline: auto;
}

/* -------------------------------------------------------
   GLOBAL TYPOGRAPHY SCALE
------------------------------------------------------- */

.section-intro h2,
.results__header h2,
.about__copy h2,
.mobile-setup__copy h2,
.process__header h2,
.reviews__intro h2,
.faq__intro h2,
.booking__intro h2 {
    font-size: clamp(2.7rem, 4.1vw, 4.7rem);
    line-height: 0.96;
    letter-spacing: -0.052em;
    text-wrap: balance;
}

.section-intro {
    max-width: 850px;
}

.section-intro > p:last-child,
.results__header > p:last-child,
.mobile-setup__copy > p,
.reviews__intro > p:last-child,
.faq__intro > p:last-child,
.booking__intro > p {
    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.65;
}

/* -------------------------------------------------------
   HERO

   The previous version used:
   calc((100vw - var(--page-width)) / 2)

   That meant larger monitors created larger INTERNAL
   padding and squeezed the headline into a tiny column.
------------------------------------------------------- */

.hero {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.08fr);

    min-height: 620px;
}

.hero__copy {
    align-self: center;

    width: 100%;
    max-width: none;

    padding:
        clamp(4rem, 6vw, 6rem)
        clamp(2.75rem, 5vw, 5rem);
}

.hero h1 {
    max-width: 740px;

    margin-bottom: 1.4rem;

    font-size: clamp(3.4rem, 5.1vw, 5.8rem);
    line-height: 0.91;
    letter-spacing: -0.058em;

    text-wrap: balance;
}

.hero__lead {
    max-width: 610px;

    font-size: clamp(1.02rem, 1.25vw, 1.18rem);
    line-height: 1.65;
}

.hero__visual {
    min-height: 620px;
}

.hero__identity {
    max-width: 260px;
}

/* -------------------------------------------------------
   QUICK FACTS
------------------------------------------------------- */

.quick-facts__item {
    min-height: 120px;
    padding:
        1.75rem
        clamp(1.5rem, 3vw, 2.5rem);
}

.quick-facts__item strong {
    font-size: 0.95rem;
}

/* -------------------------------------------------------
   SERVICES
------------------------------------------------------- */

.services {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.service-row {
    min-height: 150px;
}

.service-row h3 {
    font-size: clamp(1.35rem, 1.65vw, 1.85rem);
}

.service-row__price strong {
    font-size: 1.3rem;
}

/* -------------------------------------------------------
   RESULTS
------------------------------------------------------- */

.results {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.results__header {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(260px, 0.55fr);

    gap: clamp(2rem, 5vw, 4.5rem);
}

.comparison {
    max-width: 1180px;
    margin-inline: auto;
}

.result-gallery {
    max-width: 1180px;
    margin-inline: auto;
    margin-top: 1rem;
}

/* -------------------------------------------------------
   OWNER SECTION

   Same viewport-padding problem existed here.
------------------------------------------------------- */

.about {
    grid-template-columns:
        minmax(460px, 0.95fr)
        minmax(0, 1.05fr);
}

.about__photo {
    min-height: 660px;
    max-height: 760px;
}

.about__copy {
    align-self: center;

    width: 100%;
    max-width: 700px;

    padding:
        clamp(4rem, 6vw, 6rem)
        clamp(3rem, 5vw, 5rem);
}

.about__copy h2 {
    max-width: 620px;
    font-size: clamp(3rem, 4vw, 4.4rem);
}

.about__lead {
    max-width: 610px;

    font-size: clamp(1.1rem, 1.45vw, 1.35rem);
}

/* -------------------------------------------------------
   MOBILE RIG
------------------------------------------------------- */

.mobile-setup {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.mobile-setup__grid {
    grid-template-columns:
        minmax(360px, 0.85fr)
        minmax(0, 1.15fr);

    gap: clamp(3rem, 6vw, 5.5rem);
}

.mobile-setup__copy {
    max-width: 560px;
}

.mobile-setup__copy h2 {
    max-width: 560px;
    font-size: clamp(2.9rem, 4vw, 4.35rem);
}

.mobile-setup__image,
.mobile-setup__image img {
    min-height: 420px;
    max-height: 540px;
}

/* -------------------------------------------------------
   PROCESS
------------------------------------------------------- */

.process {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.process__header h2 {
    font-size: clamp(2.8rem, 4vw, 4.4rem);
}

/* -------------------------------------------------------
   REVIEWS
------------------------------------------------------- */

.reviews {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.reviews__layout {
    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(0, 1.18fr);

    gap: clamp(3rem, 6vw, 5.5rem);
}

.reviews__intro {
    max-width: 470px;
}

.reviews__intro h2 {
    font-size: clamp(2.9rem, 4vw, 4.35rem);
}

.review--primary > p {
    font-size: clamp(1.35rem, 2.1vw, 2rem);
}

/* -------------------------------------------------------
   FAQ
------------------------------------------------------- */

.faq {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.faq__layout {
    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(0, 1.18fr);

    gap: clamp(3rem, 6vw, 5.5rem);
}

.faq__intro {
    max-width: 470px;
}

.faq__intro h2 {
    font-size: clamp(2.9rem, 4vw, 4.35rem);
}

/* -------------------------------------------------------
   BOOKING
------------------------------------------------------- */

.booking {
    padding:
        clamp(4.75rem, 7vw, 7rem)
        0;
}

.booking__layout {
    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(0, 1.18fr);

    gap: clamp(3rem, 6vw, 5.5rem);
}

.booking__intro {
    max-width: 500px;
}

.booking__intro h2 {
    font-size: clamp(3rem, 4vw, 4.4rem);
}

/* -------------------------------------------------------
   ULTRAWIDE

   Once the monitor is wider than the design canvas,
   nothing continues to grow.
------------------------------------------------------- */

@media (min-width: 1500px) {

    :root {
        --page-gutter: 2rem;
    }

    .hero,
    .quick-facts,
    .about {
        width: min(
            calc(100% - 4rem),
            var(--wide-section-width)
        );
    }

    .hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.05fr);
    }

    .hero__copy {
        padding:
            5rem
            4.5rem;
    }

    .hero h1 {
        font-size: 5.5rem;
    }

    .section-intro h2,
    .results__header h2 {
        font-size: 4.6rem;
    }

    .about__copy h2,
    .mobile-setup__copy h2,
    .reviews__intro h2,
    .faq__intro h2,
    .booking__intro h2,
    .process__header h2 {
        font-size: 4.15rem;
    }
}

/* -------------------------------------------------------
   VERY WIDE MONITORS

   The site now behaves like a designed canvas instead
   of trying to fill a television screen.
------------------------------------------------------- */

@media (min-width: 1900px) {

    .site-header__inner,
    .section-shell,
    .site-footer__inner,
    .site-footer__bottom {
        width: var(--page-width);
    }

    .hero,
    .quick-facts,
    .about {
        width: var(--wide-section-width);
    }
}

/* -------------------------------------------------------
   TABLET SAFETY
------------------------------------------------------- */

@media (max-width: 1100px) {

    .hero__copy {
        padding:
            clamp(3.5rem, 7vw, 5rem)
            var(--page-gutter);
    }

    .about__copy {
        padding:
            clamp(3.5rem, 7vw, 5rem)
            var(--page-gutter);
    }
}

/* -------------------------------------------------------
   MOBILE
------------------------------------------------------- */

@media (max-width: 860px) {

    .hero,
    .quick-facts,
    .about {
        width: 100%;
    }

    .hero h1 {
        max-width: 680px;

        font-size: clamp(3rem, 11vw, 4.8rem);
    }

    .section-intro h2,
    .results__header h2,
    .about__copy h2,
    .mobile-setup__copy h2,
    .process__header h2,
    .reviews__intro h2,
    .faq__intro h2,
    .booking__intro h2 {
        font-size: clamp(2.6rem, 9vw, 4rem);
    }

    .about__photo {
        min-height: 580px;
        max-height: none;
    }

    .reviews__intro,
    .faq__intro,
    .booking__intro {
        max-width: none;
    }
}

@media (max-width: 620px) {

    .hero h1 {
        font-size: clamp(2.85rem, 13vw, 4.3rem);
    }

    .section-intro h2,
    .results__header h2,
    .about__copy h2,
    .mobile-setup__copy h2,
    .process__header h2,
    .reviews__intro h2,
    .faq__intro h2,
    .booking__intro h2 {
        font-size: clamp(2.45rem, 11vw, 3.7rem);
    }
}

/* =======================================================
   WASH & BEHOLD - HEADER + HERO LEGIBILITY TUNE
======================================================= */

/* Bigger logo */
.brand__name {
    font-size: 1.28rem;
    letter-spacing: -0.035em;
}

.brand__tag {
    margin-top: 0.12rem;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
}

/* Bigger desktop navigation */
.primary-nav {
    gap: clamp(1.5rem, 2.6vw, 2.8rem);
}

.primary-nav a {
    font-size: 0.84rem;
    font-weight: 900;
}

/* Slightly stronger header phone treatment */
.header-phone__label {
    font-size: 0.64rem;
}

.header-phone__number {
    font-size: 0.94rem;
}

/* Bigger secondary hero CTA */
.hero__text-link {
    font-size: 0.98rem;
    font-weight: 900;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* Make quick-fact numbers actually readable */
.quick-facts__item > span {
    min-width: 34px;
    color: var(--blue);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
}

.quick-facts__item strong {
    font-size: 1.02rem;
}

.quick-facts__item small {
    font-size: 0.8rem;
}

/* Keep header proportions comfortable after enlarging */
.site-header__inner {
    min-height: 88px;
}

@media (max-width: 1100px) {
    .brand__name {
        font-size: 1.18rem;
    }

    .brand__tag {
        font-size: 0.61rem;
    }

    .primary-nav a {
        font-size: 0.84rem;
    }
}

@media (max-width: 620px) {
    .site-header__inner {
        min-height: 76px;
    }

    .brand__name {
        font-size: 1.06rem;
    }

    .brand__tag {
        font-size: 0.57rem;
    }

    .hero__text-link {
        font-size: 0.94rem;
    }

    .quick-facts__item > span {
        font-size: 0.94rem;
    }
}

/* =======================================================
   WASH & BEHOLD - STRONG HEADER LEGIBILITY PASS
======================================================= */

/* Brand needs to read like a real logo, not tiny utility text */
.site-header .brand__name {
    font-size: 1.58rem;
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.site-header .brand__tag {
    margin-top: 0.22rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.17em;
}

/* Give the larger logo breathing room */
.site-header__inner {
    min-height: 98px;
}

/* Navigation should be plainly readable on desktop */
.site-header .primary-nav {
    gap: clamp(1.75rem, 2.8vw, 3.25rem);
}

.site-header .primary-nav a {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

/* Phone block needs to remain balanced with larger navigation */
.site-header .header-phone__label {
    font-size: 0.7rem;
    font-weight: 900;
}

.site-header .header-phone__number {
    margin-top: 0.25rem;
    font-size: 1.02rem;
}

/* Keep main CTA proportional */
.site-header .button--header {
    min-height: 48px;
    padding-inline: 1.35rem;
    font-size: 0.82rem;
}

/* Hero secondary CTA should not look like legal fine print */
.hero .hero__text-link {
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1.3;
    text-decoration-thickness: 4px;
    text-underline-offset: 7px;
}

/* Quick-fact row */
.quick-facts .quick-facts__item {
    grid-template-columns: 48px 1fr;
    column-gap: 1rem;
}

.quick-facts .quick-facts__item > span {
    min-width: 48px;
    padding-top: 0.12rem;
    color: var(--blue);
    font-size: 1.28rem;
    font-weight: 950;
    line-height: 1;
}

.quick-facts .quick-facts__item strong {
    font-size: 1.08rem;
    line-height: 1.25;
}

.quick-facts .quick-facts__item small {
    margin-top: 0.28rem;
    font-size: 0.84rem;
    line-height: 1.45;
}

/* Desktop navigation offset must follow taller header */
@media (max-width: 1100px) {
    .site-header .brand__name {
        font-size: 1.38rem;
    }

    .site-header .brand__tag {
        font-size: 0.66rem;
    }

    .site-header__inner {
        min-height: 88px;
    }

    .primary-nav {
        top: 88px;
    }
}

@media (max-width: 620px) {
    .site-header__inner {
        min-height: 76px;
    }

    .site-header .brand__name {
        font-size: 1.12rem;
    }

    .site-header .brand__tag {
        font-size: 0.56rem;
    }

    .primary-nav {
        top: 76px;
    }

    .hero .hero__text-link {
        font-size: 1rem;
    }

    .quick-facts .quick-facts__item {
        grid-template-columns: 42px 1fr;
    }

    .quick-facts .quick-facts__item > span {
        min-width: 42px;
        font-size: 1.12rem;
    }
}

/* =======================================================
   WASH & BEHOLD - QUICK FACTS READABILITY FIX
======================================================= */

.quick-facts__item {
    min-height: 140px;
    grid-template-columns: 52px 1fr;
    column-gap: 1.15rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.quick-facts__item > span {
    min-width: 52px;
    padding-top: 0.08rem;

    color: var(--blue);
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1;
}

.quick-facts__item strong {
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 950;
    line-height: 1.2;
}

.quick-facts__item small {
    margin-top: 0.42rem;

    color: #4f5d69;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

@media (max-width: 860px) {
    .quick-facts__item {
        grid-template-columns: 48px 1fr;
        min-height: 125px;
    }

    .quick-facts__item > span {
        min-width: 48px;
        font-size: 1.3rem;
    }

    .quick-facts__item strong {
        font-size: 1.12rem;
    }

    .quick-facts__item small {
        font-size: 0.95rem;
    }
}

@media (max-width: 620px) {
    .quick-facts__item {
        grid-template-columns: 44px 1fr;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .quick-facts__item > span {
        min-width: 44px;
        font-size: 1.2rem;
    }

    .quick-facts__item strong {
        font-size: 1.05rem;
    }

    .quick-facts__item small {
        font-size: 0.92rem;
    }
}

/* =======================================================
   WASH & BEHOLD - SERVICE BOARD LEGIBILITY PASS
======================================================= */

/* Pull the services section closer to the hero */
.services {
    padding-top: clamp(3.5rem, 5vw, 5rem);
}

/* Reduce unnecessary gap before the actual packages */
.services .section-intro {
    margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}

/* Package rows */
.service-board .service-row {
    min-height: 165px;
    gap: 1.6rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* 01 / 02 / 03 */
.service-board .service-row__name > span {
    padding-top: 0.38rem;
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1;
}

/* Maintenance Detail / Full Interior + Exterior / Deep Reset */
.service-board .service-row__eyebrow {
    margin-bottom: 0.48rem;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

/* Package names */
.service-board .service-row h3 {
    max-width: 360px;
    font-size: clamp(1.6rem, 1.85vw, 2rem);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

/* Included-service pills */
.service-board .service-row__includes {
    gap: 0.55rem;
}

.service-board .service-row__includes span {
    padding: 0.48rem 0.72rem;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

/* Usually / From labels */
.service-board .service-row__time small,
.service-board .service-row__price small {
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.09em;
}

/* Time values */
.service-board .service-row__time strong {
    font-size: 0.94rem;
    font-weight: 900;
}

/* Prices */
.service-board .service-row__price strong {
    font-size: 1.7rem;
    font-weight: 950;
    line-height: 1;
}

/* BOOK IT / FIX IT / SEND HELP */
.service-board .service-row__book {
    min-width: 124px;
    min-height: 46px;
    padding: 0.8rem 1rem;
    font-size: 0.78rem;
    font-weight: 950;
}

/* MOST REQUESTED badge */
.service-board .service-row--featured::before {
    padding: 0.42rem 0.72rem;
    font-size: 0.62rem;
    font-weight: 950;
}

/* Disclaimer */
.services .service-disclaimer {
    max-width: 980px;
    margin-top: 1.6rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: #596773;
}

/* Desktop column balance */
@media (min-width: 1101px) {
    .service-board .service-row {
        grid-template-columns:
            minmax(330px, 1.45fr)
            minmax(330px, 1.25fr)
            minmax(100px, 0.45fr)
            minmax(110px, 0.45fr)
            auto;
    }
}

/* Tablet */
@media (max-width: 1100px) {
    .service-board .service-row h3 {
        font-size: 1.65rem;
    }

    .service-board .service-row__includes span {
        font-size: 0.74rem;
    }

    .service-board .service-row__price strong {
        font-size: 1.55rem;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .services {
        padding-top: 3rem;
    }

    .service-board .service-row {
        min-height: 0;
        padding-top: 1.8rem;
        padding-bottom: 1.8rem;
    }

    .service-board .service-row__name > span {
        font-size: 0.86rem;
    }

    .service-board .service-row__eyebrow {
        font-size: 0.66rem;
    }

    .service-board .service-row h3 {
        max-width: none;
        font-size: 1.55rem;
    }

    .service-board .service-row__includes span {
        font-size: 0.72rem;
    }

    .service-board .service-row__book {
        min-width: 130px;
    }

    .services .service-disclaimer {
        font-size: 0.78rem;
    }
}

/* =======================================================
   WASH & BEHOLD - TRUE SERVICE ACCORDION
======================================================= */

.service-board.service-accordion {
    border-top: 2px solid var(--ink);
}

/*
   Reset the old service-row grid from the <details> shell.
   The summary itself now owns the row layout.
*/
.service-accordion .service-accordion__item {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: var(--white);
    border: 0;
    border-bottom: 1px solid var(--line);
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

/* Featured package keeps the blue wash */
.service-accordion .service-row--featured {
    background: var(--blue-soft);
}

/* Kill the old hover expansion behavior */
.service-accordion .service-row:hover {
    margin-inline: 0;
    padding-inline: 0;
}

/* -------------------------------------------------------
   CLICKABLE ACCORDION HEADER
------------------------------------------------------- */

.service-accordion__summary {
    display: grid;
    grid-template-columns:
        minmax(320px, 1.45fr)
        minmax(320px, 1.2fr)
        minmax(105px, 0.42fr)
        minmax(110px, 0.42fr)
        54px;

    gap: 1.6rem;
    align-items: center;

    min-height: 150px;
    padding: 1.8rem 1rem;

    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Remove browser's native triangle */
.service-accordion__summary::-webkit-details-marker {
    display: none;
}

.service-accordion__summary::marker {
    content: "";
}

/* Hover makes it obvious the whole row is interactive */
.service-accordion__item:not(.service-row--featured)
.service-accordion__summary:hover {
    background: var(--paper);
}

.service-row--featured .service-accordion__summary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Keyboard focus */
.service-accordion__summary:focus-visible {
    position: relative;
    z-index: 2;
    outline: 3px solid var(--yellow);
    outline-offset: -3px;
}

/* -------------------------------------------------------
   ACCORDION PLUS / MINUS CONTROL
------------------------------------------------------- */

.service-accordion__toggle {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    justify-self: end;

    background: var(--white);
    color: var(--blue);

    border: 1px solid var(--steel-dark);
    border-radius: 50%;

    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

.service-accordion__summary:hover .service-accordion__toggle {
    border-color: var(--blue);
}

.service-accordion__item[open] .service-accordion__toggle {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    transform: rotate(45deg);
}

/*
   Plus rotated 45 degrees reads visually as an X/close
   without changing markup.
*/

/* -------------------------------------------------------
   CLOSED STATE
------------------------------------------------------- */

/*
   Explicitly hide content when closed.
   This fixes the old .service-row display:grid rule
   overriding native <details> behavior.
*/
.service-accordion__item:not([open])
.service-accordion__content {
    display: none !important;
}

/* -------------------------------------------------------
   OPEN STATE
------------------------------------------------------- */

.service-accordion__item[open] {
    box-shadow:
        inset 5px 0 0 var(--yellow);
}

.service-accordion__item[open]
.service-accordion__summary {
    border-bottom: 1px solid rgba(13, 59, 102, 0.15);
}

/* Description panel */
.service-accordion__content {
    display: grid;
    grid-template-columns:
        minmax(280px, 700px)
        auto;

    gap: 2rem;
    align-items: center;

    padding:
        1.6rem
        1rem
        2rem
        calc(1rem + 50px);

    background: rgba(13, 59, 102, 0.035);
}

.service-row--featured .service-accordion__content {
    background: rgba(255, 255, 255, 0.3);
}

.service-accordion__content p {
    max-width: 720px;
    margin: 0;

    color: var(--ink-soft);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.65;
}

.service-accordion__content .service-row__book {
    justify-self: end;
    min-width: 135px;
}

/* -------------------------------------------------------
   FEATURED BADGE
------------------------------------------------------- */

.service-accordion .service-row--featured::before {
    z-index: 3;
    top: 0;
    left: 1rem;
}

/* Give featured summary room for badge */
.service-accordion .service-row--featured
.service-accordion__summary {
    padding-top: 2.5rem;
}

/* -------------------------------------------------------
   DESKTOP POLISH
------------------------------------------------------- */

@media (min-width: 1101px) {

    .service-accordion__summary {
        grid-template-columns:
            minmax(340px, 1.4fr)
            minmax(340px, 1.15fr)
            110px
            115px
            52px;
    }

    .service-accordion__item[open]
    .service-row__name h3 {
        color: var(--blue);
    }
}

/* -------------------------------------------------------
   TABLET
------------------------------------------------------- */

@media (max-width: 1100px) {

    .service-accordion__summary {
        grid-template-columns:
            minmax(280px, 1.3fr)
            minmax(260px, 1fr)
            100px
            52px;
    }

    .service-accordion__summary
    .service-row__time {
        display: none;
    }

    .service-accordion__summary
    .service-row__price {
        display: grid;
    }

    .service-accordion__content {
        padding-left: 1rem;
    }
}

/* -------------------------------------------------------
   MOBILE
------------------------------------------------------- */

@media (max-width: 760px) {

    .service-accordion__summary {
        position: relative;

        grid-template-columns: 1fr 48px;
        gap: 1.1rem;

        min-height: 0;
        padding: 1.5rem 0.25rem;
    }

    .service-accordion__summary
    .service-row__name {
        grid-column: 1;
        grid-row: 1;
    }

    .service-accordion__summary
    .service-accordion__toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .service-accordion__summary
    .service-row__includes {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .service-accordion__summary
    .service-row__price {
        grid-column: 1;
        grid-row: 3;
    }

    .service-accordion__summary
    .service-row__time {
        display: grid;

        grid-column: 1;
        grid-row: 4;
    }

    .service-accordion__toggle {
        width: 40px;
        height: 40px;
    }

    .service-accordion__content {
        grid-template-columns: 1fr;
        gap: 1.25rem;

        padding:
            1.3rem
            0.25rem
            1.6rem;
    }

    .service-accordion__content p {
        font-size: 0.98rem;
    }

    .service-accordion__content .service-row__book {
        justify-self: start;
    }

    .service-accordion .service-row--featured
    .service-accordion__summary {
        padding-top: 2.6rem;
    }
}

/* =======================================================
   WASH & BEHOLD - RESULTS SECTION BALANCE PASS
======================================================= */

/* Keep the headline strong without competing with the hero */
.results .results__header h2 {
    max-width: 720px;
    font-size: clamp(2.8rem, 3.7vw, 4.15rem);
    line-height: 0.95;
}

/* Bring the instruction closer to the headline */
.results .results__header {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(240px, 0.48fr);

    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: end;

    margin-bottom: 2.5rem;
}

.results .results__header > p:last-child {
    max-width: 330px;
    margin-bottom: 0.35rem;

    font-size: 1rem;
    line-height: 1.5;
}

/* Slider stays untouched visually */
.results .comparison {
    max-width: 1160px;
}

/* Tighten the gallery beneath the slider */
.results .result-gallery {
    max-width: 1160px;

    grid-template-columns:
        minmax(0, 1.32fr)
        minmax(300px, 0.68fr);

    grid-template-rows:
        repeat(2, 250px);

    gap: 0.9rem;
    margin-top: 0.9rem;
}

/* Large exterior image still leads, but no longer overwhelms */
.results .result-card--large {
    min-height: 0;
    height: 509px;
}

/* Smaller detail cards stay compact and intentional */
.results .result-card:not(.result-card--large) {
    min-height: 0;
    height: 250px;
}

/* Keep captions readable without covering too much photography */
.results .result-card figcaption {
    right: 0.85rem;
    bottom: 0.85rem;
    left: 0.85rem;

    padding: 0.8rem 0.9rem;
}

.results .result-card figcaption strong {
    font-size: 0.82rem;
    line-height: 1.35;
}

/* Tablet */
@media (max-width: 860px) {
    .results .results__header {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .results .results__header > p:last-child {
        max-width: none;
    }

    .results .result-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .results .result-card--large {
        grid-column: 1 / -1;
        height: 420px;
    }

    .results .result-card:not(.result-card--large) {
        height: 260px;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .results .results__header h2 {
        font-size: clamp(2.5rem, 11vw, 3.6rem);
    }

    .results .result-gallery {
        grid-template-columns: 1fr;
    }

    .results .result-card--large,
    .results .result-card:not(.result-card--large) {
        grid-column: auto;
        height: 340px;
    }
}

/* =======================================================
   WASH & BEHOLD - OWNER PROFILE READABILITY FIX
======================================================= */

/* These are real profile labels, not muted metadata */
.about__staff-list dt {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Keep answers visually stronger, but not dramatically smaller */
.about__staff-list dd {
    color: var(--blue);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.4;
}

/* Make row separators visible enough to structure the list */
.about__staff-list > div {
    padding: 1.05rem 0;
    border-bottom-color: #c8d1d7;
}

@media (max-width: 620px) {
    .about__staff-list dt,
    .about__staff-list dd {
        font-size: 0.86rem;
    }
}

/* =======================================================
   WASH & BEHOLD - MOBILE SETUP CTA POLISH
======================================================= */

/* Remove the tape-like decorative strip over the image */
.mobile-setup__image::before {
    display: none;
}

/* Give the CTA proper visual weight */
.mobile-setup .text-arrow {
    margin-top: 1.6rem;
    gap: 0.75rem;

    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0.055em;
    line-height: 1.2;
}

/* Make the arrow feel intentional */
.mobile-setup .text-arrow span {
    font-size: 1.15rem;
}

/* Slightly more separation from body copy */
.mobile-setup__copy > p {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 620px) {
    .mobile-setup .text-arrow {
        margin-top: 1.4rem;
        font-size: 0.94rem;
    }

    .mobile-setup .text-arrow span {
        font-size: 1.05rem;
    }
}

/* =======================================================
   WASH & BEHOLD - MOBILE SETUP COPY CONTRAST FIX
======================================================= */

.mobile-setup__copy > p {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* =======================================================
   WASH & BEHOLD - PROCESS READABILITY PASS
======================================================= */

/* Step labels need to read as labels, not microscopic metadata */
.process-step small {
    margin-bottom: 0.65rem;

    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

/* Keep titles strong */
.process-step h3 {
    margin-bottom: 0.85rem;

    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 950;
    line-height: 1.2;
}

/* Supporting copy should read like actual body copy */
.process-step p {
    margin-bottom: 0;

    color: #465563;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Stronger process line */
.process__track::before {
    top: 12px;
    height: 3px;

    background: #c7d8e6;
}

/* Larger, consistent process markers */
.process-step__dot {
    top: -2.45rem;

    width: 24px;
    height: 24px;

    border: 5px solid var(--white);
    background: var(--blue);

    box-shadow:
        0 0 0 2px #bdd1e1;
}

/* Remove the arbitrary yellow Step 03 state */
.process-step:nth-child(3) .process-step__dot {
    background: var(--blue);

    box-shadow:
        0 0 0 2px #bdd1e1;
}

/* Give every step the same subtle yellow center accent */
.process-step__dot::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 6px;
    height: 6px;

    background: var(--yellow);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

/* Desktop spacing */
.process__track {
    gap: clamp(1.6rem, 2.8vw, 2.6rem);
}

/* Tablet */
@media (max-width: 1100px) {
    .process-step small {
        font-size: 0.7rem;
    }

    .process-step p {
        font-size: 0.92rem;
    }

    .process-step__dot {
        width: 22px;
        height: 22px;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .process-step small {
        font-size: 0.68rem;
    }

    .process-step h3 {
        font-size: 1.12rem;
    }

    .process-step p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .process-step__dot {
        width: 21px;
        height: 21px;
    }
}

/* =======================================================
   WASH & BEHOLD - PROCESS CONNECTOR ALIGNMENT FIX
======================================================= */

@media (min-width: 1101px) {

    /*
       Five equal columns let the connector begin at the
       center of Step 01 and end at the center of Step 05.
       Visual spacing comes from step padding instead of
       grid gaps, so the geometry stays exact.
    */
    .process__track {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
    }

    .process-step {
        padding-right: 2rem;
    }

    .process-step:last-child {
        padding-right: 0;
    }

    .process__track::before {
        left: 12px;
        right: calc(20% - 12px);
    }
}

/* =======================================================
   WASH & BEHOLD - PHONE PROOF STYLING
======================================================= */

.reviews-proof {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* -------------------------------------------------------
   TRADITIONAL REVIEW
------------------------------------------------------- */

.reviews-proof .review-proof__card {
    width: min(100%, 690px);
    margin-left: 0;
}

/* -------------------------------------------------------
   SHARED PHONE / MESSAGE CARD
------------------------------------------------------- */

.review-proof__phone {
    position: relative;

    width: min(100%, 610px);

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #cbd5dc;
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(10, 31, 48, 0.08);
}

/* Offset the two phone captures slightly so they feel
   like separate screenshots instead of stacked cards. */
.review-proof__text {
    align-self: flex-end;
}

.review-proof__dm {
    align-self: flex-start;
    margin-left: 3rem;
}

/* -------------------------------------------------------
   PHONE HEADER
------------------------------------------------------- */

.review-proof__phone-header {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 0.8rem;
    align-items: center;

    min-height: 68px;
    padding: 0.8rem 1rem;

    background: #f8fafb;
    border-bottom: 1px solid #d8e0e5;
}

.review-proof__avatar {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background: var(--blue);
    color: #ffffff;

    border-radius: 50%;

    font-size: 0.95rem;
    font-weight: 950;
}

.review-proof__phone-header strong {
    display: block;

    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.15;
}

.review-proof__phone-header > div:nth-child(2) span {
    display: block;

    margin-top: 0.18rem;

    color: #566573;
    font-size: 0.73rem;
    font-weight: 700;
}

.review-proof__phone-time {
    color: #667582;
    font-size: 0.7rem;
    font-weight: 700;
}

/* -------------------------------------------------------
   MESSAGE BODY
------------------------------------------------------- */

.review-proof__phone-body {
    position: relative;

    min-height: 150px;
    padding: 1.15rem 1rem 1rem;

    background: #ffffff;
}

.review-proof__bubble {
    max-width: 84%;
    padding: 0.85rem 1rem;

    border-radius: 18px;

    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.48;
}

.review-proof__bubble p {
    margin: 0;
}

/* Text message bubble */
.review-proof__bubble--incoming {
    margin-left: auto;

    background: var(--blue);
    color: #ffffff;

    border-bottom-right-radius: 5px;
}

/* Tiny tail */
.review-proof__bubble--incoming::after {
    content: "";

    position: absolute;
    right: 0.72rem;
    bottom: 2.25rem;

    width: 12px;
    height: 12px;

    background: var(--blue);

    transform: rotate(45deg);
}

/* -------------------------------------------------------
   TEXT MESSAGE DETAILS
------------------------------------------------------- */

.review-proof__delivered {
    margin-top: 0.45rem;
    padding-right: 0.25rem;

    color: #667582;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: right;
}

/* -------------------------------------------------------
   SOCIAL DM
------------------------------------------------------- */

.review-proof__dm .review-proof__phone-header {
    background: #ffffff;
}

.review-proof__dm .review-proof__avatar {
    background:
        linear-gradient(
            135deg,
            var(--yellow),
            #ff9d3d 45%,
            var(--blue)
        );

    color: #ffffff;

    border: 2px solid #ffffff;

    box-shadow:
        0 0 0 2px #e4e9ed;
}

.review-proof__dm-badge {
    display: inline-grid;
    place-items: center;

    min-width: 38px;
    height: 28px;
    padding: 0 0.6rem;

    background: #eef4f8;
    color: var(--blue);

    border-radius: 999px;

    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.07em;
}

.review-proof__bubble--dm {
    position: relative;

    margin-right: auto;

    background: #f0f3f5;
    color: var(--ink);

    border-bottom-left-radius: 5px;
}

.review-proof__reaction {
    position: absolute;
    left: 1.7rem;
    bottom: 1.1rem;

    display: grid;
    place-items: center;

    min-width: 34px;
    height: 28px;
    padding: 0 0.45rem;

    background: #ffffff;

    border: 1px solid #d7dfe4;
    border-radius: 999px;

    box-shadow:
        0 3px 10px rgba(10, 31, 48, 0.08);

    font-size: 0.85rem;
}

.review-proof__seen {
    margin-top: 1.75rem;

    color: #667582;
    font-size: 0.68rem;
    font-weight: 700;
}

/* -------------------------------------------------------
   READABILITY DETAIL PASS
------------------------------------------------------- */

.review-proof .review--primary footer span {
    color: #536270;
    opacity: 1;
}

.review-proof .review--primary footer strong {
    color: var(--blue);
}

/* -------------------------------------------------------
   TABLET
------------------------------------------------------- */

@media (max-width: 860px) {

    .review-proof__phone,
    .reviews-proof .review-proof__card {
        width: 100%;
        max-width: 680px;
    }

    .review-proof__text,
    .review-proof__dm {
        align-self: stretch;
        margin-left: 0;
    }
}

/* -------------------------------------------------------
   MOBILE
------------------------------------------------------- */

@media (max-width: 620px) {

    .reviews-proof {
        gap: 0.9rem;
    }

    .review-proof__phone {
        border-radius: 18px;
    }

    .review-proof__phone-header {
        grid-template-columns: 38px 1fr auto;
        min-height: 62px;
        padding: 0.72rem 0.8rem;
    }

    .review-proof__avatar {
        width: 38px;
        height: 38px;
    }

    .review-proof__phone-body {
        min-height: 135px;
        padding: 1rem 0.8rem;
    }

    .review-proof__bubble {
        max-width: 92%;
        font-size: 0.92rem;
    }
}

/* =======================================================
   WASH & BEHOLD - REAL PHONE PROOF V2
======================================================= */

/*
   Reset the first phone-proof attempt.
   The OUTER article only positions the screenshot.
   The INNER device owns the visual phone frame.
*/

.review-proof__phone {
    width: auto;
    max-width: none;

    overflow: visible;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.review-proof__text {
    width: min(100%, 500px);
    align-self: flex-end;
}

.review-proof__dm {
    width: min(100%, 500px);
    align-self: flex-start;
    margin-left: 2.5rem;
}


/* -------------------------------------------------------
   SHARED PHONE SCREEN
------------------------------------------------------- */

.review-proof__device {
    position: relative;

    width: 100%;
    min-height: 430px;

    overflow: hidden;

    background: #ffffff;

    border: 2px solid #1e242a;
    border-radius: 36px;

    box-shadow:
        0 18px 45px rgba(13, 32, 47, 0.13);

    isolation: isolate;
}

/* Dynamic-island style top pill */
.review-proof__device::before {
    content: "";

    position: absolute;
    z-index: 5;
    top: 11px;
    left: 50%;

    width: 94px;
    height: 26px;

    background: #0b0d0f;
    border-radius: 999px;

    transform: translateX(-50%);
}


/* -------------------------------------------------------
   STATUS BAR
------------------------------------------------------- */

.review-proof__statusbar {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 52px;
    padding: 11px 22px 0;

    color: #111820;

    font-size: 0.74rem;
    font-weight: 900;
}

.review-proof__status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.review-proof__status-icons span {
    display: block;

    width: 7px;
    height: 7px;

    background: #10161c;
    border-radius: 50%;
}

.review-proof__status-icons span:last-child {
    width: 22px;
    height: 10px;

    border: 2px solid #10161c;
    border-radius: 3px;

    background: transparent;
}


/* -------------------------------------------------------
   CONTACT / THREAD HEADER
------------------------------------------------------- */

.review-proof__thread-header {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 0.8rem;
    align-items: center;

    min-height: 72px;
    padding: 0.7rem 1.15rem 0.9rem;

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e1e5e8;
}

.review-proof__thread-avatar {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 0.92rem;
    font-weight: 950;
}

.review-proof__thread-avatar--text {
    background: #e6eef5;
    color: var(--blue);
}

.review-proof__thread-avatar--dm {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #ffcc33 0%,
            #ff6b35 28%,
            #f72585 56%,
            #8338ec 78%,
            #3a86ff 100%
        );

    color: #ffffff;

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 2px #e1e6ea;
}

.review-proof__thread-meta strong {
    display: block;

    color: #111820;
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1.15;
}

.review-proof__thread-meta span {
    display: block;

    margin-top: 0.2rem;

    color: #586674;
    font-size: 0.72rem;
    font-weight: 700;
}

.review-proof__thread-badge {
    min-width: 40px;
    min-height: 28px;

    display: grid;
    place-items: center;

    padding: 0 0.6rem;

    background: #f2f4f6;
    color: #374450;

    border-radius: 999px;

    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.06em;
}


/* -------------------------------------------------------
   CONVERSATION AREA
------------------------------------------------------- */

.review-proof__conversation {
    position: relative;

    min-height: 250px;
    padding: 1.6rem 1rem 1.3rem;

    background: #ffffff;
}

.review-proof__message-group {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;

    width: 100%;
}

.review-proof__message-group--incoming,
.review-proof__message-group--dm {
    align-items: flex-start;
}

.review-proof__message {
    position: relative;

    width: fit-content;
    max-width: 82%;

    padding: 0.72rem 0.9rem;

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.42;
}

.review-proof__message p {
    margin: 0;
}


/* -------------------------------------------------------
   TEXT MESSAGE STYLE
------------------------------------------------------- */

.review-proof__device--text {
    border-color: #22272c;
}

.review-proof__message--incoming {
    background: #e5e5ea;
    color: #101418;

    border-radius:
        18px
        18px
        18px
        5px;
}

/* little message tail */
.review-proof__message-group--incoming
.review-proof__message:last-child::before {
    content: "";

    position: absolute;
    left: -6px;
    bottom: 0;

    width: 12px;
    height: 12px;

    background: #e5e5ea;

    border-bottom-right-radius: 10px;
}

.review-proof__thread-stamp {
    margin-top: 0.65rem;

    color: #7a858f;

    font-size: 0.67rem;
    font-weight: 700;
    text-align: left;
}


/* -------------------------------------------------------
   INSTAGRAM-STYLE DM
------------------------------------------------------- */

.review-proof__device--dm {
    border: 3px solid transparent;

    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(
            135deg,
            #ff7a00,
            #ff006e 35%,
            #8338ec 67%,
            #3a86ff
        ) border-box;
}

.review-proof__thread-header--dm {
    border-bottom-color: #eceff1;
}

.review-proof__conversation--dm {
    padding-top: 1.25rem;
}

.review-proof__dm-date {
    margin-bottom: 1rem;

    color: #7c8791;

    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.review-proof__message--dm {
    background: #efeff1;
    color: #101418;

    border-radius:
        18px
        18px
        18px
        6px;
}

.review-proof__message-group--dm
.review-proof__message:last-child::before {
    content: "";

    position: absolute;
    left: -5px;
    bottom: 0;

    width: 11px;
    height: 11px;

    background: #efeff1;

    border-bottom-right-radius: 9px;
}

.review-proof__dm-reaction {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 35px;
    height: 27px;

    margin-top: 0.28rem;
    margin-left: 0.8rem;

    padding: 0 0.42rem;

    background: #ffffff;

    border: 1px solid #dce1e5;
    border-radius: 999px;

    box-shadow:
        0 3px 9px rgba(20, 37, 50, 0.08);

    font-size: 0.82rem;
}


/* -------------------------------------------------------
   MESSAGE COMPOSER
------------------------------------------------------- */

.review-proof__composer {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    gap: 0.55rem;
    align-items: center;

    margin: 0 0.85rem 0.9rem;
    padding: 0.42rem 0.55rem;

    min-height: 44px;

    background: #ffffff;

    border: 1px solid #d4dade;
    border-radius: 999px;
}

.review-proof__composer-icon,
.review-proof__composer-mic {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    color: #586674;

    border-radius: 50%;

    font-size: 0.9rem;
    font-weight: 900;
}

.review-proof__device--text
.review-proof__composer-icon {
    background: #e9f3ff;
    color: #2688f5;
}

.review-proof__composer-placeholder {
    color: #87929b;
    font-size: 0.8rem;
    font-weight: 600;
}

.review-proof__composer-mic {
    font-size: 0.78rem;
}

.review-proof__composer--dm {
    grid-template-columns: 34px 1fr auto;
}

.review-proof__composer--dm
.review-proof__composer-icon {
    background:
        linear-gradient(
            135deg,
            #8338ec,
            #3a86ff
        );

    color: #ffffff;
}

.review-proof__composer-actions {
    color: #27333d;

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}


/* -------------------------------------------------------
   TRADITIONAL REVIEW BALANCE
------------------------------------------------------- */

.reviews-proof .review-proof__card {
    width: min(100%, 650px);
}

.reviews-proof .review-proof__card footer span {
    color: #4d5d6a;
    opacity: 1;
}


/* -------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */

@media (max-width: 860px) {

    .review-proof__text,
    .review-proof__dm,
    .reviews-proof .review-proof__card {
        width: 100%;
        max-width: 650px;
    }

    .review-proof__text,
    .review-proof__dm {
        align-self: stretch;
        margin-left: 0;
    }
}

@media (max-width: 620px) {

    .review-proof__device {
        min-height: 390px;
        border-radius: 30px;
    }

    .review-proof__device::before {
        width: 82px;
        height: 23px;
    }

    .review-proof__statusbar {
        height: 48px;
        padding-inline: 18px;
    }

    .review-proof__thread-header {
        grid-template-columns: 42px 1fr auto;
        padding-inline: 0.9rem;
    }

    .review-proof__thread-avatar {
        width: 40px;
        height: 40px;
    }

    .review-proof__conversation {
        min-height: 220px;
        padding-inline: 0.8rem;
    }

    .review-proof__message {
        max-width: 90%;
        font-size: 0.9rem;
    }
}

/* =======================================================
   WASH & BEHOLD - FAQ DETAIL PASS
======================================================= */

/* Stop the section from feeling like a full empty viewport */
.faq {
    min-height: 0;
    padding:
        clamp(4rem, 6vw, 5.5rem)
        0
        clamp(4rem, 6vw, 5.25rem);
}

/* Keep both columns aligned naturally to their content */
.faq__layout {
    align-items: start;
}

/* Make the eyebrow readable */
.faq .section-label {
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    line-height: 1.25;
}

/* FAQ list should end where the content ends */
.faq__list {
    align-self: start;
}

/* Stronger row geometry */
.faq__list details {
    border-bottom-color: #cbd4da;
}

.faq__list details:first-child {
    border-top-color: var(--ink);
}

/* Entire question row */
.faq__list summary {
    min-height: 74px;
    gap: 1.5rem;
    padding: 1.15rem 0;

    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.35;

    cursor: pointer;
}

/* Remove native marker where supported */
.faq__list summary::-webkit-details-marker {
    display: none;
}

.faq__list summary::marker {
    content: "";
}

/* Bigger plus control */
.faq__list summary::after {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-color: #becbd4;

    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

/* Open-state control */
.faq__list details[open] summary::after {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);

    transform: rotate(45deg);
}

/* Open answer must read like real body copy, not metadata */
.faq__list details > p,
.faq__list details > div {
    color: #394a58;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
}

/* Paragraph spacing for common FAQ markup */
.faq__list details > p {
    max-width: 680px;
    margin: 0;
    padding:
        0
        4.5rem
        1.5rem
        0;
}

/* If the answer is wrapped in a div */
.faq__list details > div {
    max-width: 680px;
    padding:
        0
        4.5rem
        1.5rem
        0;
}

.faq__list details > div p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Slightly emphasize an opened question */
.faq__list details[open] summary {
    color: var(--blue);
}

/* Tablet */
@media (max-width: 860px) {
    .faq {
        padding:
            3.75rem
            0;
    }

    .faq__list summary {
        font-size: 1.03rem;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .faq {
        padding:
            3.25rem
            0;
    }

    .faq .section-label {
        font-size: 0.72rem;
    }

    .faq__list summary {
        min-height: 68px;
        gap: 1rem;

        font-size: 0.98rem;
    }

    .faq__list summary::after {
        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 1.2rem;
    }

    .faq__list details > p,
    .faq__list details > div {
        padding-right: 0;

        font-size: 0.95rem;
    }
}

/* =======================================================
   WASH & BEHOLD - BOOKING READABILITY PASS
======================================================= */

/* Form field labels */
.booking-form label > span {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

/* "Prefer texting?" label */
.booking__phone small {
    color: #42586a;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

/* Keep the phone number visually dominant */
.booking__phone a {
    line-height: 1.1;
}

/* Demo-form fine print */
.booking-form > p:last-child,
.booking-form > small:last-child,
.booking-form .form-note,
.booking-form__note {
    color: #5b6b78;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.45;
    opacity: 1;
}

/* Slightly more breathing room beneath the CTA */
.booking-form .button--full + p,
.booking-form .button--full + small {
    margin-top: 1rem;
}

/* Mobile */
@media (max-width: 620px) {
    .booking-form label > span {
        font-size: 0.73rem;
    }

    .booking__phone small {
        font-size: 0.75rem;
    }

    .booking-form > p:last-child,
    .booking-form > small:last-child,
    .booking-form .form-note,
    .booking-form__note {
        font-size: 0.72rem;
    }
}

/* =======================================================
   WASH & BEHOLD - FOOTER READABILITY PASS
======================================================= */

/* Give the footer's supporting copy enough contrast to survive dark mode */
footer {
    font-size: 0.96rem;
}

/* Small uppercase labels and section headings */
footer small,
footer [class*="eyebrow"],
footer [class*="label"],
footer [class*="heading"],
footer [class*="title"] {
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.35;
}

/* Secondary brand/supporting copy */
footer p {
    color: rgba(255, 255, 255, 0.76);
}

/* Keep useful links crisp */
footer a {
    color: rgba(255, 255, 255, 0.94);
}

/* Footer utility/bottom bar */
footer [class*="bottom"],
footer [class*="legal"],
footer [class*="copyright"] {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    line-height: 1.4;
}

/* Any small text inside the bottom bar gets the same treatment */
footer [class*="bottom"] small,
footer [class*="bottom"] p,
footer [class*="bottom"] span {
    color: inherit;
    font-size: inherit;
}

/* Mobile */
@media (max-width: 620px) {
    footer {
        font-size: 0.93rem;
    }

    footer small,
    footer [class*="eyebrow"],
    footer [class*="label"],
    footer [class*="heading"],
    footer [class*="title"] {
        font-size: 0.72rem;
    }

    footer [class*="bottom"],
    footer [class*="legal"],
    footer [class*="copyright"] {
        font-size: 0.72rem;
    }
}