/* =============================================================================
   Youth Careers Canada — HOMEPAGE VARIANT B · "Brand-led warmth".
   Owner: variant-b agent. Loaded only for GET /?v=b (routes/public.js), INSTEAD of
   ycc-home.css, so nothing here can affect the live homepage.

   WHAT THIS DIRECTION DOES
     The feel comes from the brand and from type, on a light ground. There is no dark
     hero band anywhere. Depth is made by a deliberate cream / ivory / white rhythm:

       hero            cream   (--ycc-ivory-warm)
       recently posted ivory   (--ycc-ivory)  with WHITE cards
       statement       cream
       browse          white   (--kds-surface)
       two sides       ivory   with a white panel and a solid ORANGE panel

     The Youth Careers mark is used once, large, standing at the top of a flat navy
     capsule that rises out of a solid yellow block — the logo's own capsule geometry
     rebuilt as page furniture. Three solid shapes. No gradient anywhere: --ycc-rise
     belongs to the mark alone (CONTRACT.md §2).

     Orange and yellow are decisive FLAT accents only: the Search button, one yellow
     highlight behind one phrase, orange ticks above headings, orange arrows.

   LIGHT THEME ONLY. Deliberately no (prefers-color-scheme: dark) block and no
   [data-kds-theme="dark"] rules — the site ships light-only (brand file, §NO DARK THEME).

   Tokens only, no raw hex. Radii 12px card / 8px field. Motion: 150ms hover,
   160ms press at scale .985, ease-out, honoured under prefers-reduced-motion.
   Nothing on this page animates in: no [data-ycc-reveal], no opacity:0 start state.
   ============================================================================= */

.page-home {
  /* NOTE: these custom properties were scoped to .page-home--b while this was a
     review variant. The live homepage body class is plain .page-home, so every
     --yb-* reference below resolved to nothing: cards lost their background,
     border, radius and lift. Scope must match the body class the route sets.
     Shape — fixed rather than inherited, because the marquee preset's radii are 4px
     and this page is specified at 12/8. */
  --yb-r-card: 14px;
  --yb-r-field: 10px;
  /* Images and large colour blocks carry a larger radius than a card so they read
     as distinct objects rather than sharp rectangles butted against the ground. */
  --yb-r-media: 20px;

  /* Motion budget. */
  --yb-hover: 150ms;
  --yb-press: 160ms;
  --yb-out: cubic-bezier(0.2, 0, 0.2, 1);

  /* Grounds. */
  --yb-cream: var(--ycc-ivory-warm);
  --yb-ivory: var(--ycc-ivory);
  --yb-paper: var(--kds-surface);

  /* The marquee preset sets --kds-shadow-1/2 to none, so the card lift defines its own.
     Warm, navy-tinted, low: a lift, not a glow. */
  --yb-lift: 0 14px 34px color-mix(in srgb, var(--ycc-navy) 13%, transparent);

  /* Hairline that stays warm rather than drifting grey. */
  --yb-line: color-mix(in srgb, var(--ycc-navy) 14%, transparent);
  --yb-line-soft: color-mix(in srgb, var(--ycc-navy) 9%, transparent);
  --yb-wash: color-mix(in srgb, var(--ycc-navy) 4%, transparent);

  /* Ink on the orange panel. Navy on #FF9317 is 6.7:1 — never white (CONTRACT.md). */
  --yb-on-orange: var(--ycc-navy);
  /* 76% navy measured 4.38:1 on #FF9317 — under the 4.5 gate for the panel's body copy
     and fine print. 88% lands at 5.4:1. */
  --yb-on-orange-soft: color-mix(in srgb, var(--ycc-navy) 88%, var(--ycc-orange));
  --yb-on-orange-line: color-mix(in srgb, var(--ycc-navy) 24%, transparent);

  background: var(--yb-ivory);
}

.page-home :is(h1, h2, h3) { font-family: var(--kds-font-display); }

/* =============================================================================
   1 · HERO — cream ground, big Archivo, the mark as structure on the right.
   ========================================================================== */
.yhb-hero {
  background: var(--yb-cream);
  border-bottom: 1px solid var(--yb-line-soft);
  padding-block: clamp(2.25rem, 4.5vw, 5rem) clamp(2.5rem, 5vw, 5.5rem);
}

