/* =========================================================================
   Fonts
   ========================================================================= */

@font-face {
    font-family: "BW Gradual";
    src: url("../fonts/BwGradual-Regular.woff2") format("woff2"),
         url("../fonts/BwGradual-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BW Gradual";
    src: url("../fonts/BwGradual-Medium.woff2") format("woff2"),
         url("../fonts/BwGradual-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* =========================================================================
   Tokens
   ========================================================================= */

:root {
    /* Brand colours */
    --color-teal-1: #1A3641;
    --color-teal-2: #224E5F;
    --color-teal-3: #008694;
    --color-teal-4: #00C2BD;
    --color-cream-1: #F6F0EC;

    /* Font families */
    --font-sans: "BW Gradual", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Font sizes (flat) — value-named aliases for non-scaling UI */
    --font-size-14: 0.875rem;
    --font-size-26: 1.625rem;
    --font-size-34: 2.125rem;
    --font-size-38: 2.375rem;
    --font-size-44: 2.75rem;

    /* Font sizes (fluid) — clamp(min/16rem, max÷14.4 vw, max/16rem) */
    --font-size-16-18: clamp(1rem, 1.25vw, 1.125rem);
    --font-size-16-26: clamp(1rem, 1.8056vw, 1.625rem);
    --font-size-16-32: clamp(1rem, 2.2222vw, 2rem);
    --font-size-18-24: clamp(1.125rem, 1.6667vw, 1.5rem);
    --font-size-18-26: clamp(1.125rem, 1.8056vw, 1.625rem);
    --font-size-22-28: clamp(1.375rem, 1.9444vw, 1.75rem);
    --font-size-22-38: clamp(1.375rem, 2.6389vw, 2.375rem);
    --font-size-28-38: clamp(1.75rem, 2.6389vw, 2.375rem);
    --font-size-28-44: clamp(1.75rem, 3.0556vw, 2.75rem);
    --font-size-32-58: clamp(2rem, 4.0278vw, 3.625rem);

    /* Line heights — unitless ratios, name = ratio × 100 */
    --line-height-123: 1.2273;
    --line-height-126: 1.2632;
    --line-height-138: 1.3846;
    --line-height-159: 1.5882;
    --line-height-257: 2.5714;

    /* Font sizes (fluid) — clamp(min/16rem, max÷14.4 vw, max/16rem) */
    /* --font-size-28-42: clamp(1.75rem, 2.9167vw, 2.625rem); */

    /* Line heights — unitless ratios, name = ratio × 100 */
    /* --line-height-106: 1.0625; */
    /* --line-height-130: 1.3; */

    /* Breakpoints (documentation; reference same numbers in @media) */
    /* --bp-sm:  480px;
       --bp-md:  768px;
       --bp-lg:  1024px;
       --bp-xl:  1280px;
       --bp-max: 1440px; */
}


/* =========================================================================
   Base (structural resets)
   ========================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
    margin: 0;
}

body {
    /* Fallback only — components set their own font-family explicitly. */
    font-family: var(--font-sans);
}

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

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


/* =========================================================================
   Layout
   ========================================================================= */

body {
    min-width: 20rem;
    max-width: 90rem;
    margin: 0 auto;
    background-color: #f0f0f0;
}


/* =========================================================================
   Components
   ========================================================================= */

/* --- site-header ------------------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-top: clamp(1.125rem, 2.5vw, 2.25rem);
    padding-bottom: clamp(1.125rem, 2.5vw, 2.25rem);
    background-color: #ffffff;
}

.site-header__home {
    display: inline-flex;
}

.site-header__logo {
    width: clamp(8.375rem, 14.4444vw, 13.0625rem);
    height: auto;
}

.site-header__phone {
    padding-top: clamp(2.09375rem, 4.6528vw, 4.1875rem);
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-16-32);
    font-weight: 400;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .site-header__phone {
        display: none;
    }
}

.site-header__phone:hover {
    text-decoration: underline;
}


/* --- hero -------------------------------------------------------------- */

.hero {
    position: relative;
}

.hero__image {
    width: 100%;
    height: auto;
    min-height: 32.5625rem;
    object-fit: cover;
    object-position: left center;
}

.hero__panel {
    position: absolute;
    right: clamp(5.0625rem, 12.0139vw, 10.8125rem);
    bottom: 0;
    width: clamp(19.9375rem, 37.9861vw, 34.1875rem);
    height: clamp(15.6875rem, 31.5278vw, 28.375rem);
    padding: clamp(0.9375rem, 2.0833vw, 1.875rem) clamp(2.5rem, 5.5556vw, 5rem) clamp(5rem, 11.1111vw, 10rem) clamp(0.9375rem, 2.0833vw, 1.875rem);
    background-color: var(--color-teal-4);
}

.hero__edge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(5.0625rem, 12.0139vw, 10.8125rem);
    height: clamp(7.8125rem, 20.6944vw, 18.625rem);
    background-color: var(--color-teal-2);
}

@media (max-width: 397.98px) {
    .hero__panel {
        right: 0;
        width: 100%;
    }

    .hero__edge {
        display: none;
    }
}

.hero__title {
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--font-size-32-58);
    font-weight: 400;
    line-height: normal;
}



