/* Giant Communications Group - one stylesheet, no framework, no CDN.
 *
 * The palette is taken from the logo: Giant blue on deep ink, with Metro
 * magenta reserved for the dealer badge alone and amber reserved for hiring. So
 * a visitor can tell the retail side of the site from the careers side without
 * reading a word, and Giant reads as itself rather than as a Metro microsite.
 * Every colour is a token at :root, which is the one place to change them. */

:root {
  --ink: #0a0e1a;
  --ink-2: #141a2e;
  --ink-3: #1e2740;
  --paper: #ffffff;
  --paper-2: #f6f7fb;
  --paper-3: #eceef6;
  --line: #dfe3ee;
  --line-strong: #c3c9dc;
  --text: #161c2d;
  --muted: #5b6480;
  --muted-2: #8b93ab;

  /* Brand blue, sampled from the logo itself: the mark runs from a bright
     #0a8cd2 at the top of the sphere down to a deep #1e1478 in the wordmark.
     --accent is the mid of that range, dark enough to carry white button text
     (5.8:1) and to pass as link text on white. */
  --accent: #0f66b8;
  --accent-dark: #0b4e8f;
  --accent-soft: #e9f2fb;
  --brand-bright: #0a8cd2;    /* the sphere highlight, for gradients */
  --brand-deep: #1e1478;      /* the wordmark's base navy */

  /* Metro magenta is now reserved for the dealer relationship alone: the
     "Authorized Metro by T-Mobile" badge. It is T-Mobile's colour, not Giant's,
     and using it as the site's primary made Giant look like a Metro microsite. */
  --metro: #e20074;

  --hire: #f59b00;            /* careers */
  --hire-soft: #fff6e5;

  /* A small categorical set, added 2026-10-07 because the site read as blue and
     grey and little else. These are not decoration: each service tile keeps its
     own hue, so the eye can tell plans from home internet from billing before
     reading a word, and the page gains rhythm instead of noise.
     All four are picked to sit beside the brand blue rather than fight it, and
     all four carry white text at the weights used here.
     Metro magenta is deliberately NOT in this set - it stays on the dealer badge
     alone, or Giant starts looking like a Metro microsite again. */
  --c-sky:    #0a8cd2;   --c-sky-soft:    #e7f4fd;
  --c-teal:   #0d7f86;   --c-teal-soft:   #e4f4f5;
  --c-indigo: #4733a8;   --c-indigo-soft: #eeebfa;
  --c-plum:   #8c3d87;   --c-plum-soft:   #f8ecf7;
  --ok: #12855f;
  --ok-soft: #e6f6ef;
  --warn: #b4530a;
  --warn-soft: #fdf0e3;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 22, 45, .06), 0 8px 24px rgba(16, 22, 45, .06);
  --shadow-lg: 0 2px 8px rgba(16, 22, 45, .08), 0 24px 56px rgba(16, 22, 45, .12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 750; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.section { padding: clamp(48px, 7vw, 92px) 0; }
.section-tight { padding: clamp(32px, 4vw, 52px) 0; }
.section-grey { background: var(--paper-2); }
/* A barely-there wash rather than another flat grey. At 3% the brand blue reads
   as warmth and separation, not as a coloured box. */
.section-tint {
  background:
    radial-gradient(1200px 400px at 12% 0%, rgba(10, 140, 210, .13), transparent 62%),
    radial-gradient(900px 360px at 92% 100%, rgba(71, 51, 168, .10), transparent 62%),
    var(--paper-2);
}
.center { text-align: center; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
  font-weight: 700; color: var(--accent); margin: 0 0 .9em;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.mono { font-variant-numeric: tabular-nums; }

/* --- header ------------------------------------------------------------ */

.topbar {
  background: var(--ink); color: #fff; font-size: .82rem;
  padding: 7px 0; letter-spacing: .01em;
}
.topbar .wrap { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.topbar a { color: #fff; opacity: .85; }
.topbar a:hover { opacity: 1; }

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* 82px, not the usual 68px: the logo is a stacked lockup with
   "COMMUNICATIONS" letterspaced under the wordmark, and below about 60px of
   logo height that second line stops being readable. The bar is sized to the
   logo rather than the logo squeezed into the bar. */
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 88px; }

/* The logo is the brand. Height is fixed and width follows, so swapping the
   master image for a different aspect ratio does not break the header. */
.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img { height: 62px; width: auto; }
.brand-footer { margin: 0 0 16px; }
.brand-footer img { height: 72px; }
.brand-login { justify-content: center; }
.brand-login img { height: 84px; }
@media (max-width: 520px) { .brand img { height: 48px; } .nav .wrap { min-height: 72px; } }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm);
  font-weight: 550; font-size: .95rem;
}
.nav-links a:hover { background: var(--paper-2); text-decoration: none; }
.nav-links a.on { color: var(--accent-dark); background: var(--accent-soft); }
/* `.nav-links a` (0,1,1) out-specifies `.btn-dark` (0,1,0), so without this the
   sign-in button renders dark text on a dark pill. Buttons keep their own
   colour inside the nav. */
.nav-links a.btn-dark, .nav-links a.btn-primary, .nav-links a.btn-hire { color: #fff; }
.nav-links a.btn-hire { color: #231400; }
.nav-links a.btn-ghost { color: var(--text); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 11px; font-size: 1rem; cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px 16px;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; }
  .nav-links .btn { margin-top: 6px; }
}

/* --- buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: .95rem; cursor: pointer; text-align: center;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  font-family: inherit;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(15, 102, 184, .28); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-hire { background: var(--hire); color: #231400; box-shadow: 0 6px 18px rgba(245, 155, 0, .28); }
.btn-hire:hover { background: #dd8c00; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-light:hover { background: rgba(255, 255, 255, .22); }
.btn-sm { padding: 8px 14px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn-danger { background: #fff; color: #a01030; border-color: #eccad3; }
.btn-danger:hover { background: #fff3f5; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

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

.hero {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(10, 140, 210, .34), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(30, 20, 120, .40), transparent 60%),
    linear-gradient(170deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; padding: clamp(60px, 9vw, 120px) 0 clamp(52px, 7vw, 96px);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { color: rgba(255, 255, 255, .8); max-width: 54ch; }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1.25fr .75fr; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.dealer-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; padding: 7px 15px 7px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; margin-bottom: 22px;
}
.dealer-badge .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--metro);
  box-shadow: 0 0 0 4px rgba(226, 0, 116, .3);
}

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hero-stat.wide { grid-column: 1 / -1; }
.hero-stat.wide b { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.hero-stat {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); padding: 18px 16px;
}
.hero-stat b { display: block; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1; letter-spacing: -.03em; }
.hero-stat span { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .62); }

/* --- cards & grids ---------------------------------------------------- */

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card-tight { padding: 16px; }
.card-link { transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
.card-link:hover {
  border-color: var(--line-strong); transform: translateY(-2px);
  box-shadow: var(--shadow-lg); text-decoration: none;
}
.card h3 { margin-bottom: .35em; }
.card > :last-child { margin-bottom: 0; }

.icon-tile {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 1.15rem;
  margin-bottom: 14px; font-weight: 700;
}
.icon-tile.hire { background: var(--hire-soft); color: var(--warn); }
.icon-tile.ink { background: var(--paper-3); color: var(--ink); }

/* Prescreen queue: name on the left, when and where it came from on the right,
   stacked instead of squeezed once the card gets narrow. */
.screen-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.screen-head > div:last-child { text-align: right; }
@media (max-width: 560px) {
  .screen-head > div:last-child { text-align: left; }
}

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.stat b { display: block; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.03em; }
.stat span { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }

/* --- badges ----------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; font-size: .75rem; font-weight: 650; white-space: nowrap;
  background: var(--paper-3); color: var(--muted);
}
.badge-hire { background: var(--hire-soft); color: var(--warn); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-accent { background: var(--accent-soft); color: var(--accent-dark); }
.badge-ink { background: var(--ink); color: #fff; }
.badge-new { background: #e8eeff; color: #2546a8; }
.badge-warn { background: var(--warn-soft); color: var(--warn); }

/* --- forms ------------------------------------------------------------ */

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 620; font-size: .9rem; margin-bottom: 6px; }
.field .hint { font-size: .82rem; color: var(--muted); margin: 5px 0 0; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=time],
input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .96rem; color: var(--text);
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 120px; resize: vertical; }
input[type=file] {
  width: 100%; padding: 10px; background: var(--paper-2);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: .9rem;
}
.field-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .94rem; margin-bottom: 9px; }
.check input { width: auto; margin-top: 4px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 0 0 22px; }
legend { font-weight: 700; padding: 0 8px; font-size: .95rem; }

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 24px;
}
.filters .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.filters .btn { flex: none; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: .86rem; color: var(--text); background: #fff; font-weight: 550;
}
.chip:hover { border-color: var(--ink); text-decoration: none; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- alerts ----------------------------------------------------------- */

.alert {
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 22px;
  border: 1px solid var(--line); background: var(--paper-2); font-size: .94rem;
}
.alert-ok { background: var(--ok-soft); border-color: #bfe5d5; color: #0b5c43; }
.alert-bad { background: #fdeef1; border-color: #f3c8d2; color: #8c1538; }
.alert-warn { background: var(--warn-soft); border-color: #f0d6b4; color: var(--warn); }
.alert-info { background: #eef3ff; border-color: #ccd9f8; color: #26407f; }
.alert ul { margin: .4em 0 0; padding-left: 20px; }
.alert > :last-child { margin-bottom: 0; }

/* --- tables ----------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  background: var(--paper-2); font-weight: 700; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- store + job lists ------------------------------------------------ */

.store-card { display: flex; flex-direction: column; gap: 6px; }
.store-card .addr { color: var(--muted); font-size: .92rem; }
.store-card .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.job {
  display: flex; gap: 18px; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.job:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); text-decoration: none; }
.job h3 { margin: 0 0 3px; font-size: 1.1rem; }
.job .where { color: var(--muted); font-size: .92rem; }
.job .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.job .go { flex: none; color: var(--accent-dark); font-weight: 650; font-size: .92rem; }
@media (max-width: 620px) {
  .job { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- slot picker ------------------------------------------------------ */

.slot-day { margin-bottom: 26px; }
.slot-day h3 { font-size: 1rem; margin-bottom: 10px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.slot {
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 10px; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  text-align: center; transition: all .12s ease;
}
.slot:hover { border-color: var(--hire); background: var(--hire-soft); }
.slot small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }

/* --- portal shell ----------------------------------------------------- */

.portal-head { background: var(--ink); color: #fff; padding: 28px 0 0; }
.portal-head h1 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .2em; }
.portal-head .lede { color: rgba(255, 255, 255, .72); }
.portal-tabs { display: flex; gap: 2px; margin-top: 22px; overflow-x: auto; }
.portal-tabs a {
  color: rgba(255, 255, 255, .72); padding: 11px 16px; border-radius: 10px 10px 0 0;
  font-weight: 600; font-size: .93rem; white-space: nowrap;
}
.portal-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.portal-tabs a.on { background: var(--paper-2); color: var(--ink); }
.portal-body { background: var(--paper-2); min-height: 70vh; padding: 28px 0 64px; }

.split { display: grid; gap: 24px; grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .94rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 550; }

.note {
  background: var(--paper-2); border-left: 3px solid var(--line-strong);
  padding: 11px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 10px;
}
.note .by { font-size: .78rem; color: var(--muted); margin-bottom: 3px; }

.rule-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rule-row:last-child { border-bottom: none; }
.rule-row form { margin: 0; }

.empty {
  text-align: center; padding: 48px 20px; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: #fff;
}
.empty h3 { color: var(--text); }

/* --- footer ----------------------------------------------------------- */

.footer { background: var(--ink); color: rgba(255, 255, 255, .7); padding: 54px 0 28px; font-size: .92rem; }
.footer h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 14px; }
.footer a { color: rgba(255, 255, 255, .78); display: block; padding: 3px 0; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .84rem;
}

.cta {
  background: linear-gradient(140deg, var(--ink-2), var(--ink)); color: #fff;
  border-radius: 20px; padding: clamp(32px, 5vw, 56px); text-align: center;
}
.cta h2 { color: #fff; }
.cta .lede { color: rgba(255, 255, 255, .76); margin-left: auto; margin-right: auto; max-width: 56ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- phones ------------------------------------------------------------
 *
 * Measured with scripts/check_responsive.py, which drives a real browser at
 * 360 and 390px. The layout had no horizontal overflow anywhere; what it did
 * have was links too small to hit reliably. Apple and Google both publish 44px
 * as the minimum touch target, and a 17px footer link is a miss waiting to
 * happen for the candidate applying from a phone. */

@media (max-width: 640px) {
  /* The utility bar is clutter on a phone and its two links were the worst
     offenders at 17px. Nothing is lost: the phone number is in the footer and
     on every store page, and "We are hiring" is Careers in the nav. */
  .topbar { display: none; }

  .footer a { padding: 13px 0; }
  .footer-grid { gap: 24px; }
  .table-wrap td a { display: inline-block; padding: 11px 0; }
  p.small a, .center.small a { display: inline-block; padding: 11px 0; }

  /* Stat tiles and job rows get a little more room to breathe once the
     surrounding chrome has shrunk. */
  .job { padding: 16px; }
  .card { padding: 18px; }
}

@media print {
  .nav, .topbar, .footer, .portal-tabs, .btn { display: none !important; }
  body { background: #fff; }
}

/* ======================================================================
 * The design pass
 *
 * The site worked but read as a set of well-built pages rather than a
 * designed thing, and the reason was structural: no imagery, text glyphs
 * standing in for icons, and one flat rhythm from top to bottom. Metro's own
 * site runs magenta over deep purple with big price-led headlines; what is
 * borrowed here is the ENERGY - large type, strong bands, generous space -
 * not the palette, because Giant is blue.
 * ================================================================== */

/* --- icons ------------------------------------------------------------ */

.ico { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; }
.ico-lg { width: 26px; height: 26px; }
.btn .ico { margin-right: -2px; }

/* --- the big hero ----------------------------------------------------- */

.hero-xl {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 600px at 78% 10%, rgba(10, 140, 210, .38), transparent 60%),
    radial-gradient(700px 500px at 10% 100%, rgba(30, 20, 120, .55), transparent 62%),
    linear-gradient(160deg, #060a14 0%, var(--ink-2) 55%, #0d1430 100%);
  padding: clamp(56px, 8vw, 110px) 0 clamp(52px, 7vw, 96px);
}

/* Concentric rings echoing the signal waves in the logo. Decorative only. */
/* Positioned to sit BEHIND the stat panel, not off the right edge where the
   first attempt put them and where they were invisible. The rings are drawn
   statically and a single pulse travels outward over them, so the motif still
   reads with motion switched off. */
.hero-rings {
  position: absolute; top: 50%; right: 2%; width: 820px; height: 820px;
  transform: translateY(-50%); pointer-events: none;
}
.hero-rings span {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(120, 190, 255, .18);
}
.hero-rings span:nth-child(1) { width: 26%; height: 26%; border-color: rgba(120, 190, 255, .3); }
.hero-rings span:nth-child(2) { width: 48%; height: 48%; }
.hero-rings span:nth-child(3) { width: 72%; height: 72%; }
.hero-rings span:nth-child(4) { width: 100%; height: 100%; border-color: rgba(120, 190, 255, .1); }

@media (prefers-reduced-motion: no-preference) {
  .hero-rings::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 26%; height: 26%; border-radius: 50%;
    border: 1px solid rgba(140, 210, 255, .55);
    animation: ring 5s cubic-bezier(.25, .6, .35, 1) infinite;
  }
  @keyframes ring {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(3.9); opacity: 0; }
  }
}

.hero-xl-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(36px, 5vw, 68px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.hero-xl h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.4rem); letter-spacing: -.035em;
  line-height: 1.04; margin-bottom: .32em; color: #fff;
}
.hero-xl h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-bright), #7fd0ff 60%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-xl .lede { color: rgba(255, 255, 255, .78); max-width: 46ch; margin-bottom: 30px; }
.hero-note {
  margin: 22px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .6);
  letter-spacing: .01em;
}
.btn-lg { padding: 15px 26px; font-size: 1rem; }

.hero-xl-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.figure-card {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius); padding: 22px 20px;
  backdrop-filter: blur(6px);
}
.figure-card b {
  display: block; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1;
  letter-spacing: -.04em; font-weight: 750;
}
.figure-card b i { font-style: normal; font-size: .55em; vertical-align: .35em; opacity: .75; }
.figure-card span {
  display: block; margin-top: 8px; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .58);
}
a.figure-card { color: #fff; }
a.figure-card:hover { text-decoration: none; border-color: rgba(255, 255, 255, .34); }
.figure-card-hire { background: rgba(245, 155, 0, .14); border-color: rgba(245, 155, 0, .4); }
.figure-card-hire b { color: var(--hire); }

/* The three neutral stats pick up a hue each, so the panel is four coloured
   facts rather than three grey ones and an orange one. Kept low-alpha: on the
   dark hero a saturated fill would shout. */
.figure-card.t-sky    { background: rgba(10, 140, 210, .16); border-color: rgba(10, 140, 210, .42); }
.figure-card.t-teal   { background: rgba(13, 127, 134, .18); border-color: rgba(13, 127, 134, .46); }
.figure-card.t-indigo { background: rgba(97, 78, 214, .18);  border-color: rgba(97, 78, 214, .46); }
.figure-card.t-sky b    { color: #7cc7f2; }
.figure-card.t-teal b   { color: #6fd3d8; }
.figure-card.t-indigo b { color: #a99cf5; }

@media (max-width: 920px) {
  .hero-xl-grid { grid-template-columns: 1fr; }
  .hero-rings { right: -40%; opacity: .3; }
}

/* --- section furniture ------------------------------------------------ */

.section-head { max-width: 720px; margin: 0 auto clamp(34px, 4vw, 52px); text-align: center; }
.section-head .lede { margin-bottom: 0; }
.eyebrow-light { color: var(--brand-bright); }

.band-dark {
  background:
    radial-gradient(800px 500px at 85% 0%, rgba(10, 140, 210, .2), transparent 60%),
    linear-gradient(170deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lede { color: rgba(255, 255, 255, .74); }

.split-wide {
  display: grid; gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center;
}
@media (max-width: 960px) { .split-wide { grid-template-columns: 1fr; } }

.chip-light {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); color: #fff;
}
.chip-light b { color: var(--brand-bright); margin-left: 4px; }
.chip-light:hover { border-color: #fff; }

/* --- feature cards ---------------------------------------------------- */

.feature-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.feature:hover {
  border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-lg);
}
.feature h3 { margin: 16px 0 .4em; }
.feature p { color: var(--muted); margin: 0; }

.feature-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  /* Filled in the tile's own hue with a white glyph. The soft-tint version was
     legible but quiet; at icon size a solid block is what actually carries colour
     across a page. The slight gradient keeps it from looking like flat paint. */
  background: var(--hue, var(--accent));
  background-image: linear-gradient(145deg,
    color-mix(in srgb, #fff 18%, transparent), transparent 62%);
  border: 1px solid color-mix(in srgb, var(--hue, var(--accent)) 72%, #000);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--hue, var(--accent)) 28%, transparent);
}
.feature-ico.sm { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; }

/* Each tile sets its own pair of variables; the icon above just reads them, so a
   new tile is one class and no new rules. */
.t-sky    { --hue: var(--c-sky);    --tint: var(--c-sky-soft); }
.t-teal   { --hue: var(--c-teal);   --tint: var(--c-teal-soft); }
.t-indigo { --hue: var(--c-indigo); --tint: var(--c-indigo-soft); }
.t-plum   { --hue: var(--c-plum);   --tint: var(--c-plum-soft); }
.t-hire   { --hue: var(--hire);     --tint: var(--hire-soft); }
.t-ok     { --hue: var(--ok);       --tint: var(--ok-soft); }

/* A hairline of the tile's own colour on hover: enough to feel alive, not
   enough to turn the grid into a paintbox. */
/* A permanent hairline of the card's hue along the top edge. On hover it
   thickens rather than appearing from nothing, so the grid reads as coloured
   at rest instead of only under a cursor nobody on a phone has. */
.feature,
.card.t-sky, .card.t-teal, .card.t-indigo, .card.t-plum, .card.t-hire, .card.t-ok {
  border-top: 3px solid color-mix(in srgb, var(--hue, var(--accent)) 45%, transparent);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.feature:hover,
.card.t-sky:hover, .card.t-teal:hover, .card.t-indigo:hover,
.card.t-plum:hover, .card.t-hire:hover, .card.t-ok:hover {
  border-top-color: var(--hue, var(--accent));
}

/* An eyebrow takes the colour of the section it introduces, which is what makes
   the page read as sections rather than one long scroll. */
.eyebrow.t-sky, .eyebrow.t-teal, .eyebrow.t-indigo, .eyebrow.t-plum,
.eyebrow.t-hire, .eyebrow.t-ok { color: var(--hue); }

/* A short coloured rule above the eyebrow. Cheap, and it gives every section a
   visible identity from across the room. Centred inside a centred header. */
.section-head .eyebrow::before {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 2px;
  margin: 0 auto 14px; background: currentColor;
}

/* --- the footprint map ------------------------------------------------ */

.map { margin: 0; }
.map svg { width: 100%; height: auto; overflow: visible; }

/* States Giant does not operate in are drawn too. Without them the dots float
   in black and nothing tells you it is the United States. */
.map-state {
  fill: rgba(255, 255, 255, .035);
  stroke: rgba(255, 255, 255, .13);
  stroke-width: .8; stroke-linejoin: round;
}
.map-state.is-ours {
  fill: rgba(15, 102, 184, .3);
  stroke: rgba(120, 190, 255, .55);
  stroke-width: 1.1;
}

.map-dot { fill: #eaf6ff; stroke: var(--brand-bright); stroke-width: 1; }
.map-dot:hover { fill: #fff; r: 5.5; cursor: default; }
.map-glow { pointer-events: none; }
.map-label {
  fill: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  paint-order: stroke; stroke: rgba(6, 10, 20, .85); stroke-width: 3.5px;
}
.map-label-count { fill: var(--brand-bright); }
.map-caption {
  margin-top: 14px; text-align: center; font-size: .84rem; color: rgba(255, 255, 255, .5);
}

/* Fade the dots in, do NOT scale them.
 *
 * A CSS transform on an SVG element is resolved against the SVG's own origin,
 * not the element's centre, so `transform: scale(0)` does not shrink a dot in
 * place - it drags it to the top-left corner of the map. Mid-animation, and for
 * every dot still waiting on its stagger delay, that scattered stores across
 * states Giant has never operated in. It looked exactly like bad data.
 *
 * `transform-box: fill-box` would fix the origin, but opacity needs no such
 * caveat and cannot move anything. */
@media (prefers-reduced-motion: no-preference) {
  .map-dot, .map-glow {
    animation: dot-in .45s ease-out both;
    animation-delay: calc(var(--i) * 40ms);
  }
  @keyframes dot-in { from { opacity: 0; } to { opacity: 1; } }
}

/* --- careers band ----------------------------------------------------- */

.cta-hire {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(245, 155, 0, .16), transparent 65%),
    linear-gradient(140deg, var(--ink-2), var(--ink));
}

@media (max-width: 640px) {
  .hero-xl-panel { grid-template-columns: 1fr 1fr; gap: 10px; }
  .figure-card { padding: 16px 14px; }
  .feature { padding: 20px 18px; }
  .map-label { font-size: 22px; }
}

/* The search bar was designed to sit inside a dark hero. On the careers page it
   sits with the results on white, where white-on-white made every field
   invisible and only the button showed. */
.search-bar-light {
  background: #fff; border-color: var(--line);
  box-shadow: var(--shadow);
}
.search-bar-light .search-field { color: var(--muted); }
.search-bar-light .search-field input,
.search-bar-light .search-field select { color: var(--text); }
.search-bar-light .search-field input::placeholder { color: var(--muted-2); }
.search-bar-light .search-field-select { border-left-color: var(--line); }
@media (max-width: 720px) {
  .search-bar-light .search-field-select { border-top-color: var(--line); }
}

/* `.hero-xl h1 em` (0,1,2) out-specifies `.em-hire` (0,1,0), so the careers
   headline rendered in the blue gradient instead of the amber one. */
.hero-xl h1 em.em-hire {
  background: linear-gradient(100deg, var(--hire), #ffd27f 70%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- inner pages -------------------------------------------------------
 *
 * The landing page got the design pass first; these are the components that
 * bring the locator, the store page and the job board up to the same standard.
 */

.hero-compact { padding: clamp(40px, 5vw, 68px) 0 clamp(36px, 4vw, 56px); }
.hero-compact h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: .3em; }
.hero-hire {
  background:
    radial-gradient(900px 560px at 80% 0%, rgba(245, 155, 0, .22), transparent 62%),
    radial-gradient(700px 500px at 5% 100%, rgba(30, 20, 120, .5), transparent 62%),
    linear-gradient(160deg, #080b16 0%, var(--ink-2) 60%, #130f26 100%);
}
.em-hire {
  font-style: normal;
  background: linear-gradient(100deg, var(--hire), #ffd27f 70%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.crumbs { font-size: .86rem; color: rgba(255, 255, 255, .5); margin-bottom: 14px; }
.crumbs a { color: rgba(255, 255, 255, .72); }
.crumbs span { margin: 0 6px; }

/* --- search bar -------------------------------------------------------- */

.search-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px; padding: 8px; max-width: 760px;
}
.search-field {
  display: flex; align-items: center; gap: 9px; flex: 1 1 220px;
  padding: 0 8px 0 16px; color: rgba(255, 255, 255, .55); min-width: 0;
}
.search-field input, .search-field select {
  background: transparent; border: none; color: #fff; padding: 11px 0;
  width: 100%; font-size: .97rem; min-width: 0;
}
.search-field input::placeholder { color: rgba(255, 255, 255, .45); }
.search-field input:focus, .search-field select:focus { outline: none; box-shadow: none; }
.search-field select option { color: var(--text); }
.search-field-select { flex: 0 1 190px; border-left: 1px solid rgba(255, 255, 255, .14); }
.search-bar .btn { flex: none; }

@media (max-width: 720px) {
  .search-bar { border-radius: var(--radius); flex-direction: column; padding: 10px; }
  .search-field { padding: 0 10px; }
  .search-field-select { border-left: none; border-top: 1px solid rgba(255, 255, 255, .14); }
  .search-bar .btn { width: 100%; }
}

.list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; flex-wrap: wrap;
}

/* --- store tiles ------------------------------------------------------- */

.store-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.store-tile {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; color: var(--text);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.store-tile:hover {
  text-decoration: none; border-color: var(--accent); transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.store-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.store-tile-head h3 { margin: 0; font-size: 1.08rem; }
.store-tile-where { margin: 0; color: var(--muted); font-size: .93rem; }
.store-tile-meta { margin: 12px 0 0; display: grid; gap: 7px; font-size: .88rem; }
.store-tile-meta > div { display: flex; gap: 9px; align-items: flex-start; }
.store-tile-meta dt { color: var(--accent); flex: none; line-height: 1; margin-top: 2px; }
.store-tile-meta dd { margin: 0; color: var(--muted); }
.store-tile-go {
  margin-top: auto; padding-top: 14px; color: var(--accent-dark);
  font-weight: 650; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px;
}

/* --- store page -------------------------------------------------------- */

.store-hero {
  display: grid; gap: clamp(24px, 3vw, 44px);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start;
}
@media (max-width: 860px) { .store-hero { grid-template-columns: 1fr; } }
.store-hero-card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(6px);
}
.store-hours-head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); font-weight: 700;
}
.store-hours { color: #fff; font-size: 1.02rem; margin: 0 0 16px; line-height: 1.5; }
.store-google {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 650;
  font-size: .9rem; color: var(--brand-bright);
}

.band-hire { background: var(--hire-soft); border-block: 1px solid #f3dcb4; }
.hire-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.hire-strip-jobs { display: flex; gap: 10px; flex-wrap: wrap; }

.near {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text);
}
.near:last-child { border-bottom: none; }
.near:hover { text-decoration: none; color: var(--accent-dark); }
.near b { display: block; font-weight: 600; font-size: .95rem; }
.near small { color: var(--muted); }
.near .ico { color: var(--accent); flex: none; }

/* --- job list ---------------------------------------------------------- */

.step-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.step {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px; padding: 9px 18px 9px 10px;
}
.step b {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: rgba(245, 155, 0, .2); color: var(--hire);
  display: grid; place-items: center; font-size: .82rem;
}
.step span { font-size: .88rem; color: rgba(255, 255, 255, .78); }

.job-list { display: grid; gap: 12px; }
.job-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; color: var(--text);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.job-row:hover {
  text-decoration: none; border-color: var(--hire); transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.job-row-main { min-width: 0; }
.job-row h3 { margin: 0 0 5px; font-size: 1.1rem; }
.job-row-where {
  display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .92rem;
}
.job-row-where .ico { color: var(--accent); width: 16px; height: 16px; flex: none; }
.job-row .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.job-row-go {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  color: var(--warn); font-weight: 650; font-size: .92rem;
}
@media (max-width: 620px) {
  .job-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Privacy and Terms sit in the footer's bottom row, quiet but on every page. */
.footer-legal { display: inline-flex; gap: 16px; }
.footer-legal a { opacity: .75; }
.footer-legal a:hover { opacity: 1; }

/* The legal pages are long-form text, which nothing else on this site is. */
.prose h2 { margin: 32px 0 10px; font-size: 1.15rem; }
.prose h2:first-of-type { margin-top: 8px; }
.prose p, .prose li { color: var(--muted); line-height: 1.7; }
.prose ul { margin: 10px 0 10px 20px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--ink); }

/* --- store QR cards --------------------------------------------------- */

.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.qr-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; text-align: center;
}
.qr-card-head h3 { margin: 2px 0 .2em; font-size: 1.12rem; }
.qr-kicker {
  margin: 0; font-size: .7rem; font-weight: 750; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hire);
}
.qr-where { margin: 0; font-size: .82rem; color: var(--muted); }
.qr-code { margin: 16px auto 12px; line-height: 0; }
.qr-code svg { width: 100%; max-width: 200px; height: auto; }
.qr-ask { margin: 0; font-weight: 700; }
.qr-url {
  margin: 2px 0 0; font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.qr-foot { margin: 10px 0 0; font-size: .76rem; color: var(--muted-2); }

/* Printing is the whole point of this page, so it gets real print rules rather
   than whatever the browser would guess. Everything that is screen furniture -
   the portal chrome, the nav, the buttons - is dropped, and each card is kept
   off a page break so a code never prints across a fold. */
@media print {
  .no-print, .topbar, .nav, .portal-head, .footer { display: none !important; }
  .portal-body { padding: 0; }
  body { background: #fff; }
  .qr-sheet { grid-template-columns: repeat(2, 1fr); gap: 10mm; }
  .qr-card {
    border: 1px dashed #999;          /* a cut line, not a design border */
    break-inside: avoid; page-break-inside: avoid;
    padding: 10mm 6mm;
  }
  .qr-code svg { max-width: 46mm; }   /* comfortably scannable from a window */
  .qr-url { color: #444; }
}

/* ---------------------------------------------------------------- language -- */
/* The toggle sits in the top bar rather than the main nav on purpose: it is a
   setting, not a destination, and putting it beside the page links makes people
   read it as another section of the site. */
.lang-switch {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 1px 10px 2px;
  opacity: .9;
}
.lang-switch:hover { opacity: 1; border-color: rgba(255, 255, 255, .7); }

/* Offered once, dismissible, and never a redirect. An automatic switch on
   browser language stops crawlers seeing the other version and is maddening the
   moment it guesses wrong. */
.lang-offer {
  background: var(--hire-soft, #fdf3e3);
  border-bottom: 1px solid #f0d6b4;
  font-size: .9rem;
}
.lang-offer .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0;
}
.lang-offer span { flex: 1 1 auto; }
.lang-offer-x {
  background: none; border: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 0 4px;
  color: inherit; opacity: .55;
}
.lang-offer-x:hover { opacity: 1; }

@media print { .lang-offer, .lang-switch { display: none; } }

/* The contact form's honeypot (2026-10-16). Moved off-screen rather than
   display:none - some bots skip anything that is display:none or
   type=hidden, and the whole point is that a bot should fill it in. Kept out
   of the tab order and out of screen readers in the markup, so no person can
   reach it either way. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}