.yhb-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 1080px) {
  /* The saying column keeps the larger share: the search bar inside it must stay a
     genuinely wide control at 1920, not a stub beside a picture. */
  .yhb-hero__grid { grid-template-columns: minmax(0, 1.28fr) minmax(17rem, 0.72fr); }
}

.yhb-hero__h {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.35rem, 1.1rem + 3.9vw, 5.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ycc-navy);
  text-wrap: balance;
}
.yhb-hero__sub {
  margin: clamp(1.1rem, 2vw, 1.75rem) 0 0;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.3125rem);
  line-height: 1.5;
  color: var(--kds-fg-muted);
  text-wrap: pretty;
}

/* --- the search: the most important control on the site ------------------- */
.yhb-search { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.yhb-search__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 62rem;
  background: var(--yb-paper);
  border: 2px solid var(--ycc-navy);
  border-radius: var(--yb-r-field);
  transition: box-shadow var(--yb-hover) var(--yb-out);
}
.yhb-search__bar:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ycc-yellow) 55%, transparent); }

@media (min-width: 720px) {
  /* "Newfoundland and Labrador" must fit the where-field without truncating. */
  .yhb-search__bar { grid-template-columns: minmax(0, 1.4fr) minmax(16.5rem, 0.85fr) auto; }
}

.yhb-search__cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kds-sp-3);
  min-width: 0;
  padding-inline: var(--kds-sp-4);
}
.yhb-search__cell + .yhb-search__cell { border-top: 1px solid var(--yb-line); }
@media (min-width: 720px) {
  .yhb-search__cell + .yhb-search__cell { border-top: 0; border-left: 1px solid var(--yb-line); }
}

.yhb-search__icon { width: 20px; height: 20px; flex: none; color: var(--ycc-navy); }

.yhb-search__input {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 0;
  font: 500 var(--kds-text-lg) / 1.3 var(--kds-font-sans);
  color: var(--kds-fg);
  background: transparent;
  border: 0;
  border-radius: var(--kds-radius-xs);
}
.yhb-search__input::placeholder { color: var(--kds-fg-muted); opacity: 1; }
.yhb-search__input:focus { outline-offset: -3px; }

.yhb-search__select {
  appearance: none;
  padding-inline-end: var(--kds-sp-6);
  cursor: pointer;
  text-overflow: ellipsis;
}
/* Caret from two borders — follows the text colour, imports nothing. */
.yhb-search__caret {
  position: absolute;
  right: var(--kds-sp-4);
  width: 8px; height: 8px;
  border-right: 2px solid var(--kds-fg-muted);
  border-bottom: 2px solid var(--kds-fg-muted);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.yhb-search__go {
  margin: 6px;
  min-height: 54px;
  padding-inline: clamp(1.75rem, 3vw, 3rem);
  font: 800 var(--kds-text-lg) / 1 var(--kds-font-display);
  letter-spacing: -0.01em;
  color: var(--kds-brand-fg);            /* navy on orange — 6.7:1, never white */
  background: var(--ycc-orange);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--yb-hover) var(--yb-out), transform var(--yb-press) var(--yb-out);
}
.yhb-search__go:hover { background: color-mix(in srgb, var(--ycc-orange) 86%, var(--ycc-navy)); }
.yhb-search__go:active { transform: scale(0.985); }
@media (max-width: 719px) {
  .yhb-search__go { margin-top: 0; }
}

/* --- quick searches ------------------------------------------------------- */
.yhb-quick {
  margin: clamp(1.25rem, 2.2vw, 1.75rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kds-sp-2) var(--kds-sp-3);
}
.yhb-quick__l {
  font-size: var(--kds-text-sm);
  font-weight: 700;
  color: var(--kds-fg-muted);
  margin-inline-end: var(--kds-sp-1);
}
@media (max-width: 559px) { .yhb-quick__l { flex: 1 0 100%; } }

.yhb-quick__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--kds-sp-4);
  font-size: var(--kds-text-sm);
  font-weight: 600;
  color: var(--ycc-navy);
  text-decoration: none;
  background: var(--yb-paper);
  border: 1px solid var(--yb-line);
  border-radius: var(--kds-radius-full);
  transition: background var(--yb-hover) var(--yb-out), border-color var(--yb-hover) var(--yb-out);
}
.yhb-quick__chip:hover { background: color-mix(in srgb, var(--ycc-yellow) 26%, var(--yb-paper)); border-color: var(--ycc-navy); }

