/* ============================================
   GLOBAL [hidden] FIX
   The plain HTML `hidden` attribute is only display:none by default
   via the browser's user-agent stylesheet — any later author rule
   that sets `display` on the same element (e.g. ".some-class {
   display: flex }") silently wins over it, so the element stays
   visible/interactive (and keeps blocking clicks) even while
   `hidden` is set. This bit the Booking History date-range fields
   and the Settings page's modals/password form before being caught
   in testing. Fixing it once, globally, for every page this file
   loads (root, /user/, /admin/) means no component CSS ever needs
   its own "[hidden] { display: none }" override again.
============================================ */
[hidden] { display: none !important; }

/* ============================================
   DESIGN TOKENS
   Deep navy + warm gold palette (Neptel-inspired), still built
   around white/paper page backgrounds. Navy now does the job
   "blueprint blue" used to do — structure, nav, links — and a
   warm mustard gold replaces the hi-vis orange as the one loud
   action color. Color-codes the four user roles so the same hue
   means the same thing everywhere on the site.
============================================ */
:root {
  /* Big TEXT buttons use this radius (rounded, like "View profile"). Small icon-only buttons stay square. */
  --btn-radius: 14px;
  /* --- Surfaces --- */
  --paper: #FFFFFF;          /* main background */
  --paper-alt: #F5F3EC;      /* warm off-white for alternating sections */
  --surface: #FFFFFF;        /* cards */
  --line: #E6E1D3;           /* hairline borders */

  /* --- Ink --- */
  --ink: #12181F;            /* near-black navy-charcoal, primary text */
  --ink-soft: #5C6570;       /* muted slate, secondary text */

  /* --- Brand --- */
  --blueprint: #10233F;      /* deep navy — nav, structure, links, one role */
  --blueprint-deep: #081527; /* pressed/hover state, darkest navy */
  --hivis: #C9A227;          /* warm gold — the one primary action color */
  --hivis-deep: #A9862F;
  --caution: #E3B341;        /* amber — stamps, ratings, call-outs */
  --good: #1FAE6B;           /* available / success */
  --danger: #C0392B;        /* errors / invalid fields */

  /* --- Homepage v2 (Canva design) ---
     New black / white / red / cream palette used by the
     .home-* sections below. Kept separate from the tokens
     above so the rest of the site (about/services/workers)
     is untouched until those pages get the same treatment. */
  --home-black: #0A0A0A;
  --home-red: #FF3D3D;
  --home-cream: #E7E5E2;

  /* --- Radii & shadow ---
     Rounded, confident shapes instead of hard construction-doc
     corners — this is the deliberate shift away from the old
     spec-sheet look. */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px -16px rgba(18, 24, 31, 0.22);
  --shadow-lift: 0 20px 46px -18px rgba(18, 24, 31, 0.3);

  /* --- Typography ---
     Space Grotesk = display: wide, geometric, confident — carries
     the "bold system" energy without borrowing a generic SaaS face.
     Inter = body. IBM Plex Mono stays for small tags/labels: a
     spec-sheet/permit-stamp detail that keeps the brand tied to
     construction paperwork even inside a much brighter shell. */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* --- Spacing --- */
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;
}

/* ============================================
   RESET / BASE
============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reserve the vertical-scrollbar gutter on every page so centered containers
   (navbar, content) don't shift sideways between a long page that scrolls
   and a short page that doesn't. */
html { scrollbar-gutter: stable; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--hivis);
  outline-offset: 2px;
}

/* ============================================
   REUSABLE PIECES
============================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hivis);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
  max-width: 42ch;
}

/* Buttons — full pill shape, one loud primary color.
   This is a deliberate reversal from the old 4px "industrial"
   radius: the brief asked for a bolder, friendlier system feel,
   so the confidence now lives in the pill shape + saturated
   orange rather than sharp precise corners. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-body);
  border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
  background: var(--hivis);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -8px rgba(255, 90, 31, 0.55);
}
.btn--primary:hover {
  background: var(--hivis-deep);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
  background: var(--paper);
}
.btn--ghost:hover {
  border-color: var(--blueprint);
  color: var(--blueprint);
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

/* ============================================
   NAVBAR (includes/nav.php — one navbar for every public, auth and
   client page; admin / worker / leadman panels have their own).
   White bar, thin light-grey bottom border, red #FF393E accent.
   script.js writes navbar.style.borderBottomColor = var(--hivis) on
   scroll (and var(--line) at the top), so both tokens are re-pointed
   here, scoped to the navbar only: --hivis -> red, --line -> light grey.
============================================ */
.navbar {
  --hivis: #FF393E;
  --hivis-deep: #D92B30;
  --line: #E2E0DB;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #FFFFFF;
  color: #0F0F10;
  border-bottom: 1px solid #E2E0DB;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.navbar__inner {
  width: min(1240px, 100% - 48px);
  height: 72px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #0F0F10;
  letter-spacing: -0.01em;
}

/* Groups nav links + the account area (avatar/actions) together
   on the right side, with the logo alone on the left. */
.navbar__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar__links {
  display: flex;
  gap: 28px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0F0F10;
}
.navbar__links a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.navbar__links a:hover,
.navbar__links a.is-active {
  border-bottom-color: #FF393E;
}

.navbar__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* Guest "Log in": square, outlined, black on white. */
.navbar .btn--ghost {
  height: auto;
  padding: 10px 18px;
  border: 1.5px solid #0F0F10;
  border-radius: 0;
  background: transparent;
  color: #0F0F10;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: none;
  transform: none;
}
.navbar .btn--ghost:hover {
  background: #0F0F10;
  border-color: #0F0F10;
  color: #FFFFFF;
  transform: none;
}

/* Logo: the artwork is an opaque near-white (#FDFDFD-#FFFFFF) rectangle.
   On the white bar the tile border/radius are removed, multiply-blending
   merges it with the navbar and a 1.2% brightness lift pushes the last
   off-white levels to pure #FFFFFF so no faint edge is left. */
.navbar .site-logo {
  background: transparent;
  border-radius: 0;
  mix-blend-mode: multiply;
  filter: brightness(1.012);
}

/* --- Mobile hamburger toggle ---
   Hidden on desktop; becomes a tap target under 720px, where
   .navbar__links turns into a dropdown panel via the .is-open
   class toggled by script.js. */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #0F0F10;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Small "stamp" badge — the reusable call-out pill, used in the
   nav and floating on the hero visual. Mimics a permit stamp. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--caution);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* ============================================
   HERO — full-bleed photo, matching the Monolith/Neptel
   reference structure: a real site photo behind a dark navy
   scrim, an oversized headline, a primary button plus a thin
   understated "arrow" link, and a scroll cue at the bottom.

   The image itself is a placeholder (assets/hero.jpg) sized at
   1920×1080 — swap that file for a real jobsite photo whenever
   it's ready and everything else here stays the same.
============================================ */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--blueprint-deep);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 21, 39, 0.75) 0%, rgba(8, 21, 39, 0.55) 45%, rgba(8, 21, 39, 0.85) 100%);
}

.hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  width: 100%;
}

.hero__content {
  max-width: 640px;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: var(--space-md);
}

.hero__headline em {
  font-style: normal;
  color: var(--hivis);
}

.hero__subtext {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 50ch;
  margin-bottom: var(--space-lg);
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Thin understated secondary link, echoing "Connect With An
   Expert >" from the reference — quieter than a second button. */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero__link:hover {
  color: var(--hivis);
  border-color: var(--hivis);
}

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__scroll-cue svg {
  width: 14px;
  height: 14px;
  animation: hero-bounce 1.8s ease-in-out infinite;
}

@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ============================================
   FOOTER
============================================ */
.footer {
  text-align: center;
  padding: var(--space-lg);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* ============================================
   AUTH PAGES (login / register)
============================================ */
.auth {
  position: relative;
  min-height: calc(100vh - 81px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  overflow: hidden;
  background: var(--paper-alt);
}

.auth__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(27, 77, 224, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 77, 224, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 75%);
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: var(--space-lg);
}

.auth-card--wide {
  max-width: 520px;
}

/* ===========================================================
   CREATE ACCOUNT — two-panel redesign, scoped to .auth--split /
   .reg-split so .auth / .auth-card themselves (shared with login.php,
   forgot-password.php, reset-password.php) are completely untouched —
   none of those other pages carry these classes, so none of them
   change. All colors reuse existing tokens (--home-black / --home-red
   / --surface / --line / --ink-soft / --paper-alt) — no new palette.
   =========================================================== */
.auth--split {
  align-items: center;
  padding: var(--space-lg) var(--space-md);
}

/* Outer light wrapper, added per feedback — the black panel now sits
   INSET inside this card (visible padding on every side) instead of
   floating directly on the page background. Reuses --surface (#FFFFFF,
   the same color .auth-card already uses) and the same shadow/radius
   tokens as every other card on the site, so this reads as one more
   card, not a new visual language. */
.reg-split-outer {
  position: relative;
  width: 100%;
  max-width: 1090px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 1.25rem;
}

.reg-split {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  /* Zero gap — the two panels' edges still meet directly with no
     visible seam between them; the new inset padding above is what
     now separates the pair from the outer container's own edges. */
  gap: 0;
  align-items: stretch;
}

/* The white form side no longer needs its own card chrome (border/
   shadow) now that .reg-split-outer supplies the surrounding white
   card — without this it would show a faint double-border/shadow
   seam where the two nested white cards meet. Background stays (it's
   already the same #FFFFFF either way); only the border/shadow/radius
   that would create a visible inner seam are removed. Nothing about
   the form's own fields/typography/colors/spacing changes — this is
   .auth-card's OUTER chrome only, scoped to .reg-split__form alone
   (a class unique to this page), so login/forgot/reset's own
   .auth-card is completely unaffected. */
.reg-split__form {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Photo background added per feedback — width/height/position/
   border-radius/padding all unchanged from before; only the flat
   --home-black fill became a photo + gradient. Drop the real photo
   at assets/img/login-worker.jpg (the SAME file login.php, forgot-password.php
   and the code pages use). background-color is kept as a fallback
   fill (shows briefly while the photo loads, and if the file is
   ever missing) so the panel never goes transparent/white. */
.reg-split__intro {
  position: relative;
  background-color: var(--home-black);
  background-image: url('assets/img/login-worker.jpg');
  background-size: cover;
  background-position: center top;
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Dark gradient overlay so the white badge/heading/row text stays
   readable over the photo. The reference worker photo has a plain
   white/light studio backdrop rather than an on-site background, so
   this needs real density through the upper/mid area too — not just
   a bottom fade — or white text would disappear against the light
   backdrop near the top of the panel. Sits above the photo, below
   the text (.reg-split__intro-content has the higher z-index). */
.reg-split__intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.78) 0%,
    rgba(10, 10, 10, 0.55) 30%,
    rgba(10, 10, 10, 0.6) 55%,
    rgba(10, 10, 10, 0.86) 100%
  );
}

.reg-split__intro-content {
  position: relative;
  z-index: 2;
}

/* Small dark pill badge — reference's "GET IN TOUCH" chip. */
.reg-split__badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

/* Large bold uppercase heading — reference's "GET IN TOUCH." */
.reg-split__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.12;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.reg-split__subtext {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.6rem;
  max-width: 34ch;
}

/* Thin horizontal divider, reused above and (implicitly) below the
   row group — reference uses one above and one below its info rows;
   only one is used here since the social-links row below the second
   one is intentionally omitted (see markup comment). */
.reg-split__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 1.6rem;
}

.reg-split__rows {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.reg-split__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

/* Small rounded-square icon container — reference's icon boxes. */
.reg-split__row-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reg-split__row-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.1rem;
}
.reg-split__row-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.reg-split__row-desc {
  font-size: 0.85rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.4;
}

.reg-split__form {
  width: 100%;
  max-width: none;
}
.reg-split__form .auth-card__footer { margin-top: var(--space-md); }
/* "Log in" link — scoped to this page only (the shared
   .auth-card__footer a rule below, used by login.php/forgot-password.php/
   reset-password.php too, stays gold/--hivis for those pages). Matches
   the black Create account button per feedback. */
.reg-split__form .auth-card__footer a {
  color: var(--home-black);
}
/* The one form-adjacent piece of copy moved back here from the old
   single-card layout (see register.php) — kept, just relocated. */
.reg-split__form-note {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: var(--space-md);
}

/* Create account button — scoped to this page only (not a sitewide
   .btn--primary change, which would also recolor login/dashboard/
   booking buttons elsewhere). Matches the navbar's "Log in" look
   (.navbar .btn--ghost: near-black, white text) translated to a
   solid button for the white card — same black used by the intro
   panel, so the two sides of the page read as one system. Shape,
   size, type and full-width behavior are untouched; only the
   color scheme changes. */
.reg-split__form button.btn--primary {
  background: var(--home-black);
  color: #FFFFFF;
  border-color: var(--home-black);
  box-shadow: none;
}
.reg-split__form button.btn--primary:hover {
  background: #1E1E1E;
  border-color: #1E1E1E;
}
.reg-split__form button.btn--primary:focus-visible {
  outline: 2px solid var(--home-black);
  outline-offset: 2px;
}
.reg-split__form button.btn--primary:active {
  background: #000000;
  border-color: #000000;
  transform: translateY(1px);
}
.reg-split__form button.btn--primary:disabled {
  background: #4A4A4A;
  border-color: #4A4A4A;
  color: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  .reg-split { grid-template-columns: 0.8fr 1.2fr; max-width: 900px; }
  .reg-split__title { font-size: 1.9rem; }
}

@media (max-width: 760px) {
  .reg-split { grid-template-columns: 1fr; }
  .reg-split__intro { padding: var(--space-md); }
  .reg-split__title { font-size: 1.7rem; }
}

/* ===========================================================
   LOG IN — split-screen redesign, scoped entirely to .login-split*
   (its own namespace, not .reg-split* — register.php's panel and
   this one are independent, so a future change to either never
   leaks into the other). .auth / .auth-card / .auth--split / the
   shared button and link rules used by every other auth page are
   untouched; all colors reuse existing tokens (--home-black /
   --home-red / --surface / --line / --ink-soft / --paper-alt) —
   no new palette, and no gold anywhere in this block.

   v2 (this revision): form moved to the LEFT column, visual panel
   to the RIGHT (previously the reverse) — the text feature-list
   panel from v1 is replaced by an actual graphic panel, since no
   reference image was attached to this request and no real Apolido
   product screenshot exists to show. Rather than fabricate a fake
   screenshot, the panel reuses Apolido's own real brand assets —
   the exact hard-hat mark from includes/nav.php's logo and the
   exact blueprint-grid texture already used for black sections on
   about.php/services.php (see .about-hero__grid) — enlarged into a
   genuine branded graphic, plus the real tagline already used in
   the site footer. Nothing here is invented copy or imagery.
   =========================================================== */
.login-split {
  position: relative;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  align-items: stretch;
}

.login-split__form {
  width: 100%;
  max-width: none;
  order: 1;
}
.login-split__form .auth-card__footer { margin-top: var(--space-md); }

/* Verification section — visually separated from the login form
   above via a divider + its own heading/subtext, instead of the
   previous single unlabeled subtext line sitting directly under the
   login form. Scoped to this page only (class name unique to
   login.php); reuses existing tokens, no new palette. */
.login-verify {
  margin-top: var(--space-md);
}
.login-verify__divider {
  height: 1px;
  background: var(--line);
  margin-bottom: var(--space-md);
}
.login-verify__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.login-verify__subtext {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: var(--space-md);
}

/* v2 of this panel — replaced the brand-mark/wordmark/tagline/grid
   treatment with a full-bleed photo + bottom readability fade +
   bottom-left text block, per feedback. Width/height/position/
   border-radius are unchanged (still order:2 in the same
   .login-split grid, same var(--radius-lg), same position:relative/
   overflow:hidden, same min-height driving its share of the
   stretch-aligned row) — only the background color and the
   centered-flex content layout (now absolute-positioned children)
   changed, since the new design no longer centers a content block. */
.login-split__visual {
  order: 2;
  position: relative;
  overflow: hidden;
  background: #111111;
  border-radius: var(--radius-lg);
  min-height: 320px;
}

/* Fills the panel; object-position keeps the subject's face/upper
   body in frame regardless of the panel's exact aspect ratio. */
.login-split__visual-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}

/* Bottom-only readability fade, above the photo and below the text
   (text block below has its own higher z-index). Upper half/face is
   intentionally left clear per the brief. */
.login-split__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17, 17, 17, 0) 34%,
    rgba(17, 17, 17, 0.65) 60%,
    rgba(17, 17, 17, 0.79) 82%,
    rgba(17, 17, 17, 0.9) 100%
  );
  pointer-events: none;
}

.login-split__visual-text {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.login-split__visual-brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #F8F7F3;
}

.login-split__visual-kicker {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  line-height: 1;
  color: #FF3B43;
}

.login-split__visual-rule {
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 18px;
  background: #FF3B43;
  opacity: 0.85;
  border-radius: 1px;
}

.login-split__visual-headline {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #F8F7F3;
}

.login-split__visual-desc {
  margin: 14px 0 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: #D1D1D1;
  max-width: 340px;
}

/* Gold removal, scoped to this page only — .btn--primary and
   .auth-card__footer a stay gold (--hivis) everywhere else
   (register.php, dashboards, etc.); only this page's copies are
   overridden to black-and-white per the brief. */
.login-split__form button.btn--primary {
  background: var(--home-black);
  color: #FFFFFF;
  border-color: var(--home-black);
  box-shadow: none;
}
.login-split__form button.btn--primary:hover {
  background: #1E1E1E;
  border-color: #1E1E1E;
}
.login-split__form button.btn--primary:focus-visible {
  outline: 2px solid var(--home-black);
  outline-offset: 2px;
}
.login-split__form button.btn--primary:active {
  background: #000000;
  border-color: #000000;
  transform: translateY(1px);
}
.login-split__form button.btn--primary:disabled {
  background: #4A4A4A;
  border-color: #4A4A4A;
  color: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
}
.login-split__form .auth-card__footer a {
  color: var(--home-black);
}
.login-split__form .auth-card__footer a:hover {
  color: var(--home-red);
}

@media (max-width: 1024px) {
  .login-split { grid-template-columns: 1.05fr 0.95fr; max-width: 900px; }
  /* Medium widths — 60px would crowd this panel at this column
     width, so the brand scales down smoothly before the mobile
     breakpoint collapses the layout entirely. */
  .login-split__visual-brand { font-size: 44px; }
}

@media (max-width: 760px) {
  /* Form stays first (order: 1) so it's what mobile visitors reach
     first; the visual panel (photo) stacks below. Per the brief: at
     this width the panel keeps only the brand + tagline, tightened
     insets, and drops the rule/headline/description so the stacked
     panel stays compact. */
  .login-split { grid-template-columns: 1fr; }
  .login-split__visual { min-height: 220px; }
  .login-split__visual-text { left: 16px; right: 16px; bottom: 16px; }
  .login-split__visual-brand { font-size: 28px; }
  .login-split__visual-kicker { font-size: 9.5px; margin-top: 6px; }
  .login-split__visual-rule,
  .login-split__visual-headline,
  .login-split__visual-desc { display: none; }
}

.auth-card__eyebrow {
  margin-bottom: var(--space-sm);
}

.auth-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  margin-bottom: 0.4rem;
}

.auth-card__subtext {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  min-width: 0; /* lets grid children shrink below input's intrinsic width — without this, inputs overflow their column */
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 0.75rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.form-field textarea { resize: vertical; min-height: 5.5rem; }

.form-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 400;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blueprint);
}

/* Inline form validation — Facebook-style: red border on the
   field itself, red message directly underneath it. */
.form-field--invalid input {
  border-color: var(--danger);
}

.form-error {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--danger);
}

.form-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #FDEDEC;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.form-alert--success {
  background: #EAFAF3;
  border-color: var(--good);
  color: #12694A;
}

.form-alert--warning {
  background: #FEF6E7;
  border-color: var(--caution);
  color: #7A5B10;
}

/* Toast on the public Login / Register pages (verification result, "verification email sent").
   Same palette and radii as .form-alert; auto-dismissed by script.js. */
.auth-toast {
  position: fixed;
  top: 112px;
  right: var(--space-lg);
  z-index: 600;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: min(380px, calc(100vw - 2 * var(--space-md)));
  padding: 0.9rem 0.9rem 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--good);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px -18px rgba(18, 24, 31, 0.45);
  color: var(--ink);
  animation: auth-toast-in 0.25s ease both;
}
.auth-toast--success { border-left-color: var(--good); }
.auth-toast--warning { border-left-color: var(--caution); }
.auth-toast--danger  { border-left-color: var(--danger); }
.auth-toast__icon { flex: none; margin-top: 1px; color: var(--good); }
.auth-toast--warning .auth-toast__icon { color: #A87B0E; }
.auth-toast--danger  .auth-toast__icon { color: var(--danger); }
.auth-toast__text { flex: 1; font-size: 0.88rem; line-height: 1.45; font-weight: 500; }
.auth-toast__close {
  flex: none;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.auth-toast__close:hover { color: var(--ink); }
.auth-toast__close:focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; border-radius: 4px; }
.auth-toast.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; }
@keyframes auth-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) {
  .auth-toast { top: 136px; right: var(--space-md); left: var(--space-md); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-toast { animation: none; }
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.form-checkbox a {
  color: var(--blueprint);
  font-weight: 600;
}

.auth-form__link {
  align-self: flex-end;
  font-size: 0.85rem;
  color: var(--blueprint);
  font-weight: 600;
  margin-top: -0.5rem;
}

/* --- Password field extras: show/hide toggle, live requirements
   checklist, strength meter (register.php). Reuses the same
   tokens/colors as the rest of this auth-form block on purpose, so
   it reads as part of the same design rather than a bolted-on
   widget. --- */
.pw-field {
  position: relative;
  display: block;
}
.pw-field input { padding-right: 3.2rem; }
.pw-toggle {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--blueprint);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}

.pw-requirements {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 0.75rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 400;
}
.pw-requirements li { display: flex; align-items: center; gap: 0.35rem; }
.pw-requirements li::before {
  content: '\2022'; /* bullet, becomes a check once met */
  color: var(--line);
  font-weight: 700;
}
.pw-requirements li.is-met {
  color: var(--good);
}
.pw-requirements li.is-met::before {
  content: '\2713';
  color: var(--good);
}

.pw-strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.pw-strength__track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.pw-strength__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  transition: width 0.15s ease, background-color 0.15s ease;
  background: var(--danger);
}
.pw-strength__fill--weak   { background: var(--danger); }
.pw-strength__fill--medium { background: var(--caution); }
.pw-strength__fill--strong { background: var(--good); }
.pw-strength__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 3.5em;
}

.btn--full {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.auth-card__footer {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.auth-card__footer a {
  color: var(--hivis);
  font-weight: 600;
}

/* ===== Forgot-password page (section.auth--forgot) =====
   Uses the login.php split layout UNCHANGED: same container, columns, image
   panel, navbar and breakpoints. Only the left-panel content styling below
   differs, scoped to .auth--forgot so Login / Register / Reset are untouched. */
.auth--forgot .auth-card__footer a { color: #000000; font-weight: 700; }
.auth--forgot .login-split__form button.btn--primary {
  background: #000000; border-color: #000000; color: #FFFFFF; font-weight: 700;
}
.auth--forgot .auth-card__eyebrow::before { background: #FF393E; }
/* Same panel height as the Login page on desktop (Login's is content-driven). */
@media (min-width: 761px) { .auth--forgot .login-split { min-height: 596px; } }
/* Heading wraps onto two lines ("Forgot your / password?") and the intro
   breaks after "link to", as in the reference. */
.auth--forgot .auth-card__title { max-width: 300px; line-height: 1.35; }
.auth--forgot .auth-card__subtext { max-width: 330px; line-height: 1.6; }

/* ============================================
   SHARED PAGE HEADER
   .page-header and .section-title are still available
   for any page that wants a plain centered header;
   index.php uses .section-title. workers.php now has
   its own banded header — see WORKERS PAGE below.
============================================ */
.page-header {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-align: center;
}

.page-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

.page-header__subtext {
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ============================================
   LEGACY WORKER-CARD CLASSES
   Kept as-is (not part of Part 1's scope) because
   user/request.php's crew-picker step still uses these
   classes for its selectable worker checkboxes. workers.php
   itself has moved on to the .wrk-* classes below.
============================================ */
.worker-filters {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.worker-filters input,
.worker-filters select {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
}

.worker-filters__search {
  flex: 1;
  min-width: 200px;
}

.worker-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-xl);
}

.worker-list__group {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--blueprint);
  text-transform: uppercase;
  margin: var(--space-lg) 0 var(--space-sm);
}

.worker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.worker-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.worker-card__avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: var(--blueprint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
}

.worker-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.worker-card__trade {
  color: var(--ink-soft);
  font-size: 0.8rem;
  margin: 0.2rem 0 var(--space-sm);
}

.worker-card__status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.worker-card__status--available { color: var(--good); }
.worker-card__status--busy { color: var(--ink-soft); }

.worker-card__rating {
  color: var(--caution);
  font-size: 0.85rem;
}

/* ============================================
   WORKERS PAGE (workers.php)
   Client/user-facing worker browsing page. Everything it
   needs lives in this one block, scoped under .wrk-* so it
   can't leak into other pages. Colors reuse the homepage
   tokens defined at the top of this file — --home-black,
   --home-red, --home-cream — the same ones About and
   Services already use, so Home / About / Services /
   Workers all read as one consistent black-and-white site.
============================================ */

/* --- 1. Hero band (black) — title, subtext, filter bar ---
   Restyled to reuse the About page's hero component as-is, rather
   than approximate it: the section carries both .wrk-hero (identity
   hook + the 900px-wide inner used by the filter bar below) and
   .about-hero (background, blueprint-grid texture, padding,
   text-align — defined once, above, under "ABOUT PAGE"), and the
   eyebrow/title/subtext reuse .about-hero__trust/__title/__subtext
   directly, unmodified, so both pages share one literal component.
   .about-hero itself is untouched by this — the About page keeps
   its exact look. */
.wrk-hero__inner {
  position: relative; /* stacks above .about-hero__grid, same technique as .about-hero__inner */
  max-width: 900px;
  margin: 0 auto;
}
/* The reused .about-hero__trust sits *after* its content on About
   (a closing trust line) but needs to sit *before* the title here
   (an opening eyebrow/label) — the only thing that has to differ,
   so it's overridden by ancestor-scoped selector rather than by
   editing .about-hero__trust itself. */
.wrk-hero .about-hero__trust { margin: 0 auto var(--space-sm); }

/* --- Filter bar: search + search button + skill select + Request --- */
.wrk-hero__filters {
  margin-top: var(--space-lg); /* restores the gap .wrk-hero__subtext used to provide; .about-hero__subtext (reused as-is) has none, since About has nothing after its subtext */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.wrk-hero__search {
  flex: 1 1 260px;
  max-width: 420px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
}
.wrk-hero__search::placeholder { color: rgba(255, 255, 255, 0.55); }
.wrk-hero__search:focus,
.wrk-hero__select:focus { outline: none; border-color: #FFFFFF; }

.wrk-hero__select {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
}
/* Native <select> can't style its own arrow color on every
   browser, so this just keeps it legible on the black band. */
.wrk-hero__select option { color: var(--ink); background: #FFFFFF; }

/* Filter-bar buttons (Search / Request) — ghost pill, white
   border/text on the black band, same idea as .navbar .btn--ghost. */
.wrk-hero__filters .btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  background: transparent;
}
.wrk-hero__filters .btn--ghost:hover {
  border-color: var(--home-red);
  color: var(--home-red);
}
.wrk-hero__request {
  font-weight: 600;
}
.wrk-hero__request span { font-size: 1.1em; line-height: 1; }

/* --- 2. Worker list (white section) --- */
.wrk-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}
.wrk-list__empty {
  text-align: center;
  color: var(--ink-soft);
  padding: var(--space-xl) 0;
}
.wrk-list__group {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--home-red);
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}
.wrk-list__group:not(:first-child) { margin-top: var(--space-xl); }

.wrk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: var(--space-md);
}

/* --- Worker card [redesigned]: photo-forward, minimal chrome —
   the photo sits inset inside the card's own padding (not
   edge-to-edge), the work type is named quietly in the upper-left
   corner over the photo, and the upper-right is left empty on
   purpose. Shadow is subtle and present at rest, not just on
   hover — this card reads as a flat, resting object, not a button.
   Colors stay inside the black/white/red system already used by
   Home/Services/the rest of this page — no new colors added. --- */
.wrk-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 10px;
  text-align: left;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wrk-card:hover,
.wrk-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

/* Photo block — inset inside the card's padding, its own corner
   radius, wider than tall (6:5) so the card stays short, with the
   crop anchored to the top so faces aren't cut off. */
.wrk-card__media {
  position: relative;
  aspect-ratio: 6 / 5;
  border-radius: 16px;
  background: var(--home-black);
  overflow: hidden;
}
.wrk-card__avatar {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.wrk-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--home-black);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
}
/* Work type — small, minimal label, upper-left over the photo.
   Upper-right is intentionally left empty. */
.wrk-card__type {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(10, 10, 10, 0.55);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
}

.wrk-card__body { padding: 12px 6px 0; }

/* Name + status dot, on one row (wraps on a long name rather than
   overflowing). .wrk-card__status / --available / --busy below are
   NOT used by this row — those three classes are kept as-is because
   the Individual Worker Request modal's own status line (#iwmStatus,
   set from JS) still reuses them; this listing card now uses the
   separate .wrk-card__statusdot component instead. */
.wrk-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.wrk-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.wrk-card__statusdot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.wrk-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wrk-card__statusdot--available { color: var(--home-black); }
.wrk-card__statusdot--available .wrk-card__dot { background: var(--good); }
.wrk-card__statusdot--busy { color: var(--ink-soft); }
.wrk-card__statusdot--busy .wrk-card__dot { background: var(--ink-soft); }

.wrk-card__status {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.wrk-card__status--available { color: var(--home-black); }
.wrk-card__status--busy { color: var(--ink-soft); }

/* Short bio/description — clamped to 2 lines so a long bio never
   grows the card unevenly against its row-mates; falls back to
   "{Trade} worker" in the markup when the worker has no bio yet. */
.wrk-card__desc {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(13px * 1.5 * 2);
}

/* 3-column stat row — rating / experience / rate, short thin
   dividers between (not around), no rule above it — the gap down
   from the description is carried entirely by this row's own
   margin-top. */
.wrk-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 12px;
}
.wrk-card__stat {
  text-align: center;
  padding: 0 0.5rem;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.wrk-card__stat:first-child { border-left: none; padding-left: 0; }
.wrk-card__stat:last-child { padding-right: 0; }
.wrk-card__stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wrk-card__star { color: var(--caution); } /* existing site token, not a new color */
.wrk-card__stat-label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* .wrk-card__toggle: overrides the shared absolute-positioned "+"
   circle (.reqm-worker-card__toggle, .wrk-card__toggle, defined
   below) with a full-width labeled pill — for this listing card
   only; the modal's own worker-select grid keeps the small circle
   it already had, untouched. */
.wrk-card__body .wrk-card__toggle {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  height: 48px;
  margin-top: 14px;
  border-radius: var(--radius-pill);
  background: var(--home-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0;
}
.wrk-card__body .wrk-card__toggle svg { flex-shrink: 0; }
.wrk-card__body .wrk-card__toggle:hover { background: var(--home-red); }

/* --- Responsive --- */
@media (max-width: 560px) {
  .wrk-hero__filters { flex-direction: column; align-items: stretch; }
  .wrk-hero__search,
  .wrk-hero__select,
  .wrk-hero__filters .btn--ghost { max-width: none; width: 100%; justify-content: center; }
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 900px) {
  .hero__content {
    text-align: center;
    max-width: none;
  }
  .hero__subtext {
    margin-left: auto;
    margin-right: auto;
  }
  .hero__cta-row {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .navbar__inner { width: calc(100% - 32px); }
  .navbar__right { gap: 12px; }
  .navbar__toggle {
    display: flex;
  }

  /* Collapsed by default; script.js toggles .is-open on tap. */
  .navbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E0DB;
    box-shadow: 0 14px 24px -18px rgba(15, 15, 16, 0.25);
  }
  .navbar__links.is-open {
    display: flex;
  }
  .navbar__links a {
    padding: 14px 16px;
    border-bottom: 1px solid #E2E0DB;
    border-left: 3px solid transparent;
  }
  .navbar__links a:hover,
  .navbar__links a.is-active {
    border-bottom-color: #E2E0DB;
    border-left-color: #FF393E;
  }

  .stats {
    gap: var(--space-lg);
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: 100vh;
  }
}
/* ============================================
   PROFILE DROPDOWN (logged-in navbar)
============================================ */
.profile-menu {
  position: relative;
}

.profile-menu__trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-pill);
}
.profile-menu__trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.profile-menu__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blueprint);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.profile-menu__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #FFFFFF;
}

.profile-menu__dropdown {
  display: none; /* toggled to flex by script.js */
  flex-direction: column;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  min-width: 160px;
  overflow: hidden;
  z-index: 20;
}

.profile-menu__dropdown.is-open {
  display: flex;
}

.profile-menu__dropdown a {
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  color: var(--ink);
}
.profile-menu__dropdown a:hover {
  background: var(--paper-alt);
}

.profile-menu__logout {
  color: #C0392B;
  border-top: 1px solid var(--line);
}

/* ============================================
   NOTIFICATION BELL (logged-in navbar)
   Sits beside .profile-menu, same trigger/dropdown toggle pattern
   (script.js adds ".notif-bell__trigger"/".notif-bell__dropdown" to
   the exact same open/close logic as ".profile-menu__trigger").
============================================ */
.notif-bell {
  position: relative;
}

.notif-bell__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  color: #FFFFFF;
}
.notif-bell__trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.notif-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 16px;
  text-align: center;
}

.notif-bell__dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(440px, 92vw);
  max-height: min(480px, 70vh);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  z-index: 20;
}
.notif-bell__dropdown.is-open {
  display: flex;
}

.notif-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}

.notif-bell__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.notif-bell__markall-form {
  margin: 0;
}

.notif-bell__markall {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hivis-deep);
  padding: 0;
}
.notif-bell__markall:hover {
  text-decoration: underline;
}

.notif-bell__list {
  overflow-y: auto;
}

.notif-bell__empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.notif-item:last-child {
  border-bottom: none;
}
.notif-item:hover {
  background: var(--paper-alt);
}
.notif-item--unread {
  background: #FDF8EC; /* restrained warm tint, matches --hivis family */
}
.notif-item--unread:hover {
  background: #FBF1D8;
}

.notif-item__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* One quiet neutral treatment for every notification type — a rejection
   is the only case that still needs to read as different at a glance,
   so it alone keeps a (muted) accent color. Kept as separate classes
   so includes/nav.php's nav_notification_icon() needs no changes. */
.notif-item__icon--blueprint,
.notif-item__icon--hivis,
.notif-item__icon--good       { background: var(--paper-alt); color: var(--ink-soft); }
.notif-item__icon--danger     { background: rgba(192, 57, 43, 0.1); color: var(--danger); }

.notif-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.notif-item__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.notif-item__desc {
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-item__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.notif-bell__viewall {
  display: block;
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blueprint);
  border-top: 1px solid var(--line);
  background: var(--paper-alt);
}
.notif-bell__viewall:hover {
  background: var(--line);
}

@media (max-width: 640px) {
  .notif-bell__dropdown {
    /* Stays anchored under the bell (same as desktop) instead of
       jumping to a hardcoded fixed position — a guessed pixel offset
       there could land the dropdown detached from the trigger on a
       page with a taller/shorter navbar. */
    right: -0.5rem;
    width: min(360px, 94vw);
  }
}

/* --- Navbar-only restyle (white bar) of the account area. Scoped to
   .navbar because the admin / worker / leadman panels reuse the same
   .profile-menu / .notif-bell / .notif-item base rules above and keep
   their own look. Dropdowns: white, square, light border, dark text,
   red on hover/active. --- */
.navbar .profile-menu__trigger:hover,
.navbar .notif-bell__trigger:hover { background: #F1F0ED; }
.navbar .profile-menu__avatar { background: #0F0F10; }
.navbar .profile-menu__name { color: #0F0F10; }
.navbar .notif-bell__trigger { color: #0F0F10; }
.navbar .notif-bell__badge { background: #FF393E; }
.navbar .profile-menu__dropdown,
.navbar .notif-bell__dropdown {
  background: #FFFFFF;
  border: 1px solid #E2E0DB;
  border-radius: 0;
  box-shadow: 0 12px 28px -16px rgba(15, 15, 16, 0.28);
}
.navbar .profile-menu__dropdown a { color: #0F0F10; }
.navbar .profile-menu__dropdown a:hover { background: #F1F0ED; color: #FF393E; }
.navbar .profile-menu__logout { color: #0F0F10; border-top-color: #E2E0DB; }
.navbar .notif-bell__markall { color: #D92B30; }
.navbar .notif-item:hover { background: #F1F0ED; }
.navbar .notif-item--unread { background: #FFF3F3; }
.navbar .notif-item--unread:hover { background: #FFE8E8; }
.navbar .notif-bell__viewall { color: #0F0F10; background: #F1F0ED; border-top-color: #E2E0DB; }
.navbar .notif-bell__viewall:hover { background: #E2E0DB; color: #FF393E; }

/* ============================================
   NOTIFICATION HISTORY (user/notifications.php)
   Same page-shell pattern as .bh (Booking History): a title row, then
   one list. No tabs/filters/charts — kept deliberately minimal.
============================================ */
.ntf {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.ntf__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.ntf__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink);
}

.ntf__subtext {
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

.ntf__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border-radius: var(--radius-md);
}

.ntf__list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ntf-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.ntf-row:last-child {
  border-bottom: none;
}
.ntf-row:hover {
  background: var(--paper-alt);
}
.ntf-row--unread {
  background: #FDF8EC;
}
.ntf-row--unread:hover {
  background: #FBF1D8;
}

.ntf-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ntf-row__top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ntf-row__title {
  font-size: 0.95rem;
  font-weight: 600;
}

.ntf-row__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hivis);
  flex: none;
}

.ntf-row__desc {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.ntf-row__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .ntf-row {
    flex-wrap: wrap;
  }
  .ntf-row__time {
    padding-left: calc(30px + 0.9rem);
  }
}

/* ============================================
   CLIENT DASHBOARD (user/dashboard.php) — approved preview design.
   Dashboard-scoped "cd-*" names; square cards, no shadows, big text
   buttons use the shared --btn-radius. Entrance uses the site's
   .reveal -> .is-visible system, staggered here with CSS only.
   ============================================ */
.cd {
  --cd-ink: #0F0F10; --cd-soft: #5B5B5E; --cd-tint: #F1F0ED; --cd-tint2: #E8E6E1; --cd-line: #E2E0DB;
  --cd-ac: #FF393E; --cd-ac-ink: #0A0A0A; --cd-ac-soft: #FFE9E9; --cd-ac-deep: #C8161B;
  --cd-ok: #0F7B3F; --cd-ok-soft: #E3F3EA;
  font-family: var(--font-body, 'Inter', Arial, sans-serif);
  color: var(--cd-ink);
  background: #FFFFFF;
  padding: 56px 0 120px;
  overflow-x: hidden;
}
.cd__wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.cd__wrap > .form-alert { margin: 0 0 24px; }

.cd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.cd-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.cd-sub { margin-top: 10px; color: var(--cd-soft); font-size: 1.02rem; }

/* big text button — same shape/behavior as .home-cta */
.cd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px;
  border-radius: var(--btn-radius);
  background: var(--cd-ac); color: var(--cd-ac-ink);
  border: 2px solid var(--cd-ac);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.3s, border-color 0.3s, transform 0.15s;
}
.cd-btn::before {
  content: ""; position: absolute; inset: 0; background: var(--cd-ink);
  transform: translateY(101%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); z-index: -1;
}
.cd-btn:hover, .cd-btn:focus-visible { color: #FFFFFF; border-color: var(--cd-ink); }
.cd-btn:hover::before, .cd-btn:focus-visible::before { transform: none; }
.cd-btn:active { transform: scale(0.98); }
.cd-btn:focus-visible { outline: 2px solid var(--cd-ac); outline-offset: 3px; }

.cd-link {
  background: none; border: 0; cursor: pointer; padding: 8px 2px;
  font: 600 0.92rem var(--font-body, 'Inter', Arial, sans-serif); color: var(--cd-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.cd-link:hover { color: var(--cd-ac-deep); }
.cd-link:focus-visible { outline: 2px solid var(--cd-ac); outline-offset: 3px; }

/* stats (filter) */
.cd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; }
.cd-stat {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 28px;
  background: var(--cd-tint); color: var(--cd-ink); border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font: inherit; transition: background 0.2s, transform 0.2s;
}
.cd-stat:hover { background: var(--cd-tint2); transform: translateY(-2px); }
.cd-stat.is-active { background: var(--cd-ink); color: #FFFFFF; }
.cd-stat:focus-visible { outline: 2px solid var(--cd-ac); outline-offset: 3px; }
.cd-stat strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; }
.cd-stat span { font-size: 0.98rem; font-weight: 500; }
.cd-stat.is-active span { color: #D6D6D6; }

.cd-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.35rem; margin: 0 0 18px; }

/* booking card */
.cd-list { display: flex; flex-direction: column; gap: 24px; }
.cd-card { background: #FFFFFF; outline: 1px solid var(--cd-line); }
.cd-card[hidden] { display: none; }
.cd-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 32px 32px 24px; }
.cd-card__ref { font-size: 0.92rem; color: var(--cd-soft); font-weight: 500; }
.cd-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.05; margin: 6px 0 0; }
.cd-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 16px; font-size: 0.98rem; }
.cd-meta-item { display: flex; align-items: center; gap: 8px; }
.cd-meta-item svg { flex: none; color: var(--cd-soft); }
.cd-worker { display: flex; align-items: center; gap: 10px; }
.cd-avs { display: flex; }
.cd-av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cd-tint2); color: var(--cd-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; overflow: hidden;
  box-shadow: 0 0 0 2px #FFFFFF;
}
.cd-av + .cd-av { margin-left: -10px; }
.cd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-card__badges { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }

.cd-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-weight: 600; font-size: 0.88rem; background: var(--cd-tint); color: var(--cd-ink); }
.cd-badge i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cd-badge--act { background: var(--cd-ac-soft); color: var(--cd-ac-deep); }
.cd-badge--done { background: var(--cd-ok-soft); color: var(--cd-ok); }

/* next step */
.cd-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 32px; padding: 24px 28px; background: var(--cd-ink); color: #FFFFFF; }
.cd-next__k { font-size: 0.9rem; color: #BDBDBD; font-weight: 500; }
.cd-next__t { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; margin-top: 4px; }
.cd-next__s { margin-top: 6px; font-size: 0.92rem; color: #D6D6D6; }
.cd-next .cd-btn:hover, .cd-next .cd-btn:focus-visible { border-color: #FFFFFF; }
.cd-next .cd-btn::before { background: #FFFFFF; }
.cd-next .cd-btn:hover, .cd-next .cd-btn:focus-visible { color: var(--cd-ink); }

/* progress */
.cd-prog { padding: 32px; }
.cd-prog__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.cd-prog__step { font-weight: 700; font-size: 1rem; }
.cd-prog__step span { color: var(--cd-soft); font-weight: 500; }
.cd-prog__note { color: var(--cd-soft); font-size: 0.92rem; }
.cd-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.cd-track::before { content: ""; position: absolute; left: 5%; right: 5%; top: 10px; height: 3px; background: var(--cd-tint2); }
.cd-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 0.82rem; color: var(--cd-soft); padding: 0 4px; line-height: 1.3; }
.cd-track__dot { width: 23px; height: 23px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--cd-tint2); position: relative; z-index: 1; }
.cd-track li.is-done .cd-track__dot { background: var(--cd-ink); border-color: var(--cd-ink); }
.cd-track li.is-current { color: var(--cd-ink); font-weight: 700; }
.cd-track li.is-current .cd-track__dot { background: var(--cd-ac); border-color: var(--cd-ac); box-shadow: 0 0 0 6px var(--cd-ac-soft); animation: cd-pulse 2s infinite; }
@keyframes cd-pulse { 0%, 100% { box-shadow: 0 0 0 6px var(--cd-ac-soft); } 50% { box-shadow: 0 0 0 10px rgba(255, 57, 62, 0.08); } }

/* amounts strip */
.cd-amounts { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--cd-tint); margin: 0 32px; }
.cd-amt { padding: 20px 24px; }
.cd-amt + .cd-amt { box-shadow: inset 1px 0 0 var(--cd-line); }
.cd-amt span { display: block; font-size: 0.9rem; color: var(--cd-soft); font-weight: 500; }
.cd-amt strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cd-amt em { display: block; margin-top: 4px; font-style: normal; font-size: 0.82rem; color: var(--cd-soft); }
.cd-amt--paid strong { color: var(--cd-ok); }
.cd-amt--balance strong { color: var(--cd-ac-deep); }

.cd-card__foot { display: flex; align-items: center; gap: 20px; padding: 24px 32px 32px; }

/* empty + history link */
.cd-empty { padding: 48px 32px; background: var(--cd-tint); text-align: center; }
.cd-empty[hidden] { display: none; }
.cd-empty__t { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.01em; }
.cd-empty__s { margin: 8px auto 24px; color: var(--cd-soft); max-width: 44ch; }
.cd-empty__s:last-child { margin-bottom: 0; }
.cd-more { margin-top: 24px; font-weight: 600; }
.cd-more[hidden] { display: none; }
.cd-more a { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 3px; }
.cd-more a:hover { color: var(--cd-ac-deep); }

/* entrance: .reveal / .is-visible (script.js) staggered with CSS */
.cd__wrap > .reveal:nth-child(2) { transition-delay: 0.07s; }
.cd__wrap > .reveal:nth-child(3) { transition-delay: 0.14s; }
.cd__wrap > .reveal:nth-child(4) { transition-delay: 0.21s; }
.cd-list > .reveal:nth-child(2) { transition-delay: 0.07s; }
.cd-list > .reveal:nth-child(3) { transition-delay: 0.14s; }
@media (prefers-reduced-motion: reduce) {
  .cd-track li.is-current .cd-track__dot { animation: none; }
  .cd-btn, .cd-btn::before, .cd-stat { transition: none; }
  .cd__wrap > .reveal, .cd-list > .reveal { transition-delay: 0s; }
}

@media (max-width: 900px) {
  .cd-amounts { grid-template-columns: repeat(2, 1fr); }
  .cd-amt:nth-child(3) { box-shadow: inset 0 1px 0 var(--cd-line); }
  .cd-amt:nth-child(4) { box-shadow: inset 1px 0 0 var(--cd-line), inset 0 1px 0 var(--cd-line); }
}
@media (max-width: 640px) {
  .cd { padding: 36px 0 80px; }
  .cd__wrap { width: calc(100% - 32px); }
  .cd-head .cd-btn { width: 100%; }
  .cd-stats { gap: 8px; }
  .cd-stat { padding: 16px 14px; }
  .cd-stat strong { font-size: 1.9rem; }
  .cd-stat span { font-size: 0.82rem; }
  .cd-card__top { flex-direction: column; padding: 24px 20px 20px; }
  .cd-card__badges { justify-content: flex-start; }
  .cd-next { margin: 0 20px; padding: 20px; }
  .cd-next .cd-btn, .cd-empty .cd-btn { width: 100%; }
  .cd-prog { padding: 24px 20px; }
  .cd-prog__head { flex-direction: column; gap: 4px; }
  .cd-track { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .cd-track::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .cd-track li { flex-direction: row; text-align: left; gap: 16px; padding: 8px 0; font-size: 0.95rem; }
  .cd-amounts { margin: 0 20px; }
  .cd-amt { padding: 16px; }
  .cd-amt strong { font-size: 1.3rem; }
  .cd-card__foot { padding: 20px 20px 24px; flex-wrap: wrap; }
}

/* --- Small action buttons (ported from admin/admin.css so /user/ pages
   that already reference .btn--sm — this one included — actually get
   styled; style.css never defined it before). --- */
.btn--sm { padding: 0.45rem 1rem; font-size: 0.82rem; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #9c2f22; }

/* Solid variant, used only for the modal's actual "Remove booking"
   confirm button — one step louder than the quiet .btn--remove trigger,
   since this is the real point of no return. */
.btn--remove-solid {
  background: var(--danger);
  color: #FFFFFF;
}
.btn--remove-solid:hover { background: #9c2f22; }
.btn--remove-solid:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Remove-booking confirmation modal — small, generic, reusable
   overlay pattern (title + body + two actions). Not the request-flow's
   .reqm-overlay system (that one carries a lot of request-step-specific
   CSS that doesn't belong here); this reuses the same backdrop/shadow
   values for visual consistency without pulling that in. --- */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 10, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.confirm-modal {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  max-width: 440px;
  width: 100%;
  padding: var(--space-lg);
}
.confirm-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.confirm-modal__body {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: var(--space-md);
}
@media (max-width: 480px) {
  .confirm-modal__actions { flex-direction: column-reverse; }
  .confirm-modal__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================
   BOOKING DETAILS MODAL (user/dashboard.php)
   A self-contained component with its own exact design-token palette
   (given spec values, not the site's --hivis/--home-red/--danger
   tokens) — scoped entirely under .bkd-* classes used nowhere else,
   so none of this can collide with or affect any other page,
   including Admin. Content is filled in by JS from the
   booking_details.php JSON response; this is just the shell + visuals.
============================================ */
:root {
  --bkd-red: #E02D2D;
  --bkd-red-light: #FDE2E2;
  --bkd-red-dark: #B91C1C;
  --bkd-leader-text: #991B1B;
  --bkd-green: #16A34A;
  --bkd-text: #141414;
  --bkd-text-soft: #525252;
  --bkd-text-muted: #737373;
  --bkd-border: #E5E5E5;
  --bkd-divider: #EEEEEE;
  --bkd-border-empty: #D4D4D4;
  --bkd-fill: #F5F5F4;
  --bkd-footer-bg: #FAFAFA;
}

.bkd-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 16px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 150ms ease;
}
.bkd-overlay.is-open { opacity: 1; }

.bkd-modal {
  background: #FFFFFF;
  width: 760px;
  max-width: calc(100% - 32px);
  max-height: calc(100vh - 96px);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  font-family: 'IBM Plex Sans', var(--font-body), sans-serif;
  color: var(--bkd-text);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.bkd-overlay.is-open .bkd-modal { opacity: 1; transform: translateY(0); }
@media (max-width: 800px) {
  .bkd-modal { width: calc(100% - 32px); }
}

/* --- Header --- */
.bkd-modal__header {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--bkd-divider);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.bkd-modal__head-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bkd-modal__eyebrow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bkd-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bkd-text-muted);
}
.bkd-modal__header .status-pill { font-size: 11px; padding: 4px 10px; }
.bkd-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--bkd-text);
}
.bkd-modal__meta { font-size: 14px; color: var(--bkd-text-soft); }
.bkd-modal__close {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--bkd-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--bkd-text);
  transition: background 0.15s ease;
}
.bkd-modal__close:hover { background: var(--bkd-fill); }

/* --- Body --- */
.bkd-modal__body {
  padding: 22px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bkd-section__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bkd-text-muted);
  margin-bottom: 10px;
}

/* 3a. Stepper */
.bkd-stepper { display: flex; overflow-x: auto; padding-bottom: 2px; }
.bkd-stepper__step {
  flex: 1 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
}
.bkd-stepper__step::before {
  content: '';
  position: absolute;
  top: 11px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--bkd-border);
  z-index: 0;
}
.bkd-stepper__step:first-child::before { content: none; }
.bkd-stepper__dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--bkd-border-empty);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--bkd-text-muted);
  z-index: 1;
  flex-shrink: 0;
}
.bkd-stepper__label { font-size: 11px; color: var(--bkd-text-muted); line-height: 1.25; }
.bkd-stepper__step--done::before { background: var(--bkd-green); }
.bkd-stepper__step--done .bkd-stepper__dot { background: var(--bkd-green); border-color: var(--bkd-green); color: #fff; }
.bkd-stepper__step--done .bkd-stepper__label { color: var(--bkd-text); }
.bkd-stepper__step--current .bkd-stepper__dot {
  background: var(--bkd-red);
  border-color: var(--bkd-red);
  color: #fff;
  box-shadow: 0 0 0 4px var(--bkd-red-light);
}
.bkd-stepper__step--current .bkd-stepper__label { font-weight: 700; color: var(--bkd-text); }

/* 3b. Next-step box */
.bkd-next {
  background: var(--bkd-fill);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bkd-next__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  color: var(--bkd-red);
  flex-shrink: 0;
}
.bkd-next__body { flex: 1 1 200px; min-width: 0; }
.bkd-next__headline { font-weight: 700; font-size: 15px; color: var(--bkd-text); }
.bkd-next__sentence { font-size: 13px; color: var(--bkd-text-soft); margin-top: 2px; }
.bkd-next__action { flex-shrink: 0; }

.bkd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.bkd-btn--primary {
  background: var(--bkd-red);
  color: #FFFFFF;
  font-size: 13px;
  padding: 10px 18px;
  transition: background 0.15s ease;
}
.bkd-btn--primary:hover { background: var(--bkd-red-dark); }

/* 3c. Two cards */
.bkd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bkd-card { border: 1px solid var(--bkd-border); border-radius: 16px; padding: 18px; min-width: 0; }

.bkd-kv { display: flex; flex-direction: column; gap: 10px; }
.bkd-kv__row { display: flex; justify-content: space-between; gap: 12px; }
.bkd-kv__label { font-size: 14px; color: var(--bkd-text-muted); flex-shrink: 0; }
.bkd-kv__value { font-size: 14px; font-weight: 500; color: var(--bkd-text); text-align: right; }

.bkd-pay__amount { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--bkd-text); }
.bkd-pay__of { font-size: 13px; color: var(--bkd-text-muted); margin-top: 2px; }
.bkd-pay__bar { height: 6px; border-radius: 3px; background: var(--bkd-divider); margin: 12px 0; overflow: hidden; }
.bkd-pay__bar-fill { height: 100%; background: var(--bkd-green); }
.bkd-pay__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 6px 0; gap: 10px; }
.bkd-pay__row--balance span:last-child { color: var(--bkd-red-dark); font-weight: 600; }
.bkd-pay__row--balance.is-paid span:last-child { color: var(--bkd-green); font-weight: 600; }
.bkd-pay__receipt-link { color: var(--bkd-red); text-decoration: underline; font-size: 13px; margin-left: 6px; }

@media (max-width: 760px) {
  .bkd-cards { grid-template-columns: 1fr; }
}

/* 3d. Crew */
.bkd-crew { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bkd-crew-card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--bkd-border);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}
.bkd-crew-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bkd-fill);
  color: var(--bkd-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.bkd-crew-card--leader .bkd-crew-card__avatar { background: #121212; color: #FFFFFF; }
.bkd-crew-card__body { min-width: 0; }
.bkd-crew-card__name { font-size: 14px; font-weight: 600; color: var(--bkd-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bkd-crew-card__exp { font-size: 12px; color: var(--bkd-text-muted); margin-top: 1px; }
.bkd-leader-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  background: var(--bkd-red-light);
  color: var(--bkd-leader-text);
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}
.bkd-crew-empty { font-size: 13px; color: var(--bkd-text-muted); }
@media (max-width: 480px) {
  .bkd-crew { grid-template-columns: 1fr; }
}

/* 3e. Daily progress */
.bkd-day { display: flex; align-items: center; gap: 14px; border: 1px solid var(--bkd-border); border-radius: 14px; padding: 14px; flex-wrap: wrap; }
.bkd-day + .bkd-day { margin-top: 10px; }
.bkd-day__date { width: 96px; flex-shrink: 0; }
.bkd-day__num { font-family: var(--font-mono); font-size: 11px; color: var(--bkd-text-muted); }
.bkd-day__weekday { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--bkd-text); }
.bkd-day__photos { display: flex; gap: 8px; flex: 1 1 160px; min-width: 0; }
.bkd-day__photo-box {
  flex: 1;
  height: 64px;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--bkd-text-muted);
  overflow: hidden;
}
.bkd-day__photo-box--empty { border: 1.5px dashed var(--bkd-border-empty); background: #FFFFFF; }
.bkd-day__photo-box img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.bkd-day__status { flex-shrink: 0; }
.bkd-day-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}
.bkd-day-pill--upcoming { background: var(--bkd-fill); color: var(--bkd-text-soft); }
.bkd-day-pill--in_progress { background: #DBEAFE; color: #1E3A8A; }
.bkd-day-pill--done { background: #DCF3E6; color: var(--bkd-green); }

/* --- Footer --- */
.bkd-modal__footer {
  padding: 16px 28px;
  border-top: 1px solid var(--bkd-divider);
  background: var(--bkd-footer-bg);
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.bkd-modal__footer-help { font-size: 13px; color: var(--bkd-text-soft); }
.bkd-modal__footer-help a { color: var(--bkd-red); font-weight: 600; }
.bkd-modal__footer-actions { display: flex; gap: 10px; }
.bkd-btn--close {
  height: 44px;
  padding: 0 20px;
  background: #FFFFFF;
  border: 1px solid var(--bkd-border-empty);
  color: var(--bkd-text);
  font-size: 14px;
}
.bkd-btn--close:hover { background: var(--bkd-fill); }
.bkd-btn--remove-outline {
  height: 44px;
  padding: 0 20px;
  background: #FFFFFF;
  border: 1px solid var(--bkd-red);
  color: var(--bkd-red);
  font-size: 14px;
}
.bkd-btn--remove-outline:hover { background: var(--bkd-red-light); }
.bkd-btn--add-day {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--bkd-red); border: 1px solid var(--bkd-red); color: #FFFFFF;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.bkd-btn--add-day:hover { background: var(--bkd-red-dark); border-color: var(--bkd-red-dark); }

/* --- Loading skeleton --- */
.bkd-skeleton { display: flex; flex-direction: column; gap: 14px; }
.bkd-skeleton__bar {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #F0F0F0 25%, #F8F8F8 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: bkd-shimmer 1.2s ease-in-out infinite;
}
@keyframes bkd-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.bkd-error { font-size: 14px; color: var(--bkd-red-dark); padding: 12px 0; }

body.bkd-scroll-lock { overflow: hidden; }

.status-pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.status-pill--pending { background: #FCEFCB; color: #8A6D1D; }
.status-pill--ongoing { background: #DDEBFF; color: var(--blueprint); }
.status-pill--complete { background: #DCF3E6; color: var(--good); }

/* Exact booking/payment status modifiers — client & worker pages render
   status-pill--<?= $status ?> with the real enum value (pending_payment,
   confirmed, in_progress, etc.), not the three generic names above, so
   those need their own color rules too (mirrors admin/admin.css's block,
   kept in the client/worker --home-red-safe palette instead of gold). */
.status-pill--confirmed,
.status-pill--assigned,
.status-pill--scheduled { background: #DDEBFF; color: var(--blueprint); }
.status-pill--verified,
.status-pill--completed,
.status-pill--reviewed { background: #DCF3E6; color: var(--good); }
.status-pill--pending_payment,
.status-pill--proof_submitted,
.status-pill--payment_verification,
.status-pill--under_review { background: #FCEFCB; color: #8A6D1D; }
.status-pill--in_progress,
.status-pill--awaiting_completion,
.status-pill--awaiting_final_payment,
.status-pill--extension { background: #FDE6CC; color: #9A5B13; }
.status-pill--rejected,
.status-pill--cancelled { background: #F7D9D4; color: var(--danger); }
.status-pill--unpaid { background: #EFEAF0; color: var(--ink-soft); }

/* Overall job-progress overview (worker/booking-update.php and
   user/confirm-completion.php, user/booking-progress.php) — a small
   chain of pills showing where a booking sits in the Job Started ->
   ... -> Final Completion sequence, separate from and alongside the
   day-by-day before/after grid. Shared here (not duplicated per page)
   since both the worker and client side render the same steps via
   render_progress_overview() in includes/functions.php. */
.progress-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.25rem; }
.progress-step {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--paper-alt);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.progress-step--done { background: #DCF3E6; color: var(--good); border-color: transparent; }
.progress-step--current { background: #FDE6CC; color: #9A5B13; border-color: transparent; }
.progress-step__sep { color: var(--line); font-size: 0.8rem; }

/* ============================================
   SETTINGS PAGE
============================================ */
.settings {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.settings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
}

.settings-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

/* .filter-pill / .filter-pill--active are still used by workers.php
   and the admin bookings/payments filter rows — kept as-is. The old
   .history*-prefixed rules that used to style this page were removed
   below in favor of the new .bh-* (Booking History) component, which
   nothing else references. */
.filter-pill {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.filter-pill--active {
  background: var(--blueprint);
  color: #fff;
  border-color: var(--blueprint);
}

/* ============================================
   BOOKING HISTORY PAGE (user/history.php) — apolido_history_preview.html
   design. Every rule is scoped under .bh (the page <section>) or a
   .bh-* component class used nowhere else, so nothing here can reach
   the Dashboard, admin, worker or leadman pages. Tokens are --bh-*.
   Big text buttons use the shared --btn-radius; chips, tabs, fields
   and icon-only bits stay square. Entrance reuses the site-wide
   .reveal -> .is-visible system (script.js), staggered with CSS only.
============================================ */
:root {
  --bh-ink: #0F0F10;
  --bh-soft: #5B5B5E;
  --bh-tint: #F1F0ED;
  --bh-tint2: #E8E6E1;
  --bh-line: #E2E0DB;
  --bh-ac: #FF393E;
  --bh-ac-ink: #0A0A0A;
  --bh-ac-soft: #FFE9E9;
  --bh-ac-deep: #C8161B;
  --bh-ok: #0F7B3F;
  --bh-ok-soft: #E3F3EA;
}

.bh { max-width: 1200px; margin: 0 auto; padding: 56px var(--space-lg) 120px; font-family: 'Inter', var(--font-body), sans-serif; color: var(--bh-ink); line-height: 1.55; }

.bh__title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.bh__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--bh-ink); }
.bh__subtext { font-size: 1.02rem; color: var(--bh-soft); margin-top: 10px; }
.bh__cta { flex-shrink: 0; }

/* --- Buttons: dark fill slides up on hover; keyboard focus ring kept --- */
.bh-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 28px; border-radius: var(--btn-radius);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid var(--bh-ac); background: var(--bh-ac); color: var(--bh-ac-ink);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}
.bh-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bh-ink); transform: translateY(101%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bh-btn:hover, .bh-btn:focus-visible { color: #FFFFFF; border-color: var(--bh-ink); }
.bh-btn:hover::before, .bh-btn:focus-visible::before { transform: none; }
.bh-btn:active { transform: scale(0.98); }
.bh-btn:focus-visible { outline: 2px solid var(--bh-ac); outline-offset: 3px; }
.bh-btn--primary { background: var(--bh-ac); }
.bh-btn--outline, .bh-btn--ghost { background: #FFFFFF; color: var(--bh-ink); border-color: var(--bh-ink); }
.bh-btn--sm { height: 46px; padding: 0 20px; font-size: 0.85rem; border-radius: 12px; }

/* --- Filter panel --- */
.bh-toolbar { background: var(--bh-tint); padding: 20px; }
.bh-toolbar__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bh-toolbar__row + .bh-toolbar__row { margin-top: 16px; }

.bh-field { position: relative; display: flex; align-items: center; }
.bh-field[hidden] { display: none; }
.bh-field--grow { flex: 1 1 280px; min-width: 0; }
.bh-field--date, .bh-field--sort { flex: 0 0 220px; }
.bh-field__icon { position: absolute; left: 16px; color: var(--bh-soft); pointer-events: none; }
.bh-field__input {
  height: 52px; width: 100%; padding: 0 16px 0 46px;
  background: #FFFFFF; border: 2px solid transparent; border-radius: 0;
  font-family: inherit; font-size: 0.98rem; color: var(--bh-ink);
  transition: border-color 0.2s ease;
}
.bh-field__input::placeholder { color: #8A8A8D; }
.bh-field__input[type="date"] { padding-left: 16px; }
.bh-field__select { padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; font-weight: 500; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B5B5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.bh-field__input:focus { outline: none; border-color: var(--bh-ink); }

/* --- Status tabs --- */
.bh-tabs { gap: 8px; }
.bh-tab {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px; background: #FFFFFF; color: var(--bh-ink);
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.bh-tab:hover { background: var(--bh-tint2); }
.bh-tab:focus-visible { outline: 2px solid var(--bh-ac); outline-offset: 2px; }
.bh-tab__count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  background: var(--bh-tint); color: var(--bh-ink); font-size: 0.8rem; font-weight: 700;
}
.bh-tab.is-active, .bh-tab.is-active:hover { background: var(--bh-ink); color: #FFFFFF; }
.bh-tab.is-active .bh-tab__count { background: var(--bh-ac); color: var(--bh-ac-ink); }

.bh > .bh-result-count { margin: 24px 0 14px; font-size: 0.95rem; color: var(--bh-soft); }

/* --- Empty state --- */
.bh-empty { background: var(--bh-tint); padding: 56px 24px; text-align: center; }
.bh-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--bh-ink); }
.bh-empty__text { font-size: 0.98rem; color: var(--bh-soft); margin-top: 6px; }

/* --- Booking list: info | grey payment panel --- */
.bh-list { display: flex; flex-direction: column; gap: 16px; }
.bh-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  background: #FFFFFF; outline: 1px solid var(--bh-line);
  transition: outline-color 0.2s ease;
}
.bh-card:hover { outline-color: var(--bh-ink); }

.bh-card__left { min-width: 0; padding: 28px 32px; display: flex; flex-direction: column; gap: 0; }
.bh-card__line1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bh-card__ref { font-size: 0.95rem; font-weight: 600; color: var(--bh-soft); font-variant-numeric: tabular-nums; }
.bh-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-family: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--bh-tint2); color: var(--bh-ink);
}
.bh-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.bh-badge--pending, .bh-badge--attention { background: var(--bh-ac-soft); color: var(--bh-ac-deep); }
.bh-badge--verification, .bh-badge--blue, .bh-badge--purple { background: var(--bh-tint2); color: var(--bh-ink); }
.bh-badge--green { background: var(--bh-ok-soft); color: var(--bh-ok); }
.bh-badge--cancelled, .bh-badge--neutral { background: var(--bh-tint); color: var(--bh-soft); }
.bh-card__trade { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--bh-ink); margin-top: 12px; }
.bh-card__type { margin-top: 6px; font-weight: 500; color: var(--bh-soft); }
.bh-card__line4 { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 0.98rem; color: var(--bh-ink); }
.bh-card__meta-item { display: inline-flex; align-items: center; gap: 8px; }
.bh-card__meta-item svg { color: var(--bh-soft); flex-shrink: 0; }
.bh-card__location { min-width: 0; max-width: 100%; }
.bh-card__location-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-card__requested { margin-top: 14px; font-size: 0.88rem; color: var(--bh-soft); }
.bh-card .xd-card--hist { margin-top: 14px; }

.bh-card__right { min-width: 0; padding: 28px 32px; background: var(--bh-tint); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.bh-kv-row { display: flex; flex-direction: column; gap: 0; }
.bh-kv-row__label { font-size: 0.9rem; font-weight: 500; color: var(--bh-soft); }
.bh-kv-row__value { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--bh-ink); font-variant-numeric: tabular-nums; }

.bh-pay-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.95rem; font-weight: 600; color: var(--bh-ink); }
.bh-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bh-dot--red, .bh-dot--amber { background: var(--bh-ac); }
.bh-dot--green { background: var(--bh-ok); }
.bh-dot--gray { background: #A3A3A3; }

.bh-card__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.bh-card__actions > .bh-btn { flex: 1 1 auto; }
.bh-card__actions .bk-pay-actions { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin: 0; }
.bh-card__actions .bk-pay-actions .btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 20px; border-radius: 12px; border: 2px solid var(--bh-ac);
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bh-ac); color: var(--bh-ac-ink); box-shadow: none; transform: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bh-card__actions .bk-pay-actions a.btn:hover, .bh-card__actions .bk-pay-actions a.btn:focus-visible { background: var(--bh-ink); border-color: var(--bh-ink); color: #FFFFFF; }
.bh-card__actions .bk-pay-actions .btn:focus-visible { outline: 2px solid var(--bh-ac); outline-offset: 3px; }
.bh-card__actions .bk-pay-actions .btn--disabled { opacity: 0.45; cursor: not-allowed; }
.bh-card__actions .bk-pay-status { flex: 1 1 100%; min-width: 0; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--bh-soft); }
.bh-card__actions .bk-pay-status--verified { color: var(--bh-ok); }
.bh-card__actions .bk-pay-status--rejected { color: var(--bh-ac-deep); }

.bh-load-more { display: flex; justify-content: center; margin-top: 28px; }

/* --- Entrance: .reveal / .is-visible (script.js) staggered with CSS --- */
.bh > .reveal:nth-child(2) { transition-delay: 0.07s; }
.bh > .reveal:nth-child(3) { transition-delay: 0.14s; }
.bh > .reveal:nth-child(4) { transition-delay: 0.21s; }
.bh-list > .reveal:nth-child(2) { transition-delay: 0.07s; }
.bh-list > .reveal:nth-child(3) { transition-delay: 0.14s; }
.bh-list > .reveal:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .bh > .reveal, .bh-list > .reveal { transition-delay: 0s; }
  .bh-btn, .bh-btn::before, .bh-tab, .bh-card, .bh-field__input { transition: none; }
}

@media (max-width: 900px) {
  .bh-field--grow { flex-basis: 100%; }
  .bh-field--date, .bh-field--sort { flex: 1 1 calc(50% - 6px); }
  .bh-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bh { padding: 36px 16px 80px; }
  .bh__cta { width: 100%; }
  .bh-toolbar { padding: 14px; }
  .bh-field, .bh-field--grow, .bh-field--date, .bh-field--sort { flex: 1 1 100%; min-width: 0; }
  .bh-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .bh-tabs::-webkit-scrollbar { display: none; }
  .bh-tab { flex: none; }
  .bh-card__left, .bh-card__right { padding: 22px 20px; }
  .bh-card__actions { flex-direction: column; flex-wrap: nowrap; }
  .bh-card__actions .bk-pay-status { flex: none; }
  .bh-card__actions > .bh-btn, .bh-card__actions .bk-pay-actions .btn { width: 100%; flex: none; }
  .bh-card__actions .bk-pay-actions { flex-direction: column; flex-wrap: nowrap; }
}

/* ============================================
   HOMEPAGE (index.php) — apolido_homepage_preview.html design.
   Everything the homepage needs lives in this one block. Tokens are
   --hp-* and every rule is scoped under .hp (the wrapper div around
   the page content in index.php), so none of it can leak into the
   navbar or any other page. The only rules kept OUTSIDE .hp are the
   ones other pages still share: .reveal (fade-in-on-scroll), .home-cta
   (also used by about.php / services.php) and the .section-title
   modifiers.
============================================ */

/* Fade-in-on-scroll utility. JS just toggles .is-visible; with
   JS disabled the rule below (opacity:1 by default) keeps every
   section visible, so nothing is ever hidden without a fallback. */
.reveal {
  opacity: 1;
  transform: none;
}
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Reduced motion: reveal targets show immediately, no movement. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Shared pill buttons — still used as-is by about.php / services.php.
   The homepage restyles them under .hp below. */
.home-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--home-red);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--home-red);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.home-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.home-cta--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}
.home-cta--outline:hover { border-color: #FFFFFF; }

/* .section-title itself is the shared global rule defined near the
   top of this file (used by dashboard/history/settings too) — only
   add modifiers here, never redefine its base properties. */
.section-title--center { text-align: center; }
.section-title--light { color: #FFFFFF; }

/* ---------- tokens + base ---------- */
.hp {
  --hp-ink: #0F0F10;
  --hp-soft: #5B5B5E;
  --hp-paper: #FFFFFF;
  --hp-tint: #F1F0ED;
  --hp-line: #E2E0DB;
  --hp-dark: #111112;
  --hp-dark-2: #1B1B1D;
  --hp-dark-line: #2E2E31;
  --hp-ac: #FF393E;
  --hp-ac-ink: #0A0A0A;
  font-family: var(--font-body);
  color: var(--hp-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.hp img { display: block; max-width: 100%; }
.hp h1, .hp h2, .hp h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-weight: 700;
  margin: 0;
}
.hp .section-title {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: 0;
}
.hp .wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ---------- buttons ---------- */
.hp .home-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  background: var(--hp-ac);
  color: var(--hp-ac-ink);
  border: 2px solid var(--hp-ac);
  border-radius: var(--btn-radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: none;
  box-shadow: none;
  transition: color 0.3s, border-color 0.3s;
}
.hp .home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: -1;
}
.hp .home-cta:hover,
.hp .home-cta:focus-visible { color: var(--hp-ink); border-color: #FFFFFF; transform: none; box-shadow: none; }
.hp .home-cta:hover::before,
.hp .home-cta:focus-visible::before { transform: none; }
.hp .home-cta:focus-visible { outline: 2px solid var(--hp-ac); outline-offset: 3px; }
.hp .home-cta--outline { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.hp .home-cta--outline:hover { color: var(--hp-ink); }
.hp .home-cta--ink { background: var(--hp-ink); color: #FFFFFF; border-color: var(--hp-ink); }
.hp .home-cta--ink::before { background: var(--hp-ac); }
.hp .home-cta--ink:hover,
.hp .home-cta--ink:focus-visible { color: var(--hp-ac-ink); border-color: var(--hp-ac); }
.hp .home-choose .home-cta::before { background: var(--hp-ink); }
.hp .home-choose .home-cta:hover,
.hp .home-choose .home-cta:focus-visible { color: #FFFFFF; border-color: var(--hp-ink); }

/* ---------- hero ---------- */
.hp .svchero {
  position: relative;
  background: var(--hp-dark) url('assets/img/hero.png') 70% center / cover no-repeat;
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
.hp .svchero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.86) 30%, rgba(10,10,11,0.45) 55%, rgba(10,10,11,0.08) 85%, rgba(10,10,11,0) 100%);
}
.hp .svchero__inner {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0 96px;
  min-height: 640px;
}
.hp .svchero__headline { font-size: clamp(2.3rem, 4.3vw, 4rem); margin-bottom: 24px; }
.hp .svchero__headline-accent { color: var(--hp-ac); }
.hp .svchero__subtext { color: #BDBDBF; max-width: 46ch; font-size: 1.05rem; margin-bottom: 36px; }
.hp .svchero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hp .svchero__stage { position: relative; align-self: stretch; min-height: 460px; }
.hp .svchero__stats { position: absolute; inset: 0; pointer-events: none; }
.hp .svchero__stat {
  position: absolute;
  background: #FFFFFF;
  color: var(--hp-ink);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 200px;
}
.hp .svchero__stat svg { color: var(--hp-ac); flex: none; }
.hp .svchero__stat strong { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; }
.hp .svchero__stat span { font-size: 0.8rem; color: var(--hp-soft); }
.hp .svchero__stat--a { right: 48px; top: 8%; }
.hp .svchero__stat--b { right: 0; top: 38%; background: var(--hp-ac); color: var(--hp-ac-ink); }
.hp .svchero__stat--b svg,
.hp .svchero__stat--b span { color: var(--hp-ac-ink); }
.hp .svchero__stat--c { right: 48px; top: 68%; }
/* .hero__scroll-cue + hero-bounce are the shared rules defined near the
   top of this file; only the colour is adjusted for this hero. */
.hp .hero__scroll-cue { bottom: 22px; color: #8E8E91; }

/* ---------- bands + section heads ---------- */
.hp .band { padding: 112px 0; }
.hp .band--tint { background: var(--hp-tint); }
.hp .band--dark { background: var(--hp-dark); color: #FFFFFF; }
.hp .sec-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 56px; }
.hp .sec-head p { max-width: 42ch; color: var(--hp-soft); }
.hp .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.hp .link-arrow svg { transition: transform 0.25s; }
.hp .link-arrow:hover svg { transform: translateX(4px); }

/* ---------- trades ---------- */
.hp .home-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp .trade-card {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  border-bottom: 3px solid transparent;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.hp .trade-card:hover,
.hp .trade-card:focus-visible { border-bottom-color: var(--hp-ac); transform: translateY(-6px); }
.hp .trade-card__top { position: relative; display: block; }
.hp .trade-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #CFCDC8; }
.hp .trade-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hp .trade-card:hover .trade-card__media img { transform: scale(1.06); }
.hp .trade-card__icon {
  position: absolute;
  left: 20px;
  bottom: -28px;
  width: 56px;
  height: 56px;
  background: #FFFFFF;
  color: var(--hp-ac);
  display: grid;
  place-items: center;
}
.hp .trade-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 44px 24px 24px; }
.hp .trade-card__title { font-family: var(--font-display); font-size: 1.45rem; text-transform: uppercase; letter-spacing: -0.02em; font-weight: 700; line-height: 1.05; }
.hp .trade-card__desc { color: var(--hp-soft); font-size: 0.93rem; flex: 1; }
.hp .trade-card__pill { font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; color: var(--hp-soft); }
.hp .trade-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #9A9A9D; }
.hp .trade-card__pill.is-open { color: var(--hp-ink); }
.hp .trade-card__pill.is-open .trade-card__dot { background: var(--hp-ac); }
.hp .trade-card__link { font-weight: 600; font-size: 0.88rem; display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; }
.hp .trade-card__link svg { transition: transform 0.25s; }
.hp .trade-card:hover .trade-card__link svg { transform: translateX(4px); }
.hp .crew-banner { background: var(--hp-dark); color: #FFFFFF; padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.hp .crew-banner__icon { color: var(--hp-ac); }
.hp .crew-banner__text { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hp .crew-banner__title { font-family: var(--font-display); font-size: 1.45rem; text-transform: uppercase; letter-spacing: -0.02em; font-weight: 700; line-height: 1.05; }
.hp .crew-banner__desc { color: #A9A9AC; font-size: 0.93rem; }
.hp .crew-banner__btn {
  align-self: flex-start;
  background: var(--hp-ac);
  color: var(--hp-ac-ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  border-radius: var(--btn-radius);
  transition: background 0.25s, color 0.25s;
}
.hp .crew-banner:hover .crew-banner__btn { background: #FFFFFF; }

/* ---------- why Apolido + numbers ---------- */
.hp .home-why__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hp .why-photo { position: relative; }
.hp .why-photo img { width: 100%; aspect-ratio: 1 / 0.92; object-fit: cover; object-position: 100% 50%; }
.hp .stamp {
  position: absolute;
  right: -28px;
  top: -28px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--hp-ac);
  color: var(--hp-ac-ink);
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: 0.8rem;
  padding: 10px;
}
.hp .stamp b { display: block; font-size: 2rem; letter-spacing: -0.03em; }
.hp .home-why__subtext { color: var(--hp-soft); margin: 20px 0 28px; max-width: 52ch; }
.hp .why-list { list-style: none; display: grid; gap: 14px; margin-bottom: 36px; }
.hp .why-feature { display: flex; gap: 14px; align-items: flex-start; }
.hp .why-feature__icon { color: var(--hp-ac); flex: none; margin-top: 2px; }
.hp .why-feature__title { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.hp .why-feature__desc { color: var(--hp-soft); font-size: 0.92rem; }
.hp .why-nums { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--hp-ink); }
.hp .why-num { padding: 22px 0 0; }
.hp .why-num strong { display: block; font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; }
.hp .why-num span { color: var(--hp-soft); font-size: 0.92rem; }

/* ---------- leadmen ---------- */
.hp .band--dark .sec-head p { color: #A9A9AC; }
.hp .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp .lm { background: var(--hp-dark-2); position: relative; display: block; }
.hp .lm img { width: 100%; aspect-ratio: 3 / 3.8; object-fit: cover; object-position: 50% 0; background: #2A2A2C; }
.hp .lm__body { padding: 22px 24px 24px; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.hp .lm__name { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; font-weight: 700; letter-spacing: -0.02em; }
.hp .lm__trades { color: #A9A9AC; font-size: 0.88rem; }
.hp .lm__rate { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: 0.9rem; }
.hp .lm__rate svg { color: var(--hp-ac); }
.hp .lm__go { width: 46px; height: 46px; background: var(--hp-ac); color: var(--hp-ac-ink); display: grid; place-items: center; flex: none; transition: background 0.25s; }
.hp .lm:hover .lm__go { background: #FFFFFF; }

/* ---------- why choose us ---------- */
.hp .home-choose__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hp .home-choose__label { display: block; font-weight: 600; font-size: 0.95rem; color: var(--hp-soft); margin-bottom: 14px; }
.hp .home-choose__text { color: var(--hp-soft); margin: 20px 0 28px; max-width: 50ch; }
.hp .home-choose__list { list-style: none; display: grid; gap: 14px; margin-top: 36px; }
.hp .home-choose__list li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.hp .home-choose__tick { width: 24px; height: 24px; border-radius: 50%; background: var(--hp-ac); color: var(--hp-ac-ink); display: grid; place-items: center; flex: none; }
.hp .home-choose__media { position: relative; }
.hp .home-choose__media img { width: 100%; aspect-ratio: 1 / 0.9; object-fit: cover; }
.hp .home-choose__stat { position: absolute; right: -24px; bottom: -24px; background: #FFFFFF; padding: 24px 32px; min-width: 200px; }
.hp .home-choose__stat strong { display: block; font-family: var(--font-display); font-size: 3.2rem; line-height: 1; letter-spacing: -0.03em; color: var(--hp-ac); }
.hp .home-choose__stat span { font-size: 0.9rem; color: var(--hp-soft); display: block; margin-top: 6px; max-width: 16ch; }

/* ---------- how it works ---------- */
.hp .home-steps__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.hp .how-photo { position: relative; }
.hp .how-photo img { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; }
.hp .how-badge { position: absolute; left: -20px; bottom: 32px; background: var(--hp-ac); color: var(--hp-ac-ink); padding: 20px 24px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1; }
.hp .how-badge b { display: block; font-size: 3rem; letter-spacing: -0.04em; }
.hp .modes { display: grid; gap: 0; margin: 32px 0; }
.hp .mode { display: grid; grid-template-columns: 72px 1fr; gap: 6px 18px; padding: 20px 0; border-top: 1px solid var(--hp-line); }
.hp .mode:last-child { border-bottom: 1px solid var(--hp-line); }
.hp .mode__n { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; grid-row: span 2; line-height: 1; }
.hp .mode h3 { font-size: 1.25rem; }
.hp .mode p { color: var(--hp-soft); font-size: 0.93rem; }

/* ---------- FAQ ---------- */
.hp .faq { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.hp .faq__photo { margin-top: 32px; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; overflow: hidden; }
.hp .faq__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.04); transform-origin: center top; }
.hp .faq__list { border-top: 2px solid var(--hp-ink); }
.hp .faq details { border-bottom: 1px solid var(--hp-line); background: transparent; }
.hp .faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.hp .faq summary::-webkit-details-marker { display: none; }
.hp .faq summary i {
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--hp-ink);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 1.3rem;
  line-height: 1;
  transition: background 0.2s;
}
.hp .faq summary i::before { content: "+"; }
.hp .faq details[open] summary i { background: var(--hp-ac); color: var(--hp-ac-ink); }
.hp .faq details[open] summary i::before { content: "–"; }
.hp .faq details p { padding: 0 54px 24px 0; color: var(--hp-soft); }

/* ---------- reviews ---------- */
.hp .home-reviews { padding: 112px 0 96px; }
.hp .rvw-headline { text-align: center; font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: 1.05; margin: 0 0 56px; text-wrap: balance; }
.hp .rvw-headline span { color: var(--hp-ac); }
.hp .rvw-feature { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; margin-bottom: 72px; }
.hp .rvw-feature__photo img { width: 100%; aspect-ratio: 3 / 3.7; object-fit: cover; object-position: 50% 25%; }
.hp .rvw-card { position: relative; }
.hp .rvw-card__mark { font-family: var(--font-display); font-size: 6rem; line-height: 0.6; color: var(--hp-ac); display: block; margin-bottom: 12px; }
.hp .rvw-card__title { font-size: 1.1rem; margin-bottom: 12px; }
.hp .rvw-card__quote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; margin-bottom: 24px; }
.hp .rvw-card__stars { color: var(--hp-ac); letter-spacing: 3px; font-size: 1.15rem; display: flex; align-items: center; gap: 12px; }
.hp .rvw-card__stars em { font-style: normal; color: var(--hp-ink); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; }
.hp .rvw-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hp-line); flex-wrap: wrap; }
.hp .rvw-card__who { display: flex; align-items: center; gap: 14px; }
.hp .rvw-card__avatar { width: 48px; height: 48px; background: var(--hp-ink); color: #FFFFFF; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.hp .rvw-card__author { font-weight: 600; display: block; }
.hp .rvw-card__role { font-size: 0.85rem; color: var(--hp-soft); }
.hp .rvw-card__ctrl { display: flex; align-items: center; gap: 18px; }
.hp .rvw-dashes { display: flex; gap: 6px; }
.hp .rvw-dashes span { width: 22px; height: 4px; background: var(--hp-line); }
.hp .rvw-dashes span.is-active { background: var(--hp-ac); }
.hp .rvw-arrow { width: 46px; height: 46px; border: 1.5px solid var(--hp-ink); background: #FFFFFF; color: var(--hp-ink); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
.hp .rvw-arrow:hover { background: var(--hp-ink); color: #FFFFFF; }

.hp .rvw-marquee { overflow: hidden; margin-inline: calc(50% - 50vw); width: 100vw; }
.hp .rvw-marquee__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: rvw-marquee-scroll var(--rvw-marquee-duration, 32s) linear infinite;
  padding-block: 4px;
}
.hp .rvw-marquee:hover .rvw-marquee__track,
.hp .rvw-marquee:focus-within .rvw-marquee__track { animation-play-state: paused; }
@keyframes rvw-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hp .rvw-marquee__tile { width: 340px; background: var(--hp-tint); padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: none; }
.hp .rvw-marquee__tile-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; }
.hp .rvw-marquee__tile-quote { color: var(--hp-soft); font-size: 0.92rem; flex: 1; }
.hp .rvw-marquee__tile-stars { color: var(--hp-ac); display: flex; gap: 10px; align-items: center; letter-spacing: 2px; }
.hp .rvw-marquee__tile-ratingnum { color: var(--hp-ink); font-weight: 600; letter-spacing: 0; font-size: 0.88rem; }
.hp .rvw-marquee__tile-footer { display: flex; gap: 12px; align-items: center; }
.hp .rvw-marquee__tile-avatar { width: 36px; height: 36px; background: var(--hp-ink); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; font-family: var(--font-display); }
.hp .rvw-marquee__tile-who { display: flex; flex-direction: column; line-height: 1.3; }
.hp .rvw-marquee__tile-author { font-weight: 600; font-size: 0.88rem; }
.hp .rvw-marquee__tile-role { font-size: 0.78rem; color: var(--hp-soft); }
.hp .rvw-empty { text-align: center; padding: 8px 0 0; }
.hp .rvw-empty__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.hp .rvw-empty__text { color: var(--hp-soft); }

.hp .rvw-cta-row { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 56px; }
.hp .rvw-cta-stars { display: flex; gap: 4px; }
.hp .rvw-cta-star { background: none; border: 0; color: var(--hp-ink); cursor: pointer; padding: 4px; line-height: 0; }
.hp .rvw-cta-star:hover,
.hp .rvw-cta-star.is-filled { color: var(--hp-ac); }
.hp .rvw-panel-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.hp .rvw-panel-wrap.is-open { grid-template-rows: 1fr; }
.hp .rvw-panel-inner { overflow: hidden; }
.hp .rvw-panel { max-width: 640px; margin: 40px auto 0; background: var(--hp-tint); padding: 32px; }
.hp .rvw-panel__title { font-size: 1.4rem; margin-bottom: 18px; }
.hp .rvw-panel .rvw-modal-msg { color: var(--hp-soft); margin-bottom: 18px; }
.hp .rvw-panel .form-field { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 16px; color: var(--hp-ink); }
.hp .rvw-panel .form-field input,
.hp .rvw-panel .form-field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1.5px solid var(--hp-line);
  border-radius: 0;
  background: #FFFFFF;
  font: inherit;
  font-weight: 400;
  color: var(--hp-ink);
}
.hp .rvw-panel .form-field textarea { min-height: 7.5rem; }
.hp .rvw-panel .form-field input:focus,
.hp .rvw-panel .form-field textarea:focus { outline: 2px solid var(--hp-ac); outline-offset: 0; border-color: var(--hp-ink); }
.hp .rvw-stars-input { display: flex; gap: 2px; margin-top: 6px; }
.hp .rvw-star { background: none; border: 0; cursor: pointer; color: #9A9A9D; padding: 2px; line-height: 0; }
.hp .rvw-star.is-filled { color: var(--hp-ac); }
.hp .rvw-star.is-filled svg { fill: var(--hp-ac); }
.hp .rvw-display-toggle { display: flex; margin-top: 6px; }
.hp .rvw-display-toggle .reqm-mode-btn { flex: 1; padding: 11px; border: 1.5px solid var(--hp-ink); border-radius: 0; background: #FFFFFF; color: var(--hp-ink); font: inherit; font-weight: 600; cursor: pointer; }
.hp .reqm-mode-toggle.rvw-display-toggle { border-radius: var(--btn-radius); overflow: hidden; }
.hp .rvw-display-toggle .reqm-mode-btn:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.hp .rvw-display-toggle .reqm-mode-btn:last-child { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.hp .rvw-display-toggle .reqm-mode-btn.is-active { background: var(--hp-ink); color: #FFFFFF; }
.hp .rvw-form-footer { display: flex; justify-content: flex-end; gap: 12px; }
.hp .rvw-panel .btn { height: 46px; padding: 0 22px; border-radius: var(--btn-radius); font: inherit; font-weight: 600; cursor: pointer; border: 1.5px solid var(--hp-ink); background: #FFFFFF; color: var(--hp-ink); box-shadow: none; transform: none; }
.hp .rvw-panel .btn--primary { background: var(--hp-ink); color: #FFFFFF; }
.hp .rvw-panel .btn--primary:hover { background: var(--hp-ac); color: var(--hp-ac-ink); border-color: var(--hp-ac); box-shadow: none; transform: none; }
.hp .rvw-panel .form-alert { margin-bottom: 12px; }

/* ---------- footer ---------- */
.hp .home-footer { background: var(--hp-dark); color: #FFFFFF; padding: 88px 0 0; text-align: left; font-size: 1rem; }
.hp .home-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 64px; }
.hp .home-footer h3 { font-size: 1rem; margin-bottom: 18px; color: #FFFFFF; }
.hp .home-footer p,
.hp .home-footer a { color: #A9A9AC; font-size: 0.92rem; }
.hp .home-footer ul { list-style: none; display: grid; gap: 10px; }
.hp .home-footer a:hover { color: #FFFFFF; }
.hp .home-footer .home-footer__logo { display: inline-block; margin-bottom: 16px; color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; text-transform: uppercase; }
.hp .home-footer__logo b { color: var(--hp-ac); }
.hp .home-footer__bar { border-top: 1px solid var(--hp-dark-line); padding: 22px 0; color: #7C7C80; font-size: 0.82rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .hp .rvw-marquee__track,
  .hp .hero__scroll-cue svg { animation: none; }
  .hp .rvw-marquee__tile--dup { display: none; }
  .hp .rvw-marquee { overflow-x: auto; }
  .hp .home-cta::before { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hp .home-services__grid { grid-template-columns: repeat(2, 1fr); }
  .hp .home-choose__inner { grid-template-columns: 1fr; gap: 56px; }
  .hp .home-choose__stat { right: 12px; }
  .hp .svchero__inner,
  .hp .home-why__inner,
  .hp .home-steps__inner,
  .hp .faq,
  .hp .rvw-feature { grid-template-columns: 1fr; gap: 48px; }
  .hp .svchero__inner { padding: 56px 0 88px; min-height: 0; }
  .hp .svchero::before { background: linear-gradient(180deg, rgba(10,10,11,0.86), rgba(10,10,11,0.74)); }
  .hp .svchero { background-position: 74% center; }
  .hp .svchero__stage { min-height: 0; }
  .hp .svchero__stats { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hp .svchero__stat { position: static; min-width: 0; }
  .hp .stamp { right: 12px; top: -36px; }
  .hp .how-badge { left: 12px; }
  .hp .home-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hp .wrap,
  .hp .svchero__inner { width: calc(100% - 32px); }
  .hp .band,
  .hp .home-reviews { padding: 72px 0; }
  .hp .home-services__grid { grid-template-columns: 1fr; }
  .hp .sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .hp .team { grid-template-columns: 1fr; }
  .hp .lm { display: grid; grid-template-columns: 120px 1fr; }
  .hp .lm img { aspect-ratio: auto; height: 100%; }
  .hp .lm__body { align-items: center; }
  .hp .svchero__stat { padding: 12px 10px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .hp .svchero__stat svg { width: 22px; height: 22px; }
  .hp .svchero__stat strong { font-size: 1.25rem; }
  .hp .svchero__stat span { font-size: 0.7rem; }
  .hp .svchero__stats { gap: 8px; }
  .hp .svchero__actions .home-cta { flex: 1 1 100%; justify-content: center; }
  .hp .stamp { width: 104px; height: 104px; font-size: 0.68rem; right: 10px; top: -30px; }
  .hp .stamp b { font-size: 1.5rem; }
  .hp .faq details p { padding-right: 0; }
  .hp .rvw-marquee__tile { width: 280px; }
  .hp .home-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .hp .hero__scroll-cue { display: none; }
  .hp .svchero__headline { font-size: 1.95rem; }
  .hp .home-choose__stat { right: 8px; bottom: -20px; padding: 18px 22px; }
  .hp .rvw-panel { padding: 22px 18px; }
  .hp .rvw-form-footer { flex-direction: column-reverse; }
  .hp .rvw-form-footer .btn { width: 100%; justify-content: center; }
}


/* ============================================
   ABOUT PAGE (about.php)
   Everything the About page needs lives in this one block.
   All selectors are scoped under .about-* so nothing here can
   leak into index.php, services.php or workers.php.
   Colors reuse the homepage tokens defined at the top of this
   file: --home-black, --home-red, --home-cream.

   Redesigned [2026-10-03] to match index.php and services.php:
   every black section here uses the same blueprint-grid texture
   as .svchero__media::before / .svc-index__grid (repeating-linear-
   gradient hairlines + a radial mask so it fades rather than tiling
   edge to edge) — that one repeated technique, not three different
   ones, is what the brief asked for and what actually makes the
   three pages read as one system. Section rhythm is deliberately
   black (hero) → white (story) → black (philosophy) → cream
   (workforce) → black (CTA), not a flat alternation.
============================================ */

/* --- 1. Hero (full-bleed photo background — REUSES .svchero's own
   mechanism from index.php, not a new design) ---
   [Redesigned 2026-10-13, v3] Per explicit request: every rule below
   is the About page's own scoped copy of the homepage hero's actual
   CSS — same background-position/size/min-height, the exact same
   5-stop left-to-right gradient, the same corner glow, the same
   single-column .svchero__inner/.svchero__content pattern — just
   renamed .about-hero__* and pointed at a different photo
   (assets/about/hero.jpg instead of assets/img/hero.png). Nothing
   here is a new effect. v1 (boxed photo panel, 2026-10-12) and v2
   (custom full-bleed gradient, 2026-10-13) are both superseded;
   .about-hero__photo and .about-hero__grid stay hidden exactly as
   v2 left them. */
/* [2026-10-23] Now the same hero as Home / Services / Workers (.hp .svchero):
   same photo (assets/img/hero.png), crop, 640px height, container width and
   dark-to-transparent gradient. Values below are copied from those rules. */
.about-hero {
  position: relative;
  background: #111112 url('assets/img/hero.png') 70% center / cover no-repeat;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,11,0.95) 0%, rgba(10,10,11,0.86) 30%, rgba(10,10,11,0.45) 55%, rgba(10,10,11,0.08) 85%, rgba(10,10,11,0) 100%);
}
/* v1/v2's blueprint-grid texture — hidden, not removed; .svchero
   doesn't use it either once a photo background is in play. */
.about-hero__grid { display: none; }
.about-hero__inner {
  position: relative;
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  /* Top-anchored (not centred): About's text block is taller than the
     other heroes', so centring pushed its heading higher. 150px puts the
     h1 where Home/Services/Workers' centred headings sit (~149-161px). */
  align-items: start;
  padding: 150px 0 80px;
  min-height: 640px;
}
.about-hero__text { min-width: 0; max-width: 720px; text-align: left; }
.about-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.about-hero__title-accent { color: #FF393E; }
.about-hero__subtext {
  color: #BDBDBF;
  max-width: 46ch;
  margin: 0 0 36px;
  font-size: 1.05rem;
  line-height: 1.55;
}
.about-hero .hero__scroll-cue { bottom: 22px; color: #8E8E91; }
.about-hero__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.about-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.about-hero__trust-item:first-child { padding-left: 0; border-left: none; }
.about-hero__trust-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 61, 61, 0.4);
  color: var(--home-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-hero__trust-icon svg { width: 13px; height: 13px; }
.about-hero__trust-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
/* v1's boxed right-side photo panel — hidden, not deleted. The
   photo now lives as the full-bleed background of .about-hero
   itself (see above), per the follow-up "no image card" request. */
.about-hero__photo { display: none; }

/* --- 2. Story (white band) ---
   Asymmetric portrait + text instead of the old bordered frame
   with an offset shadow in frame colors (#0F3B34 dark green) that
   didn't belong to the black/white/cream/red system at all. No
   real coordinator photo exists yet, so the portrait is an
   intentional monogram panel (same --card-image/--card-gradient
   fallback technique as every other photo slot on the site) —
   never a broken <img>. */
.about-story {
  background: var(--paper);
  padding: var(--space-xl) var(--space-lg);
}
.about-story__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-story__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, #23262b, #0d0f12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.about-story__portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--card-image, none);
  background-size: cover;
  background-position: center;
}
.about-story__monogram {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 61, 61, 0.1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: #FFFFFF;
}
.about-story__role {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* When the real photo exists (about.php adds --photo), the AT monogram is
   not needed; the role label becomes a caption on a dark fade at the
   bottom so it stays readable over the picture. */
.about-story__portrait--photo { justify-content: flex-end; }
.about-story__portrait--photo .about-story__monogram { display: none; }
.about-story__portrait--photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.78));
}
.about-story__portrait--photo .about-story__role {
  margin-bottom: 1.25rem;
  color: #FFFFFF;
}
.about-story__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  color: var(--home-black);
  margin-bottom: var(--space-md);
}
.about-story__text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* --- 3. Philosophy — Mission / Vision / Values (black, blueprint-grid) ---
   Three short statements with nothing to browse, so they sit side
   by side rather than behind a Next button. Vertical rules divide
   the columns — the same divider idea as the hero stats row on the
   homepage — and the same grid texture as section 1 runs behind
   them. */
.about-mvv {
  position: relative;
  overflow: hidden;
  background: var(--home-black);
  color: #FFFFFF;
  padding: var(--space-xl) var(--space-lg);
}
.about-mvv__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 0%, transparent 85%);
}
.about-mvv__inner { position: relative; max-width: 1180px; margin: 0 auto; }
.about-mvv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.about-mvv__col {
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.about-mvv__col:first-child { border-left: none; padding-left: 0; }
.about-mvv__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--home-red);
  margin-bottom: var(--space-sm);
}
.about-mvv__text {
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

/* --- 4. How it works — Our Workforce (cream, scrollable filmstrip) ---
   Several trade cards are visible at once; the strip scrolls
   and snaps card-by-card, and the two arrows (same ring-button
   shape as the homepage reviews arrows) nudge it by one card
   instead of forcing a single slide at a time. Each card uses
   the trade-card fallback technique (gradient background +
   icon, with the photo layered on top via --card-image), so a
   missing photo never shows a broken-image box. Cream background
   is the one deliberate break from black/white elsewhere on this
   page — it's also the Apolido token already used for footers
   site-wide, so it still reads as this site's palette. */
.about-workforce {
  background: var(--home-cream);
  padding: var(--space-xl) 0 var(--space-lg);
}
.about-workforce__intro {
  max-width: 1180px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-lg);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}
.about-workforce__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--home-red);
  margin-bottom: var(--space-sm);
}
.about-workforce__subtext {
  color: var(--ink-soft);
  max-width: 60ch;
}
.about-workforce__nav {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.about-workforce__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 10, 10, 0.2);
  background: transparent;
  color: var(--home-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.about-workforce__arrow:hover { border-color: var(--home-red); color: var(--home-red); }
.about-workforce__arrow:disabled { opacity: 0.3; cursor: default; }
.about-workforce__arrow:disabled:hover { border-color: rgba(10, 10, 10, 0.2); color: var(--home-black); }

.about-workforce__stage {
  max-width: 1180px;
  margin: 0 auto;
}
.about-workforce__track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem var(--space-lg) 0.5rem;
  /* Hide the scrollbar visually — the arrows + native swipe
     are the controls; a visible scrollbar here would compete
     with them. Scrolling itself still works with a trackpad,
     touch, or shift+wheel. */
  scrollbar-width: none;
}
.about-workforce__track::-webkit-scrollbar { display: none; }

.about-workforce__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(160px, 22vw, 220px);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--card-gradient, #16181c);
}
.about-workforce__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--card-image, none);
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
/* Subtle image zoom on hover/focus — image-only, text and icon stay
   put (they're separate, later-painted elements, not children of
   this pseudo-element). */
.about-workforce__card:hover::before,
.about-workforce__card:focus-visible::before {
  transform: scale(1.06);
}
.about-workforce__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
}
.about-workforce__card-icon,
.about-workforce__card-title {
  position: relative;
  z-index: 1;
}
.about-workforce__card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
}
.about-workforce__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #FFFFFF;
}

/* --- 5. Closing CTA (black, blueprint-grid) ---
   Gives the page an ending — reuses .home-cta (the homepage and
   Services button) rather than a new button style. */
.about-cta {
  position: relative;
  overflow: hidden;
  background: var(--home-black);
  padding: var(--space-xl) var(--space-lg);
}
.about-cta__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000 0%, transparent 75%);
}
.about-cta__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.about-cta__inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}
.about-cta__inner p {
  color: rgba(255, 255, 255, 0.65);
  max-width: 48ch;
}

/* --- Footer --- */
.about-footer {
  background: var(--home-cream);
  padding: var(--space-lg);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  /* Identical to .svchero's own 900px rules (index.php). */
  .about-hero__inner { grid-template-columns: 1fr; }
  .about-hero__text { max-width: none; }
  .about-hero { background-position: 74% center; }
  .about-hero__inner { padding: 56px 0 88px; min-height: 0; }
  .about-hero::before { background: linear-gradient(180deg, rgba(10,10,11,0.86), rgba(10,10,11,0.74)); }
  .about-story__inner { grid-template-columns: 1fr; }
  .about-story__portrait { max-width: 320px; margin: 0 auto; }
  .about-mvv__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-mvv__col { border-left: none; padding-left: 0; }
  .about-workforce__intro { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .about-hero__inner { width: calc(100% - 32px); }
  .about-hero .hero__scroll-cue { display: none; }
  .about-hero__title { font-size: 1.95rem; }
}
@media (max-width: 560px) {
  .about-workforce__card { width: 68vw; }
  .about-hero__trust { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .about-hero__trust-item { padding-left: 0; border-left: none; }
  .about-hero__trust-label { white-space: normal; }
  .about-cta__inner { justify-content: flex-start; }
}


/* ============================================
   SERVICES PAGE (services.php)
   Redesigned [2026-10-20] to the approved Services preview. The page
   is wrapped in .hp, so it shares the homepage tokens and the shared
   .svchero / .home-cta / .band / .section-title / .home-footer rules
   defined in the HOMEPAGE block above — only what is specific to this
   page lives here, all scoped under .hp .svc-*.
   Behaviour (hover/focus/click swap) is in script.js,
   "SERVICES PAGE — INTERACTIVE INDEX".
============================================ */
.hp .svchero__stage--svc .svchero__stat span { font-size: 0.9rem; color: var(--hp-ink); font-weight: 600; }
.hp .svchero__stage--svc .svchero__stat--b span { color: var(--hp-ac-ink); }
.hp .svc-index { background: var(--hp-tint); }
.hp .svc-index__title { font-size: clamp(2.1rem, 3.6vw, 3.3rem); }
.hp .svc-index__body-wrap { padding: 96px 0 112px; }
.hp .svc-index__empty { text-align: center; color: var(--hp-soft); font-size: 1.1rem; padding: 48px 0; }

/* --- trade index: list (left) + live panel (right) --- */
.hp .svc-index__body { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 64px; align-items: start; }
.hp .svc-index__list { display: flex; flex-direction: column; border-top: 2px solid var(--hp-ink); }
.hp .svc-index__item {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hp-line);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.02em;
  color: #8C8C90; text-decoration: none; position: relative;
  transition: color 0.25s, padding-left 0.25s;
}
.hp .svc-index__item::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 4px; background: var(--hp-ac);
  transition: width 0.25s; transform: translateY(-50%);
}
.hp .svc-index__item-num { display: none; }
.hp .svc-index__item.is-active,
.hp .svc-index__item:hover,
.hp .svc-index__item:focus-visible { color: var(--hp-ink); padding-left: 36px; }
.hp .svc-index__item.is-active::before,
.hp .svc-index__item:hover::before,
.hp .svc-index__item:focus-visible::before { width: 22px; }
.hp .svc-index__item:focus-visible,
.hp .svc-index__panel:focus-visible { outline: 2px solid var(--hp-ac); outline-offset: 3px; }

.hp .svc-index__preview { display: grid; }
.hp .svc-index__panel {
  grid-area: 1 / 1;
  background: #FFFFFF; color: var(--hp-ink); text-decoration: none;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.hp .svc-index__panel.is-active { opacity: 1; visibility: visible; }
.hp .svc-index__panel-top { position: relative; display: block; }
.hp .svc-index__panel-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #CFCDC8; }
.hp .svc-index__panel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hp .svc-index__panel.is-active:hover .svc-index__panel-media img { transform: scale(1.04); }
.hp .svc-index__panel-icon {
  position: absolute; left: 32px; bottom: -30px;
  width: 60px; height: 60px; background: #FFFFFF; color: var(--hp-ac);
  display: grid; place-items: center;
}
.hp .svc-index__panel-caption { display: flex; flex-direction: column; gap: 14px; padding: 52px 32px 32px; }
.hp .svc-index__panel-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 2rem; letter-spacing: -0.02em; line-height: 1; }
.hp .svc-index__panel-desc { color: var(--hp-soft); max-width: 62ch; }
.hp .svc-index__panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hp .svc-index__panel-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; }
.hp .svc-index__panel-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hp-ac); }
.hp .svc-index__panel-count.is-none { color: var(--hp-soft); }
.hp .svc-index__panel-count.is-none::before { background: #9A9A9D; }
.hp .svc-index__panel-action {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--hp-ink); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.04em; padding: 14px 20px;
  border-radius: var(--btn-radius);
  transition: background 0.25s, color 0.25s;
}
.hp .svc-index__panel:hover .svc-index__panel-action,
.hp .svc-index__panel:focus-visible .svc-index__panel-action { background: var(--hp-ac); color: var(--hp-ac-ink); }

/* --- Why Apolido --- */
.hp .svc-why__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.hp .svc-eyebrow { display: block; font-weight: 600; font-size: 0.95rem; color: var(--hp-soft); margin-bottom: 14px; }
.hp .svc-eyebrow--dark { color: #A9A9AC; }
.hp .svc-why__text { color: var(--hp-soft); margin-top: 20px; max-width: 44ch; }
.hp .svc-why__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; padding: 0; }
.hp .svc-why__row { background: var(--hp-tint); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.hp .svc-why__row svg { color: var(--hp-ac); }
.hp .svc-why__row h3 { font-size: 1.15rem; line-height: 1.1; }
.hp .svc-why__row p { color: var(--hp-soft); font-size: 0.93rem; }

/* --- How it works --- */
.hp .svc-how__title { max-width: 14em; margin-bottom: 48px; }
.hp .svc-how__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; }
.hp .svc-how__step { background: var(--hp-dark-2); padding: 36px 32px; border-top: 4px solid var(--hp-ac); }
.hp .svc-how__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 1; letter-spacing: -0.04em; color: var(--hp-ac); margin-bottom: 22px; }
.hp .svc-how__step h3 { font-size: 1.4rem; margin-bottom: 12px; }
.hp .svc-how__step p { color: #B3B3B6; }

/* --- Closing CTA --- */
.hp .svc-cta { background: var(--hp-ac); color: var(--hp-ac-ink); padding: 88px 0; }
.hp .svc-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.hp .svc-cta h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 10px; }
.hp .svc-cta p { font-size: 1.05rem; max-width: 50ch; }
.hp .svc-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 28px;
  background: var(--hp-ink); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--hp-ink);
  border-radius: var(--btn-radius);
  transition: background 0.3s, color 0.3s;
}
.hp .svc-cta__btn:hover,
.hp .svc-cta__btn:focus-visible { background: #FFFFFF; color: var(--hp-ink); border-color: #FFFFFF; }

/* Tablet / phone: no hover, so the name list is replaced by every
   trade's full panel (photo, name, description, count, link) stacked. */
@media (max-width: 1080px) {
  .hp .svc-index__body { grid-template-columns: 1fr; }
  .hp .svc-index__list { display: none; }
  .hp .svc-index__preview { display: flex; flex-direction: column; gap: 20px; }
  .hp .svc-index__panel { opacity: 1; visibility: visible; }
  .hp .svc-why__inner { grid-template-columns: 1fr; gap: 48px; }
  .hp .svc-how__steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hp .svc-index__body-wrap { padding: 64px 0 72px; }
  .hp .svc-why__list { grid-template-columns: 1fr; }
  .hp .svc-index__panel-caption { padding: 48px 22px 24px; }
  .hp .svc-index__panel-title { font-size: 1.6rem; }
  .hp .svchero__stage--svc .svchero__stat span { font-size: 0.72rem; }
  .hp .svc-cta__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hp .svc-index__item,
  .hp .svc-index__item::before,
  .hp .svc-index__panel,
  .hp .svc-index__panel-media img,
  .hp .svc-index__panel-action,
  .hp .svc-cta__btn { transition: none; }
}


/* ============================================
   GROUP REQUEST (request.php) + PAYMENT (payment.php)
   Shared "one clean form" look for the whole booking flow, built
   on the same black / red / cream language as Home, About and
   Services. All selectors are scoped under .req-* / .pay-* so
   nothing here touches the older .auth-* login/register pages,
   which keep their own separate style.
============================================ */

/* --- Hero band (reused for both request.php and payment.php) --- */
.req-hero {
  background: var(--home-black);
  color: #FFFFFF;
  padding: var(--space-xl) var(--space-lg) 4rem;
  text-align: center;
}
.req-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-red);
  margin-bottom: var(--space-sm);
}
.req-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 26ch;
  margin: 0 auto var(--space-sm);
}
.req-hero__subtext {
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 auto;
}

/* --- Page wrap: the card(s) sit half-overlapping the black band --- */
.req-wrap {
  max-width: 780px;
  margin: -3rem auto 0;
  padding: 0 var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  z-index: 1;
}
.req-alert { margin-bottom: 0; }

/* --- The card itself --- */
.req-card {
  background: var(--paper);
  border: 2px solid var(--home-black);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
/* Step 1 collapses (not removed) once Step 2 is showing, so
   "Edit details" can bring it back with every value intact. */
.req-card[data-collapsed] { display: none; }

.req-card__head { margin-bottom: var(--space-md); }
.req-card__step {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--home-red);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.req-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
}
.req-card__subtext {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: 0.35rem;
}
.req-edit-link {
  color: var(--home-red);
  font-weight: 600;
  text-decoration: none;
}
.req-edit-link:hover { text-decoration: underline; }

/* --- Form layout: reads as ONE connected form, not three
   disconnected sections --- */
.req-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.req-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.req-field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.req-field__hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.req-field-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-md);
  align-items: start;
}
.req-select {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 0.75rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.req-select:focus { outline: none; border-color: var(--home-black); }

.req-next[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Calendar widget ---
   Shared by the Group, Individual and Large Request modals. Kept as
   one component so a visual refinement here (bigger cells, calmer
   chrome) lifts every booking flow at once, with zero class renames
   so nothing in any modal's JS (which sets these exact classNames)
   needs to change. */
.req-calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  background: var(--paper-alt);
}
.req-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.req-calendar__month {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: capitalize;
}
.req-calendar__nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.req-calendar__nav:hover {
  border-color: var(--home-black);
  background: #FFFFFF;
  transform: translateY(-1px);
}
.req-calendar__weekdays,
.req-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.req-calendar__weekdays {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 0.5rem;
}
.req-calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.req-calendar__day:hover:not(:disabled):not(.req-calendar__day--start):not(.req-calendar__day--end) {
  background: #FFFFFF;
  transform: scale(1.04);
}
.req-calendar__day:disabled {
  color: var(--ink-soft);
  opacity: 0.35;
  cursor: not-allowed;
}
.req-calendar__day--empty { visibility: hidden; }
/* Worker-availability states on the Individual Request calendar — see
   get_worker_unavailable_ranges() in includes/functions.php. Both are
   already :disabled (not selectable); these just explain why, reusing
   the existing --caution/--danger tokens instead of new colors. */
.req-calendar__day--held {
  position: relative;
  background: #FFEFB8;
  color: #6B4300;
  box-shadow: inset 0 0 0 1.5px #E0A100;
  opacity: 1;
  cursor: not-allowed;
}
.req-calendar__day--booked {
  position: relative;
  background: #FFD3D6;
  color: #9E1220;
  box-shadow: inset 0 0 0 1.5px #E5484D;
  opacity: 1;
  cursor: not-allowed;
}
/* Held/booked days are focusable (aria-disabled) but never selectable: no hover lift. */
.req-calendar__day.req-calendar__day--held[aria-disabled="true"]:hover:not(.req-calendar__day--start):not(.req-calendar__day--end),
.req-calendar__day.req-calendar__day--booked[aria-disabled="true"]:hover:not(.req-calendar__day--start):not(.req-calendar__day--end) { transform: none; }
.req-calendar__day.req-calendar__day--held[aria-disabled="true"]:hover:not(.req-calendar__day--start):not(.req-calendar__day--end),
.wk-page .req-calendar__day.req-calendar__day--held[aria-disabled="true"]:hover:not(.req-calendar__day--start):not(.req-calendar__day--end) { background: #FFEFB8; transform: none; }
.req-calendar__day.req-calendar__day--booked[aria-disabled="true"]:hover:not(.req-calendar__day--start):not(.req-calendar__day--end),
.wk-page .req-calendar__day.req-calendar__day--booked[aria-disabled="true"]:hover:not(.req-calendar__day--start):not(.req-calendar__day--end) { background: #FFD3D6; transform: none; }
.req-calendar__day--held:focus-visible, .req-calendar__day--booked:focus-visible { outline: 2px solid var(--home-black); outline-offset: 1px; }
/* Status tooltip: text comes from data-tip ("Pending payment" / "Already booked"). */
.req-calendar__day--held::after, .req-calendar__day--booked::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 6px;
  background: #1A1A1A;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
}
.req-calendar__day--held[data-tip-y="below"]::after, .req-calendar__day--booked[data-tip-y="below"]::after { bottom: auto; top: calc(100% + 6px); }
.req-calendar__day--held[data-tip-x="left"]::after, .req-calendar__day--booked[data-tip-x="left"]::after { left: 0; transform: none; }
.req-calendar__day--held[data-tip-x="right"]::after, .req-calendar__day--booked[data-tip-x="right"]::after { left: auto; right: 0; transform: none; }
.req-calendar__day--held:hover::after, .req-calendar__day--booked:hover::after,
.req-calendar__day--held:focus-visible::after, .req-calendar__day--booked:focus-visible::after,
.req-calendar__day--held.is-tip::after, .req-calendar__day--booked.is-tip::after { opacity: 1; visibility: visible; }
.req-calendar__day--in-range { background: rgba(255, 61, 61, 0.14); border-radius: 0; }
.req-calendar__day--start,
.req-calendar__day--end {
  background: var(--home-black);
  color: #FFFFFF;
  font-weight: 700;
}
.req-calendar__day--start:hover:not(:disabled),
.req-calendar__day--end:hover:not(:disabled) {
  background: var(--home-black);
  color: #FFFFFF;
  transform: scale(1.04);
}
.req-calendar__day--start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.req-calendar__day--end   { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.req-calendar__day--start.req-calendar__day--end { border-radius: var(--radius-sm); }
.req-calendar__range {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--home-black);
}
/* Legend for the Held/Booked calendar states above — only shown on the
   Individual Request calendar, and only once that worker actually has
   a blocked range (see iwmCalLegend in workers.php). */
.req-calendar__legend {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.req-calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.req-calendar__legend-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
  display: inline-block;
}
.req-calendar__legend-swatch--held { background: #FFEFB8; border: 1px solid #E0A100; }
.req-calendar__legend-swatch--booked { background: #FFD3D6; border: 1px solid #E5484D; }

/* --- Quantity stepper --- */
.req-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.5rem;
  background: var(--paper);
}
.req-stepper__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--home-black);
  color: #FFFFFF;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.req-stepper__btn:hover { background: var(--home-red); }
.req-stepper__btn:disabled {
  background: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.req-stepper__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  min-width: 2ch;
  text-align: center;
}

/* --- Selected-worker counter --- */
.req-counter {
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  margin-bottom: var(--space-md);
  transition: background 0.2s ease, color 0.2s ease;
}
.req-counter.is-complete {
  background: var(--home-black);
  color: #FFFFFF;
}

/* --- Worker selection grid --- */
.req-worker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.req-worker-card {
  position: relative;
  display: block;
  text-align: center;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md) 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.req-worker-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.req-worker-card.is-selected {
  border-color: var(--home-black);
  border-width: 2px;
  background: var(--paper-alt);
}
.req-worker-card.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.req-worker-card__check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.req-worker-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.75rem;
  display: block;
}
.req-worker-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--home-black);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
}
.req-worker-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.req-worker-card__trade {
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
.req-worker-card__rating {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.req-worker-card__rating span { color: var(--ink-soft); font-size: 0.8em; }
.req-worker-card__meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.req-worker-card__status {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--good);
}
.req-worker-card__toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--home-black);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.req-worker-card.is-selected .req-worker-card__toggle {
  background: var(--home-black);
  color: #FFFFFF;
  transform: scale(1.05);
}

/* --- Payment page specifics --- */
.pay-card { max-width: 620px; margin: 0 auto; }
.pay-amount {
  border: 1.5px solid var(--home-black);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  margin-bottom: var(--space-md);
}
.pay-amount__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
  padding: 0.3rem 0;
}
/* A value that wraps onto more than one line (e.g. a list of selected
   worker names) otherwise has no minimum breathing room from its label
   — space-between only keeps them from overlapping, not apart — so it
   can render flush against it with no visible gap at all. */
.pay-amount__row > span:last-child {
  text-align: right;
}
.pay-amount__row--deposit {
  border-top: 1px dashed var(--line);
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  font-size: 1.1rem;
  color: var(--home-red);
}
.pay-method-toggle { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pay-method-pill {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pay-qr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.pay-qr-card { text-align: center; }
.pay-qr-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.pay-qr-card__frame {
  aspect-ratio: 1;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  overflow: hidden;
}
.pay-qr-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pay-qr-card__placeholder {
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 0 1rem;
}
.pay-qr-card__meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* --- Upload with live preview --- */
.pay-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 140px;
}
.pay-upload:hover { border-color: var(--home-black); background: var(--paper-alt); }
.pay-upload.has-file { padding: 0.5rem; }
.pay-upload__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--home-black);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.pay-upload__text { font-size: 0.85rem; color: var(--ink-soft); }
.pay-upload__preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .req-field-row { grid-template-columns: 1fr; }
  .req-worker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pay-qr-grid { grid-template-columns: 1fr; }
}

/* ============================================
   REQUEST MODAL (workers.php)
   The Group Request flow now opens as an on-page modal
   instead of navigating to user/request.php, matching the
   Canva "Requesting Worker" reference as closely as possible:
   a plain white card floating over a dark backdrop, a real
   calendar for the date range, a black pill for the category,
   a +/- stepper for quantity, and a round black arrow button
   to move to the next step. Scoped under .reqm-* so nothing
   here touches the rest of the site. Reuses .req-calendar,
   .req-stepper and .req-counter (defined above) as-is.
============================================ */
.reqm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
}
.reqm-modal {
  position: relative;
  background: #FFFFFF;
  color: var(--ink);
  border: 2px solid var(--home-black);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lift);
}

.reqm-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--home-black);
  background: #FFFFFF;
  color: var(--home-black);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.reqm-close:hover { background: var(--home-black); color: #FFFFFF; }

.reqm-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.reqm-alert { margin-bottom: var(--space-md); }

/* Small/Large Request segmented toggle — shown at the top of both
   the Group Request modal and the Large Request modal, joined pill
   pair matching the Canva reference. Only new rule this feature
   needed; everything else below already reuses the classes above. */
.reqm-mode-toggle {
  display: flex;
  justify-content: center;
  border: 1.5px solid var(--home-black);
  border-radius: var(--radius-pill);
  overflow: hidden;
  width: fit-content;
  margin: 0 auto var(--space-md);
}
.reqm-mode-btn {
  border: none;
  background: #FFFFFF;
  color: var(--home-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.reqm-mode-btn.is-active { background: var(--home-black); color: #FFFFFF; }
.reqm-mode-btn:not(.is-active):hover { background: var(--paper-alt); }

/* --- Step 1: calendar + category/quantity/location --- */
.reqm-step1__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.reqm-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.reqm-side__block { display: flex; flex-direction: column; gap: 0.6rem; }
.reqm-side__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

/* Category — black pill select, matches the "All skill" pill
   on workers.php and in the Canva reference. */
.reqm-pill-select {
  position: relative;
}
.reqm-pill-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--home-black);
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 2.2rem 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
}
.reqm-pill-select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.reqm-stepper-wrap { display: flex; justify-content: center; }

.reqm-location input {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
}
.reqm-location input:focus { outline: none; border-color: var(--home-black); }

/* Location autocomplete dropdown (OpenStreetMap Nominatim suggestions) */
.reqm-location { position: relative; }
.loc-suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--paper);
  border: 1.5px solid var(--home-black);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  max-height: 220px;
  overflow-y: auto;
}
.loc-suggest__item {
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.loc-suggest__item:last-of-type { border-bottom: none; }
.loc-suggest__item:hover,
.loc-suggest__item.is-active { background: var(--paper-alt); }
.loc-suggest__credit {
  padding: 0.4rem 1rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* Round black "next" arrow — bottom-right of every step,
   same shape as the triangle button in the Canva reference. */
.reqm-actions { display: flex; justify-content: flex-end; margin-top: var(--space-lg); }
.reqm-arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--home-black);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}
.reqm-arrow-btn:hover:not(:disabled) { background: var(--home-red); }
.reqm-arrow-btn:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.reqm-arrow-btn svg { width: 18px; height: 18px; }

/* --- Step 2: available workers --- */
.reqm-step2__head { text-align: center; margin-bottom: var(--space-md); }
.reqm-step2__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
}
.reqm-step2__subtitle { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.2rem; }
.reqm-back-link {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--home-red);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
.reqm-back-link:hover { text-decoration: underline; }

.reqm-worker-scroll {
  max-height: 46vh;
  overflow-y: auto;
  padding: 0.25rem 0.4rem 0.25rem 0;
  margin-bottom: var(--space-md);
}
.reqm-worker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.reqm-worker-card {
  position: relative;
  background: #FFFFFF;
  border: 2px solid var(--home-black);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 1rem 2.4rem;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.reqm-worker-card.is-selected { background: var(--paper-alt); }
.reqm-worker-card.is-disabled { opacity: 0.4; }
.reqm-worker-card__avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1.5px solid var(--home-black);
}
.reqm-worker-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--home-black);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.reqm-worker-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.1rem;
}
.reqm-worker-card__trade { color: var(--ink-soft); font-size: 0.8rem; margin-bottom: 0.3rem; }
.reqm-worker-card__status { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
.reqm-worker-card__rating { font-size: 0.8rem; margin-bottom: 0.15rem; }
.reqm-worker-card__rating span { color: var(--ink-soft); font-size: 0.85em; }
.reqm-worker-card__rate, .wrk-card__rate { font-size: 0.9rem; font-weight: 600; }

/* Worker Recommendations: "Best Match" badge + the top recommendation
   reason, rendered by wrRecommendationHtml() in workers.php. Reuses
   the existing card's own palette (--home-black / --home-red /
   --ink-soft) — no new colors introduced for this feature. */
.reqm-worker-card__badge {
  display: inline-block;
  background: var(--home-red);
  color: #FFFFFF;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
}
.reqm-worker-card__reason {
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.reqm-worker-card__toggle, .wrk-card__toggle {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--home-black);
  color: #FFFFFF;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.reqm-worker-card__toggle:hover:not(:disabled), .wrk-card__toggle:hover { background: var(--home-red); color: #FFFFFF; }
.reqm-worker-card__toggle:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.reqm-worker-card.is-selected .reqm-worker-card__toggle { background: var(--home-red); }

.reqm-counter {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.reqm-total {
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.reqm-empty { text-align: center; color: var(--ink-soft); padding: var(--space-lg) 0; }
.reqm-loading { text-align: center; color: var(--ink-soft); padding: var(--space-lg) 0; }

@media (max-width: 640px) {
  .reqm-step1__grid { grid-template-columns: 1fr; }
  .reqm-worker-grid { grid-template-columns: 1fr; }
}

/* ============================================
   INDIVIDUAL REQUEST MODAL (workers.php)
   Redesigned into an editorial booking flow: large worker-photo
   hero -> About/history -> a premium calendar + Service Location ->
   a live Request Summary -> the primary red "Request Worker"
   action. Reuses the Group Request modal's shell (.reqm-overlay/
   .reqm-modal/.reqm-close/.reqm-location/.loc-suggest) and the
   shared .req-calendar/.wrk-card__status classes as-is — JS still
   sets wrk-card__status/--available/--busy directly, so those three
   classes are never renamed, only styled here via a descendant
   selector. .iwm-profile__name/.iwm-profile__trade/.iwm-summary
   stay defined below because Step B's review-before-payment screen
   (untouched by this pass) still uses them.
============================================ */
.reqm-modal--iwm { max-width: 900px; }
.reqm-title--iwm {
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.iwm-stepb__sub {
  text-align: center;
  max-width: 420px;
  margin: -0.75rem auto var(--space-lg);
}

.iwm-profile__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.1rem;
}
.iwm-profile__trade { color: var(--ink-soft); font-size: 0.85rem; }

/* Small-caps mono eyebrow — the one repeated label device used to
   introduce every section (About / Select your dates / Service
   location / Request summary) instead of boxing each in a card. */
.iwm-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.iwm-section__sub { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 0.9rem; }
.iwm-rule { border-top: 1px solid var(--line); margin: var(--space-lg) 0; }

/* --- 1. Worker hero --- */
.iwm-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.iwm-hero__photo { flex-shrink: 0; }
.iwm-hero__photo-img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.iwm-hero__photo-img.wrk-card__avatar--initials { font-size: 2.6rem; }
.iwm-hero__info { padding-top: 0.15rem; }
.iwm-hero__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.iwm-hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* .wrk-card__status is set verbatim by JS (className is reassigned
   on every open), so it's styled here via descendant selector rather
   than a class added on the element itself, which JS would wipe. */
.iwm-hero__row .wrk-card__status {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.iwm-hero__row .wrk-card__status::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: currentColor;
}
.iwm-hero__row .wrk-card__status--available { color: var(--good); }
.iwm-hero__row .wrk-card__status--busy { color: var(--ink-soft); }
.iwm-hero__trade {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.iwm-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
}
/* A leading separator (rather than a trailing border-right) so a
   wrapped row never leaves an orphan rule dangling at a line end. */
.iwm-hero__stats span:not(:first-child) {
  position: relative;
  padding-left: 1.1rem;
}
.iwm-hero__stats span:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: var(--line);
}

/* --- 2 & 3. About + view history --- */
.iwm-section { margin-bottom: var(--space-lg); }
.iwm-about { max-width: 640px; }
.iwm-bio {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.iwm-history-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--home-black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease, gap 0.15s ease;
}
.iwm-history-btn span { transition: transform 0.15s ease; }
.iwm-history-btn:hover { color: var(--home-red); gap: 0.55rem; }
.iwm-history-panel {
  background: var(--paper-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin-top: 0.75rem;
  max-height: 160px;
  overflow-y: auto;
}
.iwm-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.iwm-history-list li { font-size: 0.8rem; }
.iwm-history-list li span { color: var(--ink-soft); }
.iwm-history-empty { font-size: 0.8rem; color: var(--ink-soft); }

.iwm-review-card {
  background: var(--paper-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  margin-top: 0.75rem;
}
.iwm-review-card__quote { font-size: 0.85rem; font-style: italic; margin-bottom: 0.5rem; }
.iwm-review-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.iwm-review-nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--home-black);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.iwm-review-nav:hover { background: var(--home-red); }
.iwm-review-nav svg { width: 12px; height: 12px; }

/* --- 4 & 5. Dates + location grid --- */
.reqm-step1__grid--iwm { align-items: start; }

/* --- 6. Request summary --- */
.iwm-summary-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
.iwm-summary-box__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--line);
}
.iwm-summary-box__row:last-child { border-bottom: none; }
.iwm-summary-box__row span:first-child { color: var(--ink-soft); }
.iwm-summary-box__row span:last-child { font-weight: 600; text-align: right; }

/* Primary action — full-width Apolido-red pill, the one place on
   this step that carries the accent color, per the brief. */
.iwm-book-wrap { margin-top: var(--space-md); }
.iwm-book-btn {
  width: 100%;
  background: var(--home-red);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.iwm-book-btn:hover:not(:disabled) { background: var(--home-black); }
.iwm-book-btn:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }

/* Step B — Review Your Request. Worker recap (continuing the hero
   above it visually), a 3-up booking-details strip, and the price
   section below, reusing the hero photo treatment and the same
   eyebrow/rule/eyebrow vocabulary as Step A. */
.iwm-summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--space-md);
}

/* --- 3. Booking details strip --- */
.iwm-detail-row {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.iwm-detail-row__item {
  flex: 1;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.iwm-detail-row__item:not(:last-child) { border-right: 1px solid var(--line); }
.iwm-detail-row__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.iwm-detail-row__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

/* --- 4. Price — a scoped amplification of the shared .pay-amount
   box so the deposit/total reads as the strongest thing on the
   page. Shared by Step B (Review Your Request) and the Payment
   modal's own amount box below, so the whole booking journey uses
   one consistent price treatment; any .pay-amount with no modifier
   class (there are none left on this page) would keep the plain
   look untouched. */
.pay-amount--premium {
  border: 1px solid var(--line);
  margin: var(--space-md) 0 var(--space-lg);
}
.pay-amount--premium .pay-amount__row span:first-child { color: var(--ink-soft); font-size: 0.85rem; }
.pay-amount--premium .pay-amount__row span:last-child { font-weight: 600; }
.pay-amount--premium .pay-amount__row--deposit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: inherit;
}
.pay-amount--premium .pay-amount__row--deposit span:first-child {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.pay-amount--premium .pay-amount__row--deposit span:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--home-red);
}

@media (max-width: 640px) {
  .iwm-hero { flex-direction: column; }
  .iwm-hero__photo-img { width: 100px !important; height: 100px !important; }
  .iwm-detail-row { flex-direction: column; }
  .iwm-detail-row__item:not(:last-child) { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ============================================
   PAYMENT MODAL — "Secure Your Booking" (workers.php +
   user/payment.php). Reuses the exact same overlay/card shell as
   the Request modals (.reqm-overlay/.reqm-modal/.reqm-close), the
   uppercase title treatment (.reqm-title--iwm) and the eyebrow /
   section-rhythm vocabulary from the Requesting Worker and Review
   Your Request steps (.iwm-eyebrow, .pay-amount--premium), so this
   reads as the next step of the same journey rather than a
   different design. The segmented toggle (.reqm-mode-toggle/
   .reqm-mode-btn) is untouched — it's shared with the Small/Large
   Request modals' own toggles elsewhere. Only the pieces genuinely
   specific to payment get .pm-* classes below: the method heading,
   QR frame + scan instructions, the pill inputs, and the submit
   button. payment.php's own standalone page reuses this same
   markup/classes so a direct "Pay deposit" link from the dashboard
   looks identical to the in-flow modal — note that file wasn't
   part of this redesign pass (not provided), so if its markup
   mirrors this structure it will want the same section labels
   added for full visual parity.
============================================ */
.pm-modal__inner { max-width: 420px; margin: 0 auto; }
.pm-booking-meta { text-align: center; margin: -0.5rem auto 0.9rem; }
.pm-subtext {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}

/* The same small mono eyebrow used throughout the booking journey,
   introducing each section here too (Payment summary / Payment
   method / Payment details / Payment reference / Upload payment
   proof) instead of boxing each in its own card. */
.pm-section-eyebrow { text-align: center; margin: var(--space-lg) 0 0.4rem; }
#pmContent > .pm-section-eyebrow:first-child { margin-top: 0; }
.pm-section-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.pm-method-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}

.pm-qr-frame {
  width: 100%;
  max-width: 230px;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pm-qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.pm-qr-frame__placeholder { font-size: 0.78rem; color: var(--ink-soft); padding: 0 1.2rem; text-align: center; }

/* Scan instructions — only ever shown alongside a real QR image
   (toggled in JS), never as a fake prompt over the placeholder. */
.pm-scan-block { text-align: center; margin: 0.75rem 0 0.25rem; }
.pm-scan-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}
.pm-qr-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 0.4rem 0 var(--space-md);
}

.pm-field { margin-bottom: var(--space-md); }
.pm-field-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.pm-input-pill {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: #FFFFFF;
  color: var(--ink);
}
.pm-input-pill:focus { outline: none; border-color: var(--home-black); }
.pm-input-pill.is-invalid { border-color: var(--home-red); }
.pm-field-error {
  font-size: 0.78rem;
  color: var(--home-red);
  margin-top: 0.35rem;
  display: none;
}
.pm-field-error.is-visible { display: block; }

.pm-upload-pill {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  background: var(--paper-alt);
  color: var(--home-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pm-upload-pill:hover { border-color: var(--home-black); background: #FFFFFF; }
.pm-upload-pill.has-file { justify-content: flex-start; text-align: left; border-style: solid; background: #FFFFFF; }
.pm-upload-pill__icon { width: 18px; height: 18px; flex-shrink: 0; }
.pm-upload-pill__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-upload-preview {
  max-width: 100%;
  max-height: 160px;
  margin: 0.6rem auto 0;
  display: block;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* Primary action — the strongest button on the page, same red-pill
   language as "Request Worker" and "Continue to Payment" before it. */
.pm-submit-btn {
  width: 100%;
  background: var(--home-red);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.pm-submit-btn:hover:not(:disabled) { background: var(--home-black); }
.pm-submit-btn:disabled { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }

.pm-trust-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}

.pm-alert { margin-bottom: var(--space-md); }
.pm-loading { text-align: center; color: var(--ink-soft); padding: var(--space-lg) 0; }

@media (max-width: 480px) {
  .pm-modal__inner { max-width: 100%; }
}

/* ---- Client payment messages (admin-set, shown above payment
   methods on user/payment.php and user/add-day.php) — red theme,
   reusing the page's own root tokens, not the admin gold ones. ---- */
.pm-msg-block {
  text-align: left;
  margin-bottom: var(--space-md);
}
.pm-msg-block__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.pm-msg-block__text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.pm-msg-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--paper-alt);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: var(--space-md);
}
.pm-msg-notice__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--home-red);
}
.pm-msg-notice .pm-msg-block__label,
.pm-msg-notice .pm-msg-block__text { margin: 0; }
.pm-msg-notice .pm-msg-block__label { margin-bottom: 0.25rem; }

/* ============================================
   SETTINGS PAGE (user/setting.php) — its own small token set, exact
   values from the brief. Minimal style: no card borders/shadows, rows
   separated only by thin 1px dividers. Scoped under the .stn class
   prefix, unused anywhere else (admin included), so none of this can
   leak into or collide with other pages.
============================================ */
:root {
  --stn-red: #E02D2D;
  --stn-red-dark-text: #B91C1C;
  --stn-red-light-border: #F3B4B4;
  --stn-danger-btn-border: #F1C6C6;
  --stn-text: #141414;
  --stn-text-value: #4A4A4A;
  --stn-text-secondary: #6B6B6B;
  --stn-text-muted: #8A8A8A;
  --stn-line: #F0F0F0;
  --stn-border: #E8E8E8;
  --stn-active-bg: #F5F5F5;
  --stn-success: #16A34A;
}

.stn { max-width: 1000px; margin: 0 auto; padding: 56px 24px 96px; }
.stn__title { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; color: var(--stn-text); margin: 0; }
.stn__subtitle { font-family: var(--font-body); font-size: 15px; color: var(--stn-text-secondary); margin: 6px 0 0; }

.stn__layout { display: flex; gap: 48px; margin-top: 44px; align-items: flex-start; }

/* ---- Left menu ---- */
.stn-menu { width: 180px; flex: 0 0 180px; display: flex; flex-direction: column; position: sticky; top: 24px; }
.stn-menu__item {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px; border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 400;
  color: var(--stn-text-secondary); background: transparent; border: none; text-align: left; cursor: pointer;
  width: 100%;
}
.stn-menu__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: 0 0 6px; }
.stn-menu__item.is-active { background: var(--stn-active-bg); color: var(--stn-text); font-weight: 600; }
.stn-menu__item.is-active .stn-menu__dot { background: var(--stn-red); }
.stn-menu__divider { height: 1px; background: var(--stn-line); margin: 16px 0; }
.stn-menu__link { display: flex; align-items: center; height: 40px; padding: 0 12px 0 26px; font-family: var(--font-body); font-size: 14px; color: var(--stn-text-muted); text-decoration: none; }
.stn-menu__link:hover { color: var(--stn-text-secondary); }

/* ---- Right content ---- */
.stn-content { flex: 1; min-width: 0; }
.stn-section { display: none; }
.stn-section.is-active { display: block; }
.stn-section__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--stn-text); margin: 0; }
.stn-section__desc { font-family: var(--font-body); font-size: 14px; color: var(--stn-text-muted); margin: 4px 0 20px; }

/* ---- Setting row pattern ---- */
.stn-row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 12px 40px; padding: 24px 0; border-top: 1px solid var(--stn-line);
}
.stn-row__left { flex: 1 1 180px; min-width: 180px; }
.stn-row__right { flex: 2 1 320px; min-width: 320px; }
.stn-row__label { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--stn-text); margin: 0; }
.stn-row__desc { font-family: var(--font-body); font-size: 13px; color: var(--stn-text-muted); margin: 2px 0 0; }
.stn-row__value { font-family: var(--font-body); font-size: 14px; color: var(--stn-text-value); }
.stn-row--plain { justify-content: space-between; align-items: center; }
.stn-row--plain .stn-row__label { font-weight: 500; }

/* ---- Inputs / fields ---- */
.stn-field { display: flex; flex-direction: column; gap: 6px; }
.stn-field__label { font-family: var(--font-body); font-size: 12px; color: var(--stn-text-muted); }
.stn-field input[type="text"], .stn-field input[type="email"], .stn-field input[type="password"], .stn-field input[type="tel"] {
  height: 44px; padding: 0 14px; border: 1px solid var(--stn-border); border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; color: var(--stn-text); background: #fff;
}
.stn-field input:focus { outline: none; border-color: var(--stn-text); }
.stn-field__error { font-family: var(--font-body); font-size: 12px; color: var(--stn-red-dark-text); margin: 0; }
.stn-field__hint { font-family: var(--font-body); font-size: 12px; color: var(--stn-text-muted); margin: 4px 0 0; }

.stn-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 320px; }

.stn-phone-field {
  display: flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--stn-border);
  border-radius: 10px; background: #fff; max-width: 320px;
}
.stn-phone-field__prefix { font-family: var(--font-body); font-size: 15px; color: var(--stn-text-muted); margin-right: 8px; }
.stn-phone-field input { border: none; outline: none; font-family: var(--font-body); font-size: 15px; color: var(--stn-text); flex: 1; min-width: 0; padding: 0; height: 100%; }

/* ---- Buttons ---- */
.stn-btn-outline {
  height: 40px; padding: 0 14px; border: 1px solid var(--stn-border); border-radius: 10px; background: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--stn-text); cursor: pointer;
}
.stn-btn-outline:hover { background: var(--stn-active-bg); }
.stn-btn-text {
  border: none; background: transparent; padding: 0; font-family: var(--font-body); font-size: 14px;
  color: var(--stn-text-secondary); cursor: pointer;
}
.stn-btn-text:hover { color: var(--stn-text); }
.stn-btn-text--danger { color: var(--stn-red-dark-text); }
.stn-btn-text--danger:hover { color: var(--stn-red-dark-text); opacity: 0.8; }
.stn-btn-black {
  height: 44px; padding: 0 20px; border: none; border-radius: 10px; background: var(--stn-text); color: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.stn-btn-black:hover { background: #2a2a2a; }
.stn-btn-black:disabled { opacity: 0.6; cursor: default; }
.stn-btn-danger {
  height: 40px; padding: 0 16px; border: none; border-radius: 10px; background: var(--stn-red-dark-text); color: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.stn-btn-danger-outline {
  height: 40px; padding: 0 16px; border: 1px solid var(--stn-danger-btn-border); border-radius: 10px; background: #fff;
  color: var(--stn-red-dark-text); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer;
}
.stn-btn-danger-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.stn-form-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 16px;
  padding-top: 24px; margin-top: 4px; border-top: 1px solid var(--stn-line);
}

/* ---- Profile: photo row ---- */
.stn-photo-row { display: flex; align-items: center; gap: 14px; }
.stn-avatar {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 56px;
  display: flex; align-items: center; justify-content: center;
  background: #1E2A44; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 18px;
}
.stn-avatar img { width: 100%; height: 100%; object-fit: cover; }

.stn-email-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stn-email-current { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; color: var(--stn-text); }
.stn-verified-icon { width: 16px; height: 16px; }
.stn-email-edit { padding: 0 0 24px; }

/* ---- Addresses ---- */
.stn-addr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.stn-addr-row { padding: 22px 0; border-top: 1px solid var(--stn-line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.stn-addr-row--last { border-bottom: 1px solid var(--stn-line); }
.stn-addr-row__left { flex: 1 1 320px; min-width: 240px; }
.stn-addr-row__label { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--stn-text); margin: 0; display: flex; align-items: center; gap: 10px; }
.stn-addr-default { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--stn-red); }
.stn-addr-row__full { font-family: var(--font-body); font-size: 14px; color: var(--stn-text-value); line-height: 1.55; margin: 6px 0 0; }
.stn-addr-row__note { font-family: var(--font-body); font-size: 13px; color: var(--stn-text-muted); margin: 6px 0 0; }
.stn-addr-row__actions { display: flex; align-items: flex-start; gap: 16px; flex: 0 0 auto; }
.stn-empty-note { font-family: var(--font-body); font-size: 14px; color: var(--stn-text-muted); padding: 22px 0; border-top: 1px solid var(--stn-line); border-bottom: 1px solid var(--stn-line); }

/* ---- Security: password expand ---- */
.stn-pw-form { max-width: 420px; display: flex; flex-direction: column; gap: 14px; padding: 20px 0 24px; }
.stn-pw-strength { display: flex; align-items: center; gap: 10px; margin-top: -6px; }
.stn-pw-strength__track { flex: 1; height: 3px; background: #EDEDED; border-radius: 2px; overflow: hidden; }
.stn-pw-strength__fill { height: 100%; width: 0%; background: var(--stn-success); transition: width 0.2s ease; }
.stn-pw-strength__word { font-family: var(--font-body); font-size: 12px; color: var(--stn-text-muted); min-width: 44px; text-align: right; }

/* ---- Notifications ---- */
.stn-notif-head { display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; padding: 0 0 8px; }
.stn-notif-head__col { font-family: var(--font-body); font-size: 12px; color: var(--stn-text-muted); width: 64px; text-align: center; }
.stn-notif-row { display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; padding: 20px 0; border-top: 1px solid var(--stn-line); }
.stn-notif-row--last { border-bottom: 1px solid var(--stn-line); }
.stn-notif-row .stn-toggle { justify-self: center; }

.stn-toggle {
  width: 36px; height: 20px; border-radius: 10px; border: none; background: #E2E2E2; position: relative; cursor: pointer; padding: 0;
}
.stn-toggle.is-on { background: var(--stn-text); }
.stn-toggle__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s ease;
}
.stn-toggle.is-on .stn-toggle__knob { left: 18px; }

/* ---- Account ---- */
.stn-danger-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--stn-line); border-bottom: 1px solid var(--stn-line);
}
.stn-danger-row__left { flex: 1 1 320px; min-width: 240px; }
.stn-danger-row__title { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--stn-red-dark-text); margin: 0; }

/* ---- Modals (Add/Edit address, Delete confirms) ---- */
.stn-modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 20, 20, 0.45); display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 300;
}
.stn-modal {
  background: #fff; border-radius: 14px; padding: 28px; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.3);
}
.stn-modal--sm { max-width: 380px; }
.stn-modal__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--stn-text); margin: 0; }

/* ---- Toast ---- */
.stn-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: var(--stn-text); color: #fff; font-family: var(--font-body); font-size: 13px;
  padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 400;
}
.stn-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Responsive (<720px) ---- */
@media (max-width: 720px) {
  .stn { padding: 32px 20px 72px; }
  .stn__layout { flex-direction: column; gap: 24px; }
  .stn-menu {
    width: 100%; flex: none; flex-direction: row; gap: 6px; overflow-x: auto; position: static;
    padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  .stn-menu__item { flex: 0 0 auto; white-space: nowrap; }
  .stn-menu__divider, .stn-menu__link { display: none; }
  .stn-row { flex-direction: column; align-items: stretch; }
  /* flex-direction:column makes the main axis vertical, so the base
     rule's "flex: 1 1 180px" / "flex: 2 1 320px" (flex-basis as a
     WIDTH) would otherwise be read as a 180px/320px tall box — reset
     the basis here, not just min-width, or each row leaves a huge
     blank gap the height of its old flex-basis. */
  .stn-row__left, .stn-row__right { flex: 0 0 auto; min-width: 0; width: 100%; }
  .stn-name-grid { min-width: 0; }
  .stn-email-row { flex-direction: row; flex-wrap: wrap; }
  .stn-addr-row { flex-direction: column; }
  .stn-notif-head, .stn-notif-row { grid-template-columns: 1fr 48px 48px; }
}

/* ============================================
   ADDRESS AUTOCOMPLETE — dropdown on the Location field itself in
   all 3 request modals on workers.php (see includes/address-picker.php).
   Positioned the same way the existing OpenStreetMap .loc-suggest
   dropdown already is (.reqm-location has position:relative from
   that block) — the two share one visual slot under the input and
   are kept mutually exclusive by the JS, not by CSS. Reuses the
   Settings page's own --stn-* tokens rather than a parallel palette.
============================================ */
.addr-ac {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 41;
  background: #fff; border: 1px solid var(--stn-border); border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
  max-height: 260px; overflow-y: auto;
}
.addr-ac__item {
  min-height: 44px; padding: 8px 14px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border-bottom: 1px solid var(--stn-line);
}
.addr-ac__item:last-of-type { border-bottom: none; }
.addr-ac__item:hover, .addr-ac__item.is-active { background: var(--stn-active-bg); }
.addr-ac__item-top { display: flex; align-items: center; gap: 8px; }
.addr-ac__label { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--stn-text); }
.addr-ac__default-tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--stn-red-dark-text);
  background: var(--stn-red-light-border); padding: 1px 7px; border-radius: 999px;
}
.addr-ac__full { font-family: var(--font-body); font-size: 12.5px; color: var(--stn-text-muted); }
.addr-ac__hl { background: transparent; color: inherit; font-weight: 700; }
.addr-ac__manage {
  display: block; padding: 10px 14px; font-family: var(--font-body); font-size: 12px;
  color: var(--stn-text-secondary); text-decoration: underline; border-top: 1px solid var(--stn-line);
}
.addr-ac__manage:hover { color: var(--stn-text); }
/* ============================================
   CLIENT: CONFIRM COMPLETION PAGE (user/confirm-completion.php)
   - .cc-*  : daily-photo rows + confirm button area shown while the
              client is confirming the work.
   - .rv-*  : the "Make a review for this worker" step. Everything is
              scoped under .rv-card / .rv-* so no other page changes.
   Reuses the existing tokens (--hivis gold, --good, --danger,
   --blueprint navy, --ink, --ink-soft, --line, --font-display,
   --radius-sm); only a few muted tints are defined locally on .rv-card.
============================================ */
.cc-quote { margin: 24px 0 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.cc-quote__label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8B9099; }
.cc-days { margin-top: 6px; border-top: 1px solid var(--line); }
.cc-day { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cc-day__date { font-size: 15px; font-weight: 600; color: var(--ink); }
.cc-day__shots { display: flex; gap: 14px; }
.cc-shot { margin: 0; text-align: center; }
.cc-shot figcaption { margin-top: 5px; font-size: 11.5px; color: #8B9099; }
.cc-day__thumb { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.cc-confirm-form { margin-top: 26px; }
.cc-confirm-form .rv-submit { margin-top: 0; }
.cc-confirm-note { margin: 16px 0 0; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.cc-confirm-note strong { font-weight: 600; color: var(--ink); }

.auth-card.rv-card {
  --rv-mute: #8B9099;
  --rv-gold-ink: #8F7219;
  --rv-star-off: #CFC8B4;
  --rv-good-bg: #EEF6F1;
  --rv-good-ink: #1B8A57;
  --rv-danger-bg: #FDF0EE;
  max-width: 640px;
  padding: 40px 44px 36px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.05);
}
.rv-sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rv-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--rv-mute); }
.rv-crumb b { font-weight: 500; color: var(--ink-soft); }
.rv-done,
.rv-alert { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 14px; font-size: 14px; border-left: 3px solid; border-radius: 4px 8px 8px 4px; }
.rv-done { color: var(--rv-good-ink); background: var(--rv-good-bg); border-left-color: var(--good); }
.rv-done svg { flex: none; }
.rv-note { margin-top: 24px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); background: #F8F6F0; border-left: 3px solid var(--line); border-radius: 4px 8px 8px 4px; }
.rv-alert { color: var(--danger); background: var(--rv-danger-bg); border-left-color: var(--danger); }
.rv-title { margin: 32px 0 0; font-family: var(--font-display); font-size: 30px; line-height: 1.2; font-weight: 650; letter-spacing: -0.022em; color: var(--ink); }
.rv-sub { margin: 10px 0 0; max-width: 500px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.rv-worker { margin-top: 30px; }
.rv-worker + .rv-worker { margin-top: 40px; }
.rv-person { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rv-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--blueprint); color: #EBD98F; font-weight: 600; font-size: 17px; letter-spacing: 0.02em; }
.rv-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.rv-trade { margin-top: 3px; font-size: 13.5px; color: var(--ink-soft); }
.rv-when { margin-left: auto; text-align: right; font-size: 12.5px; line-height: 1.5; color: var(--rv-mute); }
.rv-when b { display: block; font-weight: 500; color: var(--ink-soft); }
.rv-label { display: flex; justify-content: space-between; align-items: baseline; margin-top: 30px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rv-label small { font-weight: 400; font-size: 13px; color: var(--rv-mute); }
.rv-label--feedback { margin-top: 28px; }
.rv-rate { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 0; border: 0; min-width: 0; position: relative; }
.rv-stars { position: relative; display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars label { display: block; cursor: pointer; line-height: 0; }
.rv-stars svg { width: 34px; height: 34px; fill: none; stroke: var(--rv-star-off); stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.12s, stroke 0.12s; }
.rv-stars input:checked ~ label svg,
.rv-stars label:hover svg,
.rv-stars label:hover ~ label svg { fill: var(--hivis); stroke: var(--hivis); }
.rv-stars input:focus-visible + label svg { outline: 2px solid var(--hivis); outline-offset: 2px; border-radius: 4px; }
.rv-rating-text { font-size: 14px; font-weight: 600; color: var(--rv-gold-ink); }
.rv-rating-text span { margin-left: 6px; font-weight: 400; color: var(--rv-mute); }
.rv-rating-text.is-empty { font-weight: 400; color: var(--rv-mute); }
.rv-box { margin-top: 12px; padding: 14px 16px 10px; background: #fff; border: 1.5px solid var(--hivis); border-radius: 8px; }
.rv-box:focus-within { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18); }
.rv-box textarea { display: block; width: 100%; min-height: 104px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 15px; line-height: 1.55; color: var(--ink); }
.rv-box textarea::placeholder { color: #9A9FA7; }
.rv-count { margin-top: 4px; text-align: right; font-size: 12px; color: var(--rv-mute); }
.rv-submit { display: block; width: 100%; height: 50px; margin-top: 30px; border: 0; border-radius: 8px; background: var(--hivis); color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.rv-submit:hover { background: var(--hivis-deep); }
.rv-submit:disabled { opacity: 0.6; cursor: default; }
/* ============================================
   AVAILABILITY REVIEW (user/availability-review.php) — the mandatory
   worker-availability check between a rejected deposit and
   resubmission. Deliberately built from the SAME tokens/components as
   the Payment page right above it (.auth-card, .pay-amount,
   .status-pill, .form-field, .btn) rather than a new visual language —
   this is one more step in the same payment flow, not a new screen
   family.
============================================ */
.avr-card { max-width: 600px; margin: 0 auto; }

/* Rejection notice — deliberately its own component (not .form-alert,
   which the plain validation errors below it still use) so it reads
   as a distinct callout rather than blending into ordinary form
   errors, per the design brief's "clearly distinguish the rejection
   notice from the payment instructions" requirement. Left accent bar
   + small label mirrors the .eyebrow mono-caps convention already
   used for section labels elsewhere on this page. */
.avr-notice {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid #ECC2BA;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  background: #FDF3F1;
  padding: 0.8rem 1rem;
  margin-bottom: var(--space-md);
}
.avr-notice__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--danger);
  font-weight: 600;
}
.avr-notice__text { font-size: 0.88rem; color: var(--ink); line-height: 1.5; }

.avr-dates {
  margin-bottom: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.05rem;
  background: var(--paper);
  transition: border-color 0.15s ease;
}
.avr-dates[open] { border-color: var(--blueprint); }
.avr-dates summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}
.avr-dates summary::-webkit-details-marker { display: none; }
.avr-dates summary::before {
  content: '';
  width: 16px; height: 16px; flex-shrink: 0;
  background: var(--ink-soft);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.avr-dates__form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 0.85rem; }
.avr-dates__form .form-field { margin-bottom: 0; flex: 1 1 160px; }
.avr-dates__note { margin-top: 0.6rem; font-size: 0.83rem; color: var(--ink-soft); }

.avr-booking-dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
  margin-bottom: var(--space-md);
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.avr-booking-dates__label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.avr-booking-dates__value { font-size: 1.05rem; font-weight: 600; color: var(--ink); }

/* Section label — same small mono eyebrow used for "Payment method" /
   "Upload payment proof" etc. in the deposit form (.pm-section-eyebrow
   in style further down), kept left-aligned here since this page's
   content is left-aligned rather than centered. */
.avr-section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.avr-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: var(--space-md); }
.avr-row {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.avr-row--unavailable { border-color: #ECC2BA; background: #FDF8F7; }
.avr-row--summary { padding: 0.7rem 1rem; }
.avr-row__top { display: flex; align-items: center; gap: 0.85rem; }
.avr-row__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blueprint); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.82rem; flex-shrink: 0; overflow: hidden;
}
.avr-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.avr-row__info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.avr-row__info strong { font-size: 0.95rem; font-weight: 600; }
.avr-row__meta { font-size: 0.8rem; color: var(--ink-soft); }
.avr-row__action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}

.avr-pill--available { background: #DCF3E6; color: var(--good); }
.avr-pill--unavailable { background: #F7DDD8; color: var(--danger); }
.avr-pill--changed { background: #DDEBFF; color: var(--blueprint); }
.avr-replace-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--blueprint);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.avr-replace-toggle:hover { text-decoration-color: var(--blueprint); }
.avr-replace-toggle:disabled,
.avr-replace-toggle:disabled:hover {
  background: #EDEDED;
  color: #9A9A9A;
  text-decoration: none;
  cursor: not-allowed;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.avr-row--unavailable .avr-replace-toggle {
  background: #FF393E;
  color: #fff;
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}
.avr-locked-note { font-size: 0.8rem; color: var(--ink-soft); }
.avr-replace-select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  max-width: min(280px, 100%);
  min-width: 0;
  flex: 1 1 220px;
}
.avr-replace-select:focus { outline: none; border-color: var(--blueprint); }
.avr-no-replacement { font-size: 0.82rem; color: var(--danger); }
/* Replacement picker states (Availability Review): idle -> picking ("Confirm Replacement") -> committed ("Change replacement") */
.avr-replace-select[hidden], .avr-replace-cancel[hidden], .avr-row__status[hidden], .avr-helper[hidden] { display: none; }
.avr-replace-cancel { background: none; border: none; padding: 0.35rem 0.2rem; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.avr-replace-cancel:hover { color: var(--ink); }
.avr-row--unavailable .avr-replace-toggle[data-state="committed"] { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); }
.avr-row--unavailable .avr-replace-toggle:disabled { background: #EDEDED; color: #9A9A9A; }
.avr-row--chosen { border-color: #BFE3CE; background: #F6FBF8; }
.avr-row__status { flex: 1 0 100%; margin: 0; font-size: 0.82rem; color: #12694A; }
.avr-replace-toggle:focus-visible, .avr-replace-cancel:focus-visible, .avr-replace-select:focus-visible { outline: 2px solid var(--home-black); outline-offset: 2px; }
.avr-helper {
  font-size: 0.85rem;
  color: var(--danger);
  background: #FDF3F1;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  margin: 0 0 0.75rem;
}
.avr-cancel-link { text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.9rem; }
.avr-cancel-link a { color: var(--danger); text-decoration: underline; cursor: pointer; }

@media (max-width: 560px) {
  .auth-card.avr-card { padding: 28px 20px 24px; }
  .avr-row__top { align-items: flex-start; flex-wrap: wrap; row-gap: 0.5rem; }
  .avr-row__top .avr-row__info { flex-basis: calc(100% - 54px); }
  .avr-row__top .status-pill { flex-basis: 100%; margin-left: 54px; width: fit-content; }
  .avr-row__action { justify-content: space-between; }
  .avr-dates__form { flex-direction: column; align-items: stretch; }
  /* The deposit-due row's label ("50% deposit due now") is the
     longest text .pay-amount__row ever carries on this page — let it
     wrap onto its own line above the amount instead of breaking
     mid-word across several lines. */
  .avr-card .pay-amount__row--deposit { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .avr-card .pay-amount__row--deposit > span:last-child { text-align: left; font-size: 1.1rem; font-weight: 700; }
}

@media (max-width: 560px) {
  .auth-card.rv-card { padding: 28px 20px 24px; }
  .rv-person { flex-wrap: wrap; }
  .rv-when { margin-left: 68px; text-align: left; }
}
/* ============================================
   LEADMEN PAGE (leadmen.php) — "View All Leadmen" directory
   Approved design: compact dark header, warm off-white directory,
   4-up card grid (12/page), white toolbar, red-current pager, and a
   profile popup. Everything is scoped under .lm-* so nothing else on
   the site is touched.
============================================ */
.lm-wrap { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.lm-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 12px; }
.lm-eyebrow--red { color: var(--home-red); }
.lm-eyebrow--dark { color: #C8262B; }

/* --- Header (dark, compact) --- */
.lm-head { background: var(--home-black); color: #FFFFFF; padding-bottom: 36px; }
.lm-head__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem;
}
.lm-crumbs, .lm-crumbs a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.lm-crumbs a:hover { color: #FFFFFF; }
.lm-crumbs [aria-current] { color: #FFFFFF; font-weight: 600; }
.lm-head__back { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 600; text-decoration: none; }
.lm-head__back:hover { color: var(--home-red); }
.lm-head__main { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-top: 28px; }
.lm-head__title {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; color: #FFFFFF;
}
.lm-head__sub { margin: 0; max-width: 600px; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.lm-head__stat {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; color: var(--home-red);
}
.lm-head__stat p { margin: 0; font-size: 0.88rem; color: rgba(255, 255, 255, 0.78); }
.lm-head__stat strong { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: #FFFFFF; }

/* --- Directory (warm off-white) --- */
.lm-dir { background: #F0EEEA; color: var(--home-black); padding: 32px 0 64px; scroll-margin-top: 72px; }
.lm-filters {
  display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(160px, 1fr)) auto;
  gap: 12px; align-items: end; background: #FFFFFF; border-radius: 18px;
  padding: 16px 20px 18px; margin-bottom: 24px; box-shadow: 0 14px 34px -28px rgba(10, 10, 10, 0.4);
}
.lm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lm-field__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4A525C; }
.lm-input {
  width: 100%; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid #D8D3CB;
  border-radius: 10px; background: #FFFFFF; color: var(--home-black); font-family: var(--font-body); font-size: 0.9rem;
}
.lm-input:focus-visible { outline: 2px solid var(--home-red); outline-offset: 1px; border-color: var(--home-red); }
.lm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 28px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: var(--font-body);
  font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lm-btn--dark { background: var(--home-black); color: #FFFFFF; }
.lm-btn--dark:hover { background: var(--home-red); color: var(--home-black); }
.lm-btn--red { background: var(--home-red); color: var(--home-black); font-weight: 700; }
.lm-btn--red:hover { background: #FF5A5E; }
.lm-btn--line { background: transparent; border-color: var(--home-black); color: var(--home-black); }
.lm-btn--line:hover { background: var(--home-black); color: #FFFFFF; }
.lm-btn--lg { height: 54px; font-size: 1rem; }
.lm-btn:focus-visible, .lm-card__view:focus-visible, .lm-pager__btn:focus-visible,
.lm-modal__close:focus-visible, .lm-active__clear:focus-visible, .lm-chip__x:focus-visible { outline: 2px solid var(--home-red); outline-offset: 2px; }

/* active-filter row */
.lm-active { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.lm-active__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lm-active__count { margin: 0; font-size: 0.95rem; color: #4A525C; }
.lm-active__count strong { color: var(--home-black); font-family: var(--font-display); font-size: 1.4rem; }
.lm-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--home-black); color: #FFFFFF; font-size: 0.82rem; font-weight: 600; }
.lm-chip__x { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.lm-chip__x:hover { background: var(--home-red); color: var(--home-black); }
.lm-active__clear { font-size: 0.88rem; font-weight: 600; color: var(--home-black); text-decoration: underline; }
.lm-active__clear:hover { color: var(--home-red); }

/* --- Cards: 4 up on desktop --- */
.lm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lm-card {
  display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border-radius: 16px;
  overflow: hidden; box-shadow: 0 14px 34px -26px rgba(10, 10, 10, 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lm-card:hover, .lm-card:focus-within { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(10, 10, 10, 0.5); }
.lm-card__media {
  position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1d1d1d, #0A0A0A);
}
.lm-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.lm-card__initials { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; color: #FFFFFF; letter-spacing: 0.04em; }
.lm-card__tag {
  position: absolute; left: 12px; top: 12px; z-index: 1; background: var(--home-red); color: var(--home-black);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
.lm-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.lm-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-card__trade { margin: 0 0 10px; font-size: 0.88rem; font-weight: 600; color: #C8262B; }
.lm-card__status { margin: 0 0 14px; display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; }
.lm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lm-card__status--active { color: #14804D; } .lm-card__status--active .lm-dot { background: var(--good); }
.lm-card__status--busy { color: #4A525C; } .lm-card__status--busy .lm-dot { background: #7A828C; }
.lm-card__facts { margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 0; border-top: 1px solid #E4E0DA; border-bottom: 1px solid #E4E0DA; }
.lm-card__facts > div { min-width: 0; }
.lm-card__facts > div + div { padding-left: 12px; border-left: 1px solid #E4E0DA; }
.lm-card__facts dt { font-size: 0.75rem; color: #4A525C; margin: 0 0 3px; }
.lm-card__facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.lm-star { color: #E3B341; } .lm-muted { color: #4A525C; font-weight: 500; font-size: 0.82em; }
.lm-card__view {
  margin-top: auto; display: flex; align-items: center; justify-content: center; height: 46px; border: 0;
  border-radius: 999px; background: var(--home-black); color: #FFFFFF; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.lm-card__view:hover { background: var(--home-red); color: var(--home-black); }

/* --- Empty state --- */
.lm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; background: #FFFFFF; border: 1.5px dashed #D0CAC0; border-radius: 20px; padding: 72px 32px 76px; }
.lm-empty__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--home-black); color: #FFFFFF; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.lm-empty__title { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; margin: 0 0 10px; }
.lm-empty__text { margin: 0 0 30px; max-width: 460px; color: #4A525C; line-height: 1.6; }
.lm-empty__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* --- Pagination --- */
.lm-pager { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.lm-pager__summary { margin: 0; font-size: 0.88rem; color: #4A525C; }
.lm-pager__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lm-pager__btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 16px;
  border: 1px solid #D8D3CB; border-radius: 10px; background: #FFFFFF; color: var(--home-black); font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: border-color 0.15s;
}
a.lm-pager__btn:hover { border-color: var(--home-black); }
.lm-pager__btn.is-current { background: var(--home-red); border-color: var(--home-red); color: var(--home-black); }
.lm-pager__btn.is-disabled { background: #E7E4DF; color: #A9A39A; cursor: not-allowed; }
.lm-pager__gap { padding: 0 6px; color: #4A525C; }

/* --- Profile popup --- */
.lm-lock { overflow: hidden; }
.lm-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 10, 10, 0.78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lm-overlay[hidden] { display: none; }
.lm-modal {
  position: relative; display: flex; width: 960px; max-width: 100%; max-height: calc(100vh - 32px); background: #FFFFFF;
  border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); animation: lm-pop 0.18s ease-out;
}
@keyframes lm-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.lm-modal__close {
  position: absolute; right: 20px; top: 20px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #D8D3CB; background: #FFFFFF; color: var(--home-black); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lm-modal__close:hover { border-color: var(--home-black); }
.lm-modal__media { position: relative; flex: 0 0 340px; background: var(--home-black); min-height: 420px; display: flex; align-items: center; justify-content: center; }
.lm-modal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lm-modal__initials { font-family: var(--font-display); font-weight: 700; font-size: 5rem; color: #FFFFFF; letter-spacing: 0.04em; }
.lm-modal__media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(0deg, rgba(10, 10, 10, 0.92), rgba(10, 10, 10, 0)); pointer-events: none; }
.lm-modal__media .lm-card__tag { left: 20px; top: 20px; font-size: 0.68rem; padding: 6px 12px; }
.lm-modal__spec { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; color: #FFFFFF; }
.lm-modal__spec p { margin: 0 0 4px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }
.lm-modal__spec strong { font-family: var(--font-display); font-size: 1.5rem; }
.lm-modal__body { flex: 1; min-width: 0; padding: 36px 40px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.lm-modal__name { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1.1; margin: 0 0 12px; padding-right: 56px; }
.lm-modal__status { margin: 0 0 24px; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; }
.lm-modal__status.is-active { color: #14804D; } .lm-modal__status.is-active .lm-dot { background: var(--good); }
.lm-modal__status.is-busy { color: #4A525C; } .lm-modal__status.is-busy .lm-dot { background: #7A828C; }
.lm-modal__stats { margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #E4E0DA; border-bottom: 1px solid #E4E0DA; }
.lm-modal__stats > div { padding: 16px 0; min-width: 0; }
.lm-modal__stats > div + div { padding-left: 22px; border-left: 1px solid #E4E0DA; }
.lm-modal__stats dt { font-size: 0.75rem; color: #4A525C; margin: 0 0 4px; }
.lm-modal__stats dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; white-space: nowrap; }
.lm-modal__stats .lm-muted { font-size: 0.55em; }
.lm-modal__h { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: #4A525C; margin: 0 0 8px; }
.lm-modal__bio { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.7; color: #1b1f24; white-space: pre-line; }
.lm-modal__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.lm-modal__chip { padding: 8px 14px; border-radius: 999px; background: #F0EEEA; font-size: 0.82rem; font-weight: 600; }
.lm-modal__actions { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lm-modal__actions .lm-btn--red { flex: 1 1 200px; }
#lmModalAboutWrap[hidden] { display: none; }

/* --- Responsive --- */
@media (max-width: 1179px) {
  .lm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-field--search { grid-column: 1 / -1; }
  .lm-filters .lm-btn { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .lm-wrap { padding: 0 24px; }
  .lm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-modal { flex-direction: column; overflow-y: auto; }
  .lm-modal__media { flex: 0 0 auto; min-height: 240px; height: 240px; }
  .lm-modal__body { overflow: visible; padding: 28px 24px 28px; }
  .lm-modal__name { font-size: 2rem; }
}
@media (max-width: 640px) {
  .lm-wrap { padding: 0 16px; }
  .lm-head__bar { flex-wrap: wrap; gap: 12px; }
  .lm-filters { grid-template-columns: 1fr 1fr; padding: 14px; }
  .lm-filters .lm-field:nth-child(2) { grid-column: 1 / -1; }
  .lm-pager { justify-content: center; }
  .lm-pager__list { justify-content: center; }
}
@media (max-width: 560px) { .lm-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .lm-card, .lm-modal { transition: none; animation: none; } .lm-card:hover { transform: none; } }


/* ============================================
   WORKERS PAGE (workers.php) — redesigned [2026-10-20] to the approved
   Workers preview. The page content sits inside .hp (like Home/Services),
   so it shares the homepage tokens and the shared .svchero / .home-cta /
   .band / .section-title / .home-footer rules. Everything below is the
   Workers-specific part, scoped under .hp. Replaces the former
   "Brand Red" .wk-* block and the .wk-pm / #iwmOverlay restyles.
   Hooks used by the inline scripts (ids, data-*, is-on / is-open / is-n#
   is-p#) are unchanged.
============================================ */
.hp .wk-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp .svchero--wk .svchero__headline {font-size:clamp(2.1rem,3.8vw,3.4rem)}
.hp .svchero--wk .svchero__stat span {font-size:.9rem;color:var(--hp-ink);font-weight:600}
.hp .svchero--wk .svchero__stat--b span {color:var(--hp-ac-ink)}
.hp .wk-hero__trust-n {display:none}
.hp .wk-lead {padding:104px 0 96px;background:var(--hp-dark);color:#fff}
.hp .wk-hero__trust {list-style:none}
.hp .wk-lead__head {display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px}
.hp .wk-lead__intro {max-width:44ch;color:#A9A9AC}
.hp .wk-lp {display:flex;gap:12px;height:560px}
.hp .wk-lpp {position:relative;flex:1 1 0;min-width:0;background:var(--hp-dark-2);overflow:hidden;cursor:pointer;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1);outline-offset:3px}
.hp .wk-lpp.is-on {flex-grow:5.2;cursor:default}
.hp .wk-lpp__img {position:absolute;left:0;top:0;height:100%;width:100%;object-fit:cover;object-position:60% 30%;transition:width .55s cubic-bezier(.2,.7,.2,1),filter .3s;filter:grayscale(.35) brightness(.85)}
.hp .wk-lpp.is-on .wk-lpp__img {width:42%;filter:none}
.hp .wk-lpp__n {position:absolute;left:0;top:0;z-index:2}
.hp .wk-badge {display:inline-block;background:#fff;color:var(--hp-ink);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.78rem;padding:8px 12px}
.hp .wk-lpp__n span:first-child {display:none}
.hp .wk-lpp.is-on .wk-badge {background:var(--hp-ac);color:var(--hp-ac-ink)}
.hp .wk-lpp__v {position:absolute;left:50%;bottom:24px;z-index:2;transform:translateX(-50%);writing-mode:vertical-rl;rotate:180deg;color:#fff;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.25rem;letter-spacing:-.01em;white-space:nowrap;transition:opacity .25s;display:flex;gap:12px;align-items:center}
.hp .wk-lpp__v small {font-family:var(--font-body);font-weight:500;font-size:.8rem;text-transform:none;color:#d6d6d8}
.hp .wk-lpp.is-on .wk-lpp__v {opacity:0;pointer-events:none}
.hp .wk-lpp__d {position:absolute;left:42%;right:0;top:0;bottom:0;padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:0;transform:translateX(16px);transition:opacity .3s,transform .4s;pointer-events:none}
.hp .wk-lpp.is-on .wk-lpp__d {opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.hp .wk-lpp__tr {color:var(--hp-ac);font-weight:600;font-size:.9rem}
.hp .wk-lpp__name {font-size:clamp(2rem,3.2vw,3rem)}
.hp .wk-lpp__bio {color:#B3B3B6;max-width:46ch}
.hp .wk-lpp__bio--empty {color:#77777b}
.hp .wk-lpp__stats {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hp .wk-lpp__stats div {background:#252527;padding:16px 18px}
.hp .wk-lpp__stats dt {font-size:.78rem;color:#9A9A9E;margin-bottom:6px}
.hp .wk-lpp__stats dd {font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.hp .wk-lead__star, .hp .wk-card__star {color:var(--hp-ac)}
.hp .wk-lead__muted, .hp .wk-card__muted {color:#8B8B8F;font-size:.8em;font-weight:500}
.hp .wk-lead__cta {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hp .wk-lead__btn {display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;background:#fff;color:var(--hp-ink);border:2px solid #fff;font-family:var(--font-display);font-weight:700;font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.hp .wk-lead__btn::before {content:"";position:absolute;inset:0;background:var(--hp-ac);transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:-1}
.hp .wk-lead__btn:hover {color:var(--hp-ac-ink)}
.hp .wk-lead__btn:hover::before {transform:none}
.hp .wk-lead__note {font-size:.82rem;color:#8B8B8F}
.hp .wk-lead__bar {display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;flex-wrap:wrap}
.hp .wk-lp-ctl {display:flex;align-items:center;gap:12px}
.hp .wk-lp-ctl__btn {width:50px;height:50px;background:transparent;border:1.5px solid #fff;color:#fff;cursor:pointer;font-size:1.1rem;transition:background .2s,color .2s}
.hp .wk-lp-ctl__btn:hover {background:#fff;color:var(--hp-ink)}
.hp .wk-lp-ctl__count {font-family:var(--font-display);font-weight:700;margin-left:8px}
.hp .wk-lp-ctl__bar {display:block;position:relative;width:140px;height:3px;background:#3a3a3d}
.hp .wk-lp-ctl__bar b {position:absolute;top:0;bottom:0;background:var(--hp-ac);transition:left .4s,width .4s}
.hp .wk-lead__all {display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.hp .wk-lead__all-arrow {transition:transform .3s}
.hp .wk-lead__all[aria-expanded="true"] .wk-lead__all-arrow {transform:rotate(90deg)}
.hp .wk-lead__panel-wrap {display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.hp .wk-lead__panel-wrap.is-open {grid-template-rows:1fr}
.hp .wk-lead__panel-clip {overflow:hidden}
.hp .wk-lead__panel {background:var(--hp-dark-2);margin-top:28px;padding:36px}
.hp .wk-lead__panel-head {display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:12px}
.hp .wk-lead__panel-title {font-size:1.8rem}
.hp .wk-lead__panel-eyebrow {display:none}
.hp .wk-lead__search {display:flex;align-items:center;gap:10px;background:#252527;padding:0 16px;height:50px;min-width:min(340px,100%)}
.hp .wk-lead__search input {flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;outline:0}
.hp .wk-lead__panel-meta {display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;color:#A9A9AC;font-size:.9rem}
.hp .wk-lead__less {background:none;border:0;color:#fff;font:600 .9rem var(--font-body);display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.hp .wkl-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp .wkl-card {background:#fff;color:var(--hp-ink);display:flex;flex-direction:column}
.hp .wkl-card__media {aspect-ratio:4/4.4;overflow:hidden;position:relative}
.hp .wkl-card__media img {width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hp .wkl-card__top {display:none}
.hp .wkl-card__body {padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.hp .wkl-card__trade {font-size:.82rem;color:var(--hp-soft);font-weight:600}
.hp .wkl-card__name {font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.hp .wkl-card__meta {font-size:.85rem;color:var(--hp-soft)}
.hp .wkl-card__view {margin-top:8px;align-self:flex-start;background:var(--hp-ink);color:#fff;border:0;padding:11px 16px;font:700 .8rem var(--font-display);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background .25s,color .25s}
.hp .wkl-card__view:hover {background:var(--hp-ac);color:var(--hp-ac-ink)}
.hp .wkl-pager {margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:#A9A9AC;font-size:.88rem}
.hp .wkl-pager__list {list-style:none;display:flex;gap:6px}
.hp .wkl-pager__btn {display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1.5px solid #4a4a4d;color:#fff;background:none;font:600 .85rem var(--font-body)}
.hp .wkl-pager__btn.is-current {background:var(--hp-ac);color:var(--hp-ac-ink);border-color:var(--hp-ac)}
.hp .wkl-pager__btn.is-disabled {opacity:.4}
.hp .wk-dir {background:var(--hp-tint);padding:104px 0 112px}
.hp .wk-dir__head {display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.hp .wk-dir__tools {max-width:46ch}
.hp .wk-dir__lede {color:var(--hp-soft)}
.hp .wk-dir__count {margin-top:12px;font-size:.95rem}
.hp .wk-dir__count strong {font-family:var(--font-display);font-size:1.4rem}
.hp .wk-filters {display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;background:#fff;padding:20px}
.hp .wk-field {display:flex;flex-direction:column;gap:6px}
.hp .wk-field__label {font-size:.8rem;font-weight:600;color:var(--hp-soft)}
.hp .wk-input {height:50px;border:1.5px solid var(--hp-line);background:#fff;padding:0 14px;font:inherit;color:var(--hp-ink);border-radius:0}
.hp .wk-input:focus {outline:2px solid var(--hp-ac);outline-offset:0;border-color:var(--hp-ink)}
.hp .wk-chips {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.hp .wk-chip {display:inline-flex;gap:8px;align-items:center;padding:11px 16px;border:1.5px solid var(--hp-ink);background:#fff;font-weight:600;font-size:.88rem;transition:background .2s,color .2s}
.hp .wk-chip small {font-size:.75rem;opacity:.65}
.hp .wk-chip:hover, .hp .wk-chip[aria-pressed="true"] {background:var(--hp-ink);color:#fff}
.hp .wk-dir__under {margin:12px 0 28px;text-align:right}
.hp .wk-filters__reset {font-size:.88rem;font-weight:600;text-decoration:underline}
.hp .wk-crew {display:grid;grid-template-columns:1fr auto;grid-template-areas:"k a" "t a" "s a";gap:6px 32px;align-items:center;background:var(--hp-dark);color:#fff;padding:36px 40px;margin-bottom:28px;position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.hp .wk-crew::before {content:"";position:absolute;inset:0;background:var(--hp-ac);transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:-1}
.hp .wk-crew:hover {color:var(--hp-ac-ink)}
.hp .wk-crew:hover::before {transform:none}
.hp .wk-crew__k {grid-area:k;display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:#C9C9CC;transition:color .3s}
.hp .wk-crew:hover .wk-crew__k {color:var(--hp-ac-ink)}
.hp .wk-crew__k i {width:8px;height:8px;border-radius:50%;background:var(--hp-ac)}
.hp .wk-crew:hover .wk-crew__k i {background:var(--hp-ac-ink)}
.hp .wk-crew__t {grid-area:t;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.03em;line-height:1}
.hp .wk-crew__s {grid-area:s;color:#A9A9AC;transition:color .3s}
.hp .wk-crew:hover .wk-crew__s {color:var(--hp-ac-ink)}
.hp .wk-crew__a {grid-area:a;width:76px;height:76px;background:var(--hp-ac);color:var(--hp-ac-ink);display:grid;place-items:center;transition:background .3s,color .3s}
.hp .wk-crew:hover .wk-crew__a {background:var(--hp-ink);color:#fff}
.hp .wk-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hp .wk-card {background:#fff;display:flex;flex-direction:column;transition:transform .3s ease}
.hp .wk-card:hover {transform:translateY(-6px)}
.hp .wk-card__media {position:relative;aspect-ratio:4/4.6;overflow:hidden;background:#d9d7d2}
.hp .wk-card__img {width:100%;height:100%;object-fit:cover;object-position:60% 30%;transition:transform .5s ease}
.hp .wk-card:hover .wk-card__img {transform:scale(1.05)}
.hp .wk-card__trade {position:absolute;left:0;bottom:0;z-index:1;background:#fff;padding:9px 14px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.78rem}
.hp .wk-card__body {padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.hp .wk-card__name {font-size:1.3rem;line-height:1.05}
.hp .wk-card__no {display:none}
.hp .wk-card__status {display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600}
.hp .wk-card__dot {width:8px;height:8px;border-radius:50%;background:var(--hp-ac)}
.hp .wk-card__status--busy .wk-card__dot {background:#9A9A9D}
.hp .wk-card__status--busy {color:var(--hp-soft)}
.hp .wk-card__facts {display:grid;gap:0;border-top:1px solid var(--hp-line)}
.hp .wk-card__facts div {display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--hp-line);font-size:.9rem}
.hp .wk-card__facts dt {color:var(--hp-soft)}
.hp .wk-card__facts dd {font-weight:600}
.hp .wk-card__actions {display:grid;grid-template-columns:1fr 1.15fr;gap:8px;margin-top:auto}
.hp .wk-card__view, .hp .wk-card__request {display:grid;place-items:center;height:46px;font-family:var(--font-display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;border:1.5px solid var(--hp-ink);position:relative;overflow:hidden;isolation:isolate;transition:color .3s;text-align:center;line-height:1.1}
.hp .wk-card__view {background:#fff;color:var(--hp-ink)}
.hp .wk-card__view::before, .hp .wk-card__request::before {content:"";position:absolute;inset:0;transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:-1}
.hp .wk-card__view::before {background:var(--hp-ink)}
.hp .wk-card__view:hover {color:#fff}
.hp .wk-card__request {background:var(--hp-ac);border-color:var(--hp-ac);color:var(--hp-ac-ink)}
.hp .wk-card__request::before {background:var(--hp-ink)}
.hp .wk-card__request:hover {color:#fff;border-color:var(--hp-ink)}
.hp .wk-card__view:hover::before, .hp .wk-card__request:hover::before {transform:none}
.hp .wk-pager {margin-top:44px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hp .wk-pager__summary {color:var(--hp-soft);font-size:.92rem}
.hp .wk-pager__list {list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hp .wk-pager__btn {display:grid;place-items:center;min-width:46px;height:46px;padding:0 16px;border:1.5px solid var(--hp-ink);background:#fff;font-weight:600;font-size:.9rem;transition:background .2s,color .2s}
.hp a.wk-pager__btn:hover {background:var(--hp-ink);color:#fff}
.hp .wk-pager__btn.is-current {background:var(--hp-ink);color:#fff}
.hp .wk-pager__btn.is-disabled {opacity:.4}
.hp .wk-pager__gap {padding:0 6px}
.hp .wk-lmo {position:fixed;inset:0;z-index:100;background:rgba(10,10,11,.72);display:grid;place-items:center;padding:24px;overflow:auto}
.hp .wk-lmo[hidden] {display:none}
.hp .wk-pm {display:grid;grid-template-columns:.9fr 1.1fr;width:min(980px,100%);max-height:min(720px,92vh);background:#fff}
.hp .wk-pm__l {position:relative;background:var(--hp-dark);min-height:420px}
.hp .wk-pm__img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hp .wk-pm__lt {position:absolute;left:0;top:0;display:flex;gap:6px}
.hp .wk-pm__chip {background:#fff;font-weight:600;font-size:.78rem;padding:8px 12px}
.hp .wk-pm__chip--no {display:none}
.hp .wk-pm__lb {position:absolute;left:0;right:0;bottom:0;padding:90px 28px 28px;color:#fff;background:linear-gradient(0deg,rgba(10,10,11,.92),rgba(10,10,11,0))}
.hp .wk-pm__k {color:var(--hp-ac);font-weight:600;font-size:.9rem}
.hp .wk-pm__name {font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:1.9rem;letter-spacing:-.02em;line-height:1}
.hp .wk-pm__s {color:#d6d6d8;font-size:.9rem;margin-top:6px}
.hp .wk-pm__r {position:relative;display:flex;flex-direction:column;min-height:0}
.hp .wk-pm__x {position:absolute;right:0;top:0;width:52px;height:52px;border:0;background:var(--hp-ink);color:#fff;font-size:1.6rem;cursor:pointer;z-index:2;transition:background .2s}
.hp .wk-pm__x:hover {background:var(--hp-ac);color:var(--hp-ac-ink)}
.hp .wk-pm__scroll {padding:40px 40px 20px;overflow:auto;flex:1}
.hp .wk-pm__eyebrow {font-weight:600;color:var(--hp-soft);font-size:.9rem}
.hp .wk-pm__title {font-size:2.2rem;margin:6px 0 8px}
.hp .wk-pm__avail {display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;margin-bottom:20px}
.hp .wk-pm__avail::before {content:"";width:8px;height:8px;border-radius:50%;background:var(--hp-ac)}
.hp .wk-pm__st {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.hp .wk-pm__st div {background:var(--hp-tint);padding:14px 16px}
.hp .wk-pm__st dt {display:flex;gap:6px;align-items:center;font-size:.78rem;color:var(--hp-soft);margin-bottom:6px}
.hp .wk-pm__st dd {font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.hp .wk-pm__ic {width:14px;height:14px;color:var(--hp-ac)}
.hp .wk-pm__sec {margin-bottom:20px}
.hp .wk-pm__sec h4 {display:flex;gap:8px;align-items:center;font-family:var(--font-display);text-transform:uppercase;font-size:.9rem;margin-bottom:8px}
.hp .wk-pm__sec p {color:var(--hp-soft);font-size:.95rem}
.hp .wk-pm__tags {display:flex;gap:8px;flex-wrap:wrap}
.hp .wk-pm__tag {border:1.5px solid var(--hp-ink);padding:7px 12px;font-weight:600;font-size:.82rem}
.hp .wk-pm__hb {width:100%;display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--hp-tint);border:0;padding:16px 18px;font:700 .88rem var(--font-display);text-transform:uppercase;cursor:pointer}
.hp .wk-pm__hist {display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}
.hp .wk-pm__hist>div {overflow:hidden}
.hp .wk-pm__hist.is-open {grid-template-rows:1fr}
.hp .wk-pm__hist p {padding:14px 18px;color:var(--hp-soft);font-size:.9rem}
.hp .wk-pm__cta {display:flex;gap:10px;padding:20px 40px 28px;border-top:1px solid var(--hp-line)}
.hp .wk-pm__pill {flex:1;display:flex;justify-content:center;align-items:center;gap:10px;height:52px;background:var(--hp-ac);color:var(--hp-ac-ink);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;transition:background .25s,color .25s}
.hp .wk-pm__pill:hover {background:var(--hp-ink);color:#fff}
.hp .wk-pm__ghost {height:52px;padding:0 22px;border:1.5px solid var(--hp-ink);background:#fff;font:700 .9rem var(--font-display);text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.hp .wk-pm__ghost:hover {background:var(--hp-ink);color:#fff}
@media (max-width:1080px) {
  .hp .wk-grid {grid-template-columns:repeat(2,1fr)}
  .hp .wkl-grid {grid-template-columns:repeat(2,1fr)}
  .hp .wk-lp {flex-direction:column;height:auto}
  .hp .wk-lpp, .hp .wk-lpp.is-on {flex:none;cursor:default}
  .hp .wk-lpp__img, .hp .wk-lpp.is-on .wk-lpp__img {position:static;width:100%;height:auto;aspect-ratio:4/3;filter:none;display:block}
  .hp .wk-lpp__v {display:none}
  .hp .wk-lpp__d, .hp .wk-lpp.is-on .wk-lpp__d {position:static;opacity:1;transform:none;pointer-events:auto;padding:28px 24px 32px}
  .hp .wk-lpp__n {z-index:2}
  .hp .wk-lpp .wk-badge {background:var(--hp-ac);color:var(--hp-ac-ink)}
  .hp .wk-lead__head {flex-direction:column;align-items:flex-start}
  .hp .wk-lp-ctl {display:none}
  .hp .wk-filters {grid-template-columns:1fr}
  .hp .wk-pm {grid-template-columns:1fr;max-height:none}
  .hp .wk-pm__l {min-height:300px}
}
@media (max-width:720px) {
  .hp .wk-grid {grid-template-columns:1fr}
  .hp .wkl-grid {grid-template-columns:1fr}
  .hp .wk-lead, .hp .wk-dir {padding:72px 0}
  .hp .wk-lpp__stats {grid-template-columns:1fr 1fr 1fr;gap:8px}
  .hp .wk-lpp__stats div {padding:12px}
  .hp .wk-lpp__stats dd {font-size:1.1rem}
  .hp .wk-crew {grid-template-columns:1fr;grid-template-areas:"k" "t" "s" "a";padding:28px 24px}
  .hp .wk-crew__a {width:56px;height:56px;margin-top:12px}
  .hp .wk-pm__scroll, .hp .wk-pm__cta {padding-left:22px;padding-right:22px}
  .hp .wk-pm__st {grid-template-columns:1fr 1fr 1fr}
  .hp .wk-lead__panel {padding:22px}
  .hp .wk-pager {flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce) {
  .hp .wk-lpp, .hp .wk-lpp__img, .hp .wk-lpp__d, .hp .wk-card, .hp .wk-card__img {transition:none}
}
.hp .reqm-overlay {position:fixed;inset:0;z-index:110;background:rgba(10,10,11,.72);display:grid;place-items:center;padding:24px;overflow:auto}
.hp .reqm-overlay[hidden] {display:none}
.hp .reqm-modal {position:relative;background:#fff;width:min(1040px,100%);max-height:min(860px,94vh);overflow:auto;padding:44px 44px 32px;animation:wkModal .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes wkModal{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
.hp .reqm-close {position:absolute;right:0;top:0;width:52px;height:52px;border:0;background:var(--hp-ink);color:#fff;font-size:1.6rem;cursor:pointer;z-index:2;transition:background .2s}
.hp .reqm-close:hover {background:var(--hp-ac)}
.hp .reqm-title {font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:20px;padding-right:48px}
.hp .reqm-mode-toggle {display:inline-flex;border:1.5px solid var(--hp-ink);margin-bottom:22px}
.hp .reqm-mode-btn {height:46px;padding:0 24px;border:0;background:#fff;font:700 .84rem var(--font-display);text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.hp .reqm-mode-btn.is-active {background:var(--hp-ink);color:#fff}
.hp .reqm-step1__grid {display:grid;grid-template-columns:1.05fr 1fr;gap:32px}
.hp .req-calendar {border:1px solid var(--hp-line);padding:20px;background:#fff}
.hp .req-calendar__header {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.hp .req-calendar__month {font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.05rem}
.hp .req-calendar__nav {width:44px;height:44px;border:1.5px solid var(--hp-ink);background:#fff;font-size:1.3rem;cursor:pointer;transition:background .2s,color .2s}
.hp .req-calendar__nav:hover {background:var(--hp-ink);color:#fff}
.hp .req-calendar__weekdays, .hp .req-calendar__grid {display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hp .req-calendar__weekdays span {text-align:center;font-size:.72rem;font-weight:700;color:var(--hp-soft);text-transform:uppercase;padding-bottom:6px}
.hp .req-calendar__day {height:44px;border:1px solid transparent;background:#fff;font:500 .92rem var(--font-body);cursor:pointer;transition:background .15s}
.hp .req-calendar__day:hover:not(:disabled) {background:var(--hp-tint);border-color:var(--hp-ink)}
.hp .req-calendar__day:disabled {color:#B5B3AE;cursor:not-allowed;background:none}
.hp .req-calendar__day--empty {visibility:hidden}
.hp .req-calendar__day--in-range {background:#FFE9EA}
.hp .req-calendar__day--start, .hp .req-calendar__day--end {background:var(--hp-ac);color:#fff;font-weight:700}
.hp .req-calendar__day--booked:disabled {background:var(--hp-ink);color:#fff;opacity:.85}
.hp .req-calendar__day--held:disabled {background:var(--hp-tint);color:#4A4A4D;border:1px dashed #8B8B8F}
.hp .req-calendar__range {margin-top:14px;font-weight:600;font-size:.9rem}
.hp .req-calendar__legend {display:flex;gap:16px;margin-top:10px;font-size:.8rem;color:var(--hp-soft)}
.hp .req-calendar__legend-item {display:flex;gap:6px;align-items:center}
.hp .req-calendar__legend-swatch {width:12px;height:12px;background:var(--hp-ink)}
.hp .req-calendar__legend-swatch--held {background:var(--hp-tint);border:1px dashed #8B8B8F}
.hp .reqm-side {display:flex;flex-direction:column;gap:20px}
.hp .reqm-side__label, .hp .iwm-eyebrow {display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;margin-bottom:8px}
.hp .reqm-pill-select select, .hp .reqm-side input[type=text] {width:100%;height:52px;padding:0 16px;border:1.5px solid var(--hp-ink);background:#fff;font:500 1rem var(--font-body);border-radius:0;appearance:none}
.hp .reqm-pill-select {position:relative}
.hp .reqm-pill-select::after {content:"";position:absolute;right:18px;top:22px;width:8px;height:8px;border:solid var(--hp-ink);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.hp .reqm-side input:focus, .hp .reqm-pill-select select:focus {outline:3px solid var(--hp-ac);outline-offset:0}
.hp .req-stepper {display:inline-flex;border:1.5px solid var(--hp-ink)}
.hp .req-stepper__btn {width:52px;height:52px;border:0;background:#fff;font-size:1.4rem;cursor:pointer;transition:background .2s,color .2s}
.hp .req-stepper__btn:hover {background:var(--hp-ink);color:#fff}
.hp .req-stepper__value {min-width:64px;display:grid;place-items:center;font:700 1.3rem var(--font-display);border-inline:1.5px solid var(--hp-ink)}
.hp .iwm-summary-box {background:var(--hp-tint);padding:20px}
.hp .iwm-summary-box__row {display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hp-line);font-size:.92rem}
.hp .iwm-summary-box__row:last-child {border:0}
.hp .iwm-summary-box__row span:first-child {color:var(--hp-soft)}
.hp .iwm-summary-box__row span:last-child {font-weight:600;text-align:right}
.hp .iwm-section__sub {color:var(--hp-soft);font-size:.9rem;margin:-4px 0 12px}
.hp .iwm-rule {height:1px;background:var(--hp-line);margin:28px 0}
.hp .iwm-hero {display:grid;grid-template-columns:200px 1fr;gap:28px}
.hp .iwm-hero__photo {aspect-ratio:3/4;background:var(--hp-tint);overflow:hidden}
.hp .iwm-hero__photo img {width:100%;height:100%;object-fit:cover}
.hp .iwm-hero__row {display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hp .iwm-hero__name {font-size:1.8rem}
.hp .iwm-hero__trade {color:var(--hp-soft);font-weight:600;margin:4px 0 12px}
.hp .iwm-hero__stats {display:flex;gap:18px;flex-wrap:wrap;font-weight:600;margin-bottom:16px}
.hp .iwm-bio {color:var(--hp-soft)}
.hp .iwm-history-btn {margin-top:12px;background:none;border:0;border-bottom:2px solid var(--hp-ac);font-weight:700;cursor:pointer;padding:4px 0;min-height:36px}
.hp .iwm-review-card {margin-top:16px;border-left:4px solid var(--hp-ac);background:var(--hp-tint);padding:16px 18px}
.hp .iwm-review-card__foot {display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.84rem;color:var(--hp-soft)}
.hp .reqm-actions {display:flex;justify-content:flex-end;margin-top:24px}
.hp .reqm-arrow-btn {width:64px;height:64px;border:0;background:var(--hp-ac);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.hp .reqm-arrow-btn:hover {background:var(--hp-ink)}
.hp .reqm-arrow-btn:disabled {background:var(--hp-tint);color:#9A9A9E;cursor:not-allowed}
.hp .reqm-arrow-btn svg {width:22px;height:22px}
.hp .iwm-book-btn {width:100%;height:56px;border:0;background:var(--hp-ac);color:#fff;font:700 .95rem var(--font-display);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .2s}
.hp .iwm-book-btn:hover {background:var(--hp-ink)}
.hp .reqm-step2__head {margin-bottom:18px}
.hp .reqm-step2__title {font-size:1.8rem}
.hp .reqm-step2__subtitle {color:var(--hp-soft);margin:6px 0}
.hp .reqm-back-link {font-weight:700;border-bottom:2px solid var(--hp-ac);cursor:pointer;display:inline-block;margin-top:4px}
.hp .reqm-worker-scroll {max-height:420px;overflow:auto;padding:2px}
.hp .reqm-worker-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hp .reqm-worker-card {display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px;border:1.5px solid var(--hp-line);background:#fff;position:relative;cursor:pointer;transition:border-color .2s,transform .2s}
.hp .reqm-worker-card:hover {border-color:var(--hp-ink);transform:translateY(-2px)}
.hp .reqm-worker-card.is-selected {border-color:var(--hp-ac);box-shadow:inset 0 0 0 1.5px var(--hp-ac)}
.hp .reqm-worker-card__avatar {width:64px;height:64px;object-fit:cover;background:var(--hp-tint)}
.hp .reqm-worker-card__name {font:700 1rem var(--font-display);text-transform:uppercase}
.hp .reqm-worker-card__trade, .hp .reqm-worker-card__rate {font-size:.84rem;color:var(--hp-soft)}
.hp .reqm-worker-card__badge {position:absolute;top:0;right:0;background:var(--hp-ink);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px}
.hp .reqm-worker-card__toggle {margin-top:8px;min-height:40px;border:1.5px solid var(--hp-ink);background:#fff;font-weight:700;font-size:.8rem;text-transform:uppercase;cursor:pointer;grid-column:1/-1}
.hp .reqm-worker-card.is-selected .reqm-worker-card__toggle {background:var(--hp-ac);border-color:var(--hp-ac);color:#fff}
.hp .reqm-counter {margin-top:16px;font-weight:700}
.hp .reqm-total {color:var(--hp-soft);font-size:.92rem}
.hp .reqm-alert {display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--err,#B3001B);background:#FDECEE;color:#B3001B;padding:12px 14px;font-weight:600;margin-bottom:16px}
@media (max-width:900px) {
  .hp .reqm-overlay {padding:0;place-items:stretch}
  .hp .reqm-modal {width:100%;max-height:none;min-height:100%;padding:60px 18px 24px}
  .hp .reqm-step1__grid {grid-template-columns:1fr;gap:22px}
  .hp .iwm-hero {grid-template-columns:110px 1fr;gap:16px}
  .hp .iwm-hero__name {font-size:1.35rem}
  .hp .reqm-worker-grid {grid-template-columns:1fr}
  .hp .reqm-worker-scroll {max-height:none}
  .hp .req-calendar {padding:12px}
  .hp .req-calendar__day {height:46px}
  .hp .reqm-actions {position:sticky;bottom:0;background:#fff;padding:12px 0;margin:16px 0 0;border-top:1px solid var(--hp-line)}
  .hp .reqm-arrow-btn {width:100%;height:56px}
  .hp .iwm-book-btn {height:58px}
  .hp .reqm-mode-btn {flex:1}
}
@media (prefers-reduced-motion:reduce) {
  .hp .reqm-modal {animation:none}
}
.hp .wk-lp-ctl__bar b.is-n2.is-p1 {left:0.00%;width:50.00%}
.hp .wk-lp-ctl__bar b.is-n2.is-p2 {left:50.00%;width:50.00%}
.hp .wk-lp-ctl__bar b.is-n3.is-p1 {left:0.00%;width:33.33%}
.hp .wk-lp-ctl__bar b.is-n3.is-p2 {left:33.33%;width:33.33%}
.hp .wk-lp-ctl__bar b.is-n3.is-p3 {left:66.67%;width:33.33%}
.hp .wk-lp-ctl__bar b.is-n4.is-p1 {left:0.00%;width:25.00%}
.hp .wk-lp-ctl__bar b.is-n4.is-p2 {left:25.00%;width:25.00%}
.hp .wk-lp-ctl__bar b.is-n4.is-p3 {left:50.00%;width:25.00%}
.hp .wk-lp-ctl__bar b.is-n4.is-p4 {left:75.00%;width:25.00%}
.hp .wk-lp-ctl__bar b.is-n5.is-p1 {left:0.00%;width:20.00%}
.hp .wk-lp-ctl__bar b.is-n5.is-p2 {left:20.00%;width:20.00%}
.hp .wk-lp-ctl__bar b.is-n5.is-p3 {left:40.00%;width:20.00%}
.hp .wk-lp-ctl__bar b.is-n5.is-p4 {left:60.00%;width:20.00%}
.hp .wk-lp-ctl__bar b.is-n5.is-p5 {left:80.00%;width:20.00%}
.hp .wk-lp-ctl__bar b.is-n6.is-p1 {left:0.00%;width:16.67%}
.hp .wk-lp-ctl__bar b.is-n6.is-p2 {left:16.67%;width:16.67%}
.hp .wk-lp-ctl__bar b.is-n6.is-p3 {left:33.33%;width:16.67%}
.hp .wk-lp-ctl__bar b.is-n6.is-p4 {left:50.00%;width:16.67%}
.hp .wk-lp-ctl__bar b.is-n6.is-p5 {left:66.67%;width:16.67%}
.hp .wk-lp-ctl__bar b.is-n6.is-p6 {left:83.33%;width:16.67%}

/* ---- Hooks the existing markup/JS already use (kept as-is, restyled) ---- */
.hp .svchero--wk .svchero__stage { align-self: stretch; }
.hp .wk-hero__title > span { display: block; animation: wkRise .9s cubic-bezier(.2,.7,.2,1) both; }
.hp .wk-hero__title > span:nth-child(2) { animation-delay: .12s; }
.hp .wk-lead__eyebrow, .hp .wk-dir__eyebrow { display: none; }
.hp .wk-lead__head > div:first-child { min-width: 0; }
.hp .wk-lead__results[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
.hp .wk-lead__all { background: none; border: 0; color: #fff; text-decoration: none; }
.hp .wk-lead__all:hover { color: var(--hp-ac); }
.hp .wk-lpp__img--ph, .hp .wk-card__img--ph, .hp .wkl-card__img--ph { object-position: 60% 30%; }
.hp .wk-lead__panel-count { font-weight: 600; }
.hp .wk-lead__less svg { transform: rotate(180deg); }
.hp .wkl-card__img--ph { background: var(--hp-tint); }
.hp .wkl-pager__summary { margin: 0; }
.hp .wkl-pager__btn { cursor: pointer; }
.hp a.wkl-pager__btn:hover, .hp button.wkl-pager__btn:hover { background: #fff; color: var(--hp-ink); }
.hp .wkl-empty { background: var(--hp-dark-2); color: #fff; padding: 40px 28px; text-align: center; }
.hp .wkl-empty__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; }
.hp .wkl-empty__text { color: #A9A9AC; margin-top: 8px; }
.hp .wkl-retry { background: none; border: 0; border-bottom: 2px solid var(--hp-ac); color: #fff; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.hp .wkl-star { color: var(--hp-ac); }
.hp .wkl-card__status, .hp .wkl-card__no { display: none; }
.hp .wkl-card__meta { margin: 0; }
.hp .wk-lpp:focus-visible, .hp .wk-lead__btn:focus-visible, .hp .wk-lp-ctl__btn:focus-visible,
.hp .wk-lead__all:focus-visible, .hp .wk-chip:focus-visible, .hp .wk-card a:focus-visible,
.hp .wk-pager__btn:focus-visible, .hp .wkl-card__view:focus-visible, .hp .wk-btn:focus-visible,
.hp .wk-crew:focus-visible { outline: 2px solid var(--hp-ac); outline-offset: 3px; }
.hp .wk-lp-ctl__bar b { left: 0; width: 100%; }
/* filters: real GET form keeps its submit button */
.hp .wk-filters { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.hp .wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border: 2px solid var(--hp-ink); background: var(--hp-ink); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.hp .wk-btn:hover { background: var(--hp-ac); border-color: var(--hp-ac); color: var(--hp-ac-ink); }
.hp .wk-empty { background: #fff; padding: 56px 32px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.hp .wk-empty__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; }
.hp .wk-empty__text { color: var(--hp-soft); margin-bottom: 8px; }
.hp .wk-card { animation: wkIn .6s cubic-bezier(.2,.7,.2,1) backwards; }
.hp .wk-card__status--active { color: var(--hp-ink); }
.hp .wk-crew__k i { animation: wkPulse 1.8s infinite; }
.hp .wk-crew:hover .wk-crew__k i { animation: none; }
.hp .wk-pager__btn.is-disabled { pointer-events: none; }

/* leadman profile modal: dots/timeline/notes the JS prints */
.hp .wk-pm__avail::before { content: none; }
.hp .wk-pm__avail { align-items: center; }
.hp .wk-pm__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-ac); flex: none; display: inline-block; }
.hp .wk-pm__dot.is-busy { background: #9A9A9D; }
.hp .wk-pm__chip { display: inline-flex; align-items: center; gap: 8px; }
.hp .wk-pm__lede { color: var(--hp-soft); margin-bottom: 16px; }
.hp .wk-pm__tags span { border: 1.5px solid var(--hp-ink); padding: 7px 12px; font-weight: 600; font-size: .82rem; }
.hp .wk-pm__sec h4 .wk-pm__ic { flex: none; }
.hp .wk-pm__acc { margin-bottom: 8px; }
.hp .wk-pm__hb .wk-pm__ic { color: var(--hp-ac); }
.hp .wk-pm__chev { width: 18px; height: 18px; transition: transform .35s; }
.hp .wk-pm__hb[aria-expanded="true"] .wk-pm__chev { transform: rotate(180deg); }
.hp .wk-pm__arrow { display: inline-block; }
.hp .wk-pm__tl { list-style: none; margin: 14px 0 4px 8px; padding: 0 0 0 24px; border-left: 2px solid var(--hp-line); display: grid; gap: 14px; }
.hp .wk-pm__tl li { position: relative; }
.hp .wk-pm__tl li::before { content: ""; position: absolute; left: -32px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hp-ink); background: #fff; }
.hp .wk-pm__tl li:first-child::before { background: var(--hp-ac); border-color: var(--hp-ac); }
.hp .wk-pm__tl li[hidden] { display: none; }
.hp .wk-pm__tl b { display: block; }
.hp .wk-pm__tl small { display: block; color: var(--hp-soft); }
.hp .wk-pm__note { color: var(--hp-soft); padding: 14px 0; }
.hp .wk-pm__more { margin-top: 12px; background: none; border: 0; border-bottom: 2px solid var(--hp-ac); font-weight: 700; cursor: pointer; padding: 0 0 2px; }
.hp .wk-pm { animation: wkPmIn .4s cubic-bezier(.2,.7,.2,1) both; }
.hp .wk-pm__hist > div { min-height: 0; }
.hp .wk-pm__acc .wk-pm__hist { margin-top: 0; }
.hp .wk-lmo { background: rgba(10,10,11,.72); }
html:has(body.wk-lmo-lock) { overflow: hidden; scrollbar-gutter: auto; }

/* request modals (reqm / iwm / lrm / pm) — same visual language */
.hp .reqm-overlay { background: rgba(10,10,11,.72); }
.hp .reqm-modal { border: 0; border-radius: 0; box-shadow: none; }
.hp .reqm-title { display: block; text-align: left; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; color: var(--hp-ink); margin-bottom: 20px; }
.hp .reqm-title::before { content: none; }
.hp .reqm-close { top: 0; right: 0; width: 52px; height: 52px; border: 0; border-radius: 0; background: var(--hp-ink); color: #fff; font-size: 1.6rem; }
.hp .reqm-close:hover { background: var(--hp-ac); color: var(--hp-ac-ink); }
.hp .reqm-mode-toggle, .hp .req-stepper, .hp .req-calendar__nav, .hp .reqm-pill-select select, .hp .reqm-side input[type=text] { border-radius: 0; }
.hp .reqm-mode-btn { font-family: var(--font-display); }
.hp .reqm-mode-btn.is-active { background: var(--hp-ink); color: #fff; }
.hp .req-calendar { border-radius: 0; background: #fff; border: 1px solid var(--hp-line); }
.hp .req-calendar__day { border-radius: 0; aspect-ratio: auto; }
.hp .req-calendar__day--start, .hp .req-calendar__day--end { background: var(--hp-ac); color: #fff; }
.hp .req-calendar__day--in-range { background: #FFE9EA; color: var(--hp-ink); border-radius: 0; }
.hp .iwm-hero__photo { aspect-ratio: auto; background: none; }
.hp .iwm-hero__photo-img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 0; }
.hp .iwm-hero__photo-img.wrk-card__avatar--ph { object-position: 60% 30%; }
.hp .iwm-hero__photo-img.wrk-card__avatar--initials { display: grid; place-items: center; background: var(--hp-tint); color: var(--hp-ink); font-family: var(--font-display); font-size: 64px; font-weight: 700; }
.hp .iwm-summary .iwm-hero__photo-img { width: 72px; }
.hp .iwm-hero__name { font-size: 1.8rem; }
.hp .iwm-hero__trade { font-family: var(--font-body); color: var(--hp-soft); font-weight: 600; }
.hp .iwm-eyebrow { display: block; }
.hp .iwm-eyebrow::before { content: none; }
.hp .iwm-rule { border: 0; border-top: 0; }
.hp .iwm-history-btn { border-bottom: 2px solid var(--hp-ac); text-decoration: none; }
.hp .iwm-review-card { border-radius: 0; background: var(--hp-tint); border: 0; border-left: 4px solid var(--hp-ac); }
.hp .iwm-summary-box { background: var(--hp-tint); padding: 20px; border: 0; border-radius: 0; }
.hp .iwm-book-btn, .hp .reqm-arrow-btn { border-radius: 0; background: var(--hp-ac); color: #fff; border: 0; overflow: visible; }
.hp .iwm-book-btn::before, .hp .reqm-arrow-btn::before { content: none; }
.hp .iwm-book-btn:hover:not(:disabled), .hp .reqm-arrow-btn:hover:not(:disabled), .hp .iwm-book-btn:focus-visible:not(:disabled), .hp .reqm-arrow-btn:focus-visible:not(:disabled) { background: var(--hp-ink); color: #fff; box-shadow: none; }
.hp .iwm-book-btn:disabled { background: var(--hp-tint); color: #9A9A9E; }
.hp .reqm-worker-card, .hp .reqm-alert { border-radius: 0; }
.hp .iwm-detail-row, .hp .pay-amount, .hp .pay-amount--premium, .hp .iwm-summary, .hp .iwm-detail-row__item { border-radius: 0; box-shadow: none; }
.hp .iwm-detail-row, .hp .pay-amount { border: 1px solid var(--hp-line); background: #fff; }
.hp .iwm-detail-row__item { border-color: var(--hp-line); }
.hp .iwm-detail-row__label, .hp .pay-amount__row span:first-child { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.hp .iwm-profile__name { font-family: var(--font-display); text-transform: uppercase; }
.hp .reqm-back-link { border-bottom: 2px solid var(--hp-ac); text-decoration: none; }
.hp .pm-field input, .hp .pm-field select, .hp .pm-upload-zone, .hp .lrm-summary, .hp .pm-qr-frame { border-radius: 0; }
.hp .reqm-overlay :focus-visible { outline: 2px solid var(--hp-ac); outline-offset: 2px; }
.hp .req-stepper__btn { color: var(--hp-ink); }
.hp .req-stepper__btn:hover { background: var(--hp-ink); color: #fff; }
.hp .req-stepper__value { color: var(--hp-ink); }
.hp .reqm-pill-select select, .hp .reqm-side input[type=text], .hp .reqm-side select { color: var(--hp-ink); background-color: #fff; }
.hp .req-calendar__header { gap: 8px; }
.hp .req-calendar__nav { width: 38px; height: 38px; flex: none; color: var(--hp-ink); background: #fff; }
.hp .req-calendar__nav:hover { background: var(--hp-ink); color: #fff; }
.hp .req-calendar__month { font-size: .95rem; text-align: center; flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .hp .iwm-hero { flex-direction: row; }
  .hp .wk-filters { grid-template-columns: 1fr; }
  .hp .wk-lp-ctl { display: none; }
  .hp .wk-lmo { padding: 0; place-items: stretch; }
  .hp .wk-pm { width: 100%; height: auto; min-height: 100%; max-height: none; }
  .hp .wk-pm__x { position: fixed; }
}
@media (max-width: 720px) {
  .hp .svchero--wk .svchero__stage--svc { display: block; }
  .hp .wk-lead__bar { flex-direction: column; align-items: flex-start; }
  .hp .wk-lead__all { min-height: 44px; }
  .hp .wk-card__actions { grid-template-columns: 1fr; }
  .hp .wk-card__view, .hp .wk-card__request { height: 50px; }
}
/* Shared hero-headline entrance — the Workers page's wkRise animation, reused on Home, About and
   Services. .hero-rise animates each line (a direct child span); .hero-rise-whole animates a headline
   that has no fixed line breaks as one block. Same keyframes, duration, easing and 2nd-line delay. */
.hero-rise > span { display: block; animation: wkRise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-rise > span:nth-child(2) { animation-delay: .12s; }
.hero-rise-whole { animation: wkRise .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wkRise { from { transform: translateY(24px); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 -20% 0); } }
@keyframes wkSettle { from { transform: scale(1.18); } to { transform: scale(1.06); } }
@keyframes wkIn { from { transform: translateY(16px); opacity: .01; } to { transform: none; opacity: 1; } }
@keyframes wkPulse { 50% { transform: scale(1.7); opacity: .4; } }
@keyframes wkPmIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-rise > span, .hero-rise-whole, .hp .wk-hero__title > span, .hp .wk-card, .hp .wk-pm, .hp .reqm-modal, .hp .wk-crew__k i { animation: none; }
  .hp .wk-lpp, .hp .wk-lpp__img, .hp .wk-lpp__d, .hp .wk-card, .hp .wk-card__img, .hp .wk-lead__panel-wrap, .hp .wk-pm__hist { transition: none; }
  .hp .wk-card:hover { transform: none; }
}


/* ===== Official Apolido logo — user/client side (shared .site-logo) =====
   The artwork has an opaque off-white background, so it sits on its own
   light tile over the dark navbar. object-fit keeps the ratio (no stretch). */
.logo { line-height: 0; flex-shrink: 0; }
.site-logo { display: block; width: 180px; max-width: 100%; height: 36px; object-fit: cover; object-position: center; background: #FEFEFE; border-radius: 6px; }
.site-logo--foot { width: 150px; height: 30px; margin: 0 auto 10px; }
.site-logo--login { width: 220px; height: 44px; border-radius: 8px; }
@media (max-width: 520px) { .site-logo { width: 116px; height: 24px; } .site-logo--login { width: 180px; height: 36px; } }

/* ===== Legal pages (terms.php / privacy.php) — shared via includes/legal-page.php =====
   Plain, text-first legal document: one reading column, numbered sections. */
.legal { background: #FFFFFF; padding: 40px var(--space-lg) 72px; min-height: calc(100vh - 81px); }
.legal__wrap { max-width: 760px; margin: 0 auto; }
.legal__back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 15px; font-weight: 600; color: #4B5563; text-decoration: none; }
.legal__back:hover { color: var(--home-red); }
.legal__switch { margin: 0 0 22px; font-size: 14.5px; color: var(--ink-soft); }
.legal__switch a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.legal__switch a[aria-current="page"] { text-decoration: none; cursor: default; }
.legal__switch span { margin: 0 8px; color: #B9B5A8; }
.legal-doc { min-width: 0; color: var(--ink); }
.legal-doc__title { margin: 0 0 8px; font-family: var(--font-body); font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.legal-doc__updated { margin: 0 0 36px; font-size: 15px; color: var(--ink-soft); }
.legal-sec { margin: 0 0 34px; scroll-margin-top: 24px; }
.legal-sec__title { margin: 0 0 12px; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.legal-sub { margin: 22px 0 8px; font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.35; }
.legal-doc p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #2E343B; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; font-size: 16px; line-height: 1.7; color: #2E343B; }
.legal-doc li { margin-top: 6px; padding-left: 2px; }
.legal-doc strong { font-weight: 600; color: var(--ink); }
.legal-ph { background: #FFF1F0; color: #B4232A; border-radius: 4px; padding: 1px 5px; font-size: .92em; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.legal-empty { padding: 20px 22px; border: 1px dashed #D5D2C8; border-radius: 10px; color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 760px) {
  .legal { padding: 26px 16px 48px; }
  .legal-doc__title { font-size: 28px; }
  .legal-sec__title { font-size: 20px; }
  .legal-doc p, .legal-doc ul { font-size: 15.5px; }
}

/* ============================================================
   VERIFICATION-EMAIL-SENT MODAL (register.php, includes/auth-toast.php)
   Centered dialog over a dimmed page; 5-second countdown bar. Only the
   register page's success message uses it — warnings/login stay toasts.
   ============================================================ */
/* scrollbar-gutter is released while open so the dim overlay covers the whole
   window width (html normally reserves a stable gutter strip). */
html.vmodal-lock { overflow: hidden; scrollbar-gutter: auto; }
html.vmodal-lock body { overflow: hidden; }
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 2000;                       /* above the nav and the toast */
  background: rgba(0, 0, 0, 0.48);
  animation: vmodal-fade 0.18s ease both;
}
.vmodal__box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(458px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px 36px 24px;
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 19px;
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.vmodal__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFE5E7;
  color: #EF2028;
}
.vmodal__title {
  margin: 18px 0 10px;
  font-family: var(--font-body);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: #101D33;
}
.vmodal__desc {
  max-width: 370px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: #596273;
}
.vmodal__ok {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #171717;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.vmodal__box:focus { outline: none; }
.vmodal__ok:hover { background: #171717; }
.vmodal__ok:focus-visible { outline: 3px solid #FF1A1A; outline-offset: 3px; }
.vmodal__timer {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 9px;
  margin: 18px -8px 0;          /* row is slightly wider than the button, as in the reference */
}
.vmodal__track {
  flex: 1;
  min-width: 0;
  height: 9px;
  border-radius: 999px;
  background: #E1E1E1;
  overflow: hidden;
}
.vmodal__fill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #FF1A1A;
  transform-origin: left center;
}
.vmodal__fill.is-running { animation: vmodal-drain linear forwards; }   /* duration set by JS (5s) */
.vmodal__secs {
  flex: none;
  min-width: 2ch;
  font-size: 14px;
  line-height: 9px;
  font-weight: 600;
  color: #667085;
  font-variant-numeric: tabular-nums;
}
@keyframes vmodal-drain { from { width: 100%; } to { width: 0%; } }
@keyframes vmodal-fade  { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 420px) {
  .vmodal__box { padding: 22px 20px 20px; }
  .vmodal__timer { margin: 16px 0 0; }
  .vmodal__icon { width: 92px; height: 92px; }
  .vmodal__icon svg { width: 48px; height: 48px; }
  .vmodal__title { font-size: 23px; margin-top: 14px; }
  .vmodal__desc { font-size: 15px; line-height: 23px; }
  .vmodal__timer { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vmodal { animation: none; }
}

/* --- Compact variant: "Email verified successfully!" on login.php --- */
.vmodal--compact .vmodal__box {
  width: min(436px, calc(100vw - 32px));
  padding: 20px 33px 19px;
  border-color: #EAEAEA;
}
.vmodal--compact .vmodal__icon { width: 114px; height: 114px; background: #FFE9EA; color: #F21D2F; }
.vmodal--compact .vmodal__icon svg { width: 58px; height: 58px; }
.vmodal--compact .vmodal__title { margin: 13px 0 12px; font-size: 25px; }
.vmodal--compact .vmodal__desc { max-width: none; font-size: 16px; line-height: 24px; color: #687386; }
.vmodal--compact .vmodal__ok { height: 42px; margin-top: 20px; border-radius: 999px; background: #111111; font-size: 14px; }
.vmodal--compact .vmodal__ok:hover { background: #111111; }
.vmodal--compact .vmodal__timer { gap: 14px; margin: 20px 0 0; }
.vmodal--compact .vmodal__track { background: #E3E3E3; }
.vmodal--compact .vmodal__fill { background: #FF1A1A; }
@media (max-width: 420px) {
  .vmodal--compact .vmodal__box { padding: 20px 20px 18px; }
  .vmodal--compact .vmodal__icon { width: 92px; height: 92px; }
  .vmodal--compact .vmodal__icon svg { width: 48px; height: 48px; }
  .vmodal--compact .vmodal__title { font-size: 21px; }
  .vmodal--compact .vmodal__desc { font-size: 15px; }
  .vmodal--compact .vmodal__timer { margin-top: 16px; }
}

/* --- Error variant: invalid / already-used verification link (login.php) --- */
.vmodal--error .vmodal__box {
  width: min(438px, calc(100vw - 32px));
  padding: 20px 28px 16px;
  border-color: #EAEAEA;
  border-radius: 18px;
}
.vmodal--error .vmodal__icon { width: 118px; height: 118px; background: #FFE8E9; color: #EF2028; }
.vmodal--error .vmodal__icon svg { width: 54px; height: 54px; }
.vmodal--error .vmodal__title { max-width: 390px; margin: 12px auto 10px; font-size: 25px; }
.vmodal--error .vmodal__title { text-wrap: balance; }   /* even two-line wrap like the reference */
.vmodal--error .vmodal__desc { max-width: 350px; font-size: 16px; line-height: 24px; color: #596273; }
.vmodal--error .vmodal__ok { height: 51px; margin-top: 22px; border-radius: 999px; background: #111111; font-size: 15px; }
.vmodal--error .vmodal__ok:hover { background: #111111; }
.vmodal--error .vmodal__timer { height: 10px; gap: 14px; margin: 18px 0 0; }
.vmodal--error .vmodal__track { height: 10px; background: #E3E3E3; }
.vmodal--error .vmodal__fill { background: #FF1A1A; }
@media (max-width: 420px) {
  .vmodal--error .vmodal__box { padding: 20px 20px 16px; }
  .vmodal--error .vmodal__icon { width: 92px; height: 92px; }
  .vmodal--error .vmodal__icon svg { width: 44px; height: 44px; }
  .vmodal--error .vmodal__title { font-size: 21px; }
  .vmodal--error .vmodal__desc { font-size: 15px; }
  .vmodal--error .vmodal__timer { margin-top: 16px; }
}

/* ============================================================
   VERIFY-YOUR-EMAIL (6-digit code) page — verify-otp.php
   Same split layout as login.php / forgot-password.php; only the
   code boxes, timer and resend row are new. Scoped to .auth--otp.
   ============================================================ */
.auth--otp .auth-card__footer a { color: #000000; font-weight: 700; }
.auth--otp .auth-card__eyebrow::before { background: #FF393E; }
.auth--otp .login-split__form button.btn--primary {
  background: #000000; border-color: #000000; color: #FFFFFF; font-weight: 700;
}
.auth--otp .login-split__form button.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.auth--otp .login-split__form button.btn--primary.is-loading { cursor: progress; opacity: 0.8; }
.auth--otp .auth-card__title { max-width: 360px; }
.auth--otp .auth-card__subtext { line-height: 1.6; }
.auth--otp .auth-card__subtext strong { color: var(--ink); }
@media (min-width: 761px) { .auth--otp .login-split { min-height: 596px; } }

.otp-note {
  margin: 0 0 var(--space-md);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 4px solid #12181F;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9rem;
  line-height: 1.45;
}
.otp-note--danger { border-left-color: #EF2028; background: #FFF4F4; color: #8A1118; }

.otp-field { border: 0; margin: 0 0 0.35rem; padding: 0; min-width: 0; }
.otp-field__label { padding: 0; margin-bottom: 0.55rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; max-width: 372px; }
.auth--otp .login-split__form { min-width: 0; }
.otp-box {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 60px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  caret-color: #EF2028;
}
.otp-box:focus { outline: none; border-color: #12181F; box-shadow: 0 0 0 3px rgba(239, 32, 40, 0.28); }
.otp-box.is-invalid { border-color: #EF2028; background: #FFF4F4; }
.otp-box:disabled { opacity: 0.5; }
.otp-inline-error { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 500; color: #C21A22; }
.otp-timer { margin: 0.4rem 0 var(--space-md); min-height: 1.4em; font-size: 0.9rem; color: var(--ink-soft); }
.otp-timer strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.otp-timer__expired { color: #C21A22; font-weight: 600; }

.otp-resend { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--space-md); font-size: 0.9rem; color: var(--ink-soft); }
.otp-resend__btn {
  padding: 0.2rem 0.1rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.otp-resend__btn:hover:not(:disabled) { color: #EF2028; }
.otp-resend__btn:focus-visible { outline: 2px solid #EF2028; outline-offset: 2px; border-radius: 4px; }
.otp-resend__btn:disabled { color: var(--ink-soft); text-decoration: none; cursor: not-allowed; font-weight: 600; }
@media (max-width: 480px) {
  .auth--otp .login-split__form { padding-left: 22px; padding-right: 22px; }   /* leaves room for six comfortable boxes */
}
@media (max-width: 420px) {
  .otp-boxes { gap: 0.4rem; }
  .otp-box { height: 52px; font-size: 1.35rem; border-radius: 10px; }
}

/* --- Failure variant: "We couldn't send the verification code." (register.php) --- */
.vmodal--fail .vmodal__box {
  width: min(450px, calc(100vw - 32px));
  padding: 24px 27px 21px;
  border-color: #EAEAEA;
  border-radius: 18px;
}
.vmodal--fail .vmodal__icon { width: 106px; height: 106px; background: #FFE5E6; color: #EF2028; }
.vmodal--fail .vmodal__icon svg { width: 52px; height: 52px; }
.vmodal--fail .vmodal__title { max-width: 390px; margin: 10px auto 14px; font-size: 25px; line-height: 1.2; text-wrap: balance; }
.vmodal--fail .vmodal__desc { max-width: none; font-size: 16px; line-height: 24px; color: #667085; }
.vmodal--fail .vmodal__ok { height: 46px; margin-top: 20px; border-radius: 999px; background: #111111; font-size: 15px; }
.vmodal--fail .vmodal__ok:hover { background: #111111; }
.vmodal--fail .vmodal__timer { height: 9px; gap: 14px; margin: 18px 0 0; }
.vmodal--fail .vmodal__track { background: #E2E2E2; }
.vmodal--fail .vmodal__fill { background: #FF1A1A; }
@media (max-width: 420px) {
  .vmodal--fail .vmodal__box { padding: 20px 20px 18px; }
  .vmodal--fail .vmodal__icon { width: 88px; height: 88px; }
  .vmodal--fail .vmodal__icon svg { width: 44px; height: 44px; }
  .vmodal--fail .vmodal__title { font-size: 21px; }
  .vmodal--fail .vmodal__desc { font-size: 15px; }
  .vmodal--fail .vmodal__timer { margin-top: 16px; }
}


/* ---- Final payment / completion buttons (client booking cards + lists) ---- */
.bk-pay-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.btn.btn--disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bk-pay-status { display: block; width: 100%; margin-top: 6px; font-size: .8rem; font-weight: 600; color: #6b6b6b; }
.bk-pay-status--pending { color: #b45309; }
.bk-pay-status--verified { color: #15803d; }
.bk-pay-status--rejected { color: #b91c1c; }


/* ============================================================
   CLIENT — Confirm completion page (awaiting_completion view only).
   Scoped to .cc-page / .cc-card, so the review and other states of
   confirm-completion.php, and every other page, are untouched.
   ============================================================ */
.auth.cc-page {
  align-items: flex-start;
  min-height: calc(100vh - 81px);
  padding: 30px 16px 40px;
  background:
    radial-gradient(ellipse 60% 50% at 100% 100%, #F1EEE4 0, rgba(241, 238, 228, 0) 70%),
    radial-gradient(ellipse 55% 45% at 0% 0%, #F3F0E7 0, rgba(243, 240, 231, 0) 70%),
    #F7F5EE;
}
.cc-page .auth__grid { display: none; }
.auth-card.rv-card.cc-card {
  width: min(830px, 100%);
  max-width: 830px;
  padding: 30px 40px 23px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 24, 31, 0.04), 0 12px 32px -18px rgba(18, 24, 31, 0.12);
}
.cc-card .rv-crumb { gap: 9px; font-size: 14px; color: #64748B; }
.cc-card .rv-crumb b { font-weight: 400; color: #64748B; }
.cc-badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; margin-top: 20px; padding: 0 14px 0 12px;
  border-radius: 12px; background: #FDE8E7; color: #E53935;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase;
}
.cc-card .rv-title {
  max-width: 700px; margin: 28px 0 0;
  font-family: var(--font-display);
  font-size: 41px; line-height: 1.17; font-weight: 700; letter-spacing: -0.025em; color: #17202B;
}
.cc-card .rv-sub { max-width: 740px; margin: 14px 0 0; font-size: 19.5px; line-height: 1.4; color: #5B6573; }
.cc-card .cc-quote { margin-top: 24px; font-size: 15px; }
.cc-card .cc-days { margin-top: 38px; border-top: 1px solid #E5E7EB; }
.cc-card .cc-days .rv-label { margin: 0; font-size: 21.5px; font-weight: 700; line-height: 1.2; color: #17202B; }
.cc-card .cc-day { align-items: flex-start; padding: 24px 0 14px; border-bottom: 1px solid #E5E7EB; }
.cc-card .cc-day + .cc-day { padding-top: 14px; }
.cc-card .cc-day__left { display: flex; flex-direction: column; gap: 34px; padding-top: 8px; }
.cc-card .cc-day__left:not(:has(.rv-label)) { padding-top: 34px; }
.cc-card .cc-day__date { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 500; color: #17202B; }
.cc-card .cc-day__date svg { color: #64748B; flex: none; }
.cc-card .cc-day__shots { gap: 16px; }
.cc-card .cc-day__thumb { width: 144px; height: 109px; border-radius: 12px; border: 0; box-shadow: 0 1px 3px rgba(18, 24, 31, 0.12); }
.cc-card .cc-shot figcaption { margin-top: 8px; font-size: 14.5px; color: #64748B; }
.cc-card .cc-confirm-form { margin-top: 24px; }
.cc-card .cc-confirm-btn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 61px; border-radius: 12px; background: #E53935; color: #fff;
  font-size: 19.5px; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(229, 57, 53, 0.55);
}
.cc-card .cc-confirm-btn:hover { background: #D32F2F; }
.cc-card .cc-confirm-btn.btn--disabled { opacity: 0.5; box-shadow: none; }
.cc-card .cc-notice {
  position: relative; margin-top: 22px; padding: 20px 20px 20px 52px;
  border-radius: 14px; background: #FFF0F0; color: #1F2937; font-size: 15.5px; line-height: 1.55;
}
.cc-card .cc-notice > svg { position: absolute; left: 20px; top: 21px; color: #E53935; }
.cc-card .cc-notice strong { font-weight: 700; color: #E53935; }
.cc-card .cc-notice a { color: #E53935; font-weight: 600; }

@media (max-width: 560px) {
  .auth.cc-page { padding: 16px 12px 28px; }
  .auth-card.rv-card.cc-card { padding: 22px 20px 20px; border-radius: 16px; }
  .cc-card .rv-title { font-size: 28px; }
  .cc-card .rv-sub { font-size: 16.5px; }
  .cc-card .cc-days .rv-label { font-size: 19px; }
  .cc-card .cc-day { flex-wrap: wrap; gap: 14px; }
  .cc-card .cc-day__thumb { width: 130px; height: 98px; }
  .cc-card .cc-confirm-btn { height: 56px; font-size: 17.5px; }
  .cc-card .cc-notice { padding: 16px 16px 16px 46px; font-size: 14.5px; }
  .cc-card .cc-notice > svg { left: 15px; top: 17px; }
}


/* ---- Confirm completion: "Waiting on the final payment" view (awaiting_final_payment) ---- */
.auth.cc-page--wait { padding-top: 72px; }
.auth-card.rv-card.cc-card--wait { width: min(819px, 100%); max-width: 819px; padding: 32px 44px 50px; border: 1px solid #E8E4DC; }
.cc-card--wait .rv-crumb { font-size: 14.5px; }
.cc-ok {
  display: flex; align-items: center; gap: 18px;
  margin-top: 20px; padding: 0 24px; min-height: 94px; box-sizing: border-box;
  background: #EAF7F0; border-left: 4px solid #16A34A; border-radius: 12px;
}
.cc-ok__icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #16A34A; color: #fff; }
.cc-ok strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; color: #16A34A; }
.cc-ok span:not(.cc-ok__icon) { display: block; margin-top: 7px; font-size: 16px; line-height: 1.4; color: #5B6573; }
.cc-card--wait .rv-title { max-width: none; margin-top: 38px; font-size: 45px; letter-spacing: -0.025em; }
.cc-card--wait .rv-sub { max-width: none; margin: 14px 0 0; font-size: 19.5px; line-height: 1.55; color: #647084; }
.cc-wait-panel {
  display: flex; align-items: flex-start; gap: 22px;
  margin-top: 62px; padding: 26px 24px; box-sizing: border-box; min-height: 143px;
  background: #FAF5ED; border-radius: 12px; position: relative;
}
.cc-wait-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -31px; border-top: 1px solid #E5E7EB; }
.cc-wait-panel__icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #E6A23C; color: #fff; }
.cc-wait-panel strong { display: block; font-size: 17.5px; font-weight: 600; line-height: 1.55; color: #17202B; }
.cc-wait-panel span:not(.cc-wait-panel__icon) { display: block; font-size: 17.5px; line-height: 1.55; color: #647084; }
.cc-wait-panel__link { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 600; color: #E53935; }

@media (max-width: 560px) {
  .auth.cc-page--wait { padding-top: 16px; }
  .auth-card.rv-card.cc-card--wait { padding: 22px 20px 26px; }
  .cc-ok { padding: 14px 16px; gap: 14px; }
  .cc-card--wait .rv-title { font-size: 32px; margin-top: 28px; }
  .cc-card--wait .rv-sub { font-size: 16.5px; }
  .cc-wait-panel { gap: 14px; padding: 18px 16px; margin-top: 54px; }
  .cc-wait-panel strong, .cc-wait-panel span:not(.cc-wait-panel__icon) { font-size: 16px; }
}


/* ---- Review step of confirm-completion.php ("Make a review for this worker") ---- */
.auth-card.rv-card.rv-card--review {
  width: min(688px, 100%); max-width: 688px; padding: 34px 34px 30px;
  border: 1px solid #E7E2D8; border-radius: 14px; box-shadow: 0 5px 20px rgba(20, 25, 35, 0.035);
}
.rv-card--review .rv-crumb { margin-top: 6px; font-size: 13.5px; color: #687080; }
.rv-card--review .rv-done { margin-top: 20px; padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 500; color: #25835B; background: #EDF7F1; border-left-width: 3px; border-radius: 4px 6px 6px 4px; }
.rv-card--review .rv-title { margin-top: 34px; font-size: 30px; font-weight: 700; line-height: 1.2; color: #17202B; }
.rv-card--review .rv-sub { max-width: none; margin-top: 13px; font-size: 15.5px; line-height: 1.55; color: #687080; }
.rv-card--review .rv-worker { margin-top: 30px; }
.rv-card--review .rv-person { padding: 18px 0; border-color: #E7E4DD; }
.rv-card--review .rv-avatar { width: 52px; height: 52px; background: #10243F; color: #EBD98F; font-size: 17.5px; }
.rv-card--review .rv-name { font-size: 16.5px; font-weight: 600; }
.rv-card--review .rv-trade { margin-top: 5px; font-size: 13.5px; color: #687080; }
.rv-card--review .rv-when { font-size: 13.5px; color: #687080; }
.rv-card--review .rv-when b { font-weight: 400; color: #687080; }
.rv-card--review .rv-when__date { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; color: #7B8494; font-size: 14.5px; }
.rv-card--review .rv-label { margin-top: 28px; font-size: 14px; font-weight: 600; color: #17202B; }
.rv-card--review .rv-label small { font-size: 13px; color: #8B9099; }
.rv-card--review .rv-rate { margin-top: 14px; gap: 14px; }
.rv-card--review .rv-stars { gap: 10px; }
.rv-card--review .rv-stars svg { width: 28px; height: 28px; stroke: #D9CFA6; }
.rv-card--review .rv-stars input:checked ~ label svg,
.rv-card--review .rv-stars label:hover svg,
.rv-card--review .rv-stars label:hover ~ label svg { fill: #C9A227; stroke: #C9A227; }
.rv-card--review .rv-rating-text { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; color: #7B8494; }
.rv-card--review .rv-rating-text .rv-rating-label { font-style: normal; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: #FBF0CF; color: #8F7219; }
.rv-card--review .rv-rating-text span { margin-left: 0; }
.rv-card--review .rv-label--feedback { margin-top: 20px; }
.rv-card--review .rv-box { margin-top: 15px; padding: 15px 16px 10px; border: 1px solid #D7C17A; border-radius: 8px; }
.rv-card--review .rv-box:focus-within { border-color: #C9A227; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16); }
.rv-card--review .rv-box textarea { min-height: 100px; font-size: 14.5px; line-height: 1.5; }
.rv-card--review .rv-count { margin-top: 6px; font-size: 12.5px; }
.rv-card--review .rv-submit { display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; margin-top: 24px; border-radius: 8px; background: #E53935; color: #fff; font-size: 15.5px; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(229, 57, 53, 0.55); }
.rv-card--review .rv-submit:hover { background: #D32F2F; }
.rv-card--review .rv-submit:disabled { opacity: 0.6; }
.auth:has(.rv-card--review) { align-items: flex-start; padding-top: 33px; background: radial-gradient(ellipse 60% 50% at 100% 100%, #F1EEE4 0, rgba(241, 238, 228, 0) 70%), radial-gradient(ellipse 55% 45% at 0% 0%, #F3F0E7 0, rgba(243, 240, 231, 0) 70%), #F6F4ED; }
@media (max-width: 560px) {
  .auth:has(.rv-card--review) { padding-top: 16px; }
  .auth-card.rv-card.rv-card--review { padding: 22px 20px 24px; }
  .rv-card--review .rv-title { font-size: 25px; margin-top: 26px; }
  .rv-card--review .rv-stars svg { width: 26px; height: 26px; }
  .rv-card--review .rv-rate { flex-wrap: wrap; }
}


/* ---- Availability Review: cancel-booking confirmation modal (scoped .avr-cancel-*) ---- */
.avr-cancel-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}
.avr-cancel-overlay[hidden] { display: none; }
.avr-cancel-modal {
  position: relative;
  box-sizing: border-box;
  width: min(548px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 30px 26px;
  background: #FFFFFF;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.avr-cancel-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #F0F1F3;
  color: #4B5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.avr-cancel-modal__close:hover { background: #E4E6E9; }
.avr-cancel-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #FDE8E8;
}
.avr-cancel-modal__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #171717;
}
.avr-cancel-modal__warn {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #E52B2B;
}
.avr-cancel-modal__text {
  max-width: 440px;
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: #172238;
}
.avr-cancel-modal__first { display: block; }
.avr-cancel-modal__text strong { color: #E52B2B; font-weight: 700; }
.avr-cancel-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.avr-cancel-modal__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border-radius: 28px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.avr-cancel-modal__btn--keep { background: #FFFFFF; border: 1px solid #9CA3AF; color: #171717; }
.avr-cancel-modal__btn--keep:hover { background: #F7F7F8; }
.avr-cancel-modal__btn--confirm { background: #FF3038; border: 1px solid #FF3038; color: #FFFFFF; }
.avr-cancel-modal__btn--confirm:hover { background: #E8262E; border-color: #E8262E; }
.avr-cancel-modal__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.avr-cancel-modal button:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
@media (max-width: 420px) {
  .avr-cancel-modal { padding: 24px 18px 22px; }
  .avr-cancel-modal__title { font-size: 21px; }
  .avr-cancel-modal__actions { flex-direction: column; }
  .avr-cancel-modal__btn { flex: 0 0 auto; width: 100%; }
}

/* ---- Add Another Day page (scoped .ad-*) ---- */
.ad-page { align-items: flex-start; padding: 46px var(--space-md) 60px; min-height: calc(100vh - 81px); }
.ad-card {
  max-width: 898px;
  padding: 28px 40px 48px;
  border-radius: 28px;
  border: 1px solid #EDE7DA;
  box-shadow: 0 18px 46px rgba(40, 30, 10, 0.08);
}
.ad-title { font-size: 34px; line-height: 1.15; margin: 14px 0 12px; color: #111827; }
.ad-sub { font-size: 18px; line-height: 1.45; color: #4B5563; margin-bottom: 26px; }
.ad-sub strong { color: #111827; font-weight: 700; }
.ad-form { display: flex; flex-direction: column; }
.ad-grid { display: grid; grid-template-columns: minmax(0, 1.787fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 24px; }
.ad-panel { border: 1px solid #E8E2D6; border-radius: 16px; background: #FFFFFF; }

.ad-cal { padding: 22px 20px 20px; }
.ad-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.ad-cal__title { font-size: 15.5px; font-weight: 600; color: #111827; }
.ad-cal__nav { display: inline-flex; align-items: center; gap: 8px; }
.ad-cal__month { font-size: 15.5px; color: #111827; margin-right: 14px; }
.ad-cal__arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #E3DED3; background: #F7F6F2;
  display: inline-flex; align-items: center; justify-content: center; color: #111827; cursor: pointer; padding: 0;
}
.ad-cal__arrow:hover:not(:disabled) { background: #EFEDE6; }
.ad-cal__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.ad-cal__week, .ad-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ad-cal__week { margin-bottom: 10px; text-align: center; font-size: 13px; color: #6B7280; }
.ad-day {
  height: 54px; border-radius: 10px; border: 1px solid #E8E4DA; background: #FFFFFF; color: #111827;
  font: inherit; font-size: 16px; cursor: pointer; padding: 0;
}
.ad-day:hover:not(:disabled) { border-color: #FF3038; }
.ad-day--out { background: #F1F0EC; border-color: #F1F0EC; color: #B8B6B0; cursor: default; }
.ad-day:disabled { cursor: default; }
.ad-day--past { color: #A3A7AE; cursor: not-allowed; }
.ad-day--blocked { color: #B0B3B8; background: #F7F6F2; text-decoration: line-through; cursor: not-allowed; }
.ad-day--orig { background: #FDE8E8; border-color: #FBD5D5; color: #D32029; cursor: default; }
.ad-day--sel { background: #E52B2B; border-color: #E52B2B; color: #FFFFFF; font-weight: 700; }
.ad-day:focus-visible, .ad-cal__arrow:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }

.ad-sum { display: flex; flex-direction: column; background: #FEF3F2; border-color: #F6DEDB; overflow: hidden; }
.ad-sum__row { padding: 13px 22px 12px; margin: 0; border-bottom: 1px solid #F1DCD8; display: flex; flex-direction: column; gap: 6px; }
.ad-sum__label { font-size: 14.5px; color: #374151; }
.ad-sum__value { display: flex; align-items: flex-start; gap: 10px; color: #111827; }
.ad-sum__value strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
.ad-sum__value small { display: block; font-size: 14.5px; color: #4B5563; margin-top: 2px; }
.ad-ico { flex: 0 0 auto; margin-top: 1px; color: #374151; }
.ad-sum__value--sel strong, .ad-sum__value--sel .ad-ico { color: #9CA3AF; }
.ad-sum__value--sel.is-set strong, .ad-sum__value--sel.is-set .ad-ico { color: #E52B2B; }
.ad-sum__count { font-size: 17px; font-weight: 600; color: #111827; }
.ad-sum__count b { color: #E52B2B; font-size: 19px; }
.ad-sum__note {
  margin: auto 0 0; padding: 14px 22px; display: flex; gap: 10px; align-items: flex-start;
  background: #FCE4E2; font-size: 13.5px; line-height: 1.6; color: #4B5563;
}
.ad-sum__note svg { flex: 0 0 auto; margin-top: 3px; color: #E52B2B; }
.ad-result { margin-bottom: 16px; }

.ad-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;
  border-radius: 28px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ad-btn--primary { height: 56px; border: none; background: #FF3038; color: #FFFFFF; font-size: 18px; }
.ad-btn--primary:hover:not(:disabled) { background: #E8262E; }
.ad-btn--primary:disabled { background: #F4A6A9; cursor: not-allowed; }
.ad-btn--ghost { height: 48px; margin-top: 14px; border: 1px solid #D1D5DB; background: #FFFFFF; color: #111827; font-size: 16px; font-weight: 600; }
.ad-btn--ghost:hover { background: #F9FAFB; }
.ad-btn:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
.ad-card .pm-msg-block, .ad-card .pm-msg-notice { margin-top: 22px; }
.ad-card > .auth-form { margin-top: 18px; }

@media (max-width: 900px) {
  .ad-page { padding: 24px 16px 40px; }
  .ad-card { padding: 26px 18px; border-radius: 22px; }
  .ad-title { font-size: 28px; }
  .ad-sub { font-size: 16px; }
  .ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-cal { padding: 18px 12px 16px; }
  .ad-cal__week, .ad-cal__days { gap: 5px; }
  .ad-day { height: 42px; font-size: 14px; border-radius: 8px; }
  .ad-cal__month { margin-right: 6px; }
}

/* ---- Add Another Day: crew step, replacement picker, summary (scoped .adx-*) ---- */
.adx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 14px 18px; margin-bottom: 20px; border: 1px solid #F6DEDB; background: #FEF3F2; border-radius: 16px; }
.adx-head__label { font-size: 14px; color: #374151; margin: 0 0 2px; }
.adx-head__value { font-size: 19px; font-weight: 600; color: #111827; margin: 0; }
.adx-head__value span { font-size: 15px; font-weight: 500; color: #4B5563; }
.adx-link { font-size: 15px; font-weight: 600; color: #D32029; text-decoration: underline; text-underline-offset: 3px; }
.adx-h2 { font-size: 22px; line-height: 1.25; color: #111827; margin: 0 0 6px; }
.adx-help { font-size: 15px; line-height: 1.55; color: #4B5563; margin: 0 0 16px; }
.adx-crew { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adx-card { border: 1px solid #E8E2D6; border-radius: 16px; background: #FFFFFF; padding: 16px 18px; }
.adx-card--busy { border-color: #F0C4C0; background: #FDF8F7; }
.adx-card--removed { opacity: 0.8; border-style: dashed; }
.adx-card__top { display: flex; align-items: center; gap: 14px; }
.adx-card__info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.adx-card__info strong { font-size: 17px; color: #111827; }
.adx-meta { font-size: 14px; color: #4B5563; }
.adx-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #F1EFE8; color: #374151; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.adx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adx-avatar--sm { width: 38px; height: 38px; font-size: 13px; }
.adx-pill { flex: 0 0 auto; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.adx-pill--ok { background: #DCF3E6; color: #14804A; }
.adx-pill--bad { background: #F7DDD8; color: #B42318; }
.adx-conflict { margin: 10px 0 0 66px; font-size: 14px; color: #B42318; }
.adx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0 66px; }
.adx-note { font-size: 13.5px; color: #6B7280; }
.adx-btn { height: 40px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.adx-btn--primary { background: #FF3038; color: #FFFFFF; }
.adx-btn--primary:hover:not(:disabled) { background: #E8262E; }
.adx-btn--quiet { background: #FFFFFF; color: #111827; border-color: #D1D5DB; }
.adx-btn--quiet:hover:not(:disabled) { background: #F9FAFB; }
.adx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.adx-btn:focus-visible, .adx-modal__x:focus-visible, .adx-link:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
.adx-chosen { display: flex; align-items: center; gap: 10px; margin: 12px 0 0 66px; padding: 10px 12px; border-radius: 12px; background: #EEF6FF; font-size: 14.5px; color: #111827; }
.adx-chosen[hidden] { display: none; }
.adx-state { margin: 8px 0 0 66px; font-size: 13.5px; color: #6B7280; min-height: 0; }
.adx-state:empty { display: none; }
.adx-minnote { font-size: 14px; color: #6B7280; margin: 0 0 16px; }
.adx-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(17, 24, 39, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.adx-modal[hidden] { display: none; }
.adx-modal__box { width: min(560px, 100%); max-height: 86vh; overflow: auto; background: #FFFFFF; border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.adx-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.adx-modal__head h2 { font-size: 20px; margin: 0; color: #111827; }
.adx-modal__x { width: 36px; height: 36px; border: none; border-radius: 50%; background: #F1F2F4; font-size: 22px; line-height: 1; cursor: pointer; }
.adx-modal__list { display: flex; flex-direction: column; gap: 10px; }
.adx-cand { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #E8E2D6; border-radius: 14px; }
.adx-cand__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adx-cand__info strong { font-size: 16px; color: #111827; }
.adx-cand__info small { font-size: 13.5px; color: #4B5563; }
.adx-sum { margin-bottom: 8px; }
.adx-sum__h { font-size: 15px; font-weight: 600; color: #374151; margin: 18px 0 8px; }
.adx-sum__list { list-style: none; margin: 0; padding: 0; border: 1px solid #E8E2D6; border-radius: 14px; background: #FFFFFF; }
.adx-sum__list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #F0ECE2; }
.adx-sum__list li:last-child { border-bottom: none; }
.adx-sum__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.adx-sum__who strong { font-size: 15.5px; color: #111827; }
.adx-sum__who small { font-size: 13px; color: #6B7280; }
.adx-sum__calc { font-size: 14px; color: #374151; text-align: right; }
.adx-sum__calc b { color: #111827; }
.adx-sum__list--removed li { background: #FAFAF8; }
.adx-totals { margin: 18px 0 0; border: 1px solid #F6DEDB; background: #FEF3F2; border-radius: 14px; padding: 6px 18px; }
.adx-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1DCD8; font-size: 15.5px; }
.adx-totals div:last-child { border-bottom: none; }
.adx-totals dt { color: #374151; }
.adx-totals dd { margin: 0; font-weight: 600; color: #111827; }
.adx-totals__due dd { color: #D32029; font-size: 19px; }
.adx-back { margin-top: 0; }
@media (max-width: 640px) {
  .adx-head { flex-direction: column; align-items: flex-start; }
  .adx-card__top { flex-wrap: wrap; }
  .adx-card__top .adx-pill { margin-left: 66px; }
  .adx-conflict, .adx-actions, .adx-chosen, .adx-state { margin-left: 0; }
  .adx-sum__list li { flex-wrap: wrap; }
  .adx-sum__calc { width: 100%; text-align: left; padding-left: 50px; }
  .adx-cand { flex-wrap: wrap; }
}

/* ---- Add Another Day: payment (review) step — same component dimensions as the regular
   booking payment (Payment Summary / method / details / reference / proof / submit in the
   Secure Your Booking payment modal, workers.php + user/payment.php: 420px content column,
   48px section rhythm, 42px pill input, 230px QR, 47px buttons).
   Scoped to .ad-card--pay / .adp-*; only rendered by user/add-day.php's review view,
   so the select and crew steps and every other payment page are untouched. ---- */
.ad-page--pay { padding: 24px var(--space-md) 64px; }
.ad-card--pay {
  max-width: 470px; padding: 28px 24px 32px; border-radius: 20px;
  border: 1px solid #ECE7DC; box-shadow: 0 8px 28px rgba(40, 30, 10, 0.07);
}
.ad-card--pay .auth-card__eyebrow { display: flex; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 0.08em; color: #4C6788; margin: 0 0 10px; }
.ad-card--pay .auth-card__eyebrow::before { width: 6px; height: 6px; }
.ad-card--pay .ad-title { font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; color: #101828; }
.ad-card--pay .ad-sub { font-size: 14.4px; line-height: 1.6; margin: 0 0 24px; color: #5C6570; }
.ad-card--pay .ad-sub strong { color: #101828; }
.ad-card--pay .form-alert { font-size: 13.6px; margin-bottom: 16px; }

.adp-extra { margin: 0; padding: 12px 18px 13px; border-radius: 12px; border-left: 4px solid #FF3D3D; background: linear-gradient(90deg, #FFE8E8, #FFF3F3); }
.adp-extra__label { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7280; }
.adp-extra__value { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: #101828; }
.adp-extra__value span { font-size: 13.6px; font-weight: 400; color: #5C6570; }

/* Section heading: same as .iwm-eyebrow / .pm-section-eyebrow in the payment modal */
.ad-card--pay .adp-h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6.4px;
  font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 0.96px; text-transform: uppercase; color: #6B6A66;
}
.ad-card--pay .adp-h::before { content: ''; flex: 0 0 24px; height: 2px; background: #FF393E; }
.ad-card--pay .adp-hsub { margin: 0 0 12px; text-align: center; font-size: 13.6px; line-height: 1.6; color: #5C6570; }
.adp-sec { position: relative; margin-top: 48px; }
.adx-sum + .adp-form > .adp-sec:first-of-type { margin-top: 32px; }
.ad-card--pay .adx-sum { margin: 48px 0 0; }
.ad-card--pay .adp-form { gap: 0; margin-top: 0; }

/* Payment summary box: same box/padding/rows as .pay-amount--premium */
.ad-card--pay .adx-totals { margin: 24px 0 0; padding: 17.6px 20.8px; border: 1px solid #E6E1D3; border-radius: 18px; background: #FFFFFF; }
.ad-card--pay .adx-totals div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4.8px 0; border: 0; font-size: 15.2px; }
.ad-card--pay .adx-totals div + div { border-top: 1px solid #EFEBDF; }
.ad-card--pay .adx-totals dt { font-size: 13.6px; color: #5C6570; }
.ad-card--pay .adx-totals dd { margin: 0; font-size: 15.2px; font-weight: 600; text-align: right; color: #12181F; }
.ad-card--pay .adx-totals .adx-totals__due { margin-top: 9.6px; padding-top: 14.4px; border-top: 1px solid #E6E1D3; }
.ad-card--pay .adx-totals__due dt { font-size: 11.52px; letter-spacing: 0.06em; text-transform: uppercase; }
.ad-card--pay .adx-totals__due dd { font-size: 27.2px; font-weight: 700; color: #FF3D3D; }
.ad-card--pay .adx-totals .adx-totals__due + div { border-top: 0; }

.adp-more { margin-top: 12px; }
.adp-more > summary {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 0; list-style: none; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: #5C6570;
}
.adp-more > summary::-webkit-details-marker { display: none; }
.adp-more > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-1px); transition: transform 0.15s ease; }
.adp-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.adp-more > summary:hover { color: #101828; }
.adp-more > summary:focus-visible { outline: 2px solid #111827; outline-offset: 2px; border-radius: 6px; }
.adp-more__body { margin-top: 8px; }
.adp-more__body .adx-sum__h { font-size: 13px; margin: 16px 0 8px; }
.adp-more__body .adx-sum__list { border-radius: 14px; }
.adp-more__body .adx-sum__who strong { font-size: 14px; }
.adp-more__body .adx-sum__who small { font-size: 12px; }
.adp-more__body .adx-sum__calc { font-size: 12.5px; }
.adp-more__body .pm-msg-block, .adp-more__body .pm-msg-notice { margin: 16px 0 0; }

/* Method toggle: 262x36, 1px black border, 4px radius — as .reqm-mode-toggle in the modal */
.adp-toggle { display: flex; width: fit-content; max-width: 100%; margin: 0 auto; border: 1px solid #0A0A0A; border-radius: 4px; overflow: hidden; }
.adp-toggle__btn {
  border: none; background: #FFFFFF; color: #0A0A0A; padding: 9.6px 22.4px; cursor: pointer;
  font: inherit; font-size: 13.6px; font-weight: 700; line-height: normal; letter-spacing: 0.272px; text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.adp-toggle__btn.is-active { background: #0A0A0A; color: #FFFFFF; }
.adp-toggle__btn:not(.is-active):hover { background: #F5F3EC; }
.adp-toggle__btn:focus-visible { outline: 2px solid #FF3D3D; outline-offset: -3px; }

.adp-method-title { margin: 0 0 14.4px; text-align: center; font-size: 19.2px; font-weight: 700; line-height: 1.6; letter-spacing: 0.01em; text-transform: uppercase; color: #12181F; }
.adp-qr {
  display: flex; align-items: center; justify-content: center; width: 230px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; overflow: hidden;
  border: 1px solid #E6E1D3; border-radius: 28px; background: #F5F3EC;
}
.adp-qr[hidden], .adp-meta[hidden] { display: none; }
.adp-qr img { width: 100%; height: 100%; object-fit: contain; }
.adp-qr--empty span { padding: 0 19.2px; text-align: center; font-size: 12.48px; line-height: 1.6; color: #5C6570; }
.adp-meta { margin: 6.4px 0 0; text-align: center; font-size: 12.8px; line-height: 1.6; color: #5C6570; }
.adp-meta:empty { display: none; }

.adp-input {
  display: block; width: 100%; box-sizing: border-box; height: 42px; padding: 0 19.2px;
  border: 1px solid #E6E1D3; border-radius: 999px; background: #FFFFFF; color: #12181F;
  font: inherit; font-size: 14.4px;
}
.adp-input::placeholder { color: #6B7280; }
.adp-input:focus-visible { outline: 2px solid #111827; outline-offset: 2px; border-color: #111827; }
.adp-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.adp-upload {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 51.7px; box-sizing: border-box; padding: 13.6px 19.2px;
  border: 1px dashed #E6E1D3; border-radius: 18px; background: #F5F3EC; color: #0A0A0A; cursor: pointer;
  font-size: 14.08px; font-weight: 600; transition: background 0.15s ease, border-color 0.15s ease;
}
.adp-upload:hover { background: #FFFFFF; border-color: #0A0A0A; }
.adp-upload svg { flex: 0 0 auto; width: 18px; height: 18px; }
.adp-upload span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adp-upload.has-file { justify-content: flex-start; border-style: solid; background: #FFFFFF; }
.adp-file:focus-visible + .adp-upload { outline: 2px solid #111827; outline-offset: 2px; }

/* Buttons: 47px pills, like .pm-submit-btn */
.ad-card--pay .adp-confirm { height: auto; min-height: 47.4px; margin-top: 24px; padding: 0 24px; line-height: 1.3; font-size: 15.2px; font-weight: 700; border-radius: 999px; background: #FF3D3D; }
.ad-card--pay .adp-confirm:hover:not(:disabled) { background: #E8262E; }
.ad-card--pay .ad-btn--ghost { height: auto; min-height: 47.4px; margin-top: 12px; padding: 0 24px; line-height: 1.3; font-size: 15.2px; font-weight: 600; border-radius: 999px; border-color: #D7D2C4; }
.ad-card--pay .adp-back { margin-top: 0; }

@media (max-width: 640px) {
  .ad-page--pay { padding: 12px 12px 40px; }
  .ad-card--pay { padding: 22px 16px 24px; border-radius: 16px; }
  .ad-card--pay .ad-title { font-size: 24px; }
  .adp-sec, .ad-card--pay .adx-sum { margin-top: 36px; }
  .ad-card--pay .adx-totals { padding: 14px 16px; }
  .ad-card--pay .adx-totals dt { min-width: 0; }
  .ad-card--pay .adx-totals dd { flex: 0 0 auto; white-space: nowrap; }
  .adp-input { height: 44px; font-size: 16px; }
  .adp-toggle__btn { padding: 11px 16px; }
}

/* ============================================================
   EXTENDED BOOKINGS (approved Add Another Day) — badge, card summary, crew details.
   Used by user/dashboard.php, user/history.php and the Booking Details modal.
   ============================================================ */
.xd-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #12181F; color: #FFFFFF; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.xd-card { margin: 12px 0 0; padding: 12px 14px; border: 1px solid #F6DEDB; background: #FEF3F2; border-radius: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.xd-card--hist { margin: 10px 0 4px; }
.xd-sum { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 6px 24px; }
.xd-sum div { min-width: 0; }
.xd-sum dt { font-size: 12.5px; color: #5C6570; margin: 0; }
.xd-sum dd { font-size: 14.5px; font-weight: 600; color: #12181F; margin: 0; }
.xd-line { color: #B42318; font-weight: 600; }
.xd-details { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #E8E2D6; background: #FFFCF8; border-radius: 16px; }
.xd-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; color: #12181F; }
.xd-label { margin: 16px 0 8px; font-size: 13.5px; font-weight: 700; color: #12181F; }
.xd-label span { font-weight: 500; color: #5C6570; margin-left: 6px; }
.xd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xd-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #FFFFFF; border: 1px solid #E8E2D6; border-radius: 12px; }
.xd-person__av { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #12181F; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; overflow: hidden; }
.xd-person__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xd-person__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.xd-person__name { font-size: 15px; font-weight: 600; color: #12181F; overflow-wrap: anywhere; }
.xd-person__meta, .xd-sub { font-size: 13px; color: #5C6570; }
.xd-tag { flex: 0 1 auto; max-width: 48%; text-align: right; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #F3F4F6; color: #374151; }
.xd-tag--keep { background: #DCF3E6; color: #14804A; }
.xd-tag--rep { background: #FFE4E2; color: #B42318; }
.xd-tag--orig { background: #F3F4F6; color: #374151; }
.xd-note { font-size: 13.5px; color: #5C6570; margin: 4px 0; }
.xd-off { margin: 8px 0 0; font-size: 13.5px; color: #5C6570; }
@media (max-width: 640px) {
  .xd-card { flex-direction: column; align-items: stretch; }
  .xd-person { flex-wrap: wrap; }
  .xd-tag { max-width: 100%; text-align: left; margin-left: 52px; }
  .xd-sum { grid-template-columns: 1fr 1fr; }
}


/* ============================================
   WORKERS PAGE — big TEXT buttons use the shared --btn-radius token
   (same rounded shape as Home and Services). Icon-only buttons (slider
   arrows, modal x, calendar nav, stepper, review nav, the triangle
   "next" arrows), trade chips, pager numbers, calendar days, inputs
   and the "Need more than one worker?" banner are NOT listed here and
   stay as they were. Hero .home-cta already gets the radius from the
   shared Home rule.
   ============================================ */
.hp .wk-lead__btn,
.hp .wk-btn,
.hp .wk-card__view,
.hp .wk-card__request,
.hp .wkl-card__view,
.hp .iwm-book-btn,
.hp .pm-submit-btn,
.hp .wk-pm__pill,
.hp .wk-pm__ghost { border-radius: var(--btn-radius); }
/* Segmented text toggles inside the booking / payment modals
   (Small | Large Request, GCash | Bank Transfer): round the outer shape. */
.hp .reqm-overlay .reqm-mode-toggle { border-radius: var(--btn-radius); overflow: hidden; }

/* ============================================
   REQUESTING WORKER MODAL (workers.php #iwmOverlay) — reference layout.
   Everything is scoped under #iwmOverlay: the Small Group modal also
   carries .reqm-modal--iwm / .iwm-* classes and must not change.
   Desktop: fixed-size modal (so picking dates / switching months /
   typing a location / validation messages can never resize it) with a
   3-column grid: calendar | service location | grey summary panel.
============================================ */
#iwmOverlay .reqm-modal--iwm {
  box-sizing: border-box;
  width: var(--reqm-frame-w, min(940px, calc(100vw - 40px)));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 28px;
  border: 0;
  border-radius: 12px;
  overflow-x: hidden;
}
/* Fixed height only while Step A (the form) is showing; Step B keeps its natural height. */
#iwmOverlay .reqm-modal--iwm:has(#iwmStepA:not([hidden])) {
  height: min(780px, calc(100vh - 40px));
  overflow-y: auto;
}
#iwmOverlay.reqm-overlay { padding: 20px; }
#iwmOverlay .reqm-close { top: 20px; right: 22px; width: 40px; height: 40px; border: 1px solid #CFCFCF; border-radius: 50%; background: #FFFFFF; color: var(--home-black); font-size: 1.3rem; z-index: 4; }
#iwmOverlay .reqm-close:hover, #iwmOverlay .reqm-close:focus-visible { background: var(--home-black); border-color: var(--home-black); color: #FFFFFF; }

/* Heading + validation message (the message is overlaid so showing it never moves the columns) */
#iwmOverlay #iwmTitle { text-align: left; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: 0; margin: 0 0 16px; line-height: 1.1; padding-right: 56px; }
#iwmOverlay #iwmStepAAlert { position: absolute; top: 24px; left: 400px; right: 76px; z-index: 3; }
#iwmOverlay #iwmStepAAlert .reqm-alert { margin: 0; padding: 0.55rem 0.8rem; font-size: 0.8rem; line-height: 1.35; }

/* Worker profile */
#iwmStepA .iwm-hero { display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 24px; margin-bottom: 0; height: 190px; align-items: stretch; }
#iwmStepA .iwm-hero__photo { width: 165px; height: 190px; }
#iwmStepA .iwm-hero__photo-img { width: 165px; height: 190px; border-radius: 6px; box-shadow: none; object-fit: cover; object-position: center top; }
#iwmStepA .iwm-hero__info { flex: 1 1 auto; min-width: 0; height: 190px; overflow-y: auto; padding-top: 0; }
#iwmStepA .iwm-hero__name { font-size: clamp(1.4rem, 2.6vw, 1.7rem); line-height: 1.1; }
#iwmStepA .iwm-hero__trade { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; margin: 0 0 6px; }
#iwmStepA .iwm-hero__stats { font-size: 0.9rem; gap: 6px 0; margin-bottom: 6px; }
#iwmStepA .iwm-hero__stats span:not(:first-child) { margin-left: 16px; padding-left: 41px; }
#iwmStepA .iwm-hero__stats span:not(:first-child)::before { top: 2px; bottom: 2px; }
#iwmExperience, #iwmCompleted { background: no-repeat 16px center / 17px 17px; }
#iwmExperience { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0F10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E"); }
#iwmCompleted { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F0F10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
#iwmStepA .iwm-about { max-width: none; margin-bottom: 0; }
#iwmStepA .iwm-about .iwm-eyebrow { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0; margin-bottom: 4px; }
#iwmStepA .iwm-bio { font-size: 0.9rem; line-height: 1.4; margin-bottom: 6px; }
#iwmStepA .iwm-history-btn { border-bottom: 2px solid var(--home-red); padding: 0 0 2px; font-weight: 700; }
#iwmStepA .iwm-history-panel { max-height: 84px; overflow-y: auto; }
#iwmStepA .iwm-rule { margin: 16px 0; }

/* 3-column grid: calendar | location | summary */
#iwmStepA .reqm-step1__grid--iwm {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 340px;
  align-items: stretch;
  gap: 0 28px;
}
#iwmStepA .reqm-side { display: contents; }
#iwmStepA .iwm-section { margin-bottom: 0; min-width: 0; }
#iwmStepA .iwm-dates { display: flex; flex-direction: column; padding-right: 2px; }
#iwmStepA .reqm-location { padding-right: 14px; border-right: 1px solid var(--line); gap: 0; }
#iwmStepA .iwm-eyebrow { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 4px; }
#iwmStepA .iwm-section__sub { font-size: 0.8rem; line-height: 1.35; margin-bottom: 12px; min-height: 2.2em; }

/* Calendar (shared by the Requesting Worker modal and the Small/Large crew modals): fills its column, 64px day cells */
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
}
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__header { margin-bottom: 12px; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__month { font-size: 1.35rem; letter-spacing: 0.01em; text-transform: uppercase; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__nav { width: 52px; height: 52px; border-radius: 6px; border: 1px solid #CFCFCF; background: #FFFFFF; font-size: 1.5rem; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__weekdays { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__weekdays, :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__grid { gap: 6px; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__grid { flex: 1 1 auto; grid-template-rows: repeat(6, minmax(64px, 1fr)); }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day { aspect-ratio: auto; height: auto; min-width: 0; padding: 0; font-size: 1.2rem; font-weight: 600; border-radius: 50%; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day:disabled { font-weight: 500; opacity: 0.3; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--in-range { border-radius: 0; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--start, :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--end { background: var(--home-red); color: #FFFFFF; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--start { border-radius: 50% 0 0 50%; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--end { border-radius: 0 50% 50% 0; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--start.req-calendar__day--end { border-radius: 50%; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--start:hover:not(:disabled), :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day--end:hover:not(:disabled) { background: var(--home-red); }
/* Hint and legend sit at the top of the calendar (flex order), legend always visible */
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__range { order: -2; margin: 0 0 2px; padding: 0; font-size: 0.74rem; line-height: 1.3; min-height: 1.3em; text-align: center; }
:is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__legend,
#iwmCalendar .req-calendar__legend[hidden] { order: -1; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 6px; gap: 2px 12px; font-size: 0.85rem; line-height: 1.25; color: var(--ink-soft); }

/* Service location input */
#iwmStepA .reqm-location input {
  box-sizing: border-box;
  height: 52px;
  padding: 0 14px 0 42px;
  border: 1px solid #CFCFCF;
  border-radius: 6px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5B5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-12a7 7 0 0 0-14 0c0 5.9 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px;
}

/* Summary: grey panel, same height as the columns */
#iwmStepA .iwm-summary-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 14px 12px;
  background: #F2F2F1;
  border-radius: 8px;
}
#iwmStepA .iwm-summary-box { flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; }
#iwmStepA .iwm-summary-box .iwm-eyebrow { margin-bottom: 4px; color: var(--ink-soft); }
#iwmStepA .iwm-summary-box__row { align-items: center; height: 35px; padding: 0; font-size: 0.82rem; border-bottom: 1px solid #E2E2E0; }
#iwmStepA .iwm-summary-box__row span:first-child { flex: none; }
#iwmStepA .iwm-summary-box__row span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
#iwmStepA .iwm-summary-box__row--rate { margin-top: 12px; border-top: 1px solid #E2E2E0; }
#iwmStepA .iwm-summary-box__row--total { border-bottom: 0; }
#iwmStepA .iwm-summary-box__row--total span { font-weight: 700; }
#iwmStepA .iwm-summary-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #FDECEC;
  color: var(--home-red);
  border-radius: 6px;
  font-size: 0.7rem;
  line-height: 1.35;
}
#iwmStepA .iwm-summary-notice svg { flex: none; }
#iwmStepA .iwm-summary-notice.is-clear { visibility: hidden; }
#iwmStepA .iwm-book-wrap { margin-top: auto; padding-top: 10px; }
#iwmStepA .iwm-book-btn {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* <= 1280px: calendar | location, summary full width underneath */
@media (max-width: 1280px) {
  #iwmStepA .reqm-step1__grid--iwm { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); row-gap: 20px; }
  #iwmStepA .iwm-summary-panel { grid-column: 1 / -1; }
  #iwmOverlay #iwmStepAAlert { left: 300px; }
}
/* Narrow tablet / mobile: stack, let the modal scroll inside itself */
@media (max-width: 860px) {
  #iwmOverlay.reqm-overlay { padding: 12px; }
  #iwmOverlay .reqm-modal--iwm,
  #iwmOverlay .reqm-modal--iwm:has(#iwmStepA:not([hidden])) { width: 100%; height: auto; max-height: calc(100vh - 24px); padding: 20px 16px; }
  /* sticky so the close button stays reachable while the modal scrolls internally */
  #iwmOverlay .reqm-close { position: sticky; top: 4px; right: auto; display: block; width: 36px; height: 36px; margin: -8px -4px -28px auto; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  #iwmOverlay #iwmTitle { font-size: 1.5rem; margin-bottom: 16px; }
  #iwmOverlay #iwmStepAAlert { position: static; margin-bottom: 12px; }
  #iwmStepA .iwm-hero { height: auto; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  #iwmStepA .iwm-hero__photo, #iwmStepA .iwm-hero__photo-img { width: 96px; height: 120px; }
  #iwmStepA .iwm-hero__info { height: auto; overflow: visible; }
  #iwmStepA .reqm-step1__grid--iwm { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  #iwmStepA .reqm-location { padding-right: 0; border-right: 0; }
  #iwmStepA .iwm-section__sub { min-height: 0; }
  #iwmStepA .iwm-summary-panel { padding: 16px; }
  #iwmStepA .iwm-book-wrap { margin-top: 12px; }
}
@media (max-width: 640px) {
  /* phone: full-screen modal */
  #iwmOverlay.reqm-overlay:has(#iwmStepA:not([hidden])) { padding: 0; }
  #iwmOverlay .reqm-modal--iwm:has(#iwmStepA:not([hidden])) { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  #iwmStepA .iwm-hero__stats { flex-direction: column; align-items: flex-start; gap: 6px; }
  #iwmStepA .iwm-hero__stats span:not(:first-child) { margin-left: 0; padding-left: 25px; background-position: 0 center; }
  #iwmStepA .iwm-hero__stats span:not(:first-child)::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #iwmCalendar .req-calendar__day, #iwmCalendar .req-calendar__nav { transition: none; }
}

/* ============================================
   REVIEW YOUR REQUEST (Step B of #iwmOverlay) — reference layout.
   Scoped to #iwmStepB / the modal while Step B is showing. Fixed
   750 x 730 desktop box; the content area scrolls inside it if needed.
============================================ */
#iwmOverlay .reqm-modal--iwm:has(#iwmStepB:not([hidden])) {
  width: min(750px, calc(100vw - 32px));
  height: min(730px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#iwmOverlay .reqm-modal--iwm:has(#iwmStepB:not([hidden])) .reqm-close {
  top: 0; right: 0; width: 55px; height: 55px;
  border: 0; border-radius: 0; background: var(--home-black); color: #FFFFFF; font-size: 1.5rem;
}
#iwmOverlay .reqm-modal--iwm:has(#iwmStepB:not([hidden])) .reqm-close:hover { background: var(--home-red); }
#iwmStepB:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

#iwmStepB #iwmTitleB { text-align: left; font-size: clamp(1.7rem, 3.6vw, 2.2rem); letter-spacing: 0; line-height: 1.1; margin: 0; padding-right: 56px; }
#iwmStepB:not([hidden]) > * { flex-shrink: 0; }
#iwmStepB .iwm-stepb__sub { text-align: left; max-width: none; margin: 6px 0 20px; font-size: 1rem; color: var(--ink-soft); }

#iwmStepB .iwm-summary { gap: 18px; margin: 0; align-items: center; }
#iwmStepB .iwm-summary .iwm-hero__photo-img { width: 88px; height: 96px; border-radius: 4px; box-shadow: none; object-fit: cover; object-position: center top; }
#iwmStepB .iwm-profile__name { font-size: 1.5rem; text-transform: uppercase; line-height: 1.1; margin: 0 0 2px; }
#iwmStepB .iwm-profile__trade { font-size: 1rem; color: var(--ink-soft); }
#iwmStepB .iwm-rule { margin: 22px 0 24px; border-top: 1px solid #E2E0DB; }

#iwmStepB .iwm-section { margin: 0 0 18px; }
#iwmStepB .iwm-eyebrow { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink-soft); margin-bottom: 6px; }
#iwmStepB .iwm-detail-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 84px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
#iwmStepB .iwm-detail-row__item { min-width: 0; padding: 0 22px; justify-content: center; gap: 4px; }
#iwmStepB .iwm-detail-row__label { font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
#iwmStepB .iwm-detail-row__value { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#iwmStepB .pay-amount--premium { box-sizing: border-box; margin: 0 0 14px; padding: 18px 26px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
#iwmStepB .pay-amount--premium .pay-amount__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; min-height: 28px; font-size: 0.98rem; }
#iwmStepB .pay-amount--premium .pay-amount__row span:first-child { font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft); letter-spacing: 0; text-transform: none; }
#iwmStepB .pay-amount--premium .pay-amount__row span:last-child { font-weight: 500; color: var(--ink); }
#iwmStepB .pay-amount--premium .pay-amount__row--deposit { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
#iwmStepB .pay-amount--premium .pay-amount__row--deposit span:last-child { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--home-red); }

#iwmStepB .reqm-back-link { align-self: flex-start; display: inline-block; margin: 0; color: var(--home-red); font-weight: 600; font-size: 1rem; border-bottom: 2px solid var(--home-red); cursor: pointer; text-decoration: none; }
#iwmStepB .reqm-back-link:hover { text-decoration: none; opacity: 0.8; }
/* Submit error: overlaid beside the Edit link, so it never moves the button */
#iwmStepB #iwmStepBAlert { position: absolute; left: 190px; right: 36px; bottom: 98px; z-index: 3; }
#iwmStepB #iwmStepBAlert .reqm-alert { margin: 0; padding: 0.5rem 0.8rem; font-size: 0.8rem; line-height: 1.35; }
#iwmStepB .iwm-book-wrap { margin-top: auto; padding-top: 14px; }
#iwmStepB .iwm-book-btn { height: 56px; padding: 0 20px; border-radius: 12px; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; }

@media (max-width: 860px) {
  #iwmOverlay .reqm-modal--iwm:has(#iwmStepB:not([hidden])) { width: 100%; height: auto; padding: 20px 16px; display: block; }
  #iwmOverlay .reqm-modal--iwm:has(#iwmStepB:not([hidden])) .reqm-close { position: sticky; top: 0; right: auto; display: block; width: 44px; height: 44px; margin: -20px -16px -44px auto; z-index: 4; }
  #iwmStepB #iwmTitleB { font-size: 1.5rem; padding-right: 44px; }
  #iwmStepB .iwm-stepb__sub { font-size: 0.9rem; margin-bottom: 18px; }
  #iwmStepB .iwm-rule { margin: 20px 0; }
  #iwmStepB .iwm-detail-row { height: auto; }
  #iwmStepB .iwm-detail-row__item { padding: 14px 10px; }
  #iwmStepB .iwm-detail-row__value { font-size: 0.95rem; white-space: normal; }
  #iwmStepB .pay-amount--premium { padding: 18px 16px; }
  #iwmStepB .pay-amount--premium .pay-amount__row--deposit span:last-child { font-size: 1.6rem; }
  #iwmStepB #iwmStepBAlert { position: static; margin: 12px 0 0; }
  #iwmStepB .iwm-book-wrap { margin-top: 14px; padding-top: 0; }
}

/* ============================================
   SECURE YOUR BOOKING (workers.php #pmOverlay) — reference layout.
   Scoped to #pmOverlay. Fixed 700 x 780 desktop box; the content
   scrolls inside it, so switching GCash/Bank Transfer, validation
   messages or file selection never resize the modal.
============================================ */
#pmOverlay .reqm-modal--iwm {
  box-sizing: border-box;
  width: min(700px, calc(100vw - 32px));
  height: min(780px, calc(100dvh - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 40px 40px 32px;
  overflow-y: auto;
  overflow-x: hidden;
}
#pmOverlay .reqm-close {
  top: 0; right: 0; width: 55px; height: 55px;
  border: 0; border-radius: 0; background: var(--home-black); color: #FFFFFF; font-size: 1.5rem;
}
#pmOverlay .reqm-close:hover { background: var(--home-red); }

#pmOverlay #pmTitle { text-align: center; text-transform: uppercase; font-size: clamp(1.6rem, 3.6vw, 2.2rem); letter-spacing: 0; line-height: 1.1; margin: 0 0 10px; padding: 0 40px; }
#pmOverlay .pm-booking-meta { text-align: center; margin: 0 0 6px; text-transform: uppercase; }
#pmOverlay .pm-subtext { text-align: center; font-size: 1rem; margin: 0 0 32px; }
#pmOverlay .pm-modal__inner { max-width: none; margin: 0; }
#pmOverlay .pm-subtext.pm-modal__inner { margin: 0 0 32px; }
#pmOverlay #pmLoading, #pmOverlay .pm-alert { max-width: none; }

#pmOverlay .pm-section-eyebrow { text-align: left; margin: 26px 0 8px; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
#pmOverlay #pmContent > .pm-section-eyebrow:first-child { margin-top: 0; }
#pmOverlay .pm-section-sub { text-align: left; }

/* Payment summary panel */
#pmOverlay .pay-amount--premium { margin: 0; padding: 8px 26px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; }
#pmOverlay .pay-amount--premium .pay-amount__row { align-items: center; padding: 14px 0; font-size: 1rem; }
#pmOverlay .pay-amount--premium .pay-amount__row span:first-child { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
#pmOverlay .pay-amount--premium .pay-amount__row span:last-child { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
#pmOverlay .pay-amount--premium .pay-amount__row--deposit { margin: 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#pmOverlay .pay-amount--premium .pay-amount__row--deposit span:first-child { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; }
#pmOverlay .pay-amount--premium .pay-amount__row--deposit span:last-child { font-size: 2rem; color: var(--home-red); }

/* Payment method: two equal segments */
#pmOverlay .reqm-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; border: 1.5px solid var(--home-black); border-radius: 0; }
#pmOverlay .reqm-mode-btn { height: 52px; padding: 0 16px; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; }
#pmOverlay .reqm-mode-btn + .reqm-mode-btn { border-left: 1.5px solid var(--home-black); }

/* Payment details */
#pmOverlay .pm-method-heading { text-align: center; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.04em; margin: 4px 0 14px; }
#pmOverlay #pmContent > .pm-section-eyebrow:nth-of-type(3) { text-align: center; }
#pmOverlay .pm-qr-frame { width: 72%; max-width: 460px; height: 280px; aspect-ratio: auto; margin-block: 0; margin-inline: auto; border-radius: 8px; }
#pmOverlay .pm-qr-frame img { object-fit: contain; }
#pmOverlay .pm-qr-frame__placeholder { font-size: 0.95rem; max-width: 380px; }
#pmOverlay .pm-qr-meta { margin: 12px 0 0; }
#pmOverlay .pm-scan-block { margin: 12px 0 0; }

#pmOverlay .pm-field { margin-bottom: 14px; }
#pmOverlay .pm-input-pill, #pmOverlay .pm-upload-pill { border-radius: 8px; }
#pmOverlay .pm-submit-btn { height: 56px; padding: 0 24px; border-radius: 12px; margin-top: 18px; }

@media (max-width: 560px) {
  #pmOverlay .reqm-modal--iwm { padding: 52px 18px 24px; }
  #pmOverlay #pmTitle { padding: 0; font-size: 1.5rem; }
  #pmOverlay .pay-amount--premium { padding: 4px 16px; }
  #pmOverlay .pay-amount--premium .pay-amount__row--deposit span:last-child { font-size: 1.6rem; }
  #pmOverlay .pm-qr-frame { width: 90%; height: 220px; }
}

/* Service location autocomplete (Request Worker modal): anchor the
   suggestions to the input itself, not the full-height column block. */
#iwmStepA .iwm-loc-field { position: relative; }
#iwmStepA .iwm-loc-field .loc-suggest { top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: 220px; }

/* Receipt OCR status line under the Reference Number field (payment forms). */
.pm-ocr-status { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft); }
.pm-ocr-status[hidden] { display: none; }
.pm-ocr-status--ok { color: #0F7B3E; }
.pm-ocr-status--warn { color: var(--home-red); }
.pm-input-pill:disabled, .adp-input:disabled { background: #F3F4F6; color: #6B7280; cursor: not-allowed; }

/* Homepage photo focal points (Why Apolido / How it works / FAQ). Frames, aspect ratios and object-fit stay as defined above. */
.hp :is(.home-choose__media, .how-photo) img.home-pos-top { object-position: center top; }
.hp :is(.home-choose__media, .how-photo) img.home-pos-right { object-position: right center; }

/* Review form — "Display as": label above a centered, equal-width toggle */
.hp .rvw-panel .form-field.rvw-display-field { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp .rvw-panel .rvw-display-field .rvw-display-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: max-content; max-width: 100%; margin: 10px auto 0; }
.hp .rvw-panel .rvw-display-field .rvw-display-toggle .reqm-mode-btn { white-space: nowrap; height: auto; min-height: 46px; padding: 12px 22px; line-height: 1.25; }
@media (max-width: 480px) {
  .hp .rvw-panel .rvw-display-field .rvw-display-toggle { width: 100%; }
  .hp .rvw-panel .rvw-display-field .rvw-display-toggle .reqm-mode-btn { padding: 12px 8px; font-size: 0.8rem; letter-spacing: 0.02em; }
}
@media (max-width: 360px) {
  .hp .rvw-panel .rvw-display-field .rvw-display-toggle .reqm-mode-btn { padding: 12px 4px; font-size: 0.7rem; letter-spacing: 0; }
}

/* ============================================
   REQUEST A CREW MODALS (workers.php #reqModalOverlay = Small Request,
   #lrmOverlay = Large Request) — same frame and styling as the
   Requesting Worker modal (#iwmOverlay). Scoped by ID so the Individual
   modal, Leadman/payment/profile modals and every other .reqm-* user
   are untouched. Step 1 only gets the fixed-size layout; later steps
   keep their own content and just inherit the frame look.
   Desktop: calendar | category + workers + location | summary + Next.
   <= 980px: calendar | fields + summary.   <= 700px: stacked.
============================================ */
:is(#reqModalOverlay, #lrmOverlay).reqm-overlay { padding: 20px; }
:is(#reqModalOverlay, #lrmOverlay) .reqm-modal--iwm {
  box-sizing: border-box;
  width: var(--reqm-frame-w, min(940px, calc(100vw - 40px)));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 28px;
  border: 0;
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Step 1 (the form): fixed height like the Individual modal; only the middle area ever scrolls */
:is(#reqModalOverlay, #lrmOverlay) .reqm-modal--iwm:has(:is(#reqStep1, #lrmStep1):not([hidden])) {
  display: flex;
  flex-direction: column;
  height: min(780px, calc(100vh - 40px));
  overflow: hidden;
}
:is(#reqStep1, #lrmStep1):not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Close button — round 40px, same place as the Individual modal */
:is(#reqModalOverlay, #lrmOverlay) .reqm-close { top: 20px; right: 22px; width: 40px; height: 40px; border: 1px solid #CFCFCF; border-radius: 50%; background: #FFFFFF; color: var(--home-black); font-size: 1.3rem; z-index: 4; }
:is(#reqModalOverlay, #lrmOverlay) .reqm-close:hover,
:is(#reqModalOverlay, #lrmOverlay) .reqm-close:focus-visible { background: var(--home-black); border-color: var(--home-black); color: #FFFFFF; }

/* Title, Small/Large toggle, validation message (overlaid so it never moves the columns) */
:is(#reqModalTitle, #lrmTitle) { text-align: left; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: 0; margin: 0 0 16px; line-height: 1.1; padding-right: 56px; }
:is(#reqStep1, #lrmStep1) .reqm-mode-toggle { align-self: center; flex: none; margin: 0 0 18px; }
:is(#reqStep1Alert, #lrmStep1Alert) { position: absolute; top: 24px; left: 400px; right: 76px; z-index: 3; }
:is(#reqStep1Alert, #lrmStep1Alert) .reqm-alert { margin: 0; padding: 0.55rem 0.8rem; font-size: 0.8rem; line-height: 1.35; }

/* 3-column grid: calendar | fields | summary panel */
:is(#reqStep1, #lrmStep1) .reqm-step1__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) 400px;
  grid-template-rows: auto auto auto;
  gap: 18px 28px;
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
:is(#reqStep1, #lrmStep1) .reqm-side { display: contents; }
:is(#reqStep1, #lrmStep1) .req-calendar { grid-column: 1; grid-row: 1 / 4; }
:is(#reqStep1, #lrmStep1) .reqm-side__block { grid-column: 2; min-width: 0; gap: 0; }
:is(#reqStep1, #lrmStep1) .reqm-side__block:nth-child(1) { grid-row: 1; }
:is(#reqStep1, #lrmStep1) .reqm-side__block:nth-child(2) { grid-row: 2; }
:is(#reqStep1, #lrmStep1) .reqm-side__block:nth-child(3) { grid-row: 3; }
:is(#reqStep1, #lrmStep1) .iwm-summary-panel { grid-column: 3; grid-row: 1 / 4; align-self: stretch; }
:is(#reqStep1, #lrmStep1) .reqm-side__label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; text-align: left; color: var(--ink); margin-bottom: 8px; }

/* Form controls — same look as the Individual modal's location field */
:is(#reqStep1, #lrmStep1) .reqm-pill-select select,
:is(#reqStep1, #lrmStep1) .reqm-side input[type=text] { box-sizing: border-box; height: 52px; border: 1px solid #CFCFCF; border-radius: 6px; background-color: #FFFFFF; font-size: 0.95rem; }
:is(#reqStep1, #lrmStep1) .reqm-pill-select select { padding: 0 38px 0 14px; }
:is(#reqStep1, #lrmStep1) .reqm-location input[type=text] {
  padding: 0 14px 0 42px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5B5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-12a7 7 0 0 0-14 0c0 5.9 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px;
}
:is(#reqStep1, #lrmStep1) .reqm-stepper-wrap { display: block; }
:is(#reqStep1, #lrmStep1) .req-stepper { display: flex; box-sizing: border-box; width: 100%; height: 52px; border: 1px solid #CFCFCF; border-radius: 6px; overflow: hidden; }
:is(#reqStep1, #lrmStep1) .req-stepper__btn { width: 52px; height: 100%; }
:is(#reqStep1, #lrmStep1) .req-stepper__value { flex: 1 1 auto; min-width: 0; border-inline: 1px solid #CFCFCF; }

/* Summary: grey panel with the Next / Browse action at its bottom */
:is(#reqStep1, #lrmStep1) .iwm-summary-panel { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 12px; background: #F2F2F1; border-radius: 8px; }
:is(#reqStep1, #lrmStep1) .iwm-summary-box { flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; }
:is(#reqStep1, #lrmStep1) .iwm-summary-box .iwm-eyebrow { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 4px; color: var(--ink-soft); }
:is(#reqStep1, #lrmStep1) .iwm-summary-box__row { align-items: center; height: 35px; padding: 0; font-size: 0.82rem; border-bottom: 1px solid #E2E2E0; }
:is(#reqStep1, #lrmStep1) .iwm-summary-box__row:last-child { border-bottom: 0; }
:is(#reqStep1, #lrmStep1) .iwm-summary-box__row span:first-child { flex: none; }
:is(#reqStep1, #lrmStep1) .iwm-summary-box__row span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
:is(#reqStep1, #lrmStep1) :is(.reqm-actions, .iwm-book-wrap) { display: block; margin: auto 0 0; padding-top: 10px; background: #F2F2F1; }
:is(#reqStep1, #lrmStep1) :is(.reqm-arrow-btn, .iwm-book-btn) { display: flex; align-items: center; justify-content: center; gap: 0.4em; box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; font: 700 0.78rem var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }

/* <= 1280px: calendar | fields, summary full width underneath */
@media (max-width: 1280px) {
  :is(#reqStep1, #lrmStep1) .reqm-step1__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  :is(#reqStep1, #lrmStep1) .iwm-summary-panel { grid-column: 1 / -1; grid-row: 4; }
}
/* Narrow tablet / phone: frame like the Individual modal; stack the sections, scroll only the middle */
@media (max-width: 860px) {
  :is(#reqModalOverlay, #lrmOverlay).reqm-overlay { padding: 12px; }
  :is(#reqModalOverlay, #lrmOverlay) .reqm-modal--iwm,
  :is(#reqModalOverlay, #lrmOverlay) .reqm-modal--iwm:has(:is(#reqStep1, #lrmStep1):not([hidden])) { width: 100%; height: auto; max-height: calc(100vh - 24px); padding: 20px 16px; }
  :is(#reqModalOverlay, #lrmOverlay) .reqm-close { top: 24px; right: 12px; width: 36px; height: 36px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
  :is(#reqModalTitle, #lrmTitle) { font-size: 1.5rem; margin-bottom: 16px; }
  :is(#reqStep1Alert, #lrmStep1Alert) { position: static; margin-bottom: 12px; }
  :is(#reqStep1, #lrmStep1) .reqm-step1__grid { overflow-y: auto; overflow-x: hidden; }
  :is(#reqModalOverlay, #lrmOverlay) .reqm-step2__head { padding-inline: 48px; }
  :is(#reqStep1, #lrmStep1) .reqm-mode-btn { white-space: nowrap; padding: 0 8px; font-size: 0.78rem; letter-spacing: 0.03em; }
}
@media (max-width: 860px) {
  :is(#reqStep1, #lrmStep1) .reqm-step1__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 20px; align-content: start; }
  :is(#reqStep1, #lrmStep1) .reqm-side { display: contents; }
  :is(#reqStep1, #lrmStep1) .req-calendar { grid-row: auto; grid-column: 1; }
  :is(#reqStep1, #lrmStep1) .reqm-side__block:nth-child(n),
  :is(#reqStep1, #lrmStep1) .iwm-summary-panel { grid-column: 1; grid-row: auto; }
  /* panel dissolves so its summary stays in the flow and the action can stick to the bottom of the scrolling area */
  :is(#reqStep1, #lrmStep1) .iwm-summary-panel { display: contents; }
  :is(#reqStep1, #lrmStep1) .iwm-summary-box { grid-column: 1; padding: 14px; background: #F2F2F1; border-radius: 8px; }
  :is(#reqStep1, #lrmStep1) :is(.reqm-actions, .iwm-book-wrap) { grid-column: 1; position: sticky; bottom: 0; margin: 0; padding: 10px 0 0; background: #FFFFFF; z-index: 2; }
}

/* Smaller screens: 52px day cells (<= 860px), 44px on phones; crew step 1 goes full-screen on phones */
@media (max-width: 860px) {
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) { flex: none; }
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__grid { grid-template-rows: repeat(6, 52px); }
}
@media (max-width: 640px) {
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) { padding: 12px; }
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__grid { grid-template-rows: repeat(6, 44px); }
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__nav { width: 44px; height: 44px; }
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__month { font-size: 1.15rem; }
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__weekdays { font-size: 0.8rem; }
  :is(#iwmCalendar, #reqCalendar, #lrmCalendar) .req-calendar__day { font-size: 1rem; }
  :is(#reqModalOverlay, #lrmOverlay).reqm-overlay:has(:is(#reqStep1, #lrmStep1):not([hidden])) { padding: 0; }
  :is(#reqModalOverlay, #lrmOverlay) .reqm-modal--iwm:has(:is(#reqStep1, #lrmStep1):not([hidden])) { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
}

/* ============================================
   SHARED FRAME WIDTH for the Requesting Worker modal and the Request a
   Crew modals (Small + Large). One variable so they always stay the
   same size; both modals fall back to 100% width at <= 860px (rules above).
============================================ */
:root { --reqm-frame-w: min(1280px, calc(100vw - 48px)); }

/* ============================================
   SUGGESTED WORKERS (Small Request Step 2 — workers.php #reqStep2).
   Visual redesign only. Same frame as Step 1; header and bottom bar stay
   put, only the list scrolls. State comes from the classes the existing
   script already sets (.is-selected, .is-disabled, button:disabled).
   Card = [avatar] [info] [select button], the button in its own column.
============================================ */
#reqModalOverlay .reqm-modal--iwm:has(#reqStep2:not([hidden])) { display: flex; flex-direction: column; height: min(780px, calc(100vh - 40px)); overflow: hidden; }
#reqStep2:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  flex: 1 1 auto;
  min-height: 0;
}
#reqStep2 .reqm-step2__head { grid-column: 1 / -1; grid-row: 1; margin: 0 0 16px; text-align: center; }
#reqStep2 .reqm-step2__title { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: 0; line-height: 1.1; text-transform: uppercase; }
#reqStep2 .reqm-step2__subtitle { margin: 8px 0 0; font-size: 1rem; color: var(--ink-soft); }
#reqStep2 .reqm-back-link { display: inline-block; margin-top: 6px; border-bottom: 0; color: var(--home-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* List: the only scrolling area. It is a size container so the grid can drop to one column when a card would get too narrow. */
#reqStep2 .reqm-worker-scroll { grid-column: 1 / -1; grid-row: 2; container-type: inline-size; min-height: 0; max-height: none; margin: 0; padding: 4px 4px 20px; overflow-y: auto; border-bottom: 1px solid #E2E0DB; }
#reqStep2 .reqm-worker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container (max-width: 1060px) { #reqStep2 .reqm-worker-grid { grid-template-columns: minmax(0, 1fr); } }

#reqStep2 .reqm-worker-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
  padding: 24px;
  border: 0;
  border-radius: 0;
  outline: 1.5px solid #E2E0DB;
  background: #FFFFFF;
  text-align: left;
  cursor: default;
  transform: none;
  transition: outline-color 0.2s, background 0.2s;
}
#reqStep2 .reqm-worker-card:hover { outline-color: var(--home-black); transform: none; }
#reqStep2 .reqm-worker-card.is-selected { outline: 2px solid var(--home-red); background: #FFF7F7; box-shadow: none; }
#reqStep2 .reqm-worker-card.is-disabled { opacity: 0.5; }

#reqStep2 .reqm-worker-card__avatar { grid-column: 1; justify-self: center; width: 90px; height: 90px; margin: 0; border: 0; border-radius: 50%; background: #E8E6E1; color: var(--ink-soft); object-fit: cover; }
#reqStep2 .reqm-worker-card__avatar--initials { display: grid; place-items: center; overflow: hidden; background: #E8E6E1; color: var(--ink-soft); font-size: 1.5rem; line-height: 1; white-space: nowrap; letter-spacing: -0.02em; }

/* Info column: name + badge inline, facts on one wrapping row */
#reqStep2 .reqm-worker-card__info { grid-column: 2; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
#reqStep2 .reqm-worker-card__info > * { margin: 0; min-width: 0; }
#reqStep2 .reqm-worker-card__name { order: 1; margin-right: 10px; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
#reqStep2 .reqm-worker-card__badge { order: 2; position: static; padding: 3px 9px; border-radius: 0; background: var(--home-black); color: #FFFFFF; font: 700 0.78rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
#reqStep2 .reqm-worker-card__trade { order: 3; flex: 0 0 100%; font-size: 0.95rem; color: var(--ink-soft); }
#reqStep2 .reqm-worker-card__status { order: 4; display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 0.95rem; font-weight: 600; color: #0F7B3F; }
#reqStep2 .reqm-worker-card__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#reqStep2 .reqm-worker-card__rating { order: 5; margin-right: 16px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
#reqStep2 .reqm-worker-card__rating span { color: var(--ink-soft); font-size: 1em; font-weight: 500; }
#reqStep2 .reqm-worker-card__rate { order: 6; font-size: 0.95rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
#reqStep2 .reqm-worker-card__reason { order: 7; flex: 0 0 100%; font-size: 0.85rem; line-height: 1.35; color: var(--ink-soft); }

/* Select button: own column, 60px square; + when free, check when selected (state from .is-selected) */
#reqStep2 .reqm-worker-card .reqm-worker-card__toggle {
  grid-column: 3; align-self: center;
  position: static; display: grid; place-items: center;
  width: 60px; height: 60px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--home-black); color: #FFFFFF;
  font: 600 2.2rem/1 var(--font-body); text-transform: none; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
#reqStep2 .reqm-worker-card .reqm-worker-card__toggle:hover:not(:disabled) { background: #FF393E; color: #FFFFFF; }
#reqStep2 .reqm-worker-card.is-selected .reqm-worker-card__toggle:hover:not(:disabled) { background: #C8161B; }
#reqStep2 .reqm-worker-card .reqm-worker-card__toggle:active:not(:disabled) { transform: scale(0.94); }
#reqStep2 .reqm-worker-card .reqm-worker-card__toggle:focus-visible { outline: 2px solid var(--home-red); outline-offset: 3px; }
#reqStep2 .reqm-worker-card.is-selected .reqm-worker-card__toggle { background: var(--home-red); border: 0; color: transparent; font-size: 0; }
#reqStep2 .reqm-worker-card.is-selected .reqm-worker-card__toggle::after {
  content: ""; width: 26px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='butt' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
#reqStep2 .reqm-worker-card .reqm-worker-card__toggle:disabled { background: #E8E6E1; color: var(--ink-soft); cursor: not-allowed; }

/* Bottom bar: counter (+ total) on the left, Next on the right */
#reqStep2 #reqStep2Alert { grid-column: 1 / -1; grid-row: 3; }
#reqStep2 .reqm-counter { grid-column: 1; grid-row: 4; align-self: end; margin: 16px 0 0; text-align: left; font: 700 1rem var(--font-body); }
#reqStep2 .reqm-counter::first-letter { text-transform: uppercase; }
#reqStep2 .reqm-total { grid-column: 1; grid-row: 5; margin: 2px 0 0; text-align: left; font-size: 0.9rem; color: var(--ink-soft); }
#reqStep2 .reqm-actions { grid-column: 2; grid-row: 4 / span 2; align-self: end; margin: 16px 0 0; }
#reqStep2 .reqm-arrow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: auto; height: 52px; padding: 0 28px; border-radius: var(--btn-radius); font: 700 0.95rem var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 860px) {
  #reqModalOverlay .reqm-modal--iwm:has(#reqStep2:not([hidden])) { width: 100%; height: auto; max-height: calc(100vh - 24px); padding: 20px 16px; }
}
/* Phone: full-screen modal for this step, one column, 64px avatar, 52px button, counter above a full-width Next */
@media (max-width: 640px) {
  #reqModalOverlay.reqm-overlay:has(#reqStep2:not([hidden])) { padding: 0; }
  #reqModalOverlay .reqm-modal--iwm:has(#reqStep2:not([hidden])) { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 20px 16px; }
  #reqModalOverlay .reqm-modal--iwm:has(#reqStep2:not([hidden])) .reqm-close { top: 16px; right: 12px; }
  #reqStep2 .reqm-step2__head { text-align: left; padding-inline: 0 48px; }
  #reqStep2 .reqm-worker-scroll { padding: 4px 4px 14px; }
  #reqStep2 .reqm-worker-card { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 16px; padding: 16px; }
  #reqStep2 .reqm-worker-card__avatar { width: 64px; height: 64px; }
  #reqStep2 .reqm-worker-card__avatar--initials { font-size: 1.1rem; }
  #reqStep2 .reqm-worker-card .reqm-worker-card__toggle { width: 52px; height: 52px; font-size: 2rem; }
  #reqStep2 .reqm-worker-card.is-selected .reqm-worker-card__toggle::after { width: 24px; height: 24px; }
  #reqStep2:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  #reqStep2 .reqm-actions { grid-column: 1; grid-row: 6; margin-top: 12px; }
  #reqStep2 .reqm-arrow-btn { width: 100%; }
}


/* ==========================================================================
   CLIENT SIDEBAR + DASHBOARD REVIEW PANEL  (includes/client-sidebar.php)
   Presentation only. Everything is scoped to .cl-* or to body.cl-has-sidebar,
   which only exists on logged-in client pages that include the partial, so
   public pages and the Admin / Worker / Leadman layouts are unaffected.
   ========================================================================== */
:root { --cl-nav-h: 72px; --cl-side-w: 248px; }

/* Desktop: body becomes a 2-column grid; the navbar spans both columns, the
   sidebar sits under it, and every other in-flow body child (the page's
   <main>/wrapper) goes in column 2. Fixed overlays/modals are out of flow and
   are not grid items, so they are not affected. */
@media (min-width: 901px) {
  body.cl-has-sidebar {
    display: grid;
    grid-template-columns: var(--cl-side-w) minmax(0, 1fr);
    align-content: start;
  }
  body.cl-has-sidebar > .navbar { grid-column: 1 / -1; }
  body.cl-has-sidebar > :not(.navbar):not(.cl-sidebar) { grid-column: 2; min-width: 0; }
  .cl-sidebar {
    grid-column: 1; grid-row: 2 / span 40;
    position: sticky; top: var(--cl-nav-h); align-self: start;
    height: calc(100vh - var(--cl-nav-h));
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    padding: 28px 18px 24px;
    background: #FFFFFF; border-right: 1px solid #E2E0DB;
    overflow-y: auto;
  }
}

.cl-sidebar { font-family: var(--font-body, 'Inter', Arial, sans-serif); color: #0F0F10; z-index: 15; }
.cl-nav { display: flex; flex-direction: column; }
.cl-nav__group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-nav__group + .cl-nav__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E2E0DB; }
.cl-nav__link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 0.95rem; font-weight: 500; color: #3D3D40; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cl-nav__icon { flex: none; color: #6B6B6F; transition: color 0.15s ease; }
.cl-nav__label { flex: 1; min-width: 0; }
.cl-nav__link:hover { background: #F1F0ED; color: #0F0F10; }
.cl-nav__link:hover .cl-nav__icon { color: #0F0F10; }
.cl-nav__link.is-active { background: #F1F0ED; color: #0F0F10; font-weight: 700; }
.cl-nav__link.is-active .cl-nav__icon { color: #FF393E; }
.cl-nav__link.is-active::before {
  content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #FF393E;
}
.cl-nav__link:focus-visible, .cl-sidebar .profile-menu__trigger:focus-visible, .cl-btn-outline:focus-visible { outline: 2px solid #FF393E; outline-offset: 2px; }
.cl-nav__badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #FF393E; color: #FFFFFF; font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center;
}
/* Account menu pinned to the bottom of the sidebar (reuses the .profile-menu markup + script.js toggle). */
.cl-sidebar__profile { margin-top: auto; padding-top: 14px; border-top: 1px solid #E2E0DB; }
.cl-sidebar .profile-menu__trigger { width: 100%; gap: 12px; padding: 8px; border-radius: 12px; text-align: left; color: #0F0F10; }
.cl-sidebar .profile-menu__trigger:hover,
.cl-sidebar .profile-menu__trigger[aria-expanded="true"] { background: #F1F0ED; }
.cl-sidebar .profile-menu__avatar { flex: none; width: 38px; height: 38px; background: #0F0F10; }
.cl-profile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cl-profile__name { font-size: 0.92rem; font-weight: 700; color: #0F0F10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-profile__role { font-size: 0.78rem; color: #6B6B6F; }
.cl-profile__chev { flex: none; color: #6B6B6F; }
.cl-sidebar .profile-menu__dropdown { left: 0; right: 0; top: auto; bottom: calc(100% + 8px); background: #FFFFFF; border: 1px solid #E2E0DB; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 15, 16, 0.14); }
.cl-sidebar .profile-menu__dropdown a { color: #0F0F10; }
.cl-sidebar .profile-menu__dropdown a:hover { background: #F1F0ED; color: #FF393E; }
.cl-sidebar .profile-menu__logout { color: #C0392B; border-top-color: #E2E0DB; }

/* Tablet / mobile: the sidebar becomes a horizontally scrolling strip under the
   navbar — it never covers page content and needs no JS. */
@media (max-width: 900px) {
  .cl-sidebar {
    position: sticky; top: var(--cl-nav-h); display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; background: #FFFFFF; border-bottom: 1px solid #E2E0DB;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cl-sidebar::-webkit-scrollbar { display: none; }
  .cl-nav { flex-direction: row; align-items: center; gap: 4px; }
  .cl-nav__group { flex-direction: row; gap: 4px; }
  .cl-nav__group + .cl-nav__group { margin: 0 0 0 4px; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid #E2E0DB; }
  .cl-nav__link { padding: 8px 12px; white-space: nowrap; font-size: 0.88rem; gap: 8px; }
  .cl-nav__link.is-active::before { display: none; }
  .cl-nav__link.is-active { background: #0F0F10; color: #FFFFFF; }
  .cl-nav__link.is-active .cl-nav__icon { color: #FFFFFF; }
  /* Account menu: compact avatar pinned to the right end of the strip; its dropdown is fixed so the strip's overflow can't clip it. */
  .cl-sidebar__profile { flex: none; margin: 0 0 0 auto; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid #E2E0DB; position: sticky; right: 0; background: #FFFFFF; z-index: 2; }
  .cl-sidebar .profile-menu__trigger { width: auto; padding: 4px; }
  .cl-profile__text, .cl-profile__chev { display: none; }
  .cl-sidebar .profile-menu__dropdown { position: fixed; left: auto; right: 16px; bottom: auto; top: calc(var(--cl-nav-h) + 56px); min-width: 200px; }
}

/* ---- Dashboard header actions + inline Write a Review panel ---- */
.cd-head__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-btn-outline,
body.cl-has-sidebar .ntf__title-row .notif-bell__markall {   /* Notifications' page-level action matches the Dashboard's header buttons */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 24px; border-radius: var(--btn-radius, 14px);
  background: #FFFFFF; color: #0F0F10; border: 2px solid #0F0F10; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cl-btn-outline:hover,
body.cl-has-sidebar .ntf__title-row .notif-bell__markall:hover:not(:disabled) { background: #0F0F10; border-color: #0F0F10; color: #FFFFFF; }
body.cl-has-sidebar .ntf__title-row .notif-bell__markall:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Write a Review modal (includes/client-sidebar.php + assets/review-modal.js) ---- */
html.rvm-lock, html.rvm-lock body { overflow: hidden; }
.rvm-overlay {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 15, 16, 0.55);
}
.rvm-overlay[hidden] { display: none; }
.rvm-modal {
  --rvm-ink: #0F0F10; --rvm-soft: #5B5B5E; --rvm-line: #E2E0DB; --rvm-ac: #FF393E;
  display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  background: #FFFFFF; color: var(--rvm-ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  font-family: var(--font-body, 'Inter', Arial, sans-serif); overflow: hidden;
}
.rvm-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--rvm-line); }
.rvm-title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.rvm-close { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--rvm-line); background: #FFFFFF; color: var(--rvm-ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.rvm-close:hover { background: var(--rvm-ink); border-color: var(--rvm-ink); color: #FFFFFF; }
.rvm-close:focus-visible, .rvm-modal .rvw-star:focus-visible, .rvm-modal .reqm-mode-btn:focus-visible, .rvm-modal .btn:focus-visible { outline: 2px solid var(--rvm-ac); outline-offset: 2px; }
.rvm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; overscroll-behavior: contain; }
.rvm-lead { margin: 0 0 18px; color: var(--rvm-soft); font-size: 0.95rem; }
.rvm-modal .form-field { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 16px; color: var(--rvm-ink); }
.rvm-modal .form-field input, .rvm-modal .form-field textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 14px; font: inherit; font-weight: 400; color: var(--rvm-ink);
  background: #FFFFFF; border: 1.5px solid var(--rvm-line); border-radius: 10px; box-sizing: border-box;
}
.rvm-modal .form-field textarea { min-height: 7.5rem; resize: vertical; }
.rvm-modal .form-field input:focus, .rvm-modal .form-field textarea:focus { outline: 2px solid var(--rvm-ac); outline-offset: 0; border-color: var(--rvm-ink); }
.rvm-modal .rvw-stars-input { display: flex; gap: 2px; margin-top: 6px; }
.rvm-modal .rvw-star { background: none; border: 0; cursor: pointer; color: #9A9A9D; padding: 2px; line-height: 0; }
.rvm-modal .rvw-star.is-filled { color: var(--rvm-ac); }
.rvm-modal .rvw-star.is-filled svg { fill: var(--rvm-ac); }
.rvm-modal .rvw-display-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: max-content; max-width: 100%; margin-top: 6px; border: 1.5px solid var(--rvm-ink); border-radius: 10px; overflow: hidden; }
.rvm-modal .rvw-display-toggle .reqm-mode-btn { padding: 11px 20px; border: 0; background: #FFFFFF; color: var(--rvm-ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rvm-modal .rvw-display-toggle .reqm-mode-btn.is-active { background: var(--rvm-ink); color: #FFFFFF; }
.rvm-modal .rvw-form-footer { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rvm-modal .btn { height: 46px; padding: 0 22px; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; transform: none; }
.rvm-modal .btn--ghost { background: #FFFFFF; color: var(--rvm-ink); border: 1.5px solid var(--rvm-line); }
.rvm-modal .btn--ghost:hover { border-color: var(--rvm-ink); }
.rvm-modal .btn--primary { background: var(--rvm-ac); color: #FFFFFF; border: 1.5px solid var(--rvm-ac); }
.rvm-modal .btn--primary:hover { background: #E8292E; border-color: #E8292E; }
.rvm-modal .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.rvm-modal .form-alert { margin-bottom: 14px; }
@media (max-width: 600px) {
  .rvm-overlay { padding: 12px; }
  .rvm-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .rvm-head { padding: 16px 18px; }
  .rvm-body { padding: 16px 18px 20px; }
  .rvm-modal .rvw-display-toggle { width: 100%; }
  .rvm-modal .rvw-display-toggle .reqm-mode-btn { padding: 11px 8px; }
  .rvm-modal .rvw-form-footer .btn { flex: 1 1 100%; }
  .cd-head__actions { width: 100%; }
  .cd-head__actions .cd-btn, .cd-head__actions .cl-btn-outline { flex: 1 1 100%; }
}

/* The narrower content column next to the sidebar made the existing Settings
   name fields poke past their row; let them shrink to fit (layout only). */
body.cl-has-sidebar .stn-name-grid { min-width: 0; }
body.cl-has-sidebar .stn-name-grid input { width: 100%; min-width: 0; box-sizing: border-box; }

/* ==========================================================================
   CLIENT PAGE ALIGNMENT + TYPOGRAPHY  (Dashboard is the reference)
   Every client page used its own centred max-width (Dashboard 1120, History
   1200, Inquiries 860, Notifications 760, Settings 1000), so each title
   started at a different x next to the sidebar. They now share the
   Dashboard's container (.cd__wrap: min(1120px, 100% - 48px), centred in the
   area right of the sidebar) and its title / subtitle / spacing scale.
   Scoped to body.cl-has-sidebar: public, Worker, Leadman and Admin pages are
   not affected. Specificity (0,2,x) beats the per-page rules, no !important.
   ========================================================================== */
body.cl-has-sidebar :is(.bh, .mi, .ntf, .stn) {
  width: min(1120px, 100% - 48px);
  max-width: none;
  margin-inline: auto;
  padding: 56px 0 120px;
  font-family: var(--font-body);
}
/* Page title: Space Grotesk 700, uppercase, tight leading (same as .cd-title). */
body.cl-has-sidebar :is(.bh__title, .mi h1, .ntf__title, .stn__title, .cl-pagehead__title) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0F0F10;
}
/* Subtitle: Inter 1.02rem, soft grey, 10px under the title (same as .cd-sub). */
body.cl-has-sidebar :is(.bh__subtext, .mi__sub, .ntf__subtext, .stn__subtitle, .cl-pagehead__sub) {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  color: #5B5B5E;
}
/* Title block -> first content block: 40px everywhere (Dashboard .cd-head). */
body.cl-has-sidebar :is(.bh__title-row, .ntf__title-row) { margin-bottom: 40px; align-items: flex-end; }
body.cl-has-sidebar .stn__layout { margin-top: 40px; }
body.cl-has-sidebar .mi__sub { margin-bottom: 40px; }
body.cl-has-sidebar .mi__sub + :is(.mi__row, .mi__list, .mi__empty) { margin-top: 0; }
body.cl-has-sidebar .mi h1 + .mi__sub { margin-top: 10px; }

/* ==========================================================================
   CLIENT VIEW OF SERVICES / WORKERS  (workers.php, services.php)
   Visitors keep the marketing hero. A logged-in client gets this compact
   page header (same title/subtitle scale as the other client pages) and
   lands directly on the existing Leadmen / Workers / trade sections.
   ========================================================================== */
body.cl-has-sidebar .hp .wrap { width: min(1120px, 100% - 48px); }   /* same content column as the Dashboard */
body.cl-has-sidebar :is(.wk-lead, .wk-dir, .svc-index__body-wrap) { scroll-margin-top: calc(var(--cl-nav-h) + 16px); }
.cl-pagehead { background: #FFFFFF; padding: 56px 0 32px; color: #0F0F10; }
.cl-pagehead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cl-pagehead__meta { margin: 14px 0 0; font-size: 0.95rem; color: #5B5B5E; }
.cl-pagehead__meta strong { color: #0F0F10; }
.cl-pagetabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cl-pagetab {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px;
  border: 1.5px solid #0F0F10; border-radius: var(--btn-radius, 14px); background: #FFFFFF; color: #0F0F10;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cl-pagetab span { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: #F1F0ED; color: #0F0F10; font-size: 0.78rem; text-align: center; transition: background-color 0.15s ease, color 0.15s ease; }
.cl-pagetab:hover { background: #0F0F10; color: #FFFFFF; }
.cl-pagetab:hover span { background: #FF393E; color: #FFFFFF; }
.cl-pagetab--link { border-color: #E2E0DB; font-weight: 600; }
.cl-pagetab:focus-visible, .cl-btn-primary:focus-visible { outline: 2px solid #FF393E; outline-offset: 2px; }
.cl-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px;
  border-radius: var(--btn-radius, 14px); background: #FF393E; color: #0A0A0A; border: 2px solid #FF393E;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cl-btn-primary:hover { background: #0F0F10; border-color: #0F0F10; color: #FFFFFF; }
@media (max-width: 600px) {
  .cl-pagehead { padding: 40px 0 24px; }
  .cl-btn-primary { width: 100%; }
  .cl-pagetab { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   REQUEST WORKER AUTH GATE  (workers.php, assets/request-gate.js)
   Account-choice modal for a visitor who clicks "Request Worker". Compact,
   warm off-white, red primary / outlined secondary.
   ========================================================================== */
html.rqg-lock, html.rqg-lock body { overflow: hidden; }
.rqg-overlay {
  position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 15, 16, 0.55);
}
.rqg-overlay[hidden] { display: none; }
.rqg-modal {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 40px 36px 32px; background: #FBFAF7; color: #0F0F10; border: 1px solid #E2E0DB; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26); font-family: var(--font-body, 'Inter', Arial, sans-serif);
  animation: rqg-in 0.18s ease-out;
}
@keyframes rqg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rqg-modal { animation: none; } }
.rqg-close {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1.5px solid #E2E0DB; background: #FFFFFF; color: #0F0F10; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rqg-close:hover { background: #0F0F10; border-color: #0F0F10; color: #FFFFFF; }
.rqg-kicker { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: #5B5B5E; }
.rqg-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF393E; }
.rqg-title { margin: 0 0 16px; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: clamp(1.5rem, 5vw, 1.85rem); line-height: 1.12; letter-spacing: -0.02em; padding-right: 28px; }
.rqg-desc { margin: 0 0 28px; font-size: 1rem; line-height: 1.55; color: #5B5B5E; }
.rqg-actions { display: grid; gap: 12px; }
.rqg-btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 20px; border-radius: 14px;
  font: inherit; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: 0.98rem; text-align: center;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rqg-btn--primary { background: #FF393E; border-color: #FF393E; color: #0F0F10; }
.rqg-btn--primary:hover { background: #0F0F10; border-color: #0F0F10; color: #FFFFFF; }
.rqg-btn--secondary { background: #FFFFFF; border-color: #0F0F10; color: #0F0F10; }
.rqg-btn--secondary:hover { background: #0F0F10; color: #FFFFFF; }
.rqg-close:focus-visible, .rqg-btn:focus-visible { outline: 2px solid #FF393E; outline-offset: 3px; }
@media (max-width: 480px) { .rqg-overlay { padding: 16px; align-items: flex-end; } .rqg-modal { padding: 32px 22px 24px; } .rqg-btn { font-size: 0.9rem; padding: 12px 14px; } }
.wk-resume-note { margin-bottom: 24px; }

/* ==========================================================================
   WORKERS PAGE — LEADMEN CAROUSEL (light) + WHITE SECTION BACKGROUNDS
   [2026-10-23] Presentation only. The Leadmen section is now a white
   centre-focus carousel (featured card in the middle, neighbours peeking on
   both sides; workers.php sets data-pos on each real, database-rendered card).
   The Worker Directory keeps its layout; only its grey band is removed.
   Selectors are prefixed (.hp .wk-lead .wk-lp .wk-lpp ...) so they win over
   the earlier accordion rules without touching them.
   ========================================================================== */
.hp .wk-lead { background: #FFFFFF; color: var(--hp-ink); padding: 88px 0 80px; overflow-x: clip; }
.hp .wk-lead .wk-lead__head { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 36px; }
.hp .wk-lead .wk-lead__title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); color: var(--hp-ink); }
.hp .wk-lead .wk-lead__title-accent { color: var(--hp-ac); }
.hp .wk-lead .wk-lead__intro { max-width: 58ch; color: var(--hp-soft); }

/* Stage: overlapping cards in 3D space. Each card gets data-pos (-2..2 / "far") from workers.php. */
.hp .wk-lead .wk-lp { --lw: 360px; --lh: 520px; position: relative; display: block; height: calc(var(--lh) + 64px); padding-top: 18px; overflow: visible; perspective: 1700px; perspective-origin: 50% 42%; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hp .wk-lead .wk-lp .wk-lpp {
  position: absolute; left: 50%; top: 18px; flex: none; width: var(--lw); height: var(--lh);
  background: #FFFFFF; border: 1px solid #E8E6E1; border-radius: 24px; overflow: visible; cursor: pointer;
  transform: translateX(calc(-50% + var(--x, 0px))) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 0); z-index: var(--z, 0);
  transition: transform .65s cubic-bezier(.22, .8, .24, 1), opacity .5s ease, filter .5s ease;
  will-change: transform; outline-offset: 4px;
}
.hp .wk-lead .wk-lp .wk-lpp.is-on { --o: 1; --z: 3; cursor: default; }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="0"]  { --x: 0px; --s: 1; --ry: 0deg; --o: 1; --z: 3; cursor: default; box-shadow: 0 26px 52px rgba(15, 15, 16, .16); filter: none; }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="-1"] { --x: calc(var(--lw) * -.8);  --s: .9;  --ry: 22deg;  --o: .8; --z: 2; filter: grayscale(.3); box-shadow: 0 14px 30px rgba(15, 15, 16, .08); }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="1"]  { --x: calc(var(--lw) * .8);   --s: .9;  --ry: -22deg; --o: .8; --z: 2; filter: grayscale(.3); box-shadow: 0 14px 30px rgba(15, 15, 16, .08); }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="-2"] { --x: calc(var(--lw) * -1.38); --s: .8; --ry: 28deg;  --o: .5; --z: 1; filter: grayscale(.55); }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="2"]  { --x: calc(var(--lw) * 1.38);  --s: .8; --ry: -28deg; --o: .5; --z: 1; filter: grayscale(.55); }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="far"] { --x: 0px; --s: .6; --ry: 0deg; --o: 0; --z: 0; pointer-events: none; visibility: hidden; }

/* Photo fills the card; a bottom gradient keeps the white text readable on any real photo. */
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: 50% 14%; filter: none; transition: none; -webkit-user-drag: none; }
.hp .wk-lead .wk-lp .wk-lpp::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(to top, rgba(15, 15, 16, .6) 0%, rgba(15, 15, 16, 0) 46%); }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="0"]::after { background: linear-gradient(to top, rgba(15, 15, 16, .94) 0%, rgba(15, 15, 16, .78) 30%, rgba(15, 15, 16, 0) 62%); }

/* Red "FEATURED LEADMAN" label, hanging over the card's upper-left edge with a small fold */
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__n { position: absolute; left: -12px; top: 20px; z-index: 4; }
.hp .wk-lead .wk-lp .wk-lpp .wk-badge { position: relative; display: block; background: var(--hp-ac); color: #FFFFFF; font-size: .86rem; letter-spacing: 0; padding: 11px 18px 11px 20px; border-radius: 0 4px 4px 0; }
.hp .wk-lead .wk-lp .wk-lpp .wk-badge::before { content: ""; position: absolute; left: 0; top: 100%; width: 0; height: 0; border-top: 9px solid #A5171C; border-left: 12px solid transparent; }
.hp .wk-lead .wk-lp .wk-lpp:not([data-pos="0"]) .wk-lpp__n { opacity: 0; }

/* Neighbours: trade + name bottom-left */
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__v { position: absolute; left: 22px; right: 22px; bottom: 24px; top: auto; z-index: 2; transform: none; rotate: 0deg; writing-mode: horizontal-tb; flex-direction: column-reverse; align-items: flex-start; gap: 3px; font-size: 1.35rem; line-height: 1.05; color: #FFFFFF; white-space: normal; opacity: 1; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__v small { font-size: .86rem; color: #E4E4E6; }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="0"] .wk-lpp__v { opacity: 0; pointer-events: none; }

/* Featured card: trade, name, 3 stats and the profile button sit directly on the photo */
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__d { position: absolute; left: 0; right: 0; top: auto; bottom: 0; z-index: 3; padding: 0 26px 26px; background: none; color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s ease .12s, transform .45s ease .08s; }
.hp .wk-lead .wk-lp .wk-lpp[data-pos="0"] .wk-lpp__d { opacity: 1; transform: none; pointer-events: auto; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__tr { margin: 0; color: #E4E4E6; font-size: .95rem; font-weight: 500; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__name { margin: -8px 0 0; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1; color: #FFFFFF; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__bio, .hp .wk-lead .wk-lp .wk-lpp .wk-lead__note { display: none; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 8px; background: none; text-align: center; border-left: 1px solid rgba(255, 255, 255, .35); }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats div:first-child { border-left: 0; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats dt { margin: 0; font-size: .78rem; color: #E4E4E6; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats dd { margin: 0; font-size: 1.3rem; color: #FFFFFF; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lead__muted { color: #E4E4E6; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lead__cta { margin: 0; gap: 0; }
.hp .wk-lead .wk-lp .wk-lpp .wk-lead__btn { width: 100%; justify-content: center; height: 56px; padding: 0 20px; border-radius: 18px; font-size: .95rem; }

/* Controls: round ‹ › buttons with short dashes between them */
.hp .wk-lead .wk-lead__bar { flex-direction: column; align-items: center; justify-content: center; gap: 22px; margin-top: 8px; }
.hp .wk-lead .wk-lp-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.hp .wk-lead .wk-lp-ctl__btn { order: 1; width: 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--hp-ink); font-size: 1.15rem; box-shadow: 0 6px 20px rgba(15, 15, 16, .14); }
.hp .wk-lead .wk-lp-ctl__btn#wkLpNext { order: 3; }
.hp .wk-lead .wk-lp-ctl__btn:hover { background: var(--hp-ink); color: #FFFFFF; }
.hp .wk-lead .wk-lp-ctl__bar { order: 2; display: flex; align-items: center; gap: 10px; width: auto; height: auto; background: none; }
.hp .wk-lead .wk-lp-ctl__bar b { display: none; }
.hp .wk-lead .wk-lp-dash { position: relative; width: 40px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: #D9D7D2; cursor: pointer; transition: background-color .3s ease, height .3s ease; }
.hp .wk-lead .wk-lp-dash::after { content: ""; position: absolute; inset: -14px 0; }
.hp .wk-lead .wk-lp-dash.is-on { height: 5px; background: var(--hp-ac); }
.hp .wk-lead .wk-lp-dash:focus-visible { outline: 2px solid var(--hp-ac); outline-offset: 4px; }
.hp .wk-lead .wk-lp-ctl__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* "01 / 04" stays for screen readers */
.hp .wk-lead .wk-lead__all { color: var(--hp-ink); }
.hp .wk-lead .wk-lead__all:hover { color: var(--hp-ac); }

/* "All Leadmen" panel on white: outlined instead of dark/grey blocks */
.hp .wk-lead .wk-lead__panel { background: #FFFFFF; border: 1px solid var(--hp-line); }
.hp .wk-lead .wk-lead__search { background: #FFFFFF; border: 1.5px solid var(--hp-line); }
.hp .wk-lead .wk-lead__search input { color: var(--hp-ink); }
.hp .wk-lead .wk-lead__panel-meta { color: var(--hp-soft); }
.hp .wk-lead .wk-lead__less { color: var(--hp-ink); }
.hp .wk-lead .wkl-card { border: 1px solid var(--hp-line); }
.hp .wk-lead .wkl-pager { color: var(--hp-soft); }
.hp .wk-lead .wkl-pager__btn { border-color: var(--hp-line); color: var(--hp-ink); }
.hp .wk-lead .wkl-pager__btn.is-current { background: var(--hp-ac); border-color: var(--hp-ac); color: var(--hp-ac-ink); }
.hp .wk-lead a.wkl-pager__btn:hover, .hp .wk-lead button.wkl-pager__btn:hover { background: var(--hp-ink); color: #FFFFFF; }
.hp .wk-lead .wkl-empty { background: #FFFFFF; border: 1px solid var(--hp-line); color: var(--hp-ink); }
.hp .wk-lead .wkl-empty__text { color: var(--hp-soft); }
.hp .wk-lead .wkl-retry { color: var(--hp-ink); }

/* Worker Directory: grey band removed (white page); outlines keep the cards and filters distinct */
.hp .wk-dir { background: #FFFFFF; border-top: 1px solid var(--hp-line); }
.hp .wk-dir .wk-filters { border: 1px solid var(--hp-line); }
.hp .wk-dir .wk-card { border: 1px solid var(--hp-line); }
.hp .wk-dir .wk-empty { border: 1px solid var(--hp-line); }

@media (max-width: 1080px) {
  .hp .wk-lead .wk-lp { --lw: 330px; --lh: 500px; }
  .hp .wk-lead .wk-lp-ctl { display: flex; }
}
@media (max-width: 720px) {
  .hp .wk-lead { padding: 64px 0 56px; }
  .hp .wk-lead .wk-lp { --lw: 276px; --lh: 470px; }
  .hp .wk-lead .wk-lp .wk-lpp[data-pos="-1"] { --x: calc(var(--lw) * -.72); --ry: 18deg; }
  .hp .wk-lead .wk-lp .wk-lpp[data-pos="1"]  { --x: calc(var(--lw) * .72);  --ry: -18deg; }
  .hp .wk-lead .wk-lp .wk-lpp[data-pos="-2"], .hp .wk-lead .wk-lp .wk-lpp[data-pos="2"] { --o: 0; }
  .hp .wk-lead .wk-lp .wk-lpp .wk-lpp__d { padding: 0 20px 20px; gap: 12px; }
  .hp .wk-lead .wk-lp .wk-lpp .wk-lpp__name { font-size: 1.8rem; }
  .hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats dd { font-size: 1.1rem; }
  .hp .wk-lead .wk-lp .wk-lpp .wk-lpp__stats .wk-lead__muted { display: none; }   /* keeps the rating on one line */
  .hp .wk-lead .wk-lp .wk-lpp .wk-lead__btn { height: 50px; font-size: .88rem; }
  .hp .wk-lead .wk-lp-ctl__btn { width: 48px; height: 48px; }
  .hp .wk-lead .wk-lp-dash { width: 24px; }
  .hp .wk-lead .wk-lead__bar { flex-direction: column; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hp .wk-lead .wk-lp .wk-lpp, .hp .wk-lead .wk-lp .wk-lpp .wk-lpp__d, .hp .wk-lead .wk-lp-dash { transition: none; }
}

/* ==========================================================================
   WORKERS PAGE — WORKER LISTING CARDS (photo-first, 3 columns)
   [2026-10-23] Presentation only. Same data, same data-* hooks, same
   View Profile / Request Worker links; only the card layout changed.
   Scoped under .hp .wk-dir so nothing outside the Worker Directory is touched.
   ========================================================================== */
.hp .wk-dir .wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.hp .wk-dir .wk-card { border: 1px solid #E5E3DE; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.hp .wk-dir .wk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 15, 16, .08); }
.hp .wk-dir .wk-card__media { aspect-ratio: 4 / 4.6; background: #E9E7E2; }
.hp .wk-dir .wk-card__img { object-position: 50% 18%; }
.hp .wk-dir .wk-card:hover .wk-card__img { transform: none; }
.hp .wk-dir .wk-card__badge { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); background: #FFFFFF; color: var(--hp-ink); font-size: .74rem; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 7px; box-shadow: 0 1px 4px rgba(15, 15, 16, .14); white-space: nowrap; }
.hp .wk-dir .wk-card__badge .wk-card__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22A559; }
.hp .wk-dir .wk-card__badge--busy .wk-card__dot { background: #9A9A9D; }
.hp .wk-dir .wk-card__body { padding: 14px 16px 16px; gap: 8px; }
.hp .wk-dir .wk-card__name { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.hp .wk-dir .wk-card__spec { margin: -4px 0 0; font-size: .86rem; color: var(--hp-soft); }
.hp .wk-dir .wk-card__facts { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; align-items: center; margin: 2px 0 4px; border: 0; }
.hp .wk-dir .wk-card__fact { display: flex; flex-direction: column-reverse; justify-content: center; gap: 2px; min-width: 0; padding: 0; border: 0; font-size: .85rem; }
.hp .wk-dir .wk-card__fact dt { color: var(--hp-soft); font-size: .76rem; font-weight: 500; }
.hp .wk-dir .wk-card__fact dd { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.hp .wk-dir .wk-card__fact--rating dd { font-weight: 500; }
.hp .wk-dir .wk-card__ic { flex: none; color: var(--hp-ink); }
.hp .wk-dir .wk-card__ic--peso { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--hp-ink); color: #FFFFFF; font-size: .62rem; font-weight: 700; line-height: 1; }
.hp .wk-dir .wk-card__stars { font-size: .92rem; letter-spacing: 1px; line-height: 1; color: #F5B301; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hp .wk-dir .wk-card__stars { background: linear-gradient(90deg, #F5B301 var(--rt, 0%), #D9D7D2 var(--rt, 0%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.hp .wk-dir .wk-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 2px; }
.hp .wk-dir .wk-card__view, .hp .wk-dir .wk-card__request { height: 40px; padding: 0 8px; border-radius: 9px; font-size: .78rem; letter-spacing: .03em; white-space: nowrap; }
.hp .wk-dir .wk-card__view { background: #FFFFFF; border: 1.5px solid var(--hp-ink); color: var(--hp-ink); }
.hp .wk-dir .wk-card__view:hover { color: #FFFFFF; }
.hp .wk-dir .wk-card__request { background: var(--hp-ac); border: 1.5px solid var(--hp-ac); color: #FFFFFF; }
.hp .wk-dir .wk-card__request:hover { color: #FFFFFF; border-color: var(--hp-ink); }
.hp .wk-dir .wk-pager { margin-top: 28px; }
.hp .wk-dir .wk-pager__summary { font-size: .85rem; }
.hp .wk-dir .wk-pager__list { gap: 8px; }
.hp .wk-dir .wk-pager__btn { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #D9D7D2; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.hp .wk-dir .wk-pager__btn.is-current { background: var(--hp-ink); border-color: var(--hp-ink); color: #FFFFFF; }
@media (max-width: 1080px) { .hp .wk-dir .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .hp .wk-dir .wk-grid { grid-template-columns: 1fr; gap: 18px; }
  .hp .wk-dir .wk-card__actions { grid-template-columns: 1fr 1fr; }
  .hp .wk-dir .wk-card__view, .hp .wk-dir .wk-card__request { height: 42px; }
}
@media (max-width: 380px) {
  .hp .wk-dir .wk-card__stars { font-size: .8rem; letter-spacing: 0; }
  .hp .wk-dir .wk-card__facts { gap: 6px; }
}
.hp .wk-dir .wk-card__facts { align-items: start; }
.hp .wk-dir .wk-card__fact--rating { justify-content: flex-start; }
.hp .wk-dir .wk-card__fact--rating dd { min-height: 15px; }

/* ==========================================================================
   SERVICES PAGE — CLIENT VIEW (services.php, logged-in clients only)
   [2026-10-23] Everything is scoped under .svc-cl / .svc-cl__* (the section only gets
   .svc-cl when $isClient), so the visitor Services page keeps its original rules untouched.
   ========================================================================== */
.hp .svc-cl { background: #FFFFFF; }
.hp .svc-cl .cl-pagehead { padding: 44px 0 26px; }
.svc-cl__bar { display: block; width: 22px; height: 3px; background: #FF393E; margin: 0 0 10px; }
.svc-cl__bar--sm { width: 20px; height: 3px; margin-bottom: 8px; }
.hp .svc-cl .cl-pagehead__title { font-weight: 800; letter-spacing: -0.025em; }
.hp .svc-cl .cl-pagehead__sub { font-size: .92rem; margin-top: 8px; }
.hp .svc-cl .cl-pagehead__meta { font-size: .8rem; margin-top: 10px; }
.hp .svc-cl .cl-btn-primary { height: 44px; padding: 0 22px; border-radius: 10px; color: #FFFFFF; font-size: .78rem; letter-spacing: .03em; align-self: flex-start; }
.hp .svc-cl .cl-btn-primary:hover { color: #FFFFFF; }
.svc-cl__wrap { padding: 0 0 56px; background: #FFFFFF; }

.svc-cl__stage { display: grid; grid-template-columns: minmax(230px, 0.46fr) 1fr; gap: 14px; align-items: start; }
.svc-cl__list { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E8E6E1; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 15, 16, .05); }
.svc-cl__item { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px 0 20px; color: #5B5B5E; text-decoration: none; border-bottom: 1px solid #EFEDE8; transition: background-color .15s ease, color .15s ease; }
.svc-cl__item:last-child { border-bottom: 0; }
.svc-cl__icon { flex: none; color: #5B5B5E; }
.svc-cl__item-name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; }
.svc-cl__chev { flex: none; color: #9A9A9D; }
.svc-cl__item:hover { background: #FAFAF8; color: #0F0F10; }
.svc-cl__item.is-active { background: #FFF1F1; color: #0F0F10; }
.svc-cl__item.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #FF393E; }
.svc-cl__item.is-active .svc-cl__icon { color: #0F0F10; }
.svc-cl__item.is-active .svc-cl__chev { color: #FF393E; }
.svc-cl__item:focus-visible, .svc-cl__cta:focus-visible, .svc-cl__card-btn:focus-visible, .svc-cl__arrow:focus-visible { outline: 2px solid #FF393E; outline-offset: 2px; }

.svc-cl__preview { display: grid; }
.svc-cl__panel { grid-area: 1 / 1; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E8E6E1; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 15, 16, .05); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.svc-cl__panel.is-active { opacity: 1; visibility: visible; }
.svc-cl__media { aspect-ratio: 1.25 / 1; background: #D9D7D2; overflow: hidden; }
.svc-cl__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.svc-cl__caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 18px 20px 20px; flex: 1; }
.svc-cl__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: #0F0F10; }
.svc-cl__desc { margin: 8px 0 0; max-width: 52ch; font-size: .86rem; line-height: 1.55; color: #5B5B5E; }
.svc-cl__count { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: .78rem; font-weight: 500; color: #3A3A3D; }
.svc-cl__count.is-none { color: #7A7A7D; }
.svc-cl__cta { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 8px; background: #FF393E; border: 1.5px solid #FF393E; color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.svc-cl__cta:hover { background: #0F0F10; border-color: #0F0F10; color: #FFFFFF; }

.svc-cl__explore { margin-top: 44px; }
.svc-cl__explore-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.svc-cl__explore-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #0F0F10; }
.svc-cl__explore-sub { margin: 8px 0 0; font-size: .84rem; color: #5B5B5E; }
.svc-cl__arrows { display: flex; gap: 10px; flex: none; }
.svc-cl__arrow { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #D9D7D2; background: #FFFFFF; color: #0F0F10; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, opacity .15s ease; }
.svc-cl__arrow:hover:not(:disabled) { border-color: #0F0F10; }
.svc-cl__arrow:disabled { opacity: .4; cursor: default; }
.svc-cl__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 16px; margin: 0 -2px; }
.svc-cl__track::-webkit-scrollbar { display: none; }
.svc-cl__card { flex: 0 0 calc((100% - 72px) / 7); min-width: 150px; scroll-snap-align: start; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E8E6E1; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 15, 16, .05); }
.svc-cl__card-media { aspect-ratio: 1 / 1.1; background: #D9D7D2; overflow: hidden; }
.svc-cl__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-cl__card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; flex: 1; }
.svc-cl__card-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .01em; text-transform: uppercase; color: #0F0F10; }
.svc-cl__card-count { display: flex; align-items: center; gap: 5px; margin: 0; font-size: .68rem; color: #5B5B5E; }
.svc-cl__card-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 6px; border: 1.5px solid #0F0F10; background: #FFFFFF; color: #0F0F10; font-family: var(--font-display); font-weight: 700; font-size: .64rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.svc-cl__card-btn svg { width: 12px; height: 12px; }
.svc-cl__card-btn:hover, .svc-cl__card.is-active .svc-cl__card-btn { background: #FF393E; border-color: #FF393E; color: #FFFFFF; }
.svc-cl__card.is-active .svc-cl__card-btn:hover { background: #0F0F10; border-color: #0F0F10; }
.svc-cl__card-media.is-empty, .svc-cl__media.is-empty { background: #E9E7E2; }

@media (max-width: 1000px) {
  .svc-cl__stage { grid-template-columns: 1fr; }
  .svc-cl__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-radius: 10px; }
  .svc-cl__list::-webkit-scrollbar { display: none; }
  .svc-cl__item { flex: 0 0 auto; border-bottom: 0; border-right: 1px solid #EFEDE8; padding: 0 16px; min-height: 48px; }
  .svc-cl__item:last-child { border-right: 0; }
  .svc-cl__item .svc-cl__chev { display: none; }
  .svc-cl__item.is-active::before { top: auto; width: auto; height: 3px; right: 0; bottom: 0; }
  .svc-cl__card { flex-basis: 200px; }
}
@media (max-width: 600px) {
  .svc-cl__media { aspect-ratio: 4 / 5; }
  .svc-cl__caption { flex-direction: column; align-items: stretch; }
  .svc-cl__cta { width: 100%; }
  .svc-cl__explore-title { font-size: 1.4rem; }
  .svc-cl__card { flex-basis: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-cl__panel, .svc-cl__item, .svc-cl__arrow, .svc-cl__cta, .svc-cl__card-btn { transition: none; }
}

/* All Leadmen panel (workers.php): when it is the scroll target ("All Leadmen" link), stop its heading
   from landing under the fixed header. Only affects scroll positioning. */
.hp .wk-lead__panel-wrap { scroll-margin-top: calc(var(--cl-nav-h, 72px) + 16px); }

/* ==========================================================================
   CLIENT SETTINGS — HELP & SUPPORT PANEL (user/setting.php, data-section="help")
   Scoped to .stn-help; reuses the Settings tokens, nothing else on the page is touched.
   ========================================================================== */
.stn-help { display: flex; flex-direction: column; gap: 20px; }
.stn-help__heading { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--stn-text); }
.stn-help__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stn-border); }
.stn-help__item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--stn-border); }
.stn-help__q { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--stn-text); }
.stn-help__a { margin: 4px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--stn-text-muted); max-width: 60ch; }
.stn-help__link { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1.5px solid #0F0F10; border-radius: 10px; background: #FFFFFF; color: #0F0F10; font-family: var(--font-body); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.stn-help__link:hover { background: #0F0F10; color: #FFFFFF; }
.stn-help__link:focus-visible, .stn-help .stn-btn-black:focus-visible, .stn-help .stn-btn-text:focus-visible { outline: 2px solid var(--stn-red); outline-offset: 2px; }
.stn-help__contact { padding: 20px; border: 1px solid var(--stn-border); border-radius: 12px; background: #FAFAFA; }
.stn-help__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.stn-help__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--stn-border); font-family: var(--font-body); font-size: 13px; color: var(--stn-text-muted); }
.stn-help__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.stn-help__legal .stn-help__a { margin: 0; }
@media (max-width: 720px) {
  .stn-help__item { flex-direction: column; align-items: stretch; gap: 12px; }
  .stn-help__item .stn-help__link { justify-content: center; }
  .stn-help__contact { padding: 16px; }
}
.stn-help__heading + .stn-help__list { margin-top: -10px; }