/* ============================================================
   fixitcareers.com — careers/assets/careers.css (v2.459)
   ------------------------------------------------------------
   ONE stylesheet for the whole site: the landing page, the form,
   the privacy notice and the printable flyer. Referenced with
   ?v=<CR_ASSET_V> (careers/_view_chrome.php) and served immutable
   for thirty days, so BUMP THAT CONSTANT in the same commit as any
   change here.

   NO EXTERNAL RESOURCE OF ANY KIND. Every font file is served out
   of this same docroot and every icon is inline SVG. That is not
   only the content-security policy talking: a font request to a
   third party makes this site's availability somebody else's
   uptime, on the page a hiring advert points at.

   ── THE RED IS TWO REDS, AND IT IS NOT A PREFERENCE ─────────
   The brand red is #F50F21. Measured against white it is 4.22:1,
   and against the brand ink #16171A it is 4.27:1 — both above the
   3:1 that WCAG 1.4.3 asks of LARGE text (>=24px, or >=18.66px
   bold) and both below the 4.5:1 it asks of everything else. So
   the token is split, and which one a rule uses is decided by the
   SIZE OF THE THING IT PAINTS:

     --cr-red      #F50F21  DISPLAY ONLY. Headline accents, the 6px
                            hero rule, icon circles (non-text, 3:1),
                            surfaces that carry no small text.
     --cr-red-ink  #C8102E  5.88:1 on white. EVERY red word under
                            24px, every red button fill that carries
                            small white text, every red border that
                            has to be seen as a control.
     --cr-red-dk   #FF5A5A  5.90:1 on #16171A. Small red text ON the
                            dark ground, where both of the above are
                            unreadable.

   The rest of the ramp, measured the same way, against the exact
   surfaces each token is painted on in this file:

     --cr-body    #4E4E50 on #FFFFFF 8.13:1 · on #F7F6F4 7.70:1
     --cr-dim     #BFC0C4 on #16171A 9.91:1
     --cr-dim-2   #8E8E93 on #16171A 5.53:1 · on #0F1012 5.84:1
     --cr-ink     #16171A on #FFFFFF 16.5:1

   TWO VALUES FROM THE APPROVED DESIGN ARE DELIBERATELY NOT USED:
     * #77787D for the hero's store strip — 4.09:1 on the ink
       ground, i.e. under the floor for 11px text. It is #8E8E93
       here, the lightest neutral on the same axis that clears 4.5.
     * #76787D / #6E7075 for the process cards' duration and step
       number — 3.73:1 on #1D1F22. Same substitution, same reason.
   Both keep the design's hue and move only as far as the
   threshold. If either is ever put back, the page stops being
   readable for the people most likely to be reading it on a phone
   in daylight.
   ============================================================ */

/* ── Avenir + IBM Plex Mono, self-hosted in this docroot ──────
   Four Avenir weights for everything a person reads, three Plex
   Mono weights for the labels that make the page look like a
   repair ticket. All relative URLs; no font URL on this site
   resolves off-origin. */
@font-face{font-family:"Avenir";src:url('../fonts/Avenir-Book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir";src:url('../fonts/Avenir-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir";src:url('../fonts/Avenir-Heavy.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir";src:url('../fonts/Avenir-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"CRMono";src:url('../fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CRMono";src:url('../fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"CRMono";src:url('../fonts/IBMPlexMono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --cr-red:#F50F21;
  --cr-red-ink:#C8102E;
  --cr-red-dk:#FF5A5A;
  --cr-red-press:#A50D24;

  --cr-ink:#16171A;
  --cr-ink-2:#0F1012;
  --cr-panel:#1D1F22;
  --cr-rule-dk:#26282C;
  --cr-dash-dk:#3A3C41;

  --cr-white:#FFFFFF;
  --cr-paper:#F7F6F4;
  --cr-line:#E9E7E3;
  --cr-line-2:#D9D6D1;
  --cr-body:#4E4E50;
  --cr-dim:#BFC0C4;
  --cr-dim-2:#8E8E93;
  --cr-ok:#1E7B3C;
  --cr-warn-bg:#FFF6E6;
  --cr-warn-line:#E8D5A8;
  --cr-warn-ink:#7A5A16;
  --cr-bad-bg:#FDECEE;
  --cr-bad-line:#F1C3C9;

  --cr-mono:"CRMono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --cr-sans:"Avenir","Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  --cr-r-sm:5px; --cr-r:8px; --cr-r-md:10px; --cr-r-lg:12px;
  --cr-max:1160px; --cr-gut:28px;
  --cr-navh:70px;
  --cr-shadow:0 2px 10px rgba(46,56,61,.05);
  --cr-shadow-up:0 16px 32px rgba(46,56,61,.14);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--cr-sans);
  background:var(--cr-white);
  color:var(--cr-body);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--cr-red-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
[hidden]{display:none !important}
ul,ol{list-style:none}

/* Anything the sticky nav could land on top of when a #hash is
   followed. 2.4.x: a heading scrolled under a fixed bar is a
   destination the reader never arrives at. */
[id]{scroll-margin-top:calc(var(--cr-navh) + 18px)}
html{scroll-behavior:smooth}

/* ── Focus: visible, offset, never colour alone ──────────────
   A 2px outline is a SHAPE change as well as a colour change, so
   it survives a monitor with the contrast turned down and a reader
   who does not see the red. Outline and offset only: setting a
   border-radius on the focused element restyles the control
   instead of ringing it. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cr-red-ink);outline-offset:2px;border-radius:2px;
}
/* On the ink ground the red ring measures 4.27:1, over the 3:1
   WCAG 1.4.11 asks of a non-text indicator but visually thin.
   White is 16.5:1 and unmistakable. */
.cr-hero a:focus-visible,.cr-sec--dark a:focus-visible,.cr-foot a:focus-visible,
.cr-sec--dark button:focus-visible{outline-color:var(--cr-white)}

/* Screen-reader-only, but still in the accessibility tree. */
.cr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── The skip link ───────────────────────────────────────────
   First focusable thing in the document, invisible until it has
   focus, and then unmissable. */
.cr-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cr-ink);color:var(--cr-white);
  padding:14px 20px;font-weight:700;border-radius:0 0 var(--cr-r) 0;
}
.cr-skip:focus{left:0}