/* --- the mark, used once, large, on a flat navy plate ---------------------
   Three solid shapes and nothing else: a yellow block, a navy plate, and the mark
   breaking out over the plate's top-left corner so the figure reads as rising off it.
   An earlier take drew the rise as a long rotated navy capsule with the mark at its
   tip — at 1920 that composition read unmistakably as a sword. Blocks, not blades. */
.yhb-rise {
  position: relative;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  justify-self: end;
}
/* Solid yellow block, offset behind — where the climb starts. */
.yhb-rise__base {
  position: absolute;
  left: 0; bottom: 0;
  width: 38%; height: 38%;
  background: var(--ycc-yellow);
  border-radius: var(--yb-r-media);
}
/* Flat navy plate. Not a band: a block, the way the brand uses colour. */
.yhb-rise__bar {
  position: absolute;
  right: 0; top: 0;
  width: 80%; height: 80%;
  background: var(--ycc-navy);   /* stays as the colour block if the photo fails */
  border-radius: var(--yb-r-media);
  overflow: hidden;
}
.yhb-rise__bar picture { display: block; width: 100%; height: 100%; }
.yhb-rise__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* A navy veil at low strength pulls the photograph into the brand palette so it reads
   as part of the page rather than a stock image dropped on top of it. */
.yhb-rise__bar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ycc-navy);
  opacity: .26;
  pointer-events: none;
}
/* With a photograph in the plate the mark can no longer sit across the middle —
   it covered the faces. It now rises out of the yellow block at the lower left,
   which is closer to what the motif means anyway, and leaves the photo clear. */
.yhb-rise__mark {
  position: absolute;
  left: 1%; bottom: 6%;
  width: 34%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / .18));
}

@media (max-width: 1079px) {
  /* On a narrow screen the composition opens the page above the headline. It used to
     be capped at 12rem, which was right when this was a small brand mark; with a
     photograph in it that read as a stray thumbnail in the corner. It now runs the
     full column width as a proper opening image, and goes landscape so it does not
     push the headline and the search below the fold. */
  .yhb-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.25rem); }
  .yhb-hero__say { order: 2; }
  .yhb-rise {
    order: 1;
    max-width: none;
    margin-inline: 0;
    justify-self: stretch;
    aspect-ratio: 16 / 10;
  }
  /* The plate takes the full width and the yellow block tucks under its lower-left
     corner, so the offset still reads without stealing width from the photo. */
  .yhb-rise__bar { width: 100%; height: 88%; }
  .yhb-rise__base { width: 26%; height: 26%; }
}

@media (max-width: 559px) {
  .yhb-rise { aspect-ratio: 3 / 2; }
  .yhb-rise__base { width: 30%; height: 22%; }
}

/* =============================================================================
   2 · RECENTLY POSTED — white cards on the ivory ground.
   ========================================================================== */
.yhb-posted {
  background: var(--yb-ivory);
  padding-block: clamp(2.75rem, 5vw, 4.75rem);
}

.yhb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kds-sp-3) var(--kds-sp-6);
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}
.yhb-head__h,
.yhb-browse__h {
  margin: 0;
  font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.875rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ycc-navy);
}

.yhb-head__link,
.yhb-more {
  display: inline-flex;
  align-items: center;
  gap: var(--kds-sp-2);
  min-height: 44px;
  font-size: var(--kds-text-md);
  font-weight: 700;
  color: var(--ycc-navy);
  text-decoration: none;
  border-bottom: 3px solid var(--ycc-orange);
  padding-bottom: 1px;
}
.yhb-head__link svg,
.yhb-more svg { width: 16px; height: 16px; color: var(--ycc-orange); transition: transform var(--yb-hover) var(--yb-out); }
.yhb-head__link:hover svg,
.yhb-more:hover svg { transform: translateX(4px); }

.yhb-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  /* 4 columns at 1760, 3 at 1440, 2 around 1000, 1 on a phone — no media queries and
     no fixed three-up grid. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}
.yhb-cards__cell { display: flex; }

.yhb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.25rem, 1.6vw, 1.75rem);
  background: var(--yb-paper);
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  transition: transform var(--yb-hover) var(--yb-out),
              box-shadow var(--yb-hover) var(--yb-out),
              border-color var(--yb-hover) var(--yb-out);
}
.yhb-card:hover { transform: translateY(-3px); box-shadow: var(--yb-lift); border-color: var(--ycc-navy); }
.yhb-card:active { transform: scale(0.985); transition-duration: var(--yb-press); }

/* A flat orange tick — the one decorative mark on a card. */
.yhb-card__tick {
  display: block;
  width: 30px; height: 4px;
  margin-bottom: var(--kds-sp-4);
  background: var(--ycc-orange);
  border-radius: 2px;
}

