/* ==========================================================================
   BWT Water Dispensers — landing page
   --------------------------------------------------------------------------
   Contents
     1. Fonts
     2. Custom properties
     3. Base / reset
     4. Layout — container
     5. Buttons
     6. Announcement bar
     7. Header
     8. Hero
     9. Info — "What does this mean for you?"
    10. Help — cards + quote form
    11. Coffee — split bleed
    12. Footer
    13. Responsive
   ========================================================================== */


/* ==========================================================================
   1. Fonts
   Paths are relative to this stylesheet (css/ -> ../assets/fonts/).
   Note: both faces are declared at font-weight: normal, so anything that
   should look bold must USE the -Bold family rather than font-weight: bold,
   otherwise the browser synthesises a second layer of bolding.
   ========================================================================== */

@font-face {
    font-family: "BWTSoliden-Regular";
    src: url('../assets/fonts/BWTSoliden/BWTSoliden-RegularText.woff2') format('woff2'),
         url('../assets/fonts/BWTSoliden/BWTSoliden-RegularText.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BWTSoliden-Bold";
    src: url('../assets/fonts/BWTSoliden/BWTSoliden-BoldText.woff2') format('woff2'),
         url('../assets/fonts/BWTSoliden/BWTSoliden-BoldText.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   2. Custom properties
   ========================================================================== */

:root {
    /* Brand */
    --bwt-blue: #00174B;
    --bwt-pink: #FF88BD;
    --white: #FFFFFF;

    /* Tints derived from the brand pink */
    --pink-band: #FFF2F8;   /* pale section background */
    --pink-badge: #FFE7F2;  /* icon badge circle */

    /* Radii */
    --radius: 8px;
    --radius-field: 4px;

    /* Typography */
    --font-regular: "BWTSoliden-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-bold: "BWTSoliden-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Layout */
    --container: 1600px;
    --gutter: 40px;
}


/* ==========================================================================
   3. Base / reset
   ========================================================================== */

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

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

body {
    margin: 0;
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 1.6;
    color: var(--bwt-blue);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-bold);
    font-weight: normal;   /* see note in section 1 */
    line-height: 1.1;
}

p {
    margin: 0;
}

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

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

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


/* ==========================================================================
   4. Layout — container
   Backgrounds run full-bleed; only inner content is constrained.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    font-family: var(--font-bold);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    padding: 20px 34px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn--primary {
    background-color: var(--bwt-pink);
    color: var(--bwt-blue);
}

.btn--primary:hover {
    background-color: #ff6fae;
}

.btn--primary:active {
    transform: translateY(1px);
}


/* ==========================================================================
   6. Announcement bar
   ========================================================================== */

.announcement-bar {
    background-color: var(--bwt-blue);
    color: var(--white);
    font-size: 14px;
}

.announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 40px;
}

/* --- rotating message --- */

.announcement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.announcement__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.announcement__arrow:hover {
    opacity: 1;
}

.announcement__arrow svg {
    width: 15px;
    height: 15px;
}

/* Slides are stacked and cross-faded so the bar height never jumps. */
.announcement__viewport {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: grid;
}

.announcement__slide {
    grid-area: 1 / 1;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.announcement__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.announcement__link {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.announcement__link:hover {
    text-decoration-thickness: 2px;
}

/* --- trustpilot --- */

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

/* Asset is 354x35 and already includes the "Trustpilot" wordmark
   alongside the stars — no separate text needed. */
.trustpilot__stars {
    width: auto;
    height: 18px;
}


/* ==========================================================================
   7. Header
   ========================================================================== */

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

.site-header__inner {
    display: flex;
    align-items: center;
    padding-block: 14px;
}

.site-header__logo {
    display: inline-block;
}

.site-header__logo img {
    width: auto;
    height: 46px;
}


/* ==========================================================================
   8. Hero
   The photo sits behind the copy, anchored right. A left-to-right gradient
   keeps the white headline readable while leaving the right of the image
   clear — this is what blends the photo into the blue.
   ========================================================================== */

.hero {
    position: relative;
    background-color: var(--bwt-blue);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to right,
        var(--bwt-blue) 0%,
        var(--bwt-blue) 22%,
        rgba(0, 23, 75, 0.85) 38%,
        rgba(0, 23, 75, 0.35) 52%,
        rgba(0, 23, 75, 0) 68%
    );
}

.hero__container {
    position: relative;
}

/* Wide enough to keep the headline on two lines at desktop sizes. */
.hero__content {
    max-width: 760px;
    padding-block: 90px;
}

.hero__eyebrow {
    font-family: var(--font-bold);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bwt-pink);
    margin-bottom: 18px;
}

.hero__title {
    font-size: clamp(34px, 4.2vw, 62px);
    margin-bottom: 26px;
}

.hero__line {
    display: block;
}

.hero__text {
    font-size: 16px;
    line-height: 1.65;
    max-width: 500px;
    margin-bottom: 34px;
}


/* ==========================================================================
   9. Info — "What does this mean for you?"
   Two columns on white: heading block left, copy and CTA right. The right
   column is narrower than the gap suggests, so the text measure stays
   comfortable rather than running the full width.
   ========================================================================== */

.info {
    background-color: var(--white);
}

.info__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    padding-block: 80px;
}

