/* ---------------------------------------------------------------------------
   The travel-info funnel: every component the three pages are built from.

   The page shell — the split, the question bands, the compact hero, the sidebar
   and sticky-bar breakpoints — is under FUNNEL PAGE SHELL near the foot. Above
   it are the parts: the lean header and footer, the contest banner, the region
   and state pickers, the listing card, the state block, the drive rail, the
   request panel and its modal, and the address form's fields.

   Everything builds on the real design system in assets/website/css/site.css
   and its .gqv2 tokens — no colour, font or radius is redefined here.
   --------------------------------------------------------------------------- */

/* The browser's default 8px body margin is never wanted on a full-bleed page,
   and it actively breaks the overlaid header: that is positioned against the
   initial containing block and ignores the margin, so the logo landed 8px left
   of the hero copy it is supposed to line up with. */
body.gqv2 { margin: 0; }


/* ==================== LEAN FUNNEL HEADER ====================
   Replaces the site header on the lead pages. No nav, no burger, no "Request
   Info" button — the visitor is already doing that, and every link out is a
   way to abandon a half-finished form. It does not stick, either: it is a
   mark of where you are, not a control surface. */
.gqv2 .gq-lean {
    background: #fff;
    border-bottom: 1px solid var(--gq-line);
}

.gqv2 .gq-lean-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 68px;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Enough to be the brand rather than a bookmark — it is the only mark of who is
   asking for the visitor's address — but no longer 200px on a 104px bar. The
   hero under it now carries the page, so the header can go back to being a
   header. */
.gqv2 .gq-lean .gqv2-logo-svg { width: 152px; }

.gqv2 .gq-lean-trust {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gqv2 .gq-lean-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gq-slate);
    white-space: nowrap;
}

.gqv2 .gq-lean-trust i { color: var(--gq-green); font-size: 12px; }

/* ---- laid over a photo hero ----
   Costs no vertical space at all: the hero starts at the top of the page and
   the brand sits on it. Preferred over dropping the header entirely — a form
   asking for a name and a postal address with no branding on it reads as
   something to be wary of, and the logo is the cheapest answer to that. */
.gqv2 .gq-lean.is-over {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: transparent;
    border-bottom: 0;
}

.gqv2 .gq-lean.is-over .gqv2-logo-svg { background-color: #fff; }
.gqv2 .gq-lean.is-over .gqv2-logo-tagline { color: rgba(255, 255, 255, .75); }
.gqv2 .gq-lean.is-over .gq-lean-trust span { color: rgba(255, 255, 255, .82); }
.gqv2 .gq-lean.is-over .gq-lean-trust i { color: #9ad3ae; }

@media (max-width: 760px) {
    .gqv2 .gq-lean-inner { min-height: 56px; }
    .gqv2 .gq-lean-trust { gap: 12px; }
    .gqv2 .gq-lean-trust span:not(:first-child) { display: none; }
}


/* ==================== LEAN FUNNEL FOOTER ====================
   The counterpart to the header: one line of who-you-are and the two documents
   the consent checkbox points at. No columns, no social, no brand blurb. */
.gqv2 .gq-leanfoot {
    background: #fff;
    border-top: 1px solid var(--gq-line);
}

.gqv2 .gq-leanfoot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 30px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 22px;
}

.gqv2 .gq-leanfoot-copy {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gq-mist);
}

.gqv2 .gq-leanfoot-links { display: flex; gap: 22px; flex-wrap: wrap; }

.gqv2 .gq-leanfoot-links a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gq-slate);
    transition: color .18s ease;
}

.gqv2 .gq-leanfoot-links a:hover { color: var(--gq-navy); text-decoration: underline; }

@media (max-width: 620px) {
    .gqv2 .gq-leanfoot-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ==================== STEP 1 — THE THREE WAYS IN ==================== */

/* ---- region card ----
   A selectable copy of the homepage's category cards (.gqv2-ecard in
   home.css): photo, circular icon badge straddling its bottom edge, then the
   title in the card's own colour. --card-color is set per card inline, the
   same hook the homepage uses.

   Scaled down from the homepage's version: five of these sit above the state
   grid rather than four alone in a panel, so the photo is shallower and the
   type a step smaller. */
.gqv2 .gq-region {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 10px;
    border: 1.5px solid var(--gq-line);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    text-align: center;
    box-shadow: var(--gq-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gqv2 .gq-region input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-region:hover {
    transform: translateY(-4px);
    box-shadow: var(--gq-shadow);
    border-color: var(--card-color);
}

.gqv2 .gq-region-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
}

.gqv2 .gq-region-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.gqv2 .gq-region:hover .gq-region-media img { transform: scale(1.06); }

/* card-colour wash that fades in on hover, behind the CTA */
.gqv2 .gq-region-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--card-color) 34%, transparent);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1;
}

.gqv2 .gq-region:hover .gq-region-media::after,
.gqv2 .gq-region:has(input:checked) .gq-region-media::after { opacity: 1; }

.gqv2 .gq-region-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--card-color);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 22px -8px rgba(18, 59, 99, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.gqv2 .gq-region:hover .gq-region-cta { opacity: 1; transform: translate(-50%, -50%); }

.gqv2 .gq-region:has(input:checked) .gq-region-cta {
    opacity: 1;
    transform: translate(-50%, -50%);
    background: #fff;
    color: var(--card-color);
}

.gqv2 .gq-region:has(input:checked) .gq-region-cta i::before { content: "\f00c"; }

/* circular icon badge straddling the image's bottom edge */
.gqv2 .gq-region-badge {
    width: 32px;
    height: 32px;
    margin: -16px auto 0;
    position: relative;
    z-index: 3;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--card-color);
    font-size: 13px;
    box-shadow: 0 6px 16px -6px rgba(18, 59, 99, .4);
}

.gqv2 .gq-region-title {
    margin: 6px 8px 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--card-color);
    line-height: 1.2;
}

.gqv2 .gq-region-desc {
    margin: 0 9px 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--gq-slate);
}

.gqv2 .gq-region-cnt {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--gq-mist);
}

.gqv2 .gq-region:has(input:checked) {
    border-color: var(--card-color);
    box-shadow: 0 18px 38px -22px var(--card-color);
}

/* ---- state postcard ----
   The homepage's free-guides state grid (.gqv2-gstate in home.css), made
   selectable. The two-letter code leads and carries the only colour, on the
   same four-hue cycle. */
/* Sized down from the homepage's postcards: this picker carries every state
   that has a listing — 51 once the real data lands, not the demo's 18 — so the
   tile has to be small enough that the whole country fits without the grid
   becoming a page of its own. */