.yhb-card__co {
  margin: 0;
  font-size: var(--kds-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kds-fg-muted);
}
.yhb-card__title {
  margin: var(--kds-sp-2) 0 0;
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.yhb-card__title a { color: var(--ycc-navy); text-decoration: none; }
.yhb-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--yb-r-card); }
.yhb-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.yhb-card__place {
  margin: var(--kds-sp-2) 0 0;
  font-size: var(--kds-text-md);
  line-height: 1.4;
  color: var(--kds-fg-muted);
}
.yhb-card__more { color: var(--kds-fg-faint); }

.yhb-card__meta {
  list-style: none;
  margin: var(--kds-sp-3) 0 var(--kds-sp-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--kds-sp-1) var(--kds-sp-3);
  font-size: var(--kds-text-sm);
  color: var(--kds-fg-muted);
}
.yhb-card__meta li:not(:last-child)::after {
  content: "·";
  margin-inline-start: var(--kds-sp-3);
  color: var(--kds-fg-faint);
}

.yhb-card__foot { margin-top: auto; padding-top: var(--kds-sp-4); border-top: 1px solid var(--yb-line-soft); }

.yhb-card__pay {
  margin: 0;
  font-family: var(--kds-font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ycc-navy);
  font-variant-numeric: tabular-nums;
}

.yhb-card__tags { list-style: none; margin: var(--kds-sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kds-sp-2); }
.yhb-tag {
  padding: 0.25rem 0.6rem;
  font-size: var(--kds-text-xs);
  font-weight: 600;
  color: var(--kds-fg-muted);
  background: var(--yb-ivory);
  border: 1px solid var(--yb-line);
  border-radius: var(--kds-radius-full);
  white-space: nowrap;
}
.yhb-tag--key {
  color: var(--ycc-navy);
  background: color-mix(in srgb, var(--ycc-yellow) 38%, var(--yb-paper));
  border-color: color-mix(in srgb, var(--ycc-yellow) 70%, transparent);
}
.yhb-tag--closed { color: var(--kds-danger); background: transparent; border-color: color-mix(in srgb, var(--kds-danger) 40%, transparent); }

.yhb-card__posted {
  margin: var(--kds-sp-3) 0 0;
  font-size: var(--kds-text-xs);
  color: var(--kds-fg-faint);
}

/* The shared empty state styles its heading as an h2; here it is an h3. */
.page-home .ycc-empty h3 { margin: 0 0 var(--kds-sp-2); font-size: var(--kds-text-xl); font-weight: 700; }

/* =============================================================================
   3 · THE STATEMENT — cream band, type is the texture, one yellow highlight.
   ========================================================================== */
.yhb-say {
  background: var(--yb-cream);
  border-block: 1px solid var(--yb-line-soft);
  padding-block: clamp(3rem, 6vw, 6rem);
}
/* At 1920 a single left-aligned column of statement leaves half the band empty, which
   reads as unfinished rather than generous. From 1180 the supporting paragraph moves to
   its own column and sits on the statement's last baseline. */
@media (min-width: 1180px) {
  .yhb-say__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: end;
  }
  .yhb-steps { grid-column: 1; grid-row: 1; }
  .yhb-say__h { grid-column: 1; grid-row: 2; max-width: 21ch; }
  .yhb-say__p { grid-column: 2; grid-row: 2; margin-top: 0; max-width: 44ch; }
}

/* The rise, small: six solid blocks stepping up. Flat shapes, never a gradient. */
.yhb-steps {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 58px;
  margin-bottom: clamp(1.25rem, 2.2vw, 2rem);
}
.yhb-steps i { display: block; width: 14px; border-radius: 2px; background: var(--ycc-navy); }
.yhb-steps i:nth-child(1) { height: 10px; }
.yhb-steps i:nth-child(2) { height: 18px; }
.yhb-steps i:nth-child(3) { height: 27px; background: var(--ycc-orange); }
.yhb-steps i:nth-child(4) { height: 37px; background: var(--ycc-orange); }
.yhb-steps i:nth-child(5) { height: 47px; background: var(--ycc-yellow); }
.yhb-steps i:nth-child(6) { height: 58px; background: var(--ycc-yellow); }