.cr-wrap{max-width:var(--cr-max);margin:0 auto;padding:0 var(--cr-gut)}
.cr-wrap--narrow{max-width:760px}

/* ════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════ */
.cr-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--cr-line)}
.cr-nav__in{max-width:var(--cr-max);margin:0 auto;padding:10px var(--cr-gut);
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;
  min-height:var(--cr-navh);flex-wrap:wrap}
.cr-nav__brand{display:flex;align-items:center;gap:14px;color:var(--cr-ink);flex-shrink:0;
  min-height:44px}
.cr-nav__brand:hover{text-decoration:none}
.cr-nav__logo{height:27px;width:auto;display:block}
.cr-nav__eyebrow{font-family:var(--cr-mono);font-weight:500;font-size:.66rem;
  letter-spacing:.2em;color:var(--cr-red-ink)}
.cr-nav__right{display:flex;align-items:center;gap:6px 18px;font-weight:500;font-size:.9rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0}
.cr-nav__link{color:var(--cr-body);white-space:nowrap;display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px}
.cr-nav__link:hover{color:var(--cr-ink)}
.cr-nav__cta{white-space:nowrap}
/* Under 640px the five section anchors wrap into a second row and
   push the call to action off the first screen. They are all
   repeated in the footer, so the small screen keeps the brand and
   the one control that matters. */