.info__eyebrow {
    font-family: var(--font-bold);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bwt-pink);
    margin-bottom: 10px;
}

.info__title {
    font-size: clamp(28px, 2.6vw, 40px);
}

.info__body {
    max-width: 640px;
}

.info__lead {
    font-family: var(--font-bold);
    margin-bottom: 4px;
}

.info__text + .info__text {
    margin-top: 20px;
}

/* Centred under the text column, as per the design. */
.info__cta {
    display: block;
    width: fit-content;
    margin: 32px auto 0;
}


/* ==========================================================================
   10. Help — cards + quote form
   Pale pink band. Two white cards on the left, dark blue form panel right.
   ========================================================================== */

.help {
    background-color: var(--pink-band);
    padding-block: 70px;
}

.help__intro {
    margin-bottom: 26px;
}

.help__eyebrow {
    font-family: var(--font-bold);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bwt-pink);
    margin-bottom: 8px;
}

.help__title {
    font-size: clamp(26px, 2.4vw, 36px);
}

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

/* --- left: link cards --- */

.help__cards {
    display: grid;
    gap: 30px;
}

.card {
    background-color: var(--white);
    border-radius: var(--radius);
    padding: 40px;
}

.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 30px;
    border-radius: 50%;
    background-color: var(--pink-badge);
}

.card__icon img {
    width: auto;
    height: 38px;
}

.card__title {
    font-size: clamp(20px, 1.6vw, 25px);
    margin-bottom: 14px;
}

.card__text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.card__cta {
    font-size: 16px;
    padding: 16px 26px;
}

/* --- right: quote form panel --- */

.quote {
    background-color: var(--bwt-blue);
    color: var(--white);
    border-radius: var(--radius);
    padding: 40px;
}

.quote__title {
    font-size: clamp(22px, 1.9vw, 28px);
    margin-bottom: 8px;
}

.quote__intro {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 26px;
}

.quote__row {
    display: grid;
    gap: 16px;
}

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

.field {
    margin-bottom: 16px;
}

.quote__row .field {
    margin-bottom: 0;
}

.quote__form label,
.field__label {
    display: block;
    font-family: var(--font-bold);
    font-size: 14px;
    margin-bottom: 6px;
}
.quote__form label{
    margin-top: 6px;
}

.quote__form input[type="text"],
.quote__form input[type="email"],
.quote__form input[type="tel"],
.quote__form input[type="number"],
.quote__form textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--bwt-blue);
    background-color: var(--white);
    border: 0;
    border-radius: var(--radius-field);
    padding: 11px 12px;
}

.quote__form textarea {
    resize: vertical;
    min-height: 96px;
}

/* Focus ring needs to read against dark blue, so use white here. */
.quote__form :focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* --- interest radio group --- */

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

