/* Marketing page: flat colour slabs with slanted edges, heavy sans-serif type,
   red / navy / black on white. Visual layer only: the class names and the form
   hooks that script.js relies on stay the same. */

:root {
    --red: #c8102e;
    --navy: #191d55;
    --navy-deep: #0b0d29;
    --ink: #08080c;
    --white: #ffffff;
    --paper: #ebebee;
    --line: rgba(0, 0, 0, 0.14);

    /* How far a slab edge drops across the full width, so the angle stays the
       same on every screen size. */
    --slant: 8vw;
    /* The same angle written as a rotation, so type can be set parallel to the
       slab edges: atan(5.5vw / 100vw) = 3.15deg. The media query below adjusts
       it together with --slant. */
    --slab-tilt: -4.8deg;
    /* Drop used by the cut on the bottom edge of the form card. It is a length
       rather than a share of the viewport, because the cut is measured down the
       card's own height: 59px across a 1080px card is the same 3.15deg the slabs
       use. */
    --card-slant: clamp(18px, 4.1vw, 59px);
    --gutter: clamp(1.25rem, 6vw, 6rem);

    --display:  Arial, sans-serif;
    --sans: Arial, sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    background: var(--ink);
    color: var(--white);
    font-family: var(--sans);
    line-height: 1.5;
    overflow-x: hidden;
}

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

/* Every slab declares its own clip-path so the angle of each one can be set on
   its own. They all rise to the right:

     polygon(0 s, 100% 0, 100% 100%, 0 calc(100% + s))

   which means the top left corner is cut away and the bottom left edge
   overhangs the box. Neighbours that slope the same way tile without a gap:
   the overhang of one slab fills the cut corner of the next one. */

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

/* Photo behind the opening band. Only the parts of it not covered by a child
   show the image, because the hero paints its own slabs and overlay on top. */
.photo-band {
    background-image: url('images/bg.png');
}

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 16vw, 16rem) 0 clamp(6rem, 14vw, 11rem);
    /* A single photo, dimmed by the overlay so the slabs stay readable. */

    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* Tilting the group is what makes the type sit on the same angle as the slab
   edges. It is wider than the screen so both slabs run off the sides. */
.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 112%;
    margin-left: -6%;
    transform: rotate(-5.5deg);
}

.hero-slab {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.3rem var(--gutter);
    text-align: center;
}

.hero-slab--red {
    background: var(--red);
}

.hero-slab--navy {
    background: var(--navy);
}

.hero-title {
    font-family: var(--display);
    /* font-weight: 900; */
    font-size: clamp(2.5rem, 8vw, 5.9rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--white);
}

.hero-kicker {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* The two short lines under the kicker: the same display type as the title,
   one step down in size so the title stays the loudest thing in the hero. */
.hero-copy {
    margin: 0.5rem 0 0;
    font-family: var(--display);
    /* font-weight: 900; */
    font-size: clamp(1.5rem, 5.2vw, 3.35rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--white);
}

.hero-btn {
    display: inline-block;
    /* Sits directly under the navy slab, its top edge flush with the slab. */
    margin-top: 0;
    padding: 0.6rem 2.6rem;
    background: var(--white);
    color: var(--ink);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
    --slant: 20px;
    clip-path: polygon(var(--slant) 0,
            100% 0,
            calc(100% - var(--slant)) 100%,
            0 100%);
}

.hero-btn:hover,
.hero-btn:focus-visible {
    background: var(--red);
    color: var(--white);
}

/* --------------------------------------------------------------- offer */

/* Red field behind the opening statement and the three service slabs, so the
   slanted corners of those slabs show red instead of the page background. */
.offer {
    background: var(--red);
}

/* Plain colour fields behind the individual slabs. Every slab is clipped, so the
   colour set here is what shows through its slanted corners. */
.field--white {
    background-color: var(--white);
}

.field--red {
    background-color: var(--red);
}

.field--navy {
    background-color: var(--navy);
}

/* ----------------------------------------------------------- statement */

.statement {
    position: relative;
    /* Both edges rise to the right, the same way the hero slabs are tilted. */
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 calc(100% + var(--slant)));
    /* Content stays inside a 1080px column; on narrow screens the gutter wins. */
    padding: calc(var(--slant) + 4.5rem) max(var(--gutter), calc((100% - 1080px) / 2)) calc(var(--slant) - 2rem);
    background: var(--white);
    color: var(--ink);
}