@media (max-width:639px){ .cr-nav__link{display:none} }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.cr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:12px 24px;border-radius:var(--cr-r-sm);
  font-family:var(--cr-sans);font-size:1rem;font-weight:700;line-height:1.2;
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.cr-btn:hover{text-decoration:none}
.cr-btn--lg{padding:15px 30px;font-size:1.02rem}
.cr-btn--red{background:var(--cr-red-ink);color:var(--cr-white)}
.cr-btn--red:hover{background:var(--cr-red-press);color:var(--cr-white)}
.cr-btn--ghost{background:transparent;color:var(--cr-white);border-color:#3A3A3E}
.cr-btn--ghost:hover{border-color:var(--cr-white);color:var(--cr-white)}
.cr-btn--ghost-ink{background:transparent;color:var(--cr-ink);border-color:var(--cr-line-2)}
.cr-btn--ghost-ink:hover{border-color:var(--cr-ink);color:var(--cr-ink)}
.cr-btn[disabled]{opacity:.62;cursor:default}
.cr-i{flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.cr-hero{background:var(--cr-ink);color:var(--cr-white);position:relative;overflow:hidden;
  border-bottom:6px solid var(--cr-red)}
.cr-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:60px;align-items:center;padding:72px 0 80px}
.cr-badge{font-family:var(--cr-mono);font-size:.72rem;letter-spacing:.18em;
  color:var(--cr-white);background:var(--cr-red-ink);display:inline-block;
  padding:7px 13px;border-radius:var(--cr-r-sm);margin-bottom:26px;font-weight:600}
.cr-hero__h1{font-size:clamp(2.35rem,5.4vw,4.1rem);line-height:1.02;font-weight:900;
  letter-spacing:-.028em;color:var(--cr-white)}
/* >=37.6px at every breakpoint, so the display red is correct here
   and only here. */
.cr-hero__h1 em{font-style:normal;color:var(--cr-red)}
.cr-hero__body{margin-top:22px;font-size:1.1rem;color:var(--cr-dim);max-width:34em}
.cr-hero__cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cr-hero__strip{margin-top:38px;display:flex;gap:28px;flex-wrap:wrap;
  font-family:var(--cr-mono);font-size:.72rem;letter-spacing:.12em;color:var(--cr-dim-2)}

/* ── The ticket card ─────────────────────────────────────────
   A repair ticket with the candidate in the device's place. Every
   part of the illusion is CSS — the notched tear strip, the dashed
   perforations between rows, the rotated OPEN stamp — so the
   markup underneath stays a plain definition list. */
.cr-ticket__slot,.cr-flyer__ticketslot{position:relative}
.cr-ticket__slot{justify-self:center;width:100%;max-width:430px}
.cr-ticket{position:relative;background:var(--cr-white);color:var(--cr-ink);
  border-radius:var(--cr-r);box-shadow:0 30px 70px rgba(0,0,0,.5);overflow:hidden}
/* Positioned against the SLOT, not the card: the card clips its own
   overflow so the red header follows the corner radius, and a stamp
   nested inside it loses the overhang that makes it a stamp. */
.cr-ticket__stamp{
  position:absolute;right:-10px;top:-10px;z-index:2;
  border:2.5px solid var(--cr-red-dk);color:var(--cr-red-dk);
  background:rgba(22,23,26,.86);
  font-family:var(--cr-mono);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  padding:8px 14px;border-radius:var(--cr-r-sm);
}
.cr-ticket__head{background:var(--cr-red-ink);color:var(--cr-white);padding:15px 20px;
  font-family:var(--cr-mono);font-size:.78rem;display:flex;justify-content:space-between;
  gap:10px;letter-spacing:.06em;font-weight:600}
/* The tear strip. The dark half-circles are the notches a real
   ticket has where it was pulled off the roll. */
.cr-ticket__perf{height:13px;
  background:radial-gradient(circle 5.5px at 12px 0,var(--cr-ink) 98%,transparent 100%) repeat-x;
  background-size:24px 13px}
.cr-ticket__rows{padding:8px 22px 10px}
.cr-ticket__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px dashed #E3E1DD;font-size:.95rem}
.cr-ticket__row:last-child{border-bottom:0}
.cr-ticket__row dt{font-family:var(--cr-mono);font-size:.68rem;letter-spacing:.1em;
  color:var(--cr-body);text-transform:uppercase;padding-top:3px;white-space:nowrap}
.cr-ticket__row dd{font-weight:700;text-align:right;color:var(--cr-ink)}
.cr-ticket__ok{color:var(--cr-ok)}
.cr-ticket__foot{border-top:2px solid var(--cr-ink);padding:14px 22px;display:flex;
  justify-content:space-between;align-items:center;font-family:var(--cr-mono);
  font-size:.72rem;color:var(--cr-body)}
.cr-ticket__bars{display:flex;gap:2px;align-items:flex-end;height:26px}
.cr-ticket__bars i{display:block;width:3px;background:var(--cr-ink)}

/* The tilt is a DESKTOP flourish. On a phone the card is nearly
   the full viewport width: rotating it there clips the stamp,
   introduces a horizontal scrollbar, and rotates the text a person
   is trying to read at arm's length. */
@media (min-width:900px){
  .cr-ticket__slot .cr-ticket{transform:rotate(1.1deg)}
  .cr-ticket__slot .cr-ticket__stamp{transform:rotate(-9deg);right:-14px;top:-20px}
}
/* The flyer is always printed at letter width, so its tilt is not
   breakpoint-dependent — and it is gentler, because a rotated box
   inside a fixed-height page steals vertical room from the copy. */
.cr-flyer__ticketslot .cr-ticket{transform:rotate(1.1deg)}
/* On the flyer the stamp sits at the top LEFT, clear of the
   ticket's own "STATUS: OPEN" line — the printed reference puts it
   there, and at flyer scale the two collide on the right. */
.cr-flyer__ticketslot .cr-ticket__stamp{transform:rotate(-9deg);right:auto;left:-14px;top:-14px;
  font-size:.62rem;padding:6px 11px}

/* ════════════════════════════════════════════════════════════
   SECTION FURNITURE
   ════════════════════════════════════════════════════════════ */
.cr-sec{padding:84px 0}
.cr-sec--tight{padding-top:0}
.cr-sec--paperwhite{background:var(--cr-white)}
.cr-sec--paper{background:var(--cr-paper);border-top:1px solid var(--cr-line);
  border-bottom:1px solid var(--cr-line)}
.cr-sec--dark{background:var(--cr-ink);color:var(--cr-white)}
.cr-eyebrow{font-family:var(--cr-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cr-red-ink);font-weight:600}
.cr-eyebrow--dark{color:var(--cr-red-dk)}
.cr-eyebrow--tight{margin-bottom:16px}
.cr-h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:900;letter-spacing:-.022em;
  line-height:1.08;max-width:20em;margin-top:14px;color:inherit}
.cr-sec--paperwhite .cr-h2,.cr-sec--paper .cr-h2{color:var(--cr-ink)}
.cr-lede{margin-top:16px;color:var(--cr-body);font-size:1.06rem;max-width:38em}
.cr-lede--dark{color:var(--cr-dim)}

/* ════════════════════════════════════════════════════════════
   STORES
   ════════════════════════════════════════════════════════════ */
.cr-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  margin-top:44px;border-top:1px solid var(--cr-line);border-bottom:1px solid var(--cr-line)}
.cr-store{padding:32px 30px 34px;border-right:1px solid var(--cr-line)}
.cr-store:last-child{border-right:0}
.cr-store__county{font-family:var(--cr-mono);font-size:.75rem;letter-spacing:.12em;color:var(--cr-body)}
.cr-store__name{font-size:1.6rem;font-weight:900;letter-spacing:-.015em;margin-top:12px;color:var(--cr-ink)}
.cr-store__addr{color:var(--cr-body);font-size:1.05rem;margin-top:10px}
.cr-store__est{font-family:var(--cr-mono);font-size:.82rem;color:var(--cr-red-ink);
  margin-top:18px;font-weight:600}
@media (max-width:809px){
  .cr-store{border-right:0;border-bottom:1px solid var(--cr-line)}
  .cr-store:last-child{border-bottom:0}
}

/* ════════════════════════════════════════════════════════════
   STORY
   ════════════════════════════════════════════════════════════ */