.gqv2 .gq-gstate {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    padding: 9px 6px 8px;
    border: 1px solid var(--gq-line);
    border-radius: 10px;
    background: #fff;
    color: var(--gq-navy);
    cursor: pointer;
    user-select: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.gqv2 .gq-gstate input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-gstate:hover {
    transform: translateY(-3px);
    border-color: var(--gq-gold);
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-gstate-abbr {
    font-family: var(--gq-head-font);
    font-weight: 800;
    font-size: 19px;
    line-height: 1;
    color: var(--gq-navy);
}

.gqv2 .gq-gstate:nth-child(4n+1) .gq-gstate-abbr { color: var(--gq-blue); }
.gqv2 .gq-gstate:nth-child(4n+2) .gq-gstate-abbr { color: var(--gq-green); }
.gqv2 .gq-gstate:nth-child(4n+3) .gq-gstate-abbr { color: var(--gq-gold-dark); }
.gqv2 .gq-gstate:nth-child(4n)   .gq-gstate-abbr { color: var(--gq-navy); }

.gqv2 .gq-gstate-name {
    font-weight: 800;
    font-size: 10.5px;
    margin-top: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gqv2 .gq-gstate-cnt { font-size: 9.5px; font-weight: 600; color: var(--gq-mist); }

.gqv2 .gq-gstate-tick {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 15px;
    height: 15px;
    font-size: 7.5px;
    border-radius: 50%;
    background: var(--gq-navy);
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .16s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.gqv2 .gq-gstate:has(input:checked) {
    border-color: var(--gq-navy);
    background: var(--gq-blue-tint);
    box-shadow: 0 12px 26px -16px rgba(18, 59, 99, .8);
}

.gqv2 .gq-gstate:has(input:checked) .gq-gstate-tick { opacity: 1; transform: none; }

/* The visitor's own state is marked, not selected. A coloured border read as a
   selection here, so the marker is a small glyph in the corner the tick does
   not use — the border stays neutral until the state is actually picked. */
.gqv2 .gq-gstate.is-home::before {
    content: "\f015";
    font-family: var(--fa-family-classic, "Font Awesome 7 Free");
    font-weight: 900;
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 10px;
    color: #c3ccd6;
    transition: color .15s ease;
}

.gqv2 .gq-gstate.is-home:hover::before { color: var(--gq-gold); }
.gqv2 .gq-gstate.is-home:has(input:checked)::before { color: var(--gq-blue); }


/* ==================== STEP 0 — CONTEST BANNER ==================== */
/* One contest, chosen by state, at the top of the page. */
.gqv2 .gq-cbanner {
    position: relative;
    display: grid;
    /* The photo carries the prize, so it takes the widest fixed column it can
       without squeezing the trust lines opposite, which are set nowrap. */
    grid-template-columns: 320px 1fr 200px;
    align-items: stretch;
    border-radius: 20px;
    border: 1.5px solid var(--gq-line);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--gq-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gqv2 .gq-cbanner input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-cbanner:hover { transform: translateY(-2px); box-shadow: var(--gq-shadow); }

.gqv2 .gq-cbanner:has(input:checked) {
    border-color: var(--gq-gold);
    box-shadow: 0 20px 44px -26px rgba(217, 108, 71, .9);
}

.gqv2 .gq-cbanner-img { position: relative; background: var(--gq-sky); min-height: 190px; }
.gqv2 .gq-cbanner-img img { width: 100%; height: 100%; object-fit: cover; }

.gqv2 .gq-cbanner-body { padding: 22px 26px; min-width: 0; }

.gqv2 .gq-cbanner-top {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}

/* Deliberately larger than an eyebrow — this line is the offer, so it carries
   more weight than the prize title's kicker normally would. Letter-spacing
   eases off as the size goes up, or 29 uppercase characters run past the
   column. */
.gqv2 .gq-cbanner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .9px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--gq-gold-dark);
}

.gqv2 .gq-cbanner-kicker i { font-size: 15px; }

.gqv2 .gq-cbanner-body h3 {
    font-family: var(--gq-head-font);
    color: var(--gq-navy);
    font-size: clamp(19px, 2.2vw, 25px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    margin: 0 0 8px;
}

.gqv2 .gq-cbanner-body p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gq-mist);
    max-width: 52ch;
}

.gqv2 .gq-cbanner-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; }

.gqv2 .gq-cbanner-meta span {
    font-size: 12px;
    font-weight: 600;
    color: var(--gq-mist);
}

.gqv2 .gq-cbanner-meta b {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--gq-navy);
    line-height: 1.2;
}

/* The opt-in column doubles as the checkbox — the whole banner is the label —
   so it is dressed as the button it functions as: its own tinted field, a hover
   state, and the reassurances stacked under the label rather than off in the
   body copy where they read as small print. */
.gqv2 .gq-cbanner-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    text-align: center;
    background: linear-gradient(180deg, #f7fafc 0%, var(--gq-cloud) 100%);
    border-left: 1px solid var(--gq-line);
    transition: background .2s ease;
}

.gqv2 .gq-cbanner:hover .gq-cbanner-opt { background: linear-gradient(180deg, #fff 0%, #eef3f7 100%); }

.gqv2 .gq-cbanner:has(input:checked) .gq-cbanner-opt {
    background: linear-gradient(180deg, #fff9f5 0%, #fdf0e9 100%);
}

/* Why entering is safe, right where the decision is made. */
.gqv2 .gq-cbanner-trust {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.gqv2 .gq-cbanner-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gq-mist);
    white-space: nowrap;
}

.gqv2 .gq-cbanner-trust i { font-size: 8.5px; color: var(--gq-green); }

/* Unticked, this has to read as an empty checkbox waiting to be pressed. A
   transparent tick inside a near-white border on a near-white panel read as a
   blank disc instead — so the border is a colour you can actually see and the
   check shows through faintly. */
.gqv2 .gq-cbanner-tick {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #bcc8d4;
    background: #fff;
    color: #c3ccd6;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(18, 59, 99, .08);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.gqv2 .gq-cbanner:hover .gq-cbanner-tick { border-color: var(--gq-gold); color: var(--gq-gold); }

.gqv2 .gq-cbanner:has(input:checked) .gq-cbanner-tick {
    background: linear-gradient(135deg, #E07A52 0%, #C75A34 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 108, 71, .45);
    transform: scale(1.08);
}

.gqv2 .gq-cbanner-on,
.gqv2 .gq-cbanner-off {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--gq-navy);
}

.gqv2 .gq-cbanner-on { display: none; color: var(--gq-gold-dark); }
.gqv2 .gq-cbanner:has(input:checked) .gq-cbanner-on { display: block; }
.gqv2 .gq-cbanner:has(input:checked) .gq-cbanner-off { display: none; }

@media (max-width: 980px) {
    .gqv2 .gq-cbanner { grid-template-columns: 220px 1fr; }

    .gqv2 .gq-cbanner-opt {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
        border-left: 0;
        border-top: 1px solid var(--gq-line);
    }

    .gqv2 .gq-cbanner-trust { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
}

@media (max-width: 620px) {
    .gqv2 .gq-cbanner { grid-template-columns: 1fr; }
    .gqv2 .gq-cbanner-img { min-height: 150px; }
    .gqv2 .gq-cbanner-body { padding: 18px 18px 20px; }
}


/* ==================== STEP 2 — TRAVEL-INFO CARD ====================
   The picture whole, with the words in a tray beneath it.

   It began as a copy of the homepage's "Get Inspired" story card — photo
   filling a portrait, a scrim up from the foot, the title laid over it. That
   works for a photograph of a place, where the bottom third is usually sky or
   water and losing it costs nothing. It stopped working when the picture became
   the lead-form image: that is a guide cover, and a cover is words. A scrim
   across the bottom 40% of a cover blots out the title printed on it, and the
   thing the visitor is being asked to recognise is exactly that title.

   So: no scrim, no overlay, nothing across the artwork. The cover sits at its
   own 3:4 (App\Reference\LeadForm::LEAD_IMAGE_RATIO) and the card grows to fit
   the tray under it. */
.gqv2 .gq-info {
    position: relative;
    display: flex;
    flex-direction: column;
    /* No aspect-ratio on the card. The cover holds a fixed 3:4 and the tray is
       whatever the words need, so nothing has to be reserved for a title that
       may not arrive. The grid stretches the row to the tallest card, and the
       tray takes that slack — which is at most one line of difference within a
       row, where a fixed tray sized for the longest possible title left every
       short card with a hole under it. */
    border-radius: var(--gq-radius);
    overflow: hidden;
    /* A gradient rather than one flat navy. Covers are not all the same height,
       so most cards show some of this behind and below the artwork; flat, that
       read as a card that had failed to load. Falling towards the foot it reads
       as the card's own body instead, and gives the words underneath something
       to sit on. */
    background: linear-gradient(180deg, #0e2f50 0%, #0b2440 62%, #081d34 100%);
    color: #fff;
    box-shadow: var(--gq-shadow-sm);
    cursor: pointer;
    user-select: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.gqv2 .gq-info input { position: absolute; opacity: 0; pointer-events: none; }

/* A hairline of light along the top edge — the one thing that stops a dark card
   on a white band from reading as a hole cut in the page. */
.gqv2 .gq-info::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.gqv2 .gq-info:hover {
    transform: translateY(-6px);
    color: #fff;
    box-shadow: 0 22px 40px -22px rgba(10, 32, 56, .75);
}

/* Chosen: a gold ring rather than a border, so nothing reflows when it lands. */
.gqv2 .gq-info:has(input:checked) {
    box-shadow: 0 0 0 3px var(--gq-gold), 0 16px 34px -18px rgba(217, 108, 71, .85);
}

/* And a wash of the same gold up from the foot, so a chosen card reads as
   chosen from across the grid rather than only at its edge. */
.gqv2 .gq-info:has(input:checked) .gq-info-body {
    background: linear-gradient(to top, rgba(217, 108, 71, .22), transparent);
}

/* A fixed 3:4 window, the ratio the partner panel crops the lead-form picture
   to (App\Reference\LeadForm::LEAD_IMAGE_RATIO), so our own uploads fill it
   exactly and Heyzine's taller covers are trimmed at the foot — the safe crop,
   since covers put the name at the top and the small print at the bottom.

   Its own height, no longer the card's minus a reserved tray, so every cover in
   the grid is the same rectangle however long its title runs. */
.gqv2 .gq-info-img {
    position: relative;
    aspect-ratio: 3 / 4;
    flex: 0 0 auto;
    display: block;
    /* Its own clip. The card's overflow:hidden only stops the picture at the
       card's edge — it says nothing about the boundary between picture and
       tray, so the hover scale bled straight down through the fade and over
       the type and title. */
    overflow: hidden;
}

.gqv2 .gq-info-img img {
    /* The homepage's rule, verbatim: fill the width at natural ratio, anchored
       to the top, and let the box clip whatever runs past the bottom. Never
       cropped sideways — a guide cover is words, and trimming its edges cuts
       into the title. Trimming its foot does not: covers put the name at the
       top and the small print at the bottom. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* On the base rule, not the hover one: origin does not transition, so
       setting it only on hover would snap the frame at the moment the scale
       starts. Top centre means the hover grows the cover downward into the
       fade instead of lifting its title out of the frame. */
    transform-origin: top center;
    transition: transform .5s ease;

    /* The picture dissolves rather than being covered. A scrim painted over
       the foot dims whatever is under it and still ends on a line you can see;
       a mask takes the image's own pixels away, so it thins into the card and
       there is no edge at all — and the navy showing through is the card's own
       gradient rather than a second layer of it.

       The place line is not masked: it sits in .gq-info-img beside the picture,
       not inside it, so it keeps its full weight over the faded part.

       The stops trace smoothstep (3t² − 2t³) rather than ramping straight down.
       A two-stop fade changes slope abruptly where it starts, and the eye reads
       that corner as a line across the picture even though nothing there is a
       line; easing in and out leaves no corner to catch on. Nine stops because
       banding shows through below about eight over a run this short. */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, .96) 82.5%, rgba(0, 0, 0, .84) 85%, rgba(0, 0, 0, .68) 87.5%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, .32) 92.5%, rgba(0, 0, 0, .16) 95%, rgba(0, 0, 0, .04) 97.5%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, .96) 82.5%, rgba(0, 0, 0, .84) 85%, rgba(0, 0, 0, .68) 87.5%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, .32) 92.5%, rgba(0, 0, 0, .16) 95%, rgba(0, 0, 0, .04) 97.5%, rgba(0, 0, 0, 0) 100%);
}

.gqv2 .gq-info:hover .gq-info-img img { transform: scale(1.07); }

/* The type badge sits with the words at the foot, not in the picture's corner:
   the artwork is a guide cover, and a pill on its corner covers whatever the
   cover put there. Inside the body now, under the title — the padding and the
   left margin belong to the body, so all three lines share one edge. */
.gqv2 .gq-info-badges {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    /* Pinned to the foot of the tray, so it lands at the same height on every
       card in the grid and the eye can run along the row. */
    margin-top: auto;
}

/* A quiet label with a colour dot, not a filled pill. The pill was right when
   it sat on artwork and had to carve out its own contrast; down here on the
   navy, beside an amber place line and a white title, a third block of solid
   colour was the loudest thing on a card whose job is the cover above it. The
   type colour survives as the dot, which is all it was ever carrying. */
.gqv2 .gq-info-badges .gq-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
    white-space: nowrap;
}