.yhb-say__h {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.875rem, 0.95rem + 2.85vw, 4.125rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ycc-navy);
  text-wrap: balance;
}
/* The one yellow highlight on the page: a flat block behind a single phrase. */
.yhb-mark {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--ycc-yellow);
  padding: 0 0.12em 0.04em;
  border-radius: 3px;
}

.yhb-say__p {
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 0;
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.375rem);
  line-height: 1.55;
  color: var(--kds-fg-muted);
  text-wrap: pretty;
}

/* =============================================================================
   4 · BROWSE — white ground, unequal columns, orange rules and arrows.
   ========================================================================== */
.yhb-browse {
  background: var(--yb-paper);
  padding-block: clamp(2.75rem, 5.5vw, 5rem);
}
.yhb-browse__h { margin: 0 0 clamp(1.75rem, 3vw, 2.75rem); }

.yhb-browse__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  /* Deliberately unequal: the stage column carries a line of explanation each, the
     location column is a short list of names. */
  .yhb-browse__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.9fr); }
}

.yhb-col__h {
  position: relative;
  margin: 0 0 var(--kds-sp-5);
  padding-top: var(--kds-sp-4);
  font-size: var(--kds-text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ycc-navy);
}
/* Flat orange rule above each column head. */
.yhb-col__h::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 4px;
  background: var(--ycc-orange);
  border-radius: 2px;
}

.yhb-col__sub {
  margin: var(--kds-sp-5) 0 var(--kds-sp-2);
  font-size: var(--kds-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kds-fg-muted);
}
.yhb-col__sub:first-of-type { margin-top: 0; }

.yhb-stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--yb-line); }
.yhb-stages li { border-bottom: 1px solid var(--yb-line); }
.yhb-stage {
  display: block;
  padding: var(--kds-sp-4) var(--kds-sp-3);
  color: inherit;
  text-decoration: none;
  border-radius: var(--yb-r-field);
  transition: background var(--yb-hover) var(--yb-out);
}
.yhb-stage:hover { background: color-mix(in srgb, var(--ycc-yellow) 18%, transparent); }
.yhb-stage__name {
  display: flex;
  align-items: center;
  gap: var(--kds-sp-3);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ycc-navy);
}
.yhb-stage__name svg { width: 16px; height: 16px; color: var(--ycc-orange); transition: transform var(--yb-hover) var(--yb-out); }
.yhb-stage:hover .yhb-stage__name svg { transform: translateX(4px); }
.yhb-stage__desc {
  display: block;
  margin-top: 3px;
  max-width: 48ch;
  font-size: var(--kds-text-md);
  line-height: 1.45;
  color: var(--kds-fg-muted);
}

.yhb-links { list-style: none; margin: 0; padding: 0; }
/* One column on purpose: career-area names run long ("Transportation, Trucking &
   Logistics") and a second column only breaks them over three lines. */
.yhb-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--kds-text-md);
  color: var(--ycc-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--yb-line-soft);
}
.yhb-links a:hover { color: var(--ycc-navy); box-shadow: inset 0 -3px 0 var(--ycc-orange); }
.yhb-links li:last-child a { border-bottom: 0; }

.yhb-more { margin-top: var(--kds-sp-5); }

/* =============================================================================
   5 · TWO SIDES — white panel for seekers, a solid orange panel for employers.
   The orange block is the page's one big colour field: flat, navy ink, no wash.
   ========================================================================== */
.yhb-sides {
  background: var(--yb-ivory);
  border-top: 1px solid var(--yb-line-soft);
  /* Small bottom padding on purpose: .ycc-footer already carries margin-top up to 6rem,
     and stacking a second 5rem under the last panel left a slab of dead ivory. */
  padding-block: clamp(2.75rem, 5.5vw, 5rem) clamp(0.5rem, 1.5vw, 1.25rem);
}
.yhb-sides__grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); align-items: start; }
@media (min-width: 960px) {
  .yhb-sides__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.yhb-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--yb-r-card);
}
.yhb-panel--seeker { background: var(--yb-paper); border: 1px solid var(--yb-line); }
.yhb-panel--hire { background: var(--ycc-orange); color: var(--yb-on-orange); }