/* --- intro ------------------------------------------------------------- */

.intro {
    display: grid;
    grid-template-columns: minmax(0, 34.6875rem) minmax(0, 38.25rem);
    column-gap: 5rem;
    padding-top: 10.625rem;
    padding-bottom: 9.375rem;
    background-color: var(--color-teal-1);
}

.intro__heading {
    color: var(--color-teal-4);
    font-family: var(--font-sans);
    font-size: var(--font-size-28-44);
    font-weight: 400;
    line-height: var(--line-height-123);
}

.intro__body {
    padding-top: 12.5rem;
    padding-right: 1.875rem;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--font-size-16-26);
    font-weight: 400;
    line-height: var(--line-height-138);
}

@media (max-width: 767.98px) {
    .intro {
        grid-template-columns: 1fr;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .intro__body {
        padding-top: 2rem;
        padding-right: 0;
    }
}


/* --- features ---------------------------------------------------------- */

.features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 3.125rem;
    padding-top: 8.75rem;
    padding-bottom: 8.75rem;
    background-color: #ffffff;
}

.features__heading {
    margin-bottom: 1.5625rem;
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-28-38);
    font-weight: 500;
    line-height: var(--line-height-126);
}

.features__body {
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-18-26);
    font-weight: 400;
    line-height: var(--line-height-138);
}

@media (max-width: 767.98px) {
    .features {
        display: flex;
        flex-direction: column;
        padding-top: 5.625rem;
        padding-bottom: 5.625rem;
    }

    .features__heading {
        margin-bottom: 1.25rem;
    }

    .features__body {
        margin-bottom: 4.375rem;
    }

    .features__body:last-child {
        margin-bottom: 0;
    }
}


/* --- services ---------------------------------------------------------- */

.services {
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: 7.5rem;
    padding-top: 8.125rem;
    padding-bottom: 8.125rem;
    background-color: var(--color-cream-1);
}

.services__heading {
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-28-44);
    font-weight: 500;
    line-height: var(--line-height-123);
}

.services__list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.services__item {
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-22-38);
    font-weight: 400;
    line-height: var(--line-height-126);
}

@media (max-width: 767.98px) {
    .services {
        grid-template-columns: 1fr;
        row-gap: 2rem;
        padding-top: 5.625rem;
        padding-bottom: 5.625rem;
    }

    .services__list {
        gap: 1.5rem;
    }
}


/* --- contact ----------------------------------------------------------- */

.contact {
    padding-top: 5.625rem;
    padding-bottom: 7.5rem;
    background-color: #ffffff;
}

.contact__heading {
    margin-bottom: 5rem;
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-28-44);
    font-weight: 500;
    line-height: var(--line-height-123);
}

.contact__body {
    max-width: 40rem;
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-18-26);
    font-weight: 400;
    line-height: var(--line-height-138);
}

@media (max-width: 767.98px) {
    .contact {
        padding-top: 5.625rem;
        padding-bottom: 5.625rem;
    }

    .contact__heading {
        margin-bottom: 2rem;
    }
}


/* --- legal ------------------------------------------------------------- */

.legal {
    padding-top: 5.625rem;
    padding-bottom: 7.5rem;
    background-color: #ffffff;
}

.legal__title {
    max-width: 50rem;
    margin-bottom: 3.125rem;
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-28-44);
    font-weight: 500;
    line-height: var(--line-height-123);
}

.legal__heading {
    max-width: 50rem;
    margin-top: 3.125rem;
    margin-bottom: 1.25rem;
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-22-28);
    font-weight: 500;
    line-height: var(--line-height-126);
}

.legal__subheading {
    max-width: 50rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-18-24);
    font-weight: 500;
    line-height: var(--line-height-138);
}

.legal__body {
    max-width: 50rem;
    margin-bottom: 1.25rem;
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-16-18);
    font-weight: 400;
    line-height: var(--line-height-138);
}

.legal a {
    color: inherit;
    text-decoration: underline;
}

.legal a:hover {
    text-decoration: none;
}

.legal__list {
    max-width: 50rem;
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-16-18);
    font-weight: 400;
    line-height: var(--line-height-138);
}

.legal__list li {
    margin-bottom: 0.5rem;
}

.legal__list ul {
    margin: 0.5rem 0 0;
    padding-left: 1.5rem;
}

.legal__table-wrap {
    max-width: 50rem;
    margin: 1.25rem 0 2rem;
    overflow-x: auto;
}

.legal__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
}

.legal__table th,
.legal__table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-teal-1);
    vertical-align: top;
    text-align: left;
}

.legal__table th {
    background-color: var(--color-cream-1);
    color: var(--color-teal-2);
    font-weight: 500;
}

.legal__table-list {
    margin: 0;
    padding-left: 1.25rem;
}

