/* ==========================================================================
   ETHICARE RESOURCING — PROFESSION HERO: CREDENTIALS RAIL (direction B)
   Load LAST in <head>, after profession-hero.css and the page's own
   <style id="profession-redesign">. Two jobs:
   1. lengthens the feather so the photograph dissolves into the cream
      instead of ending on a hard edge;
   2. adds the deep-teal rail across the base of the hero — three fixed
      slots (registration, pathway, live roles) on all fourteen pages.
   The "right now" slot is filled by jobs/hero-rail.js from jobs-data.js.
   ========================================================================== */
.hero{--hc:247,245,239;padding-bottom:0}
.hero .bg{width:60%}
.hero .bg img{object-position:center 18%}
.hero .bg::after{background:linear-gradient(90deg,rgb(var(--hc)) 0,rgba(var(--hc),.98) 40px,rgba(var(--hc),.8) 100px,rgba(var(--hc),.38) 176px,rgba(var(--hc),0) 262px)}
.hero .copy{max-width:min(46%,560px)}
.hero .wrap{padding-bottom:clamp(30px,3.4vw,44px)}
/* --------------------------------------------------------------------------
   PORTRAIT / SQUARE PHOTOGRAPHS
   A 1:1 or 5:4 frame is narrower than the hero's photo zone, so object-position
   cannot pan it — the whole width shows and the clinician lands under the copy.
   These are anchored to the right edge at their natural width instead, with the
   feather carried on the image's own left edge. Working space left, clinician right.
   -------------------------------------------------------------------------- */
.hero .bg[data-fit=portrait]{background:transparent}
.hero .bg[data-fit=portrait] img{position:absolute;top:0;right:0;width:auto;max-width:100%;height:100%;object-fit:cover;background:transparent;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 92px,#000 232px);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 92px,#000 232px)}
.hero-rail{position:relative;z-index:3;background:#02615D;color:#fff}
.hero-rail .in{max-width:1180px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr)}
.hero-rail .cell{padding:19px 0 20px;display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.hero-rail .cell+.cell{padding-left:clamp(18px,3vw,38px)}
.hero-rail .cell+.cell::before{content:"";position:absolute;left:0;top:19px;bottom:20px;width:1px;background:rgba(255,255,255,.22)}
.hero-rail .k{font-family:'Work Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#C6E084}
.hero-rail .v{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;color:#fff;text-wrap:pretty}
.hero-rail a.v{display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:color .15s ease}
.hero-rail a.v:hover{color:#C6E084}
.hero-rail a.v .ar{font-size:17px;line-height:1;transition:transform .15s ease}
.hero-rail a.v:hover .ar{transform:translateX(3px)}
@media (max-width:1040px){.hero .bg{width:100%}
.hero .bg[data-fit=portrait] img{position:static;width:100%;max-width:none;-webkit-mask-image:none;mask-image:none}
.hero .bg::after{background:linear-gradient(180deg,rgba(var(--hc),0) 58%,rgba(var(--hc),.55) 84%,rgb(var(--hc)) 100%)}
.hero .copy{max-width:none}}
@media (max-width:700px){.hero-rail .in{grid-template-columns:1fr}
.hero-rail .cell{padding:15px 0}
.hero-rail .cell+.cell{padding-left:0}
.hero-rail .cell+.cell::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
.hero-rail .v{font-size:15px}}