.yhb-panel__h {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ycc-navy);
}
.yhb-panel__p {
  margin: var(--kds-sp-4) 0 0;
  max-width: 48ch;
  font-size: var(--kds-text-lg);
  line-height: 1.5;
}
.yhb-panel--seeker .yhb-panel__p { color: var(--kds-fg-muted); }
.yhb-panel--hire .yhb-panel__p { color: var(--yb-on-orange-soft); }

.yhb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--kds-sp-5);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-md);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--yb-r-field);
  white-space: nowrap;
  transition: background var(--yb-hover) var(--yb-out), transform var(--yb-press) var(--yb-out);
}
.yhb-btn:active { transform: scale(0.985); }
/* Three plain lines of what a free profile actually does. Not a card grid, not an icon
   row: a hairline list, each item marked by a small solid orange square. It also gives
   the white panel enough body to stand beside the orange one at 1920. */
.yhb-points {
  list-style: none;
  margin: clamp(1.5rem, 2.6vw, 2rem) 0 0;
  padding: 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--yb-line);
}
.yhb-points li {
  position: relative;
  padding: var(--kds-sp-4) 0 var(--kds-sp-4) var(--kds-sp-6);
  border-bottom: 1px solid var(--yb-line);
  font-size: var(--kds-text-md);
  line-height: 1.45;
  color: var(--kds-fg);
}
.yhb-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35em;
  width: 9px; height: 9px;
  background: var(--ycc-orange);
  border-radius: 2px;
}

/* The seeker panel keeps its natural height (the grid aligns to start): forcing it to
   match the taller orange panel only opened a slab of empty white above the button. */
.yhb-btn--line {
  align-self: flex-start;
  margin-top: 0;
  color: var(--ycc-navy);
  background: transparent;
  border: 2px solid var(--ycc-navy);
}
.yhb-btn--line:hover { background: color-mix(in srgb, var(--ycc-yellow) 30%, transparent); }
.yhb-btn--solid {
  color: var(--ycc-ivory);
  background: var(--ycc-navy);
}
.yhb-btn--solid:hover { background: var(--ycc-navy-deep); }

.yhb-price {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--yb-on-orange-line);
}
.yhb-price__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kds-sp-1) var(--kds-sp-5);
  padding: var(--kds-sp-5) 0;
  border-bottom: 1px solid var(--yb-on-orange-line);
}
.yhb-price__who { grid-column: 1; grid-row: 1; font-size: var(--kds-text-lg); font-weight: 700; }
.yhb-price__amt {
  grid-column: 1; grid-row: 2;
  font-family: var(--kds-font-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.yhb-price__per { grid-column: 1; grid-row: 3; font-size: var(--kds-text-sm); color: var(--yb-on-orange-soft); }
.yhb-price__cta,
.yhb-price .yhb-btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

@media (max-width: 479px) {
  .yhb-price__row { grid-template-columns: minmax(0, 1fr); }
  .yhb-price .yhb-btn { grid-column: 1; grid-row: auto; margin-top: var(--kds-sp-4); justify-self: start; }
}

.yhb-panel__fine { margin: var(--kds-sp-5) 0 0; font-size: var(--kds-text-sm); color: var(--yb-on-orange-soft); }

/* =============================================================================
   Motion opt-out. Nothing here moves on its own; these are the hover and press
   responses only, and reduced motion drops them entirely.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-home *,
  .page-home *::before,
  .page-home *::after { transition: none !important; }
  .page-home .yhb-card:hover,
  .page-home :is(a, button):active { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   PHOTOGRAPHY
   Three images on the page and no more. Each is decorative: the page says
   everything it needs to in text, so nothing here carries meaning a screen
   reader would miss. Every one is sized in the markup so it cannot shift the
   layout while it loads.
   ------------------------------------------------------------------------ */

/* A full-bleed breath between two dense sections. Short on purpose — it is a
   change of pace, not a hero. */
/* Inset to the page measure rather than full-bleed: a rounded object sitting in the
   column, which separates it from the sections above and below and matches the card
   language. Full-bleed plus a radius would have rounded against the viewport edge. */
.yhb-breakwrap { margin-block: clamp(1.5rem, 4vw, 3rem); }
.yhb-break {
  position: relative;
  width: 100%;
  border-radius: var(--yb-r-media);
  background: var(--kds-surface-3);
  overflow: hidden;
}
.yhb-break picture { display: block; }
.yhb-break img {
  display: block;
  width: 100%;
  height: clamp(200px, 26vw, 380px);
  object-fit: cover;
  object-position: center 42%;
}
/* A hairline all round, so the image has an edge against the ivory ground. */
.yhb-break::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--kds-border);
  border-radius: inherit;
  pointer-events: none;
}