.interest__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    /* Override the bold label rule above — these read as options, not labels. */
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.3;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    cursor: pointer;
}

.interest__option:hover {
    border-color: var(--white);
}

.interest__option:has(input:checked) {
    border-color: var(--bwt-pink);
    box-shadow: inset 0 0 0 1px var(--bwt-pink);
}

/* The native radio renders as a bright filled dot on dark blue, which reads as
   already-selected. Draw our own so unchecked is visibly hollow. */
.interest__option input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    top: 3px;
}

/* The dot is 14px but the label's line box is 18.2px (14px x 1.3), so
   centring the two boxes leaves the dot sitting ~3px high against the text.
   Trimming the label's leading makes both boxes 14px, so they line up. */
.interest__option span {
    line-height: 1;
}

.interest__option input:checked {
    border-color: var(--bwt-pink);
    /* Inner dot via an inset ring, so no extra element is needed. */
    box-shadow: inset 0 0 0 3px var(--bwt-pink);
}

/* --- consent checkboxes --- */

.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
}

/* Same reasoning as the radios: draw the box so unchecked reads as empty. */
.check input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 3px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
}

.check input:checked {
    background-color: var(--bwt-pink);
    border-color: var(--bwt-pink);
}

/* Tick mark, drawn with a rotated rectangle. */
.check input:checked::after {
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    margin: 0 auto;
    border: solid var(--bwt-blue);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

/* Lighter than the field labels — these are consent text, not headings. */
.check label {
    font-family: var(--font-regular);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 0;
     margin-top: 0;
}

.check a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Honeypot: hidden from people, reachable by bots. Not display:none —
   some bots skip those. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.quote__submit {
    display: block;
    width: 100%;
    margin-top: 28px;
}

.quote__status {
    display: none;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: var(--radius-field);
    padding: 12px 14px;
}

.quote__status.is-ok,
.quote__status.is-error {
    display: block;
}

.quote__status.is-ok {
    background-color: #E7F5EC;
    color: #14532D;
}

.quote__status.is-error {
    background-color: #FDECEC;
    color: #7F1D1D;
}


/* ==========================================================================
   11. Coffee — split bleed
   The section splits down the middle: copy on the left, image running to the
   right edge of the viewport. The copy itself stays aligned to the 1600px
   container, so its left edge lines up with every other section.

   The left padding is what does the aligning — it matches the container's
   own outer margin, so no wrapper element is needed. Below 1600px the
   container is full-bleed, so it falls back to the plain gutter.
   ========================================================================== */

.coffee {
    background-color: var(--bwt-blue);
    color: var(--white);
}

.coffee__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.coffee__content {
    /* Left edge tracks the container; right side just needs breathing room. */
    padding-left: max(var(--gutter), calc((100% * 2 - var(--container)) / 2 + var(--gutter)));
    padding-right: var(--gutter);
    padding-block: 60px;
}

.coffee__eyebrow {
    font-family: var(--font-bold);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bwt-pink);
    margin-bottom: 10px;
}

.coffee__title {
    font-size: clamp(26px, 2.5vw, 38px);
    margin-bottom: 18px;
}

.coffee__text {
    font-size: 15px;
    line-height: 1.65;
    max-width: 460px;
    margin-bottom: 30px;
}

.coffee__media {
    align-self: stretch;
    /* Fill the column even when the copy is the taller of the two. */
    min-height: 100%;
}

.coffee__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
    background-color: var(--bwt-pink);
    color: var(--bwt-blue);
    padding-block: 46px;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.site-footer__logo {
    width: auto;
    height: 62px;
    margin-bottom: 22px;
}

.site-footer__strapline {
    font-size: 14px;
    line-height: 1.6;
    max-width: 760px;
}

.site-footer__contact {
    justify-self: end;
    text-align: left;
}

.site-footer__phone {
    display: block;
    font-family: var(--font-bold);
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.1;
    text-decoration: none;
    margin-bottom: 10px;
}