.cr-story{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:48px;align-items:start;margin-top:40px}
.cr-story__portrait img{width:100%;border-radius:var(--cr-r);display:block;background:#F3F2F2}
.cr-story__by{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--cr-line)}
.cr-story__name{font-weight:900;font-size:1.05rem;color:var(--cr-ink)}
.cr-story__role{font-family:var(--cr-mono);font-size:.7rem;letter-spacing:.12em;color:var(--cr-body)}
.cr-quote p{font-size:1.28rem;font-weight:500;line-height:1.45;letter-spacing:-.005em;color:var(--cr-ink)}
.cr-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.9rem;color:var(--cr-body)}
.cr-timeline{margin-top:30px}
.cr-timeline li{padding:16px 0;border-top:1px solid var(--cr-line);display:flex;gap:20px;
  align-items:baseline;font-size:1rem;color:var(--cr-body)}
.cr-timeline li:last-child{border-bottom:1px solid var(--cr-line)}
.cr-timeline__year{font-family:var(--cr-mono);font-size:.75rem;color:var(--cr-red-ink);
  font-weight:600;min-width:52px;flex-shrink:0}

.cr-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:18px;margin-top:44px}
.cr-fig__frame{position:relative;width:100%;aspect-ratio:4/3;background:#F3F2F2;
  border:1px solid var(--cr-line);border-radius:var(--cr-r);overflow:hidden}
.cr-fig__frame img{width:100%;height:100%;object-fit:cover;display:block}
.cr-fig figcaption{font-family:var(--cr-mono);font-size:.68rem;letter-spacing:.12em;
  color:var(--cr-body);margin-top:10px}

/* ════════════════════════════════════════════════════════════
   PROCESS
   ════════════════════════════════════════════════════════════ */
.cr-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:2px;margin-top:48px;background:var(--cr-rule-dk);border-radius:var(--cr-r);overflow:hidden}
.cr-step{background:var(--cr-panel);padding:26px 22px 28px}
/* The last card is the offer. It carries an 17px heading and 14px
   body in white, so its fill is the INK red, not the display red:
   white on #F50F21 is 4.22:1 and this is not large text. */
.cr-step--last{background:var(--cr-red-ink)}
.cr-step__rule{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.cr-step__dot{width:9px;height:9px;border-radius:50%;background:var(--cr-red);flex-shrink:0}
.cr-step--last .cr-step__dot{background:var(--cr-white)}
.cr-step__dash{flex:1;border-top:1px dashed var(--cr-dash-dk)}
.cr-step--last .cr-step__dash{border-top-color:rgba(255,255,255,.55)}
.cr-step__n{font-family:var(--cr-mono);font-size:.66rem;color:var(--cr-dim-2)}
.cr-step--last .cr-step__n{color:rgba(255,255,255,.9)}
.cr-step__tag{font-family:var(--cr-mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--cr-red-dk);font-weight:600;text-transform:uppercase}
.cr-step--last .cr-step__tag{color:var(--cr-white)}
.cr-step__title{font-size:1.08rem;font-weight:800;margin-top:10px;color:var(--cr-white)}
.cr-step__body{font-size:.9rem;color:#A9AAAE;margin-top:8px}
.cr-step--last .cr-step__body{color:rgba(255,255,255,.92)}
.cr-step__dur{font-family:var(--cr-mono);font-size:.72rem;color:var(--cr-dim-2);margin-top:16px}
.cr-step--last .cr-step__dur{color:rgba(255,255,255,.9)}

/* ════════════════════════════════════════════════════════════
   WHY JOIN
   ════════════════════════════════════════════════════════════ */
.cr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:14px;margin-top:44px}
.cr-tile{background:var(--cr-white);border:1px solid var(--cr-line);border-radius:var(--cr-r-md);
  padding:18px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--cr-shadow);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1),
             border-color .18s cubic-bezier(.2,.7,.2,1)}
.cr-tile:hover{border-color:var(--cr-red);transform:translateY(-4px);box-shadow:var(--cr-shadow-up)}
/* The glyph is non-text content: 3:1 applies, and the display red
   measures 4.22:1 against the white icon. */
.cr-tile__icon{width:44px;height:44px;border-radius:50%;background:var(--cr-red);
  color:var(--cr-white);display:grid;place-items:center;flex-shrink:0}
.cr-tile__text{min-width:0}
.cr-tile__text b{font-size:1rem;font-weight:800;display:block;line-height:1.25;color:var(--cr-ink)}
.cr-tile__text span{font-size:.88rem;color:var(--cr-body);display:block;margin-top:4px}
.cr-banner{margin-top:14px;background:var(--cr-ink);color:var(--cr-white);
  border-radius:var(--cr-r-md);padding:26px 30px;display:flex;gap:18px;align-items:center;
  flex-wrap:wrap;font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.cr-banner__icon{width:46px;height:46px;border-radius:50%;background:var(--cr-red);
  color:var(--cr-white);display:grid;place-items:center;flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   ROLES
   ════════════════════════════════════════════════════════════ */
.cr-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:18px;margin-top:44px}
.cr-role{background:var(--cr-white);border:1px solid var(--cr-line);border-radius:var(--cr-r);
  padding:30px;display:flex;flex-direction:column;gap:10px;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1),
             border-color .18s cubic-bezier(.2,.7,.2,1)}
