/* ===============================
   Global Variables & Utilities
   =============================== */
:root {
    --brand-red: #D0191D;
}

/* Utility padding for L (lg) breakpoint */
@media (min-width: 992px) {
    .px-lg-140 {
        padding-left: 140px !important;
        padding-right: 140px !important;
    }
}

/* Body lock helper when trapping (optional visual safety) */
body.trap-scroll {
    overflow: hidden;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button,
.btn, input, select {
    border-radius: 0 !important; /* remove rounding */
}


/* ===============================
   1) Top Bar
   =============================== */
.top-bar {
    background: var(--brand-red);
    color: #fff;
    position: sticky;
    top:0;
    z-index: 69;
    height: auto;                /* was fixed; let it grow on mobile */
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.50);

}
.top-bar .container-fluid .d-flex {
    justify-content: center;     /* center the logo row */
}

.top-bar .centered-text {
    position: static;            /* drop out of absolute centering */
    display: block;
    pointer-events: auto;        /* enable the link on mobile */
    text-align: center;
    padding: 8px 0 0;            /* space under the logo */
    font-size: 1rem;             /* slightly smaller on mobile */
}

.top-bar .logo {
    height: 67px;
    width: auto;
}

.top-bar a:link,
.top-bar a:visited {
    color: #fff;
    text-decoration: underline;  /* optional: improve affordance on red bg */
}




/* ===============================
   2) Hero
   =============================== */
.hero {
    position: relative;
    width: 100%;
    height: 540px; /* default */
    overflow: hidden;
}

@media (min-width: 992px) {
    .hero {
        height: 724px;
    }
}

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


/* ===============================
   3) Two-Column White Content
   =============================== */
.square-img {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.section-title-red {
    color: var(--brand-red);
}

h1.section-title-red {
    font-size:3em;
    line-height: 1em;
}

.btn-red {
    background: var(--brand-red);
    color: #fff;
    border: none;
}

.link-red {
    color: var(--brand-red);
}

.btn-red:hover,
.btn-red:focus {
    background: var(--brand-red);
    filter: brightness(0.85);
    color: #fff;
}


/* ===============================
   4) Two-Column Red Content
   =============================== */
.bg-brand-red {
    background: var(--brand-red);
}

.tall-right-img {
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    display: block;
}

.pill {
    display: inline-block;
    padding:2px 16px;
    color: var(--brand-red);
    background: #fff;
    border-radius: 14px;
    font-weight: 700;
    font-size:1.1em;
}
form, .text-small {
    font-size: .66em;
}
input {
    font-size: 1em;
}

.form-box,
.form-submitted {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.form-submitted {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hidden {
    display: none !important;
}

/* Make invalid feedback text white */
.invalid-feedback {
    background:#fff;
    padding:4px;
    font-size:1em;
    color: var(--brand-red);
}

/* Form controls & selects: white borders when invalid */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #fff !important;
    box-shadow: none !important;
}

/* Checkboxes/radios: white border & no green check */
.form-check-input.is-invalid {
    border-color: #fff !important;
    box-shadow: none !important;
}

/* Keep the checkmark the normal browser color, not Bootstrap's green/red */
.form-check-input.is-invalid:checked {
    background-color: inherit !important;
    border-color: #fff !important;
}

/* Keep checkbox/radio label text WHITE regardless of validity */
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    color: #fff !important;
}

/* If the label contains links, keep them white too */
.form-check-label a {
    color: #fff !important;
    text-decoration: underline;
}

/* Optional: keep helper texts white as well */
.invalid-feedback,
.valid-feedback {
    color: var(--brand-red);
}

/* Prevent green/red fills and borders on checks when valid/invalid */
.form-check-input.is-valid,
.was-validated .form-check-input:valid,
.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: #fff !important;
    box-shadow: none !important;
    background-color: transparent !important; /* stops green fill on :valid */
}

/* And when the checkbox is checked, keep it neutral (no green/red) */
.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked,
.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
    background-color: transparent !important;
    border-color: #fff !important;
}