.site-footer__phone:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer__hours {
    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    :root {
        --gutter: 32px;
    }

    .hero__content {
        max-width: 640px;
        padding-block: 70px;
    }
}

@media (max-width: 1024px) {
    /* Photo is mostly hidden behind copy at this width, so lean on the tint. */
    .hero::before {
        background: linear-gradient(
            to right,
            var(--bwt-blue) 0%,
            var(--bwt-blue) 30%,
            rgba(0, 23, 75, 0.85) 50%,
            rgba(0, 23, 75, 0.4) 72%,
            rgba(0, 23, 75, 0.15) 100%
        );
    }

    .hero__content {
        max-width: 560px;
        padding-block: 60px;
    }

    .announcement-bar {
        font-size: 13px;
    }

    /* Stack the info columns before the text measure gets too tight. */
    .info__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-block: 60px;
    }

    .info__body {
        max-width: none;
    }

    /* Form panel drops below the cards. */
    .help__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .help {
        padding-block: 56px;
    }

    /* Give the copy a bit more of the split before it stacks. */
    .coffee__inner {
        grid-template-columns: 55% 1fr;
    }

    .coffee__content {
        padding-block: 48px;
    }
}

@media (max-width: 767px) {
    :root {
        --gutter: 20px;
    }

    /* --- announcement bar stacks --- */
    .announcement-bar__inner {
        flex-direction: column;
        gap: 6px;
        padding-block: 10px;
    }

    .announcement {
        width: 100%;
        gap: 6px;
    }

    .announcement__slide {
        font-size: 13px;
        line-height: 1.45;
    }

    /* --- header --- */
    .site-header__inner {
        padding-block: 12px;
    }

    .site-header__logo img {
        height: 38px;
    }

    /* --- hero stacks: image on top, copy on solid blue beneath --- */
    .hero__media {
        position: static;
        display: block;
    }

    .hero__media img {
        height: auto;
        aspect-ratio: 1200 / 580;
        object-position: center;
    }

    .hero::before {
        display: none;
    }

    .hero__content {
        max-width: none;
        padding-block: 40px;
    }

    .hero__text {
        max-width: none;
    }

    /* Full-width CTA in the hero only; the info CTA stays an inline pill. */
    .hero .btn {
        display: block;
        width: 100%;
        padding-inline: 20px;
    }

    .info__inner {
        padding-block: 48px;
    }

    .info__cta {
        margin-top: 28px;
    }

    /* --- help / quote form --- */
    .help {
        padding-block: 44px;
    }

    /* Field rows collapse to one column so inputs stay usable. The row's own
       gap handles the spacing, so fields keep margin-bottom: 0 and the row
       gets the same bottom margin as a standalone .field. */
    .quote__row--3,
    .quote__row--2 {
        grid-template-columns: 1fr;
    }

    .quote__row {
        margin-bottom: 16px;
    }

    .card,
    .quote {
        padding: 26px;
    }

    .card__icon {
        width: 66px;
        height: 66px;
        margin-bottom: 22px;
    }

    .card__cta {
        display: block;
        width: 100%;
    }

    .interest__option {
        flex: 1 1 100%;
    }

    /* --- coffee: stack, image on top like the hero --- */
    .coffee__inner {
        grid-template-columns: 1fr;
    }

    /* Image first, so it reads image-then-copy on small screens. */
    .coffee__media {
        order: -1;
        min-height: 0;
    }

    .coffee__media img {
        height: auto;
        aspect-ratio: 1860 / 890;
    }

    .coffee__content {
        padding-inline: var(--gutter);
        padding-block: 36px;
    }

    .coffee__text {
        max-width: none;
    }

    .coffee .btn {
        display: block;
        width: 100%;
    }

    /* --- footer stacks --- */
    .site-footer {
        padding-block: 36px;
    }

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

    .site-footer__contact {
        justify-self: start;
    }

    .site-footer__logo {
        height: 50px;
        margin-bottom: 18px;
    }
}

@media (max-width: 400px) {
    .hero__eyebrow {
        font-size: 13px;
    }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}