/* ==========================================================================
   ETHICARE RESOURCING — PROFESSION HERO (one standard for every jobs page)
   Cream split: copy on the left, clinical photograph on the right fading
   horizontally into the cream (type never sits on the photo), teal fact rail
   underneath. Same geometry as the family hubs (family-hub.css .hsplit), made
   self-contained so it can load LAST on pages that still carry older
   hero.css / profession-hero.css / hero-rail.css and inline .hero rules.
   Country: add .au to header for the Australian eyebrow colours.
   ========================================================================== */
header.phero{position:relative;overflow:hidden;background:#F7F4EE;color:#333;min-height:0;display:block;padding:0}
header.phero .art{position:absolute;top:0;right:0;bottom:0;width:54%;z-index:0;margin:0}
header.phero .art img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,center 30%);border:0;border-radius:0;box-shadow:none}
header.phero .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F7F4EE 0,rgba(247,244,238,.98) 40px,rgba(247,244,238,.82) 120px,rgba(247,244,238,.36) 210px,rgba(247,244,238,0) 300px)}
header.phero>.in{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:clamp(44px,5vw,64px) 22px clamp(40px,4.4vw,56px);display:block;min-height:clamp(380px,38vw,500px);box-sizing:border-box}
header.phero .copy{max-width:min(46%,580px);position:relative;z-index:2}
header.phero .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:'Work Sans',sans-serif;font-size:12.5px;font-weight:500;margin:0 0 20px;color:#555}
header.phero .crumb a{color:#555;text-decoration:none}
header.phero .crumb a:hover{color:#02615D}
header.phero .crumb .here{color:#02615D;font-weight:600}
header.phero .crumb .sep{opacity:.55;color:#555}
header.phero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Work Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#2F5E49;margin:0 0 16px}
header.phero .eyebrow::before{content:"";width:28px;height:3px;border-radius:3px;background:#A6C84A!important;display:inline-block;flex:none}
header.phero.au .eyebrow{color:#B32C62}
header.phero.au .eyebrow::before{background:#B32C62!important}
header.phero h1{font-family:'Work Sans',sans-serif;font-weight:600;font-size:clamp(34px,4.1vw,52px);line-height:1.07;letter-spacing:-.02em;color:#02615D;margin:0 0 18px;text-shadow:none;max-width:none}
header.phero .sub{font-family:'Manrope',sans-serif;font-style:normal;font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:#333;max-width:42ch;margin:0;opacity:1}
header.phero .btn-row{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
header.phero .btn{white-space:nowrap}
header.phero .btn-primary{background:#02615D;color:#fff;border:2px solid #02615D}
header.phero .btn-primary:hover{background:#014E4B;border-color:#014E4B}
header.phero .btn-ghost{background:transparent;border:2px solid #02615D;color:#02615D}
header.phero .btn-ghost:hover{background:rgba(2,97,93,.08)}
/* fact rail */
/* One step lighter than the closing section and the footer (#01312F). Three
   identical dark bands on one page flattens it again; one step of difference
   keeps the weight at the bottom where it belongs. */
header.phero .hrail{position:relative;z-index:3;background:#01413E;color:#fff}
header.phero .hrail .in{max-width:1200px;margin:0 auto;padding:18px 22px 20px;display:grid;grid-template-columns:repeat(3,1fr);min-height:0}
header.phero .hrail .c{display:flex;flex-direction:column;gap:5px;min-width:0}
header.phero .hrail .c+.c{padding-left:clamp(18px,3vw,38px);border-left:1px solid rgba(255,255,255,.24)}
header.phero .hrail .k{font-family:'Work Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#C6E084}
header.phero .hrail .v{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;color:#fff}
header.phero .hrail a.v{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
header.phero .hrail a.v:hover{color:#C6E084}
header.phero .hrail a.v .ar{transition:transform .15s ease}
header.phero .hrail a.v:hover .ar{transform:translateX(3px)}
/* no photo yet: copy takes the width */
header.phero.nophoto .copy{max-width:min(72ch,100%)}
header.phero.nophoto>.in{min-height:0}
@media (max-width:1000px){
  header.phero .art{position:relative;width:100%;height:clamp(220px,46vw,340px)}
  header.phero .art::after{background:linear-gradient(0deg,#F7F4EE 0,rgba(247,244,238,.7) 36px,rgba(247,244,238,0) 62%)}
  header.phero>.in{min-height:0;padding-top:8px}
  header.phero .copy{max-width:100%}
  header.phero .hrail .in{grid-template-columns:1fr}
  header.phero .hrail .c+.c{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.24);padding-top:14px;margin-top:14px}
}

/* ---------- FRAMED PHOTO (Sep 2026): the photograph sits whole in its own rounded
   frame on white, aligned to the content column. No fade over the image. ---------- */
header.phero{background:#FFFFFF}
/* The frame stretched from the top of the hero down to the rail, so its height
   came from however long that page’s copy happened to be — 382px on medical
   imaging, 462 on GP, 598 on radiographer, 690 on sonographer. Seventeen
   pages, seventeen photo shapes. Anchored at the top with the same 29:32 the
   family hubs use, so every profession hero is now the identical frame
   (Sophie, 28 Sep 2026). */
header.phero .art{top:clamp(28px,3vw,40px)!important;bottom:auto!important;right:max(22px,calc((100vw - 1200px)/2 + 22px))!important;width:min(47%,580px)!important;aspect-ratio:29/32;height:auto!important;border-radius:20px!important;overflow:hidden!important;box-shadow:0 30px 60px -38px rgba(1,49,47,.45)!important}
header.phero .art img{border-radius:20px}
header.phero .art::after{display:none!important;background:none!important}
header.phero>.in{min-height:clamp(420px,calc(47vw*32/29 + 88px),728px);display:flex;align-items:center}
header.phero.nophoto>.in{min-height:0;display:block}
@media (max-width:1000px){
  header.phero .art{position:relative!important;top:auto!important;bottom:auto!important;right:auto!important;width:auto!important;aspect-ratio:auto!important;margin:18px 22px 0;height:clamp(220px,52vw,360px)!important;border-radius:18px}
  header.phero>.in{min-height:0;display:block;padding-top:24px}
}
/* the frame stops above the teal rail: the rail is inside the header, so the photo's
   bottom inset is measured from the rail's top. JS-free: --rail-h is set per height class. */
header.phero:has(.hrail .v:nth-child(2)){--rail-h:58px}
header.phero .hrail{min-height:58px}