.gqv2 .gq-info-badges .gq-type::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--type-color);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}

/* The icon the pill carried is redundant beside the dot and the word. */
.gqv2 .gq-info-badges .gq-type i { display: none; }

/* .gqv2-story-body's measurements, on the navy the cover leaves behind. */
.gqv2 .gq-info-body {
    position: relative;
    z-index: 2;
    /* Fixed, sized for a two-line title plus the type under it. With the cover
       on a fixed 3:4 above, that makes every card in the grid exactly the same
       height — not merely the same as its neighbours in one row, which is all
       the grid's own stretch can promise. The type line then sits at one
       constant place across the whole page.

       The cost is the gap above it on a one-line title: something has to give
       when the block is fixed and the words are not. */
    height: 71px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* The only thing between the title and the type line. */
    gap: 2px;
    /* Nothing at the top. The state line sits just above this edge, on the
       picture, and the two are one block — any padding here is a gap neither
       the cover nor the words account for. What is left between them is the
       line-height leading of the two text boxes, which cannot be padded away
       without cropping the type. */
    padding: 0 11px 12px;
}

/* The amber state line the homepage uses, on the foot of the picture where its
   fade already is — the shadow and the light amber are what let it hold there. */
.gqv2 .gq-info-img .gq-info-loc {
    position: absolute;
    z-index: 2;
    /* 11px, the body's padding — the state, the title and the type then share
       one left edge down the card instead of stepping in by a pixel. */
    left: 11px;
    right: 11px;
    bottom: 4px;
    /* 1, not the inherited 1.5-ish: the state is a single line, and its leading
       is dead space between it and the title directly beneath. */
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #FFD98A;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}

.gqv2 .gq-info-loc i { color: var(--gq-gold); font-size: 10px; }

.gqv2 .gq-info-body h4 {
    margin: 0;
    font-family: var(--gq-font);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    /* Tightened a touch. These titles are long institutional names — "Cambridge
       / Guernsey County Visitors & Convention Bureau" — and at 800 with default
       tracking two lines of them turn into a wall. */
    letter-spacing: -.01em;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.gqv2 .gq-info-tick {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(10, 32, 56, .1);
    box-shadow: 0 3px 10px rgba(10, 32, 56, .22);
    color: var(--gq-navy);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .18s ease, color .18s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

/* Both cards that carry the tick, not just the grid one. The rail's card uses
   the same control and had been getting the unchecked half of these rules only,
   so a chosen drive card kept showing a plus. */
.gqv2 .gq-info:has(input:checked) .gq-info-tick,
.gqv2 .gq-wtd-card:has(input:checked) .gq-info-tick {
    background: linear-gradient(135deg, #E07A52 0%, #C75A34 100%);
    border-color: transparent;
    color: #fff;
    transform: scale(1.06);
}

/* ---- worth the drive: the homepage's scrolling rail ----
   Mirrors .gqv2-wtd-* in home.css — a real scroll container, arrows outside it
   because the marquee clips overflow, cards at a fixed 262px. Made selectable
   here, so the card is a label and carries the same tick as the grid cards. */
.gqv2 .gq-wtd-shell { position: relative; }
.gqv2 .gq-wtd-shell.is-empty .gq-wtd-arrow { display: none; }

.gqv2 .gq-wtd-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 12px;
    cursor: grab;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gqv2 .gq-wtd-marquee::-webkit-scrollbar { display: none; }

.gqv2 .gq-wtd-marquee.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.gqv2 .gq-wtd-marquee.is-dragging .gq-wtd-card { pointer-events: none; }

.gqv2 .gq-wtd-track { display: flex; gap: 18px; width: max-content; }

.gqv2 .gq-wtd-card {
    flex: 0 0 262px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gq-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--gq-shadow-sm);
    color: var(--gq-navy);
    cursor: pointer;
    user-select: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gqv2 .gq-wtd-card input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-wtd-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gq-shadow);
    border-color: var(--gq-blue);
}

/* The grid card's chosen state, exactly: a gold ring outside the border rather
   than a recoloured 1px line, so the two read as the same "picked" wherever the
   visitor meets it. A ring also costs no layout — nothing reflows as it lands. */
.gqv2 .gq-wtd-card:has(input:checked) {
    border-color: var(--gq-gold);
    box-shadow: 0 0 0 3px var(--gq-gold), 0 16px 34px -20px rgba(217, 108, 71, .85);
}

/* Fixed 3:2 window, the homepage's. The image is taken out of flow so a
   portrait source cannot define the box height — with height:100% alone a
   non-definite parent height falls back to auto and one tall photo stretches
   the whole row. It is also the ratio the main photo is cropped to on the way
   in (w-560,h-374), so nothing is cropped twice. */
.gqv2 .gq-wtd-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    flex: 0 0 auto;
}

.gqv2 .gq-wtd-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

/* Left, so it clears the request toggle anchored right — the homepage's own
   override of the pill's default top-right corner. */
.gqv2 .gq-wtd-media .gqv2-vibe-tag {
    top: 10px;
    left: 10px;
    right: auto;
}

.gqv2 .gq-wtd-body {
    display: flex;
    flex-direction: column;
    padding: var(--gq-card-gap-top) 15px 15px;
    flex: 1 1 auto;
}

.gqv2 .gq-wtd-town { font-size: 11.5px; font-weight: 700; color: var(--gq-gold-dark); }
.gqv2 .gq-wtd-town i { font-size: 10px; margin-right: 4px; }

/* clamped so a long name can't drive the row taller than its neighbours */
.gqv2 .gq-wtd-title {
    margin: 4px 0 5px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gq-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Six lines, not the homepage's two. There a card is a link and the blurb is a
   teaser; here it is the only description of a place the visitor is deciding
   whether to have posted to them, and two lines stopped most of them mid-
   sentence. The rail scrolls sideways, so the height it costs is paid once. */
.gqv2 .gq-wtd-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--gq-slate);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The homepage's arrows, down to the offsets: centred on the card rather than
   the whole shell (the -6px accounts for the marquee's own bottom padding),
   sitting 8px outside the rail, and turning blue rather than navy on hover. */
.gqv2 .gq-wtd-arrow {
    position: absolute;
    top: calc(50% - 6px);
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--gq-line);
    background: #fff;
    color: var(--gq-navy);
    font-size: 15px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px rgba(18, 59, 99, .5);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

/* Keeps the centring while it grows — a bare scale() would drop the
   translateY and the button would jump half its height. */
.gqv2 .gq-wtd-arrow:hover {
    background: var(--gq-blue);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

.gqv2 .gq-wtd-arrow.prev { left: -8px; }
.gqv2 .gq-wtd-arrow.next { right: -8px; }

@media (max-width: 620px) {
    .gqv2 .gq-wtd-card { flex: 0 0 220px; }
    .gqv2 .gq-wtd-arrow { width: 38px; height: 38px; font-size: 13px; }
    .gqv2 .gq-wtd-arrow.prev { left: -4px; }
    .gqv2 .gq-wtd-arrow.next { right: -4px; }
}

/* ==================== STATE GROUP (step 2) ====================
   One block per chosen state: its name, how much of it is in the request, and
   a select-all. Mirrors legacy /survey/guides and the live /guides directory,
   which both group by state rather than pooling everything together. */
/* The blocks sit in a two-column bed. A state with three or more entries
   spans it; one with two or fewer takes a single column, so a run of thin
   states pairs up instead of spending a full row on one card. `dense` matters:
   without it a wide block after a lone narrow one would leave the half-row
   beside it empty rather than pulling the next thin state up into it. */
.gqv2 .gq-gstacks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    /* Generous down the page, tighter across it: the row gap is what separates
       one state from the next and has to beat the gap between cards inside a
       state, or the blocks run together into one field of covers. */
    gap: 48px 26px;
    align-items: start;
}

.gqv2 .gq-gstack { grid-column: span 2; }
.gqv2 .gq-gstack.is-narrow { grid-column: span 1; }

@media (max-width: 900px) {
    .gqv2 .gq-gstacks { grid-template-columns: 1fr; }
    .gqv2 .gq-gstack,
    .gqv2 .gq-gstack.is-narrow { grid-column: span 1; }
}

/* The state name is the loudest thing in the block on purpose — it is the
   answer to the question the visitor just asked, and the cards under it are the
   detail.

   One rule runs the whole width; under the name it thickens to gold. Both are
   real borders rather than a bar drawn over the line: the thick part then takes
   its width from the name itself, so "Ohio" and "West Virginia" each get the
   length they deserve without anything being measured by hand.

   That is what align-items: flex-end is for — it puts every child's box bottom
   on the head's content bottom, which is where the hairline sits, so the two
   borders meet. The name's -1px pulls its border down over the hairline instead
   of stacking a grey line under a gold one. */
.gqv2 .gq-gstack-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    /* A navy tint, not --gq-line. These blocks sit on the sky band, and
       --gq-line (#e3e9ef) against --gq-sky (#DCECF4) is the same lightness with
       a different hue — a line nobody can see. This one reads on the sky, on
       white, and on the sand tail. */
    border-bottom: 2px solid rgba(18, 59, 99, .38);
}

.gqv2 .gq-gstack-name {
    font-size: 34px;
    line-height: 1;
    color: var(--gq-navy);
    padding-bottom: 13px;
    /* Covers the line rather than stacking on it — matched to its width. */
    margin-bottom: -2px;
    border-bottom: 5px solid var(--gq-gold);
}

/* Matching padding, so the tally sits on the same rule the name does. */
.gqv2 .gq-gstack-meta { padding-bottom: 13px; }

/* A half-width block carries the same furniture a size down. */
.gqv2 .gq-gstack.is-narrow .gq-gstack-name { font-size: 27px; padding-bottom: 11px; }
.gqv2 .gq-gstack.is-narrow .gq-gstack-meta { padding-bottom: 11px; }
.gqv2 .gq-gstack.is-narrow .gq-gstack-head { margin-bottom: 14px; }

.gqv2 .gq-gstack-meta { display: flex; align-items: center; gap: 16px; }

.gqv2 .gq-gstack-count {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gq-mist);
}