/* The seeker panel gets a photograph across its top, bleeding to the panel edge
   and sharing the panel's corner radius. */
.yhb-panel--seeker { overflow: hidden; }
.yhb-panel__photo {
  /* Must be the exact inverse of .yhb-panel's own padding, or the photo will not
     reach the panel edge. Keep these two in step. */
  --yhb-panel-pad: clamp(1.5rem, 3vw, 2.75rem);
  margin: calc(var(--yhb-panel-pad) * -1) calc(var(--yhb-panel-pad) * -1) var(--kds-sp-5);
}
.yhb-panel__photo picture { display: block; }
.yhb-panel__photo img {
  display: block;
  width: 100%;
  height: clamp(140px, 18vw, 200px);
  object-fit: cover;
  object-position: center 55%;
}

@media (max-width: 559px) {
  .yhb-break img {
    height: 180px;
    /* The 3:1 frame crops much tighter on a phone. Bias toward the right of the
       image, where the person actually is, instead of the empty left third. */
    object-position: 70% 45%;
  }
  .yhb-panel__photo img { height: 150px; }
}

@media print {
  .yhb-break, .yhb-panel__photo { display: none; }
}

/* ---------------------------------------------------------------------------
   MOBILE DENSITY
   On a phone this page was asking for far too much scrolling: full-height job
   cards, popular searches wrapping to three rows of 44px chips, and two tall
   panels at the end. Everything below tightens the vertical rhythm without
   dropping information or taking any tap target under 44px.
   ------------------------------------------------------------------------ */
@media (max-width: 719px) {

  /* Popular searches: one horizontally scrolling row instead of three wrapped rows
     of 44px chips. Saves about 120px of height and is the pattern every job board
     uses on a phone. The label stays put above the track so it cannot scroll away. */
  .yhb-quick {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--kds-sp-2);
    margin-top: var(--kds-sp-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed into the gutters so the row visibly runs off the edge — that is the
       only cue a person gets that there is more to scroll to. */
    margin-inline: calc(var(--ycc-gutter) * -1);
    padding-inline: var(--ycc-gutter);
    padding-block: var(--kds-sp-1);
  }
  .yhb-quick::-webkit-scrollbar { display: none; }
  .yhb-quick__l { flex: none; margin: 0 var(--kds-sp-1) 0 0; }
  .yhb-quick__chip { flex: none; scroll-snap-align: start; }

  /* Job cards: tighter padding and rhythm. The card keeps every field, it just
     stops wasting a third of its height on air. */
  .yhb-cards { gap: var(--kds-sp-3); }
  .yhb-card { padding: var(--kds-sp-4); }

  /* The two closing panels were each nearly a full screen tall. */
  .yhb-panel { padding: var(--kds-sp-5); }
  .yhb-points { gap: var(--kds-sp-3); }
  .yhb-panel__photo img { height: 132px; }
}

/* Slightly stronger card edge on small screens: white on ivory is a very low
   contrast pair, and at arm's length the cards were bleeding into the ground. */
@media (max-width: 719px) {
  .yhb-card { border-color: color-mix(in srgb, var(--ycc-navy) 16%, transparent); }
}

/* ---------------------------------------------------------------------------
   MOBILE: how much of each list is worth showing
   Measured on a 390px screen: the eight job cards ran to 3034px, a third of the
   whole page, and the browse lists added most of the rest. A phone gets a real
   preview and a clear way to the full list instead of the entire set. Nothing is
   removed from the markup, so search engines and desktop still see everything.
   ------------------------------------------------------------------------ */
@media (max-width: 719px) {
  /* Four postings is a preview; "Browse all jobs" sits directly above them. */
  .yhb-cards__cell:nth-child(n + 5) { display: none; }

  /* Career areas and locations: show the busiest, link to the rest. Every column
     already ends with its own "all ..." link, so nothing becomes unreachable. */
  .yhb-col .yhb-links li:nth-child(n + 7) { display: none; }
}