.cr-role:hover{border-color:var(--cr-red);transform:translateY(-4px);box-shadow:var(--cr-shadow-up)}
.cr-role--dark{background:var(--cr-ink);border-color:var(--cr-ink);color:var(--cr-white)}
.cr-role--dark:hover{border-color:var(--cr-ink);box-shadow:0 16px 32px rgba(0,0,0,.28)}
.cr-role__title{font-size:1.28rem;font-weight:900;letter-spacing:-.01em;color:var(--cr-ink)}
.cr-role--dark .cr-role__title{color:var(--cr-white)}
.cr-role__meta{font-family:var(--cr-mono);font-size:.7rem;color:var(--cr-body);letter-spacing:.1em}
.cr-role--dark .cr-role__meta{color:var(--cr-red-dk)}
.cr-role__body{color:var(--cr-body);font-size:.95rem;flex:1;margin-top:4px}
.cr-role--dark .cr-role__body{color:var(--cr-dim)}
.cr-role__cta{align-self:flex-start;font-weight:700;color:var(--cr-red-ink);font-size:.95rem;
  margin-top:6px;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.cr-role--dark .cr-role__cta{color:var(--cr-white)}
.cr-role--dark .cr-role__cta:hover{color:var(--cr-red-dk)}

/* ════════════════════════════════════════════════════════════
   APPLY BAND
   ════════════════════════════════════════════════════════════ */
.cr-applyband{margin-top:38px;display:flex;flex-wrap:wrap;background:var(--cr-ink-2);
  border:1px solid var(--cr-rule-dk);border-radius:var(--cr-r-lg);overflow:hidden}
.cr-applyband__left{flex:1 1 340px;min-width:0;display:flex;gap:20px;align-items:center;
  padding:26px 30px}
.cr-applyband__icon{width:64px;height:64px;border-radius:50%;background:var(--cr-red);
  color:var(--cr-white);display:grid;place-items:center;flex-shrink:0}
.cr-applyband__left b{display:block;font-size:1.9rem;font-weight:900;letter-spacing:-.025em;
  line-height:1.05;color:var(--cr-white)}
.cr-applyband__left span span{display:block;font-size:.98rem;font-weight:600;
  color:var(--cr-dim);margin-top:6px}
/* THE ONLY SURFACE ON THE SITE PAINTED IN THE DISPLAY RED THAT
   CARRIES ANYTHING ON TOP OF IT — and what it carries is two WHITE
   PILLS and an image, never white words directly on the red. That
   is the whole reason the buttons here are filled rather than
   outlined: an outlined button would put 16px white text on 4.22:1. */
.cr-applyband__right{flex:1 1 440px;min-width:0;background:var(--cr-red);display:flex;
  gap:16px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  padding:22px 26px 22px 60px;clip-path:polygon(44px 0,100% 0,100% 100%,0 100%)}
.cr-pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:13px 24px;border-radius:999px;font-weight:800;font-size:1.02rem;
  border:2px solid transparent;transition:transform .15s cubic-bezier(.2,.7,.2,1)}
.cr-pill:hover{text-decoration:none;transform:translateY(-2px)}
.cr-pill--solid{background:var(--cr-white);color:var(--cr-red-ink)}
.cr-pill--outline{background:var(--cr-white);color:var(--cr-ink);border-color:var(--cr-white)}
.cr-qr{width:112px;height:112px;background:var(--cr-white);border-radius:var(--cr-r-md);
  padding:7px;flex-shrink:0;display:block}