.gqv2 .gq-gstack-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--gq-blue);
}

.gqv2 .gq-gstack-all input {
    width: 16px;
    height: 16px;
    accent-color: var(--gq-blue);
    cursor: pointer;
}

.gqv2 .gq-gstack-all:hover { color: var(--gq-navy); }


.gqv2 .gq-empty {
    margin: 0;
    padding: 20px 22px;
    border-radius: var(--gq-radius);
    border: 1.5px dashed var(--gq-line);
    background: var(--gq-cloud);
    font-size: 14px;
    font-weight: 600;
    color: var(--gq-mist);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gqv2 .gq-empty i { color: var(--gq-blue); }


/* ==================== STEP 3 — FORM PRIMITIVES ==================== */

.gqv2 .gq-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.gqv2 .gq-field > label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--gq-slate);
}

.gqv2 .gq-field > label .req { color: var(--gq-gold-dark); margin-left: 2px; }

.gqv2 .gq-field > label .opt {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gq-mist);
}

.gqv2 .gq-input,
.gqv2 .gq-select {
    width: 100%;
    font-family: var(--gq-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--gq-charcoal);
    background: #fff;
    border: 1.5px solid var(--gq-line);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gqv2 .gq-input::placeholder { color: #a9b4c2; font-weight: 400; }

.gqv2 .gq-input:hover,
.gqv2 .gq-select:hover { border-color: #c9d6e2; }

.gqv2 .gq-input:focus,
.gqv2 .gq-select:focus {
    outline: 0;
    border-color: var(--gq-blue);
    box-shadow: 0 0 0 4px rgba(36, 116, 166, .13);
}

/* The arrow is drawn rather than left to the UA, so the select matches the
   text inputs on every platform. */
.gqv2 .gq-select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355637A'%3E%3Cpath d='M8 11.2 2.8 6l1.1-1.1L8 9l4.1-4.1L13.2 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    cursor: pointer;
}

/* ---- a menu you can type at ----
   Worn as a .gq-select so it is the same control as the state beside it: same
   border, same arrow, same focus ring. What it adds is a search box, which a
   <select> has nowhere to put. See wireCity() in assets/website/js/travel-info.js. */
.gqv2 .gq-combo { position: relative; }

.gqv2 .gq-combo-btn {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

/* The chosen town, or the invitation to choose one — greyed like a
   placeholder, because until it is answered that is what it is. */
.gqv2 .gq-combo-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gqv2 .gq-combo-text.is-empty { color: #a9b4c2; font-weight: 400; }

.gqv2 .gq-combo-btn[aria-expanded="true"] {
    border-color: var(--gq-blue);
    box-shadow: 0 0 0 4px rgba(36, 116, 166, .13);
}

.gqv2 .gq-combo-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--gq-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px -16px rgba(6, 20, 38, .35);
    overflow: hidden;
}

.gqv2 .gq-combo-pop[hidden] { display: none; }

.gqv2 .gq-combo-search {
    width: 100%;
    font-family: var(--gq-font);
    font-size: 14px;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--gq-line);
    outline: 0;
    color: var(--gq-charcoal);
}

.gqv2 .gq-combo-search::placeholder { color: #a9b4c2; }

/* Ten-ish rows, then scroll. Tall enough to be worth opening, short enough to
   leave the field it belongs to on screen. */
.gqv2 .gq-combo-list {
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    overscroll-behavior: contain;
}

.gqv2 .gq-combo-list li {
    padding: 9px 14px;
    font-size: 14px;
    color: var(--gq-charcoal);
    cursor: pointer;
}

/* One highlight for both, so the keyboard and the mouse cannot disagree about
   which row is about to be taken. */
.gqv2 .gq-combo-list li:hover,
.gqv2 .gq-combo-list li.is-on { background: var(--gq-cloud); }

.gqv2 .gq-combo-list li[aria-selected="true"] { font-weight: 700; color: var(--gq-navy); }

/* The way out for a town the list has never heard of. */
.gqv2 .gq-combo-list li.is-free { color: var(--gq-blue); font-weight: 600; }

.gqv2 .gq-combo-none {
    padding: 14px;
    font-size: 13px;
    color: var(--gq-mist);
    text-align: center;
}

.gqv2 .gq-grid { display: grid; gap: 18px; }
.gqv2 .gq-grid-2 { grid-template-columns: 1fr 1fr; }
.gqv2 .gq-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.gqv2 .gq-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 720px) {
    .gqv2 .gq-grid-2,
    .gqv2 .gq-grid-3,
    .gqv2 .gq-grid-4 { grid-template-columns: 1fr; }
}


/* ==================== CHIPS AND TILES ==================== */
.gqv2 .gq-chips { display: flex; flex-wrap: wrap; gap: 9px; }

.gqv2 .gq-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border-radius: 999px;
    border: 1.5px solid var(--gq-line);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gq-charcoal);
    cursor: pointer;
    user-select: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.gqv2 .gq-chip i { font-size: 13px; color: var(--gq-blue); transition: color .18s ease; }

.gqv2 .gq-chip input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-chip:hover { border-color: var(--gq-blue); transform: translateY(-1px); }

.gqv2 .gq-chip:has(input:checked) {
    background: var(--gq-navy);
    border-color: var(--gq-navy);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(18, 59, 99, .7);
}

.gqv2 .gq-chip:has(input:checked) i { color: var(--gq-gold); }

.gqv2 .gq-chip:has(input:focus-visible) {
    outline: 3px solid rgba(36, 116, 166, .35);
    outline-offset: 2px;
}

.gqv2 .gq-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.gqv2 .gq-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 96px;
    padding: 18px 12px;
    text-align: center;
    border-radius: var(--gq-radius);
    border: 1.5px solid var(--gq-line);
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gq-charcoal);
    cursor: pointer;
    user-select: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.gqv2 .gq-tile input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-tile i { font-size: 21px; color: var(--gq-blue); transition: color .18s ease, transform .18s ease; }