/* Optional: white focus ring to match the red panel */
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(255,255,255,0.35) !important;
    border-color: #fff !important;
}
/* ===============================
   5) Single Column Giant Heading
   =============================== */
.giant-text img {
    width:200px;
}

.giant-heading {
    font-size: 3em;
    line-height: 1;
    color: var(--brand-red);
}
.giant-heading-all {
    font-size: 3.5em;
    line-height: 1;
    color: var(--brand-red);
}

.giant-heading sup, .giant-heading-all sup {
    font-size: .6em;
}

/* ===============================
   6) Feature Section w/ Scroll Trap
   =============================== */
.feature-trap {
    position: relative;
    height: 500px;
    overflow: hidden; /* lock the section’s viewport */
    background: transparent;
}

.feature-trap::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../images/box-new.png");
    background-position: top center;
    background-repeat: repeat-y;

    /* Fill the width, keep aspect ratio, tile downward as needed */
    background-size: 100% auto;
    pointer-events: none;

    z-index: 0;
}

.trap-inner {
    position: relative;
    z-index: 1;
    height: 100%;

    /* scrolling */
    overflow-y: auto;                 /* scroll inside only */
    -webkit-overflow-scrolling: touch;/* momentum on iOS */
    overscroll-behavior-y: auto;      /* allow page to take over at edges */
    touch-action: pan-y;              /* allow vertical panning */

    display: flow-root;
}

.trap-content {
    min-height: 1000px;
    width: 300px;
    margin: 50px auto;
    box-sizing: border-box;

    /* Warm off-white paper tone */
    background-color: #f9f9f7;

    /* Subtle diagonal tone shift (fibers) */
    background-image:
            linear-gradient(135deg, #f9f9f7 0%, #fefefe 50%, #f9f9f7 100%),

                /* Faint vertical striations to mimic tape texture */
            repeating-linear-gradient(
                    90deg,
                    rgba(0,0,0,0.02) 0px,
                    rgba(0,0,0,0.02) 1px,
                    transparent 1px,
                    transparent 4px
            );

    background-blend-mode: multiply;

    /* Tiny shadow only on the left edge */
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.35);
}

.trap-content-inner {
    border: 2px solid var(--brand-red);
    border-bottom:none;
    min-height:100%;
    color:var(--brand-red);
}
body.trap-lock {
    overflow: hidden;
}
.tip {
    position:relative;
    border-bottom:2px solid var(--brand-red);
}

.hash {
    position:absolute;
    top:10px;
    left:10px;
    font-size:3em;
    font-weight:bold;
}

.tip-number {
    font-size: 6em;
    font-weight:400;
}

.tip-category {
    text-transform: uppercase;
    border-top:2px solid var(--brand-red);
    border-bottom:2px solid var(--brand-red);
}

.tip-category span {
    font-size:1.2em;
    display: inline-block;
    width:100%;
    border:2px solid var(--brand-red);
    border-radius:50%;
}



/* ===============================
   7) Two-Column Red with Inverse Btn
   =============================== */
.btn-inverse {
    background: #fff;
    color: var(--brand-red);
    border: none;
}

.btn-inverse:hover,
.btn-inverse:focus {
    background: #fff;
    /*opacity:0.75;*/
    filter: brightness(0.85);
    color: var(--brand-red);
}


/* ===============================
   8) Footer
   =============================== */
.site-footer {
    min-height: 288px;
    background: #fff;
    color: var(--brand-red);
}

.site-footer p {
    font-size: .8em;
}

.site-footer a {
    color: var(--brand-red);
}

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

.footer-logo {
    width: 100px;
    height: auto;
    display: block;
}

.long-legal {
    width: 80%;
}

/* ===============================
   9) Cookie Notice
   =============================== */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: #fff;
    color: #000;
    border-top: 3px solid var(--brand-red);
    /*padding: 12px 16px;*/
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}

.cookie-notice a {
    /*color: var(--brand-red);*/
}