.legal__table-list li {
    margin-bottom: 0.25rem;
}

@media (max-width: 767.98px) {
    .legal {
        padding-top: 3.75rem;
        padding-bottom: 5rem;
    }

    .legal__title {
        margin-bottom: 2rem;
    }

    .legal__heading {
        margin-top: 2.5rem;
    }

    .legal__subheading {
        margin-top: 2rem;
    }

    .legal__table {
        font-size: 0.875rem;
    }

    .legal__table th,
    .legal__table td {
        padding: 0.5rem 0.625rem;
    }
}


/* --- site-footer ------------------------------------------------------- */

.site-footer {
    background-color: var(--color-teal-1);
}

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

.site-footer__office {
    display: flex;
    flex-direction: column;
}

.site-footer__office-image {
    width: 100%;
    height: auto;
    min-height: 22.4375rem;
    aspect-ratio: 359 / 179;
    object-fit: cover;
    object-position: right center;
}

.site-footer__office-info {
    flex: 1;
    padding-bottom: 4.6875rem;
    background-color: var(--color-teal-4);
}

.site-footer__careers {
    padding: 4.375rem 2.8125rem 4.6875rem;
    background-color: var(--color-teal-3);
}

.site-footer__heading {
    margin-bottom: 1.875rem;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--font-size-34);
    font-weight: 500;
    line-height: var(--line-height-159);
}

.site-footer__office-info .site-footer__heading {
    display: flex;
    align-items: center;
    width: fit-content;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    background-color: var(--color-teal-2);
}

.site-footer__careers .site-footer__heading {
    margin-bottom: 5rem;
    font-size: var(--font-size-28-44);
    line-height: var(--line-height-123);
}

.site-footer__address {
    padding-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-26);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-138);
}

.site-footer__contact {
    color: #000;
    font-family: var(--font-sans);
    font-size: var(--font-size-26);
    font-weight: 400;
    line-height: var(--line-height-138);
}

.site-footer__contact a {
    color: inherit;
    text-decoration: none;
}

.site-footer__contact a:hover {
    text-decoration: underline;
}

.site-footer__careers-body {
    max-width: 32.1875rem;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--font-size-18-26);
    font-weight: 400;
    line-height: var(--line-height-138);
}

.site-footer__info {
    display: flex;
    flex-direction: column;
    padding-top: 3.125rem;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4.375rem;
}

.site-footer__home {
    display: inline-flex;
}

.site-footer__logo {
    width: clamp(9.27rem, 13.0896vw, 11.780625rem);
    height: auto;
}

.site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.5rem;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: var(--font-size-14);
    font-weight: 400;
    line-height: var(--line-height-257);
}

.site-footer__policies {
    display: flex;
    gap: 0.5rem;
}

.site-footer__policies a {
    color: inherit;
    text-decoration: none;
}

.site-footer__policies a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .site-footer__panels {
        grid-template-columns: 1fr;
    }

    .site-footer__office-info {
        padding-bottom: 2.5rem;
    }

    .site-footer__office-info .site-footer__heading {
        font-size: 1.25rem;
    }

    .site-footer__careers {
        padding-top: 5.625rem;
        padding-bottom: 5.625rem;
    }

    .site-footer__careers .site-footer__heading {
        margin-bottom: 2rem;
    }

    .site-footer__address,
    .site-footer__contact {
        font-size: 1.125rem;
    }

    .site-footer__info {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo logo"
            "copyright policies";
        column-gap: 1rem;
        row-gap: 0.25rem;
        padding-bottom: 3.125rem;
    }

    .site-footer__brand,
    .site-footer__legal {
        display: contents;
    }

    .site-footer__logo {
        grid-area: logo;
        margin-bottom: 3rem;
    }

    .site-footer__copyright {
        grid-area: copyright;
        line-height: 1.5;
    }

    .site-footer__policies {
        grid-area: policies;
        flex-direction: column;
        gap: 0.25rem;
        line-height: 1.5;
        align-self: end;
    }

    .site-footer__policies span[aria-hidden] {
        display: none;
    }
}


/* =========================================================================
   Utilities
   ========================================================================= */

/* Add utilities here as the design calls for them. Utilities are last in
   the file so source-order specificity lets them override component rules. */

.skip-link {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    color: var(--color-teal-2);
    font-family: var(--font-sans);
    font-size: 1rem;
    text-decoration: none;
    transform: translateY(-200%);
    z-index: 100;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--color-teal-3);
}

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-teal-1);
}

.px-60 {
    padding-left: clamp(1.875rem, 4.1667vw, 3.75rem);
    padding-right: clamp(1.875rem, 4.1667vw, 3.75rem);
}

.px-70 {
    padding-left: clamp(2.1875rem, 4.8611vw, 4.375rem);
    padding-right: clamp(2.1875rem, 4.8611vw, 4.375rem);
}

.px-80 {
    padding-left: clamp(2.5rem, 5.5556vw, 5rem);
    padding-right: clamp(2.5rem, 5.5556vw, 5rem);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}