.gqv2 .gq-tile:hover {
    border-color: var(--gq-blue);
    transform: translateY(-3px);
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-tile:hover i { transform: scale(1.08); }

.gqv2 .gq-tile:has(input:checked) {
    border-color: var(--gq-gold);
    background: #fff8f4;
    box-shadow: 0 12px 26px -16px rgba(217, 108, 71, .8);
}

.gqv2 .gq-tile:has(input:checked) i { color: var(--gq-gold-dark); }

/* The tick only exists once the tile is on, so an unselected grid stays quiet. */
.gqv2 .gq-tile::after {
    content: "\f00c";
    font-family: var(--fa-family-classic, "Font Awesome 7 Free");
    font-weight: 900;
    position: absolute;
    top: 9px;
    right: 9px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gq-gold);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.gqv2 .gq-tile:has(input:checked)::after { opacity: 1; transform: none; }


/* ==================== CONSENT ==================== */
.gqv2 .gq-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--gq-radius);
    background: var(--gq-blue-tint);
    border: 1.5px solid #d8e6f0;
    cursor: pointer;
}

.gqv2 .gq-consent input {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--gq-blue);
    cursor: pointer;
}

.gqv2 .gq-consent span { font-size: 13px; line-height: 1.6; color: var(--gq-slate); }

.gqv2 .gq-consent a { color: var(--gq-blue); font-weight: 700; text-decoration: underline; }


/* ==================== TRUST CONTENT ==================== */
.gqv2 .gq-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
}

.gqv2 .gq-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gq-slate);
}

.gqv2 .gq-trust i { color: var(--gq-green); font-size: 13px; }

.gqv2 .gq-quote {
    margin: 0;
    padding: 20px 22px;
    border-radius: var(--gq-radius);
    background: #fff;
    border: 1.5px solid var(--gq-line);
}

.gqv2 .gq-quote blockquote {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.65;
    font-style: italic;
    color: var(--gq-charcoal);
}

.gqv2 .gq-quote figcaption { display: flex; flex-direction: column; gap: 3px; }
.gqv2 .gq-quote figcaption b { font-size: 13px; font-weight: 800; color: var(--gq-navy); }

.gqv2 .gq-quote figcaption span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gq-mist);
}

.gqv2 .gq-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; }

.gqv2 .gq-stat b {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--gq-gold);
    line-height: 1;
}

.gqv2 .gq-stat span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gq-mist);
}

.gqv2 .gq-countdown { display: flex; gap: 8px; justify-content: center; }

.gqv2 .gq-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 56px;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
}

.gqv2 .gq-cd-unit b {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gqv2 .gq-cd-unit span {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}


/* ==================== STICKY REQUEST BAR ====================
   Built on the homepage's request tray (.gqv2-tray in site.css) rather than
   design A's plain counter bar: it shows WHAT is in the request as thumbnails,
   each removable in place, so the visitor never has to scroll back up to check
   or change something. Hidden entirely until there is something to show. */
.gqv2 .gq-cbar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(170%);
    width: min(1100px, calc(100% - 28px));
    z-index: 400;
    display: flex;
    align-items: center;
    /* The count sits at one end and the Continue at the other, whatever is
       between them — the chip strip is the only thing that grows, and on a
       phone it is not rendered at all, which used to leave the two clustered
       to the left with the rest of the bar empty. */
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px 11px 16px;
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(12, 32, 56, .97), rgba(18, 44, 74, .97));
    box-shadow: 0 18px 50px rgba(6, 20, 38, .45);
    border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.gqv2 .gq-cbar.is-open {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.gqv2 .gq-cbar-lead { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.gqv2 .gq-cbar-badge {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #E07A52, #C75A34);
    font-size: 17px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 108, 71, .45);
}

/* The count reads as a sentence beside the icon rather than as a notification
   dot on it: the bar has room, and a number in a corner is a thing to notice
   where this is a thing to read. */
.gqv2 .gq-cbar-said {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.gqv2 .gq-cbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* The way into the list, beside the way past it. Quiet: it is the second thing
   anyone wants from this bar, and a second solid button would argue with the
   Continue over which one is the way on. */
.gqv2 .gq-cbar-alt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: var(--gq-font);
    font-size: 13px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.gqv2 .gq-cbar-alt:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.gqv2 .gq-cbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #E07A52 0%, #C75A34 100%);
    color: #fff;
    font-family: var(--gq-font);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 13px 22px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(217, 108, 71, .45);
    transition: transform .18s ease, box-shadow .18s ease;
}

.gqv2 .gq-cbar-cta:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 9px 24px rgba(217, 108, 71, .55);
}

/* Three items and nothing that grows, so there is no breakpoint at which
   anything has to be dropped — only tightened. */
@media (max-width: 620px) {
    .gqv2 .gq-cbar { bottom: 12px; width: calc(100% - 18px); gap: 10px; padding: 10px; border-radius: 16px; }
    .gqv2 .gq-cbar-badge { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
    .gqv2 .gq-cbar-said { font-size: 13.5px; }
    .gqv2 .gq-cbar-alt { padding: 11px 13px; font-size: 12.5px; }
    .gqv2 .gq-cbar-cta { padding: 12px 16px; font-size: 13px; }
}

/* The label goes before the button does — at this width the pen is unambiguous
   next to a count, and the Continue needs the room more. */
@media (max-width: 420px) {
    .gqv2 .gq-cbar-alt { padding: 11px; }
    .gqv2 .gq-cbar-alt .gq-cbar-alt-t { display: none; }
}


/* ==================== CONTEST ENTRY ROW (sidebar) ====================
   A compact row, the same build as the request rows above it. The banner at
   the top of the page already makes the pitch; this only has to confirm the
   entry and let it be undone, so it is a thumbnail, a title and a state line. */
.gqv2 .gq-centry {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1.5px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background .2s ease;
}

.gqv2 .gq-centry input { position: absolute; opacity: 0; pointer-events: none; }

.gqv2 .gq-centry.is-in { border-color: var(--gq-gold); background: rgba(217, 108, 71, .12); }
.gqv2 .gq-centry:hover { border-color: rgba(255, 255, 255, .3); }
.gqv2 .gq-centry.is-in:hover { border-color: var(--gq-gold-dark); }

.gqv2 .gq-centry-img {
    flex-shrink: 0;
    width: 46px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gq-navy-dark);
}

.gqv2 .gq-centry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s ease;
}

/* Left the contest — the prize goes quiet rather than disappearing. */
.gqv2 .gq-centry:not(.is-in) .gq-centry-img img { opacity: .45; filter: saturate(.5); }

.gqv2 .gq-centry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.gqv2 .gq-centry-body b {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.gqv2 .gq-centry-body em {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
}

.gqv2 .gq-centry-state {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .45);
}

.gqv2 .gq-centry.is-in .gq-centry-state { color: var(--gq-gold); }

.gqv2 .gq-centry-tick {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .25);
    color: transparent;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.gqv2 .gq-centry:hover .gq-centry-tick { border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .4); }

.gqv2 .gq-centry.is-in .gq-centry-tick {
    background: var(--gq-gold);
    border-color: var(--gq-gold);
    color: #fff;
}


/* ==================== REQUEST PANEL (.gq-side) ====================
   The navy "what you're requesting" panel. Shared, because design C shows it
   on both pages — beside the questions while picking, and beside the address
   form while filling it in. It was page two's private CSS until page one
   needed it too; one definition, or the two drift. */