.statement-title {
    /* Sits on the same angle as the slab edges above and below it. */
    transform: rotate(var(--slab-tilt));
    transform-origin: left center;
    font-family: var(--display);
    /* font-weight: 800; */
    font-size: clamp(1.9rem, 4.7vw, 4.3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

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

.service-item {
    position: relative;
    /* Content stays inside a 1080px column; on narrow screens the gutter wins. */
    padding: calc(var(--slant) + 4.5rem) max(var(--gutter), calc((100% - 1080px) / 2)) calc(var(--slant) + 0.5rem);
    background: var(--red);
}

/* Each of the three service slabs sets its own angle, so any one of them can be
   changed on its own. The first runs from the top right down to the bottom
   left; the second runs the other way, from the top left towards the right. */
.service-item--one {
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 calc(100% + var(--slant)));
}

.service-item--two {
    clip-path: polygon(0 0, 100% var(--slant), 100% calc(100% + var(--slant)), 0 100%);
}

.service-item--three {
    clip-path: polygon(0 0, 100% var(--slant), 100% calc(100% + var(--slant)), 0 100%);
}

.service-item+.service-item {
    margin-top: -1px;
}

.service-item--two {
    background: var(--navy);
}

.service-text h3 {
    margin-bottom: 0.9rem;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.4rem, 2.5vw, 2.3rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.service-text p {
    margin-bottom: 1.2rem;
    font-size: clamp(1.4rem, 1.55vw, 1.35rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.emphasize-text{
    font-weight: bold;
    font-size: clamp(1.6rem, 1.75vw, 1.55rem)!important;
    line-height: 1.5!important;
}
/* --------------------------------------------------------------- form */

.reach {
    position: relative;
    /* Edges rise to the right, matching the slab above so the two tile. */
    display: flex;
    justify-content: center;
    margin-top: -1px;
    /* Content stays inside a 1080px column; on narrow screens the gutter wins. */
    padding: calc(var(--slant) + 4rem) max(var(--gutter), calc((100% - 1080px) / 2)) calc(var(--slant) + 5rem);
    background: var(--navy-deep);
    clip-path: polygon(0 0, 100% var(--slant), 100% calc(100% + var(--slant)), 0 100%);
}

.reach-card {
    /* Bottom edge cut on the diagonal, rising from right to left: the corner has
       to be taken off *inside* the box, otherwise the polygon only adds empty
       space below the card and nothing changes on screen. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--card-slant)));
    width: min(1080px, 100%);
    padding: clamp(1.5rem, 3.5vw, 3rem);
    /* Extra room at the bottom so the cut corner does not eat into the copy:
       the left edge then keeps the same gap as the other three sides. */
    padding-bottom: calc(clamp(1.5rem, 3.5vw, 3rem) + var(--card-slant));
    background: var(--white);
    color: #111111;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.reach-title {
    margin-bottom: 1.6rem;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.form-group {
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
}

.form-group>label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
}

.step-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: #111111;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.options-group {
    display: flex;
    flex-direction: column;
}

.checkbox-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0 0.45rem 2.05rem;
    font-size: 1rem;
    color: #232323;
    cursor: pointer;
}



.checkbox-option input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid #c4c4c4;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.checkbox-option:hover .checkmark {
    border-color: #8a8a8a;
}

input[type="checkbox"]:checked+.checkmark {
    background: var(--red);
    border-color: var(--red);
}

input[type="checkbox"]:checked+.checkmark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.5px;
    width: 5px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible+.checkmark {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.checkbox-option:has(input[type="checkbox"]:checked) .label-text {
    font-weight: 700;
    color: #111111;
}

.other-input {
    /* Deliberately short instead of filling the rest of the row: it is only a
       line to write the answer on. */
    flex: 0 0 auto;
    width: clamp(120px, 32%, 240px);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font: inherit;
    color: #111111;
    padding: 0.1rem 0.25rem;
}

.reach-input,
.reach-form input[type="text"].reach-input,
.reach-form textarea {
    width: 100%;
    border: 0;
    background: var(--paper);
    color: #111111;
    font: inherit;
    padding: 0.85rem 1rem;
    border-radius: 3px;
}

.reach-form textarea {
    resize: vertical;
    min-height: 3.5rem;
}

.reach-input:focus,
.reach-form textarea:focus,
.other-input:focus {
    outline: 2px solid var(--red);
    outline-offset: 1px;
}

/* Revealed once a social platform is picked: script.js flips it by setting the
   inline display, which overrides the value here. */
#account {
    margin-top: 16px;
    display: none;
}

.reach-btn {
    display: block;
    margin: 2rem auto 0;
    padding: 1rem 3.4rem;
    border: 0;
    background: #111111;
    color: var(--white);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s var(--ease);
}

.reach-btn:hover,
.reach-btn:focus-visible {
    background: var(--red);
}

/* ---------------------------------------------------------------- cta */

.cta-section {
    position: relative;
    /* Edges rise to the right; the bottom edge stays flat so the page ends square. */
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
    margin-top: -1px;
    /* Content stays inside a 1080px column; on narrow screens the gutter wins. */
    padding: calc(var(--slant) + 4rem) max(var(--gutter), calc((100% - 1080px) / 2)) clamp(3rem, 6vw, 5rem);
    background: var(--red);
    text-align: center;
}

.cta-text {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.6rem, 4.6vw, 3.8rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* -------------------------------------------------------------- toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 50;
    max-width: min(90vw, 420px);
    padding: 0.9rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    background: var(--white);
    color: var(--ink);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.error {
    background: var(--red);
    color: var(--white);
}

/* --------------------------------------------------------- responsive */

@media (max-width: 820px) {
    :root {
        --slant: 4vw;
        --slab-tilt: -2.29deg;
    }

    .hero-inner {
        transform: rotate(-3.4deg);
    }

    .hero-slab {
        padding: 1.4rem var(--gutter);
    }
}

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

    .toast,
    .hero-btn,
    .reach-btn,
    .checkmark {
        transition: none;
    }
}