/* office selection */
body{display:flex;flex-direction:column}
.hero{
  max-width:1200px;
  margin:0 auto;
  padding:28px 24px 8px;
  text-align:center;
}

.hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(30px,5.5vw,60px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:#F7C142;                 /* color from your photo */
  position:relative;
  display:inline-block;
  padding:16px 36px;

  background:#FFFFFF;            /* white background */
  border-radius:18px;
  box-shadow:0 10px 30px rgba(27,27,27,.18),
             0 0 0 3px var(--navy);

  /* thin dark edge so the amber letters stay readable on white */
  -webkit-text-stroke:1.5px var(--navy);
  paint-order:stroke fill;

  animation:heroIn .6s cubic-bezier(.2,.8,.2,1) both;
}

.hero p{
  margin:18px auto 0;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  color:var(--navy);
  max-width:56ch;
}

@keyframes heroIn{
  from{ opacity:0; transform:translateY(-14px) scale(.97); }
  to{   opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:640px){
  .hero h1{ padding:12px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .hero h1{ animation:none; }
}
.grid-wrap{position:relative;z-index:1;flex:1;padding:20px 24px 40px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:18px;max-width:1000px;margin:0 auto}
a.card{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);box-shadow:0 8px 22px rgba(18,32,46,.14)}
a.card h3{font-size:19px;margin-bottom:6px}
.detail{color:var(--ink-soft);font-size:13px;margin-bottom:14px}
.go{display:flex;align-items:center;gap:8px;font-weight:600}
.chip{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff}

/* ===== Field-crew (phone) layout: office picker with pending counts ===== */
.field-only{display:none}
html.field-mode footer.foot{display:none}
html.field-mode .hero{max-width:640px;text-align:left;padding:22px 16px 4px}
html.field-mode .hero h1{display:none}   /* field users: no "Which office are you reporting to?" heading */
html.field-mode .grid-wrap{padding:16px 16px 40px}
html.field-mode .cards{grid-template-columns:1fr;gap:16px;max-width:640px}
html.field-mode a.card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t pill chip" "d pill chip";column-gap:12px;align-items:center;background:#FFFCF5;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:20px;padding:22px 20px;box-shadow:0 6px 18px rgba(90,55,0,.12)}
html.field-mode a.card h3{grid-area:t;font-size:20px;margin:0 0 6px}
html.field-mode a.card .detail{grid-area:d;margin:0;font-size:15px;overflow-wrap:anywhere}
html.field-mode a.card .pend{grid-area:pill;display:inline-block;padding:11px 18px;border-radius:99px;font-size:16px;font-weight:800;white-space:nowrap;background:#ECE9E2;color:var(--ink-soft)}
html.field-mode a.card .pend.has{background:var(--navy);color:var(--amber);box-shadow:0 0 0 0 rgba(242,169,0,.7);animation:pendPulse 1.8s ease-out infinite}
html.field-mode a.card .pend.zero{background:var(--green-tint);color:var(--green)}
@keyframes pendPulse{0%{box-shadow:0 0 0 0 rgba(242,169,0,.75)}70%{box-shadow:0 0 0 12px rgba(242,169,0,0)}100%{box-shadow:0 0 0 0 rgba(242,169,0,0)}}
@media (prefers-reduced-motion:reduce){html.field-mode a.card .pend.has{animation:none}}
html.field-mode a.card .go{grid-area:chip;font-size:0;gap:0}
html.field-mode a.card .chip{width:40px;height:40px;font-size:18px}

/* ===== "Pick an office…" banner — FIELD USERS ONLY (hidden for office and admin) ===== */
.hero p.pick-note{display:none}
html.field-mode .hero p.pick-note{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;max-width:none;margin:16px 0 0;padding:14px 18px;border-radius:16px;background:var(--navy);border:2px solid #F2A900;color:#fff;font-size:17px;font-weight:700;line-height:1.35;text-align:left;box-shadow:0 8px 22px rgba(18,32,46,.3)}
html.field-mode .hero p.pick-note::before{content:"\26A1";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#F2A900;color:var(--navy);font-size:18px}
html.field-mode .hero p.pick-note::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:noteShine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes noteShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){html.field-mode .hero p.pick-note::after{animation:none}}