.gqv2 .gq-side {
    position: sticky;
    /* The lean header does not stick, so this only clears the viewport edge
       rather than a fixed bar. */
    top: 20px;
    /* Full viewport height on desktop rather than hugging its contents, so the
       panel reads as a fixed rail beside the questions instead of a card that
       grows and shrinks as things are picked. A flex column: the head and the
       call to action hold their ends and the request list takes the slack. */
    height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* A three-stop gradient with a lift at the top: the old two-stop navy read
       almost flat at this height, and the panel is tall enough now to carry
       real depth. Lightest where the heading sits, deepest behind the call to
       action, so the eye is walked down it. */
    background: linear-gradient(158deg, #1B5083 0%, var(--gq-navy) 42%, #0A2340 100%);
    border-radius: 20px;
    padding: 26px 24px 28px;
    color: rgba(255, 255, 255, .88);
    box-shadow: var(--gq-shadow);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

/* The list is what scrolls, not the panel — min-height:0 so it can actually
   shrink inside the flex column and engage its own overflow. */
.gqv2 .gq-side [data-gq-summary] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.gqv2 .gq-side [data-gq-summary]::-webkit-scrollbar { width: 6px; }
.gqv2 .gq-side [data-gq-summary]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }

.gqv2 .gq-side-head { flex-shrink: 0; }
.gqv2 .gq-side-nudge,
.gqv2 .gq-side-cta,
.gqv2 .gq-side-step,
.gqv2 .gq-side-seal { flex-shrink: 0; }

.gqv2 .gq-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.gqv2 .gq-side-head h2 {
    font-family: var(--gq-font);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}

.gqv2 .gq-side-head a,
.gqv2 .gq-side-head button {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--gq-font);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--gq-gold);
}

.gqv2 .gq-side-head a:hover,
.gqv2 .gq-side-head button:hover { text-decoration: underline; }

/* The blocks inside are rendered by leads-design-ui.js, so the markup and the
   wording stay in one place. */
.gqv2 .gq-sum-block {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.gqv2 .gq-sum-block:first-child { border-top: 0; margin-top: 0; }

.gqv2 .gq-sum-block h4 {
    font-family: var(--gq-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    /* Lighter than --gq-gold: the terracotta sat too close to the navy behind
       it to carry small uppercase text. */
    color: #F0A882;
    margin: 0 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Only the heading that carries a "Clear all" pushes its two halves apart.
   Applied to every heading, space-between shoved the lone trophy icon to one
   end and "Contest entered" to the other — a text node is its own flex item. */
.gqv2 .gq-sum-block h4:has(.gq-sum-clear) { justify-content: space-between; }

.gqv2 .gq-sum-h { display: inline-flex; align-items: center; gap: 8px; }

/* Destructive, so it is quiet until reached for — and it asks before acting. */
.gqv2 .gq-sum-clear {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--gq-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    border-bottom: 1px dashed rgba(255, 255, 255, .28);
    padding-bottom: 1px;
    transition: color .18s ease, border-color .18s ease;
}

.gqv2 .gq-sum-clear:hover { color: #ff9d7a; border-color: #ff9d7a; }

/* Scoped to the panel. Unscoped, these also styled the rows inside the "view
   all" modal, which has its own sizing below — same specificity, so whichever
   loaded last won, and the modal came out with 42x36 thumbnails, white-on-white
   dividers and invisible titles. */
.gqv2 .gq-side .gq-sum-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 0;
}

.gqv2 .gq-side .gq-sum-row + .gq-sum-row { border-top: 1px solid rgba(255, 255, 255, .07); }

.gqv2 .gq-side .gq-sum-row > span { min-width: 0; }

.gqv2 .gq-side .gq-sum-row img {
    width: 42px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.gqv2 .gq-side .gq-sum-row b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.gqv2 .gq-side .gq-sum-row em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.gqv2 .gq-sum-line {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The palette green is too dark to sit on navy — lifted for legibility. */
.gqv2 .gq-sum-line i { color: #7BC894; }

.gqv2 .gq-sum-none {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .62);
}

.gqv2 .gq-side-seal {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .7);
}

.gqv2 .gq-side-seal i { font-size: 20px; color: #7BC894; flex-shrink: 0; }

/* The panel's own call to action, when it carries one. */
/* The one action in the panel. The label carries the weight — big and
   uppercase — while the button itself stays tight around it. */
.gqv2 .gq-side-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #E07A52 0%, #C75A34 100%);
    color: #fff;
    font-family: var(--gq-font);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(217, 108, 71, .45);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.gqv2 .gq-side-cta i { font-size: 13px; }

.gqv2 .gq-side-cta:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 12px 30px rgba(217, 108, 71, .55);
}

.gqv2 .gq-side-cta.is-off { opacity: .4; pointer-events: none; box-shadow: none; }

/* Fires once, the moment the button becomes usable — the visitor is looking at
   the card they just ticked, not at the panel, so the panel has to say so. */
@keyframes gq-cta-ready {
    0%   { transform: none; box-shadow: 0 6px 18px rgba(217, 108, 71, .4); }
    35%  { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(217, 108, 71, .18); }
    100% { transform: none; box-shadow: 0 6px 18px rgba(217, 108, 71, .4); }
}

.gqv2 .gq-side-cta.is-ready { animation: gq-cta-ready .7s ease; }

.gqv2 .gq-side-nudge {
    margin: 18px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
}

.gqv2 .gq-side-step {
    margin: 9px 0 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

/* The same action, repeated where the column actually ends — people who scroll
   the questions to the bottom look for the next step there, not off to the
   side. Kept to one line so it is a button, not the summary band it replaced. */
.gqv2 .gq-next-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-radius: 18px;
    border: 1.5px dashed #cdd9e4;
    background: var(--gq-cloud);
}

.gqv2 .gq-next-inline b {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--gq-navy);
}

.gqv2 .gq-next-inline span.hint {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gq-mist);
    margin-top: 2px;
}

.gqv2 .gq-next-inline .gqv2-btn { flex-shrink: 0; }
.gqv2 .gq-next-inline .gqv2-btn.is-off { opacity: .4; pointer-events: none; box-shadow: none; }


/* ==================== "VIEW ALL" MODAL ==================== */
.gqv2 .gq-sum-more {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--gq-font);
    transition: opacity .18s ease;
}

.gqv2 .gq-sum-more .n {
    flex-shrink: 0;
    width: 42px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    border: 1px dashed rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gqv2 .gq-sum-more .t {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gq-gold);
}

.gqv2 .gq-sum-more i { font-size: 10px; color: var(--gq-gold); }

.gqv2 .gq-sum-more:hover .t,
.gqv2 .gq-sum-more:hover i { color: #fff; }

.gqv2 .gq-sum-more:hover .n { border-color: #fff; background: rgba(255, 255, 255, .18); }

/* The same door, for a list with nothing spilling over it. Centred and quiet:
   with three rows above it there is no count to carry, and it only has to be
   findable by someone looking for the way in. */
.gqv2 .gq-sum-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
    padding: 11px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: none;
    cursor: pointer;
    font-family: var(--gq-font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gq-gold);
    transition: color .18s ease;
}

.gqv2 .gq-sum-open i { font-size: 10.5px; }
.gqv2 .gq-sum-open:hover { color: #fff; }



/* ==================== SMALL SHARED BITS ==================== */
.gqv2 .gq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gq-gold-dark);
}

/* Says "you can skip this" at a glance. Green rather than the gold eyebrow,
   because gold is what the page uses for things it wants you to do — an
   optional step should not compete with the contest banner for attention. */
.gqv2 .gq-optional {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eff6f1;
    border: 1px solid #cfe3d6;
    color: var(--gq-green-dark);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.gqv2 .gq-optional i { font-size: 11px; }

/* The way past an optional step, stated plainly rather than implied. */
.gqv2 .gq-skip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gq-mist);
    border-bottom: 1px dashed #c3ccd6;
    padding-bottom: 2px;
    transition: color .18s ease, border-color .18s ease;
}

.gqv2 .gq-skip:hover { color: var(--gq-navy); border-color: var(--gq-navy); }



/* A section header, wearing the same gold accent as the state headings under
   it. Stacked rather than the old title-left / blurb-right row: side by side, a
   heading and a sentence of small print read as one long crowded line, and the
   blurb had to be short enough to fit rather than long enough to be useful.

   The family resemblance is the point. Coming down the page a visitor meets a
   section header and then several state headings; built the same way, the
   difference in size alone says which contains which. */
.gqv2 .gq-rail-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 52px 0 26px;
}

/* First thing in a band, so nothing above it to push away from. */
.gqv2 .gq-c-col > .gq-rail-head:first-child { margin-top: 0; }

/* The gold sits under the title and takes its width from it — a border, not a
   bar with a number in it, for the same reason the state headings use one: the
   words decide how long it is and nothing has to be kept in step. */