.cr-qr img{width:100%;height:100%;object-fit:contain;display:block}
.cr-applyband__alt{margin-top:16px;font-size:.92rem;color:var(--cr-dim)}
.cr-applyband__alt a{color:var(--cr-white);text-decoration:underline;text-underline-offset:3px}
@media (max-width:759px){
  .cr-applyband__right{clip-path:none;padding:22px 26px;justify-content:flex-start}
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.cr-foot{background:var(--cr-ink-2);color:var(--cr-dim-2);padding:52px 0 40px;font-size:.86rem}
.cr-foot__in{max-width:var(--cr-max);margin:0 auto;padding:0 var(--cr-gut)}
.cr-foot__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cr-foot__brand{max-width:32em}
.cr-foot__mark{display:flex;align-items:center;gap:14px;color:var(--cr-white);min-height:44px}
.cr-foot__mark:hover{text-decoration:none}
.cr-foot__mark img{width:38px;height:38px;display:block}
.cr-foot__mark span{font-weight:800;font-size:.98rem;color:var(--cr-white)}
.cr-foot__blurb{margin-top:16px}
.cr-foot__cols{display:flex;gap:40px 60px;flex-wrap:wrap}
.cr-foot__head{color:var(--cr-white);font-size:.72rem;margin-bottom:12px;font-family:var(--cr-mono);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.cr-foot__col a{color:var(--cr-dim-2);display:flex;align-items:center;min-height:36px}
.cr-foot__col a:hover{color:var(--cr-white)}
.cr-foot__legal{margin-top:38px;padding-top:24px;border-top:1px solid var(--cr-rule-dk);
  line-height:1.7;color:var(--cr-dim-2);font-size:.8rem}
.cr-foot__meta{margin-top:18px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;
  font-size:.8rem}
.cr-foot__meta a{color:var(--cr-dim-2);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:36px}
.cr-foot__meta a:hover{color:var(--cr-white)}

/* ════════════════════════════════════════════════════════════
   THE FORM
   ════════════════════════════════════════════════════════════ */
.cr-main--form{padding:40px 0 72px;background:var(--cr-paper);min-height:60vh}
.cr-form__h1{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:900;letter-spacing:-.02em;
  line-height:1.1;color:var(--cr-ink)}
.cr-form__lede{margin-top:12px;color:var(--cr-body);font-size:1.02rem}

.cr-prose h1{font-size:clamp(1.6rem,4vw,2.1rem);font-weight:900;letter-spacing:-.02em;
  color:var(--cr-ink);line-height:1.15}
.cr-prose p{margin-top:16px;color:var(--cr-body);font-size:1rem;line-height:1.7}

/* ── Progress ────────────────────────────────────────────────
   The current step is marked FOUR ways, only one of which is
   colour: a filled counter, a heavier weight, a rule underneath,
   and aria-current="step". */
.cr-prog{margin-top:26px}
.cr-prog__list{display:flex;flex-wrap:wrap;gap:6px 18px}
.cr-prog__i{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--cr-body);
  padding-bottom:6px;border-bottom:2px solid transparent}
.cr-prog__i.is-cur{color:var(--cr-ink);font-weight:800;border-bottom-color:var(--cr-red-ink)}
.cr-prog__i.is-done{color:var(--cr-body)}
.cr-prog__n{width:22px;height:22px;border-radius:50%;background:var(--cr-line);
  color:var(--cr-body);display:grid;place-items:center;font-size:.72rem;font-weight:700;
  flex-shrink:0;font-family:var(--cr-mono)}
.cr-prog__i.is-cur .cr-prog__n{background:var(--cr-red-ink);color:var(--cr-white)}
.cr-prog__i.is-done .cr-prog__n{background:var(--cr-ink);color:var(--cr-white)}
/* On a phone the six labels are a second paragraph of text above
   the question. The counters alone carry the same information. */
@media (max-width:599px){
  .cr-prog__l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cr-prog__list{gap:8px}
}

.cr-form{margin-top:22px}
.cr-panel{background:var(--cr-white);border:1px solid var(--cr-line);
  border-radius:var(--cr-r-lg);padding:26px 24px 28px;margin-bottom:18px}
.cr-panel__h{font-size:1.3rem;font-weight:900;letter-spacing:-.015em;color:var(--cr-ink)}
.cr-panel__h:focus{outline:none}
.cr-panel__h:focus-visible{outline:2px solid var(--cr-red-ink);outline-offset:4px}
.cr-panel__hint{margin-top:6px;color:var(--cr-body);font-size:.94rem}

.cr-field{margin-top:20px;min-width:0}
.cr-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:0 18px}
/* LABELS, NOT PLACEHOLDERS. A placeholder disappears the moment
   somebody types, which is exactly when they most want to check
   what the box was for — and it is not reliably announced. There
   is no placeholder attribute anywhere in this form. */
.cr-field label,.cr-group legend{display:block;font-weight:700;font-size:.95rem;
  color:var(--cr-ink);margin-bottom:6px;padding:0}
.cr-req{color:var(--cr-red-ink);font-weight:700}
.cr-hint{font-size:.85rem;color:var(--cr-body);margin-top:6px}
.cr-note{margin-top:16px;font-size:.88rem;color:var(--cr-body);
  border-left:3px solid var(--cr-line-2);padding-left:12px}
.cr-required{font-size:.85rem;color:var(--cr-body);margin:0 4px 16px}

/* 16px minimum on every control: anything smaller and iOS Safari
   zooms the whole page on focus, which on a six-step form means
   the layout jumps under a thumb six times. */
