/* Guardian Google landing pages, 21 Sep 2026: additions on top of site.css.
   Tokens only from site.css :root. Nothing here restyles an existing class. */

/* Preview banner: loud on purpose, every viewport */
.previewbanner{position:sticky;top:0;z-index:60;background:#9c2b20;color:#fff;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 12px;line-height:1.4}

/* Rank 1: full-width tap-to-call under the hero form */
.callblock{margin-top:var(--s3)}
.callblock__ask{font-size:15px;color:var(--on-navy);margin:0 0 10px}
.btn--call{width:100%;min-height:56px;background:transparent;color:var(--white);border:2px solid var(--gold);font-size:17px}
.btn--call:hover{background:#c0b28429}
.btn--call svg{width:18px;height:18px;fill:currentColor;margin-right:10px;flex:none}

/* Rank 3: named review directly under the hero form */
.herorev{margin:0 0 var(--s3);padding:0 0 var(--s3);border-bottom:1px solid var(--gold-soft)}
.herorev .stars{font-size:18px;gap:2px;margin-bottom:8px}
.herorev__q{font-family:var(--display);font-weight:500;font-size:clamp(17px,2.4vw,20px);line-height:1.4;color:var(--white);margin:0 0 8px}
.herorev cite{font-style:normal;font-size:14px;color:var(--on-navy-quiet)}

/* Rank 2: the three-field shape hides the long fields */
body[data-form-variant="3"] .field--long{display:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Visible failure path with the phone fallback */
.failbox{margin:14px 0 0;padding:14px 16px;border:2px solid var(--err);border-radius:3px;background:#fbeeed;color:var(--ink);font-size:15px;line-height:1.5}
.failbox:focus{outline:3px solid var(--gold);outline-offset:2px}
.failbox strong{display:block;color:var(--err);font-family:var(--display);font-size:15px;margin-bottom:4px}
.failbox a{color:var(--navy-deep);font-weight:700;border-bottom:2px solid var(--gold);text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.7;cursor:wait}
.capture__done{margin:0;font-family:var(--display);font-weight:600;color:var(--navy-deep)}

/* Thank-you: preview notice and the optional two-tap step */
.tynotice{margin:0 0 var(--s4);padding:14px 16px;border:2px dashed var(--gold);border-radius:3px;color:var(--white);font-size:16px}
.tydetails{margin-top:var(--s5);background:var(--white);color:var(--ink);border-radius:4px;border-top:3px solid var(--gold);padding:22px 18px 24px}
@media(min-width:700px){.tydetails{padding:32px 34px}}
.tydetails h2{color:var(--navy-deep);font-size:clamp(20px,3.2vw,26px);margin-bottom:8px}
.tydetails .note{margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.chip{min-height:44px;padding:10px 14px;border:1px solid rgba(62,79,103,.4);border-radius:3px;background:#fbfaf7;font-size:15px;color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--navy-deep);border-color:var(--navy-deep);color:var(--white)}
.chiplabel{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.band--cream .numlist .qitem__n{color:var(--gold-ink)}
.ty-details__msg{margin:12px 0 0;font-weight:700;color:var(--navy-deep)}

/* Shutters: closed and open pair, testing chip, pending block */
.pairband{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--navy-deep)}
.pairband figure{position:relative;margin:0}
.pairband img{width:100%;height:200px;object-fit:cover}
@media(min-width:700px){.pairband img{height:380px}}
@media(min-width:1200px){.pairband img{height:480px}}
.pairband figcaption{position:absolute;left:0;bottom:0;padding:8px 14px;background:var(--gold);color:var(--navy-deep);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.teststd{display:inline-flex;flex-direction:column;border:2px solid var(--navy-deep);border-radius:3px;padding:8px 14px 9px;color:var(--navy-deep);font-family:var(--display)}
.teststd__a{font-weight:800;font-size:20px;letter-spacing:.06em;line-height:1}
.teststd__b{margin-top:5px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.offerbox{margin-top:var(--s5);background:var(--white);border:1px solid var(--gold);border-top:3px solid var(--gold);border-radius:4px;padding:22px 20px 24px}
@media(min-width:700px){.offerbox{padding:30px 32px 32px}}
.offerbox h3{color:var(--navy-deep);margin-bottom:6px}
.offerbox__note{margin:18px 0 0;font-family:var(--display);font-weight:600;font-size:16px;color:var(--gold-ink)}
.brandline{font-size:16px;line-height:1.55}

/* Image pass, 21 Sep 2026: the awards slider. Own card class so it never inherits .proofcard's
   3-up desktop grid; this one always scrolls, since 7 awards do not sit well as a 3-column grid.
   Media box is a fixed aspect-ratio so an image loading in causes zero layout shift. */
.awardswipe{display:flex;align-items:stretch;gap:16px;margin-top:var(--s5);padding:4px 16px 20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.awardswipe:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.awardcard{flex:0 0 236px;scroll-snap-align:start;background:var(--white);color:var(--ink);border-radius:4px;padding:20px 18px 22px;border-top:3px solid var(--gold);display:flex;flex-direction:column}
.awardcard__year{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0}
.awardcard__title{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.28;color:var(--navy-deep);margin:8px 0 6px}
.awardcard__org{font-size:14px;line-height:1.45;color:var(--ink-soft);margin:0 0 14px}
.awardcard__media{margin-top:auto;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--cream);border-radius:3px;overflow:hidden}
.awardcard__media img{width:100%;height:100%;object-fit:contain;padding:10px}
.awardcard--noimg .awardcard__media{background:linear-gradient(160deg,var(--navy-deep),var(--navy));color:var(--gold);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:16px}
.awardcard__src{margin:10px 0 0;font-size:11px;line-height:1.4;color:var(--ink-soft)}