.gqv2 .gq-rail-head h3 {
    font-family: var(--gq-font);
    /* Bigger than the state names it contains (27px of script, which reads
       small for its size). At 20px the section header was the quieter of the
       two and the page said the state blocks contained the section. */
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--gq-navy);
    margin: 0;
    padding-bottom: 9px;
    border-bottom: 4px solid var(--gq-gold);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gqv2 .gq-rail-head h3 i {
    color: var(--gq-gold);
    font-size: 15px;
}

.gqv2 .gq-rail-head p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gq-mist);
    max-width: 74ch;
}



/* ==================== FUNNEL PAGE SHELL ====================
   Design C runs over three pages — pick where, pick what, say where to send it
   — and all three are the same object: a column of work with the request panel
   beside it. What follows is everything more than one of them needs, moved out
   of the pages when the second one appeared. Anything still in a page's own
   <style> is that page alone: the hero and contest band on page one, the form
   sheet on page three. */
.gqv2 .gq-c-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
    /* Vertical only — the sides stay on .gqv2-wrap's own 24px. A three-value
       shorthand zeroes them, which nothing shows on a wide screen but runs
       every band into both edges of a phone. */
    padding-top: 34px;
    padding-bottom: 40px;
}

/* The gap carries the whole separation between sections now that the bands
   have no walls of their own — hence the jump from 22px. */
.gqv2 .gq-c-main { min-width: 0; display: flex; flex-direction: column; gap: 52px; }

/* A section, not a card. It was a white panel with a border and 40px of padding
   inside a white page — a frame drawn around content that was already the whole
   column, and one that stole 76px of the measure the covers had to share. The
   headings and the gap in .gq-c-main separate the sections now. */
.gqv2 .gq-c-band { padding: 0; }

/* Except the trust strip at the foot, which IS a card: a tinted band of small
   print that would otherwise read as a stray line of text after the form. */
.gqv2 .gq-c-band.gq-c-tail {
    padding: 20px 24px;
    border-radius: 18px;
    border: 1.5px solid #e8ddc8;
    background: var(--gq-sand);
}

.gqv2 .gq-c-col { width: 100%; }

/* ---- the question inside a band ---- */
.gqv2 .gq-c-ask { margin-bottom: 26px; }

.gqv2 .gq-c-ask h2 {
    font-size: clamp(25px, 3.4vw, 36px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.018em;
    margin: 10px 0 10px;
    max-width: 22ch;
}

.gqv2 .gq-c-ask p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--gq-mist);
    max-width: 58ch;
}

/* Every question is the site's handwriting accent rather than a heading — the
   funnel should read as spoken, one short line per band. Sized for the column,
   not the page: beside a sidebar these sit in ~960px, and 62px of script
   overpowered everything under it. nowrap because the whole effect is each
   question landing on a single line. */
.gqv2 .gq-c-band h2.gqv2-script {
    font-family: var(--gq-script-font);
    color: var(--gq-blue);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .5px;
    max-width: none;
    white-space: nowrap;
    margin: 2px 0 12px;
}

/* ---- listing grids, shared by the matched blocks and the folds ---- */
/* Stretched, the grid default: every card in a row is the same height, which is
   what lets the type line sit at a constant place on all of them. The cost is
   that the gap between a short title and the type varies — the type holds the
   foot and the title holds the top, so the slack falls between them. That is
   the deliberate trade: a line that moves card to card is harder to scan than
   an uneven gap above it. */
.gqv2 .gq-gstack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Half-width blocks hold one or two cards, so two columns is the whole story.
   The tracks are sized rather than 1fr: stretched across half the measure a card
   comes out a quarter wider than the ones in a full-width block, and the section
   stops reading as one grid.

   The track is the full-width card width, worked back from this block's own
   width. If G is a narrow block and the bed's two columns are split by a 26px
   gap, the full measure is 2G + 26 — so a card in a four-across full-width block
   is (2G + 26 - 3*16) / 4, which is the calc below. Percentages in a track
   resolve against this grid, which is what makes it expressible at all. Keep the
   numbers in step with the column count and both gaps above, or the grids
   drift apart. */
.gqv2 .gq-gstack.is-narrow .gq-gstack-grid {
    grid-template-columns: repeat(2, calc((200% - 22px) / 4));
    justify-content: start;
}

/* Once the column is running at 70% the four-across grid leaves cards wider
   than their own photos want to be, so it gains a column. */
@media (min-width: 1280px) {
    .gqv2 .gq-gstack-grid { grid-template-columns: repeat(5, 1fr); }

    /* Five across now, so the card is (2G + 26 - 4*16) / 5. */
    .gqv2 .gq-gstack.is-narrow .gq-gstack-grid {
        grid-template-columns: repeat(2, calc((200% - 38px) / 5));
    }
}

/* The bed drops to one column here, so a narrow block is the same width as a
   wide one and the cap has nothing left to correct.

   Three across, not two. Four went straight to two at this line, and these
   cards are guide covers at a fixed 3:4 — every pixel of width they gain they
   gain again by a third in height. On an 837px column that made a 410px card
   618px tall, when the same card is about 195 on a desktop and 245 just above
   this breakpoint: one row of two filled a laptop screen, and a state with
   twelve places became six screens of scrolling. */
@media (max-width: 900px) {
    .gqv2 .gq-gstack-grid,
    .gqv2 .gq-gstack.is-narrow .gq-gstack-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Two is as far down as it goes. A pair of covers side by side still reads on a
   phone, and one per row would be a card as tall as the screen. */
@media (max-width: 640px) {
    .gqv2 .gq-gstack-grid,
    .gqv2 .gq-gstack.is-narrow .gq-gstack-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- panel, sticky bar and the closing band ---- */
/* Clearance for the sticky bar, so it never covers the last section. */
.gqv2 .gq-c-foot-gap { height: 96px; }

/* …and no clearance where there is no bar. The rule below hides the sticky bar
   from 1181px up, but the gap kept holding a hundred pixels open for it, which
   is a hundred pixels of nothing at the foot of every page on a desktop. */
@media (min-width: 1181px) {
    .gqv2 .gq-c-foot-gap { height: 0; }
}

/* The sticky bar and the panel say the same thing, so only one shows at a time:
   the panel while it can sit beside the work, the bar once it has been pushed
   above and scrolled out of reach. */
@media (min-width: 1181px) {
    .gqv2 .gq-cbar { display: none; }
}

/* ---- who gets the panel ----
   Not every page in the funnel wants a running total beside it, so the split
   carries the answer rather than each page re-stating it:

     .is-solo        no panel at any width — page one, where nothing has been
                     picked yet that a total could usefully hold
     .is-wide-panel  panel only where it can sit beside the work; below that the
                     sticky bar says the same thing in one line
     (neither)       panel throughout, stacking above the work on a narrow
                     screen — page three, where it is the only place the
                     selection appears */
.gqv2 .gq-c-split.is-solo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1180px) {
    .gqv2 .gq-c-split { grid-template-columns: 1fr; gap: 24px; }

    .gqv2 .gq-c-split.is-wide-panel .gq-side { display: none; }

    /* Panel above the work when it can no longer sit beside it: it is the
       running total, and a total belongs before the work. height:auto matters —
       the desktop rail is a fixed 100vh, which stacked would be a full screen of
       sidebar before anything else. */
    .gqv2 .gq-side {
        position: static;
        height: auto;
        max-height: none;
        overflow: visible;
        order: -1;
    }

    .gqv2 .gq-side [data-gq-summary] { overflow: visible; }
}

@media (max-width: 620px) {
    /* The band is a bordered white card, so it needs side padding of its own. */
    .gqv2 .gq-c-band.gq-c-tail { padding: 18px 16px; }

    /* Gutter narrows to match: the cards inside supply the rest. */
    .gqv2 .gq-c-split {
        padding-left: 16px;
        padding-right: 16px;
    }

    .gqv2 .gq-c-foot-gap { height: 80px; }
}

/* ==================== COMPACT HERO ====================
   Pages two and three, where page one's 440px photo hero would be a wall
   between the visitor and the work. Same materials — a photograph, the navy
   wash over it, the script kicker — at a third of the height, so the funnel
   still looks like one thing while the page gets on with it.

   It runs full-bleed rather than sitting inside the wrap, so the band reads as
   the top of the page rather than as the first card in the column. */
.gqv2 .gq-c-mini {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--gq-navy);
    /* One height for every page that has one. Left to its content the band
       tracked the length of each page's intro — three lines on page two, two on
       page three — so the funnel changed shape underfoot between steps.

       min-height, not height: it is a floor the short pages rise to, not a
       ceiling the long ones are cut off at. Nothing here is ever clipped; a
       longer intro makes a taller band. */
    display: flex;
    align-items: center;
    min-height: 294px;
}

/* width:100% matters — the band is a flex container, so without it the wrap
   shrinks to its content and the auto margins centre it. */
.gqv2 .gq-c-mini > .gqv2-wrap { width: 100%; }