.cr-field input[type="text"],.cr-field input[type="tel"],.cr-field input[type="email"],
.cr-field select,.cr-field textarea,.cr-field input[type="file"]{
  width:100%;min-height:48px;padding:12px 14px;font-family:inherit;font-size:16px;
  color:var(--cr-ink);background:var(--cr-white);
  border:1.5px solid var(--cr-line-2);border-radius:var(--cr-r);
}
.cr-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.cr-field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--cr-body) 50%),
                   linear-gradient(135deg,var(--cr-body) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.cr-field input[type="file"]{padding:10px 12px;line-height:1.5}
.cr-field input:hover,.cr-field select:hover,.cr-field textarea:hover{border-color:var(--cr-body)}
.cr-field [aria-invalid="true"]{border-color:var(--cr-red-ink);background:var(--cr-bad-bg)}

/* ── Choices ─────────────────────────────────────────────────
   The whole row is the target, not the 20px circle inside it, so
   every option clears 44px in both directions. */
.cr-group{border:0;margin-top:24px;min-width:0}
.cr-choices{display:grid;gap:10px;margin-top:4px}
.cr-choices--inline{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.cr-choices--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cr-choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;
  border:1.5px solid var(--cr-line-2);border-radius:var(--cr-r);cursor:pointer;
  font-weight:500;font-size:1rem;color:var(--cr-ink);background:var(--cr-white);margin:0}
.cr-choice:hover{border-color:var(--cr-body)}
.cr-choice input{width:20px;height:20px;flex-shrink:0;accent-color:var(--cr-red-ink);margin:0}
.cr-choice:has(input:checked){border-color:var(--cr-red-ink);background:#FDF2F3}
.cr-choice span{min-width:0}

.cr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:12px;margin-top:8px}
.cr-card-choice{display:block;cursor:pointer;margin:0;position:relative}
.cr-card-choice input{position:absolute;top:14px;left:14px;width:20px;height:20px;
  accent-color:var(--cr-red-ink);margin:0}
.cr-card-choice__box{display:block;border:1.5px solid var(--cr-line-2);border-radius:var(--cr-r);
  padding:14px 14px 14px 46px;min-height:48px;background:var(--cr-white)}
.cr-card-choice:hover .cr-card-choice__box{border-color:var(--cr-body)}
.cr-card-choice:has(input:checked) .cr-card-choice__box{border-color:var(--cr-red-ink);
  background:#FDF2F3;box-shadow:inset 0 0 0 1px var(--cr-red-ink)}
.cr-card-choice__name{display:block;font-weight:800;color:var(--cr-ink)}
.cr-card-choice__sub{display:block;font-size:.88rem;color:var(--cr-body);margin-top:3px}

/* ── Errors ──────────────────────────────────────────────────
   Never colour alone: an error carries a leading mark, a bolder
   weight, aria-invalid on the control and aria-describedby
   pointing here. */
.cr-err{margin-top:7px;font-size:.88rem;font-weight:700;color:var(--cr-red-ink);
  display:flex;gap:7px;align-items:flex-start}
.cr-err::before{content:"!";flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:var(--cr-red-ink);color:var(--cr-white);font-size:.72rem;line-height:18px;
  text-align:center;font-weight:800}
.cr-alert{margin-top:18px;border-radius:var(--cr-r);padding:14px 16px;font-size:.95rem;
  display:flex;flex-direction:column;gap:4px}
.cr-alert--bad{background:var(--cr-bad-bg);border:1px solid var(--cr-bad-line);color:var(--cr-ink)}
.cr-alert strong{font-weight:800}
.cr-alert a{color:var(--cr-red-ink);text-decoration:underline}

.cr-file{margin-top:8px;font-size:.9rem;color:var(--cr-ink);display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.cr-file button{background:none;border:0;color:var(--cr-red-ink);font:inherit;font-weight:700;
  text-decoration:underline;cursor:pointer;min-height:44px;padding:0 2px}

/* ── Review ──────────────────────────────────────────────────
   Built by the step machine from the form's own values. Without
   script there is nothing to build, so the static note takes its
   place and every answer stays on screen above. */
.cr-review{display:grid;gap:0;margin-top:10px}
.cr-review__row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--cr-line);align-items:baseline;flex-wrap:wrap}
.cr-review dt{font-size:.85rem;color:var(--cr-body);font-weight:500;min-width:9em}
.cr-review dd{font-weight:700;color:var(--cr-ink);flex:1;min-width:0;
  overflow-wrap:anywhere;text-align:right}
.cr-review__edit{background:none;border:0;color:var(--cr-red-ink);font:inherit;font-size:.85rem;
  font-weight:700;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px;
  flex-shrink:0}
.cr-js .cr-review__nojs{display:none}
.cr-review__nojs{margin-top:12px;color:var(--cr-body)}

.cr-formfoot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cr-formfoot .cr-btn{flex:0 1 auto}

/* The card states: closed, thank-you. */
.cr-card{background:var(--cr-white);border:1px solid var(--cr-line);border-radius:var(--cr-r-lg);
  padding:30px 26px;margin-top:26px}
.cr-card--ok{border-left:5px solid var(--cr-ok)}
.cr-card__h{font-size:1.5rem;font-weight:900;letter-spacing:-.018em;color:var(--cr-ink);
  margin-bottom:12px;line-height:1.2}
.cr-card p{color:var(--cr-body);margin-top:10px}
.cr-card__fine{font-size:.9rem}
.cr-card__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ── The honeypot ────────────────────────────────────────────
   OFF-SCREEN, NOT display:none. A display:none field is one some
   bots know to skip, which is the entire point of the trap. It is
   aria-hidden and tabindex=-1 in the markup, so it is outside both
   the tab order and the accessibility tree — a person using a
   screen reader never meets it. */
.cr-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  opacity:0;pointer-events:none}

/* ════════════════════════════════════════════════════════════
   THE PRINTABLE FLYER
   ════════════════════════════════════════════════════════════ */
.cr-body--flyer{background:#6E7075;padding:0;margin:0}
.cr-printbar{max-width:8.5in;margin:18px auto;padding:14px 18px;background:var(--cr-warn-bg);
  border:1px solid var(--cr-warn-line);color:var(--cr-warn-ink);border-radius:var(--cr-r);
  font-size:.9rem;line-height:1.5}
.cr-flyer{width:8.5in;min-height:11in;margin:0 auto 24px;background:var(--cr-white);
  color:var(--cr-ink);display:flex;flex-direction:column;overflow:hidden}
.cr-flyer__head{background:var(--cr-ink);color:var(--cr-white);border-bottom:6px solid var(--cr-red)}
.cr-flyer__headin{padding:.26in .42in .28in}
.cr-flyer__toprow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cr-flyer__logo{height:30px;width:auto;display:block}
.cr-flyer__badge{font-family:var(--cr-mono);font-size:10.5px;letter-spacing:.16em;font-weight:600;
  background:var(--cr-red-ink);color:var(--cr-white);padding:7px 13px;border-radius:var(--cr-r-sm)}
.cr-flyer__hero{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;
  margin-top:.16in}
.cr-flyer__h1{font-size:36px;line-height:1.03;font-weight:900;letter-spacing:-.028em;color:var(--cr-white)}
.cr-flyer__h1 em{font-style:normal;color:var(--cr-red)}
.cr-flyer__lede{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--cr-dim)}
.cr-flyer__strip{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--cr-mono);
  font-size:10px;letter-spacing:.12em;color:var(--cr-dim-2)}