/* The photograph occupies the right of the band and dissolves westward into the
   flat navy the words sit on. Full-bleed behind everything, the picture had to
   be held down by a wash heavy enough to read white type over — which left it
   dim everywhere and doing very little. Given its own half it can be seen. */
.gqv2 .gq-c-mini > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 62%;
    height: 100%;
    object-fit: cover;
    /* Anchored low: these are landscapes, and the horizon is the half worth
       keeping when the band is this short. */
    object-position: center 62%;
}

/* The merge, and only the merge: a 10% ramp straddling the image's left edge at
   38%, opaque navy before it and nothing at all after. The first version rolled
   off across half the band, which is a soft join but also a veil over most of
   the photograph — the picture was dimmed everywhere to hide one seam. Past 46%
   the photograph is untouched. */
.gqv2 .gq-c-mini::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(11, 35, 59, 1) 0%,
            rgba(11, 35, 59, 1) 36%,
            rgba(11, 35, 59, .72) 41%,
            rgba(11, 35, 59, 0) 46%);
}

.gqv2 .gq-c-mini .gqv2-wrap {
    position: relative;
    z-index: 2;
    padding-top: 30px;
    padding-bottom: 32px;
}

/* The step, in the site's handwriting rather than in an uppercase eyebrow —
   the funnel's own voice, and it keeps the band from reading as an admin
   breadcrumb. */
.gqv2 .gq-c-mini .gqv2-script {
    display: block;
    width: fit-content;
    color: var(--gq-sand);
    font-size: 26px;
    line-height: 1;
    margin-bottom: 6px;
}

/* The caps keep the words on the flat navy, short of the ramp at 36%. They are
   different numbers because ch is measured in each element's own type: 30ch of
   15px prose and 30ch of 34px heading are nowhere near the same distance across
   the band. */
.gqv2 .gq-c-mini h1 {
    margin: 0 0 8px;
    max-width: 18ch;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    color: #fff;
}

.gqv2 .gq-c-mini p {
    margin: 0;
    /* As wide as the flat navy allows: the ramp starts at 36% of the band and
       this lands short of it. 30ch was cautious to the point of cutting the
       intro off inside three lines. */
    max-width: 40ch;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/* The way back rides the hero, above the kicker. */
.gqv2 .gq-c-mini .gq-c-back { color: rgba(255, 255, 255, .72); }
.gqv2 .gq-c-mini .gq-c-back:hover { color: #fff; }

/* Below this there is no room for two columns in a 220px band: the picture goes
   back to full width and the wash back to holding the whole thing down. */
@media (max-width: 860px) {
    .gqv2 .gq-c-mini > img { width: 100%; left: 0; }

    .gqv2 .gq-c-mini::after {
        background: linear-gradient(100deg, rgba(9, 28, 48, .94) 0%, rgba(11, 35, 59, .86) 46%, rgba(16, 52, 87, .62) 100%);
    }

    .gqv2 .gq-c-mini h1,
    .gqv2 .gq-c-mini p { max-width: none; }
}

@media (max-width: 620px) {
    /* The floor goes too: on a phone the intro is four or five lines and the
       band should be whatever that needs. */
    .gqv2 .gq-c-mini { min-height: 0; }
    .gqv2 .gq-c-mini .gqv2-wrap { padding-top: 22px; padding-bottom: 24px; }
    .gqv2 .gq-c-mini .gqv2-script { font-size: 22px; }
}

/* ---- page head with a way back, on every page after the first ---- */
.gqv2 .gq-c-top { padding: 0 0 24px; }

.gqv2 .gq-c-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gq-slate);
    margin-bottom: 12px;
    transition: color .18s ease, transform .18s ease;
}

.gqv2 .gq-c-back:hover { color: var(--gq-navy); transform: translateX(-3px); }

/* Matched to the questions below it — same column width, same scale. */
.gqv2 .gq-c-top h1 {
    font-family: var(--gq-script-font);
    color: var(--gq-blue);
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .5px;
    margin: 0 0 10px;
}

.gqv2 .gq-c-top p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--gq-mist);
    max-width: 60ch;
}

/* ==================== THE RETURNING VISITOR ====================
   Three states share one idea: something already happened, so this is not a
   choice any more — it is a record. All three are quiet, none is an error, and
   each says when it stops applying. */

/* ---- page three: welcome back ---- */
.gqv2 .gq-d-known {
    background: #fff;
    border: 1.5px solid var(--gq-line);
    border-radius: 22px;
    padding: 28px;
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-d-known-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.gqv2 .gq-d-known-mark {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--gq-green) 14%, transparent);
    color: var(--gq-green);
    font-size: 18px;
}

.gqv2 .gq-d-known h2 {
    margin: 0 0 4px;
    font-family: var(--gq-script-font);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.1;
    color: var(--gq-blue);
}

.gqv2 .gq-d-known p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gq-mist);
    max-width: 56ch;
}

/* The address as a block, in the shape it will be printed on the envelope —
   the visitor is checking a label, not reading a paragraph. */
.gqv2 .gq-d-known-addr {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 20px 0 0;
    padding: 16px 18px;
    border-radius: var(--gq-radius);
    background: var(--gq-cloud);
    border: 1px solid var(--gq-line);
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gq-navy);
}

.gqv2 .gq-d-known-addr span:first-child { font-weight: 800; }

.gqv2 .gq-d-known-acts {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gqv2 .gq-d-known-acts .gqv2-btn.is-off { opacity: .4; pointer-events: none; box-shadow: none; }

/* Plain text, not a second button: it is the rarer road, and two buttons side
   by side would make the visitor choose rather than confirm. */
.gqv2 .gq-d-known-not {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--gq-slate);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gqv2 .gq-d-known-not:hover { color: var(--gq-navy); }

/* ---- page three: the two limits ---- */
.gqv2 .gq-d-limits {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 18px;
    border-radius: var(--gq-radius);
    background: var(--gq-cloud);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gqv2 .gq-d-limits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gq-slate);
}

.gqv2 .gq-d-limits i {
    flex-shrink: 0;
    margin-top: 2px;
    width: 14px;
    text-align: center;
    color: var(--gq-blue);
    font-size: 12px;
}

.gqv2 .gq-d-limits b { color: var(--gq-navy); font-weight: 800; }

@media (max-width: 620px) {
    .gqv2 .gq-d-known { padding: 22px 18px; border-radius: 18px; }
    .gqv2 .gq-d-known-head { gap: 12px; }
    .gqv2 .gq-d-known-acts { gap: 12px; }
}

/* The Continue in the panel and the sticky bar are <button type="submit">, not
   links: the picks are checkboxes in the form, and a link would reach the next
   step with the session still holding whatever the last POST left. Both were
   styled as anchors, so they need the four properties a button does not
   inherit. */
.gqv2 button.gq-side-cta,
.gqv2 button.gq-cbar-cta {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* ---- step one's measure ----
   Without a panel beside it the work column runs the whole 1400px wrap, and a
   step whose content is three region cards and a row of state tiles then sits
   in the middle of it with a few hundred pixels of nothing on each side. Capped
   to what the other two steps get once their panel has taken its 340 — so the
   funnel holds one measure from the first question to the address. */
.gqv2 .gq-c-split.is-solo .gq-c-main {
    max-width: 980px;
    margin-inline: auto;
}

/* The 52px between sections is for pages made of sections. This one is a single
   question, a Continue and a strip of small print. */
.gqv2 .gq-c-split.is-solo .gq-c-main { gap: 30px; }

/* Inside one question, not between two: the rail head separating "or pick exact
   states" from the region cards above it does not need a section's worth. */
.gqv2 .gq-rail-head.is-mid { margin-top: 34px; }

/* ==================== THE RETURNING VISITOR ====================
   Shown above the form when the browser carries a signed note saying who last
   requested. Deliberately quiet: it is a shortcut, not an announcement, and a
   loud panel here reads as an advert rather than a convenience. */
.gqv2 .gq-d-known {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid rgba(18, 59, 99, .14);
    border-left: 3px solid var(--gq-gold, #C8922A);
    border-radius: 8px;
    background: rgba(200, 146, 42, .06);
}

.gqv2 .gq-d-known-hi { margin: 0; font-size: 1.02rem; color: var(--gq-navy, #123B63); }
.gqv2 .gq-d-known-sub { margin: 4px 0 0; font-size: .88rem; line-height: 1.45; color: #5B6B7C; }

.gqv2 .gq-d-known-btn {
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--gq-navy, #123B63);
    border-radius: 6px;
    background: #fff;
    color: var(--gq-navy, #123B63);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.gqv2 .gq-d-known-btn:hover { background: var(--gq-navy, #123B63); color: #fff; }

/* Once it has been used it has nothing left to say. */
.gqv2 .gq-d-known.is-used { display: none; }