.cr-flyer__ticketslot{position:relative}
.cr-ticket--flyer{box-shadow:0 12px 30px rgba(0,0,0,.4)}
.cr-ticket--flyer .cr-ticket__head{padding:11px 16px;font-size:11px}
.cr-ticket--flyer .cr-ticket__rows{padding:4px 16px 6px}
.cr-ticket--flyer .cr-ticket__row{padding:7px 0;font-size:12px}
.cr-ticket--flyer .cr-ticket__row dt{font-size:9px}
.cr-ticket--flyer .cr-ticket__foot{padding:9px 16px;font-size:10px}

.cr-flyer__why{padding:.22in .42in 0}
.cr-flyer__h2{font-size:24px;font-weight:900;letter-spacing:-.022em;margin-top:8px;color:var(--cr-ink)}
.cr-flyer__tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:.14in}
.cr-flyer__tile{background:var(--cr-paper);border:1px solid var(--cr-line);
  border-radius:var(--cr-r-md);padding:10px 13px;display:flex;gap:11px;align-items:flex-start}
.cr-flyer__tileicon{width:34px;height:34px;border-radius:50%;background:var(--cr-red);
  color:var(--cr-white);display:grid;place-items:center;flex-shrink:0}
.cr-flyer__tile b{display:block;font-size:13px;font-weight:800;color:var(--cr-ink);line-height:1.25}
.cr-flyer__tile span span{display:block;font-size:11.5px;color:var(--cr-body);margin-top:3px}

/* The rail carries 12px WHITE text, so its fill is the INK red.
   The display red at that size measures 4.22:1 and this strip is
   the instruction that makes the QR code usable. */
.cr-flyer__band{margin:.18in .42in 0;background:var(--cr-ink);border-radius:var(--cr-r-md);
  display:flex;align-items:stretch;overflow:hidden}
.cr-flyer__bandleft{flex:1;display:flex;gap:16px;align-items:center;padding:16px 20px;min-width:0}
.cr-flyer__bandicon{width:52px;height:52px;border-radius:50%;background:var(--cr-red);
  color:var(--cr-white);display:grid;place-items:center;flex-shrink:0}
.cr-flyer__bandleft b{display:block;font-size:26px;font-weight:900;letter-spacing:-.025em;
  color:var(--cr-white);line-height:1.05}
.cr-flyer__bandleft span span{display:block;font-size:12px;color:var(--cr-dim);margin-top:5px}
.cr-flyer__bandright{background:var(--cr-red-ink);display:flex;align-items:center;gap:12px;
  padding:14px 18px 14px 30px;clip-path:polygon(22px 0,100% 0,100% 100%,0 100%);flex-shrink:0}
.cr-flyer__rail{font-family:var(--cr-mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--cr-white);writing-mode:vertical-rl;transform:rotate(180deg)}
.cr-flyer__qr{width:1.05in;height:1.05in;background:var(--cr-white);border-radius:6px;padding:5px;
  display:block;flex-shrink:0}
.cr-flyer__qr img{width:100%;height:100%;object-fit:contain;display:block}

.cr-flyer__stores{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:.2in .42in 0}
.cr-flyer__storeh{font-family:var(--cr-mono);font-size:10px;letter-spacing:.14em;font-weight:600;
  color:var(--cr-red-ink)}
.cr-flyer__storeaddr{font-size:12px;color:var(--cr-ink);margin-top:6px;line-height:1.45}
.cr-flyer__legal{margin-top:auto;padding:.16in .42in .22in}
.cr-flyer__legal p{font-size:8.5px;line-height:1.5;color:var(--cr-body);
  border-top:1px solid var(--cr-line);padding-top:10px}

@media print{
  @page{size:letter;margin:0}
  html,body{background:var(--cr-white)}
  .cr-printbar{display:none}
  .cr-flyer{width:8.5in;height:11in;margin:0;box-shadow:none;page-break-after:avoid}
  /* Chrome's "Background graphics" tick is what actually decides
     this; the property is belt and braces for engines that honour
     it without the dialog. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ════════════════════════════════════════════════════════════
   MOTION
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .cr-tile:hover,.cr-role:hover,.cr-pill:hover{transform:none}
}

/* ── Small screens ───────────────────────────────────────────
   A 16px gutter is the floor: below it the text runs into the
   bezel on a 375px phone, which is the width most of this site's
   traffic arrives on. */
@media (max-width:539px){
  :root{--cr-gut:16px}
  .cr-hero__grid{padding:48px 0 56px;gap:40px}
  .cr-sec{padding:56px 0}
  .cr-store{padding:24px 18px 26px}
  .cr-panel{padding:20px 16px 22px}
  .cr-applyband__left{padding:22px 20px}
  .cr-applyband__left b{font-size:1.5rem}
  /* The stamp's overhang is a desktop flourish. At 375px the card
     is nearly the full viewport, so the overhang lands under the
     hero's overflow clip and the stamp prints half a word. */
  .cr-ticket__slot .cr-ticket__stamp{right:2px;top:-8px}
  .cr-flyer,.cr-printbar{width:auto;max-width:100%}
}