.elementor-10 .elementor-element.elementor-element-43bd955{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-f96e61e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-e7fa316{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-95d3c41{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-f0b8f99{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-f1a354b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-47e45d8{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-2280d09{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* ============================================================
   01-hero.html
   ============================================================ */
.reload-hero{
    position:relative; isolation:isolate; overflow:hidden;
    background:#2E405B;
    color:var(--reload-cream);
    padding:clamp(96px, 14vh, 160px) var(--reload-pad-x);
    min-height:clamp(560px, 78vh, 820px);
    display:flex; align-items:center; justify-content:center;
    /* CSS vars driven by the scroll listener */
    --scroll-scale:1;
    --scroll-opacity:1;
  }

  /* Outer mark wrapper: positioning + scroll-driven scale & opacity */
  .reload-hero-mark{
    position:absolute; top:50%; left:50%;
    width:min(150vh, 150vw);
    aspect-ratio:1;
    z-index:0; pointer-events:none;
    transform:translate(-50%, -50%) scale(var(--scroll-scale, 1));
    opacity:var(--scroll-opacity, 1);
    transform-origin:50% 50%;
    transition:transform .25s ease-out, opacity .25s ease-out;
    will-change:transform, opacity;
  }
  .reload-hero-mark img{
    width:100%; height:100%; display:block;
  }

  /* Inner wrapper: handles the on-load reveal + ambient anti-clockwise spin */
  .reload-hero-mark-spin{
    width:100%; height:100%;
    transform-origin:50% 50%;
    /* Start invisible at scale 0, rotated +450° so the reveal-to-0°
       travels the anti-clockwise route. */
    transform:scale(0) rotate(450deg);
    opacity:0;
    animation:reload-hero-mark-in 3.2s cubic-bezier(.22,.61,.36,1) .25s forwards;
  }
  @keyframes reload-hero-mark-in{
    0%{   transform:scale(0)  rotate(450deg); opacity:0 }
    40%{                                       opacity:.7 }
    100%{ transform:scale(1)  rotate(0deg);    opacity:.85 }
  }
  /* After the reveal completes, JS swaps in the slow ambient spin */
  .reload-hero.is-revealed .reload-hero-mark-spin{
    animation:reload-hero-spin-ccw 120s linear infinite;
    opacity:.85;
  }
  @keyframes reload-hero-spin-ccw{
    from{ transform:rotate(0deg) }
    to  { transform:rotate(-360deg) }
  }

  /* Soft melon glow behind the mark to lift it off the navy */
  .reload-hero::before{
    content:""; position:absolute; inset:-20%;
    background:radial-gradient(closest-side at 50% 50%,
                rgba(244,168,147,.18), rgba(244,168,147,0) 70%);
    z-index:0; pointer-events:none;
    opacity:0;
    transition:opacity 2s ease;
    animation:reload-hero-glow-in 2s ease .35s forwards;
  }
  @keyframes reload-hero-glow-in{ to{ opacity:var(--scroll-opacity, 1) } }

  .reload-hero-inner{
    position:relative; z-index:1;
    max-width:768px; width:100%;
    display:flex; flex-direction:column; gap:32px;
    align-items:center; text-align:center;
  }
  .reload-hero-title{
    color:var(--reload-cream);
    font-size:clamp(40px, 6vw, 72px);
    line-height:1.05;
    letter-spacing:-.02em;
    margin:0;
  }
  .reload-hero-lede{
    color:var(--reload-cream);
    font-size:clamp(16px, 1.4vw, 18px);
    line-height:1.55;
    max-width:624px;
    margin:0;
    opacity:.92;
  }
  .reload-hero-actions{
    display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  }
  .reload-hero-actions .reload-btn-outline{
    color:var(--reload-cream); border-color:var(--reload-cream);
  }
  .reload-hero-actions .reload-btn-outline:hover{
    background:var(--reload-cream); color:var(--reload-ink);
  }

  /* CSS-only text reveal so the headline + body always render */
  .reload-hero-fadein{
    opacity:0; transform:translateY(20px);
    animation:reload-hero-text-in 1.2s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .reload-hero-fadein[data-step="1"]{ animation-delay:.15s }
  .reload-hero-fadein[data-step="2"]{ animation-delay:.35s }
  .reload-hero-fadein[data-step="3"]{ animation-delay:.55s }
  @keyframes reload-hero-text-in{
    to{ opacity:1; transform:none }
  }

  @media (prefers-reduced-motion: reduce){
    .reload-hero-mark-spin{ animation:none; opacity:.85; transform:scale(1) }
    .reload-hero.is-revealed .reload-hero-mark-spin{ animation:none }
    .reload-hero-fadein{ animation:none; opacity:1; transform:none }
    .reload-hero::before{ animation:none; opacity:1 }
    .reload-hero-mark{ transition:none }
  }

/* ============================================================
   02-stats.html
   ============================================================ */
.reload-stats{
    background:#8EB9B0;                  /* sage band */
    padding:14px clamp(16px, 3vw, 40px); /* tight top/bottom + side gutters */
  }
  .reload-stats-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    max-width:1180px;                    /* pull the band in a bit */
    margin:0 auto;
  }
  .reload-stat{
    background:#2C3133;
    color:#fff;
    border-radius:22px;
    padding:22px 28px;
    text-align:left;
    display:flex; align-items:center; justify-content:flex-start;   /* vertical centre */
    gap:18px;
    min-height:0;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .reload-stat:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 30px -22px rgba(0,0,0,.55);
  }
  .reload-stat-num{
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(38px, 3.6vw, 50px);
    line-height:1;
    letter-spacing:-.02em;
    flex:0 0 auto;
    display:flex; align-items:center;                                /* keeps the glyph centred */
  }
  .reload-stat-num small{
    font-family:var(--reload-font-display);
    font-size:.55em;
    color:rgba(255,255,255,.65);
    margin-left:2px;
  }
  .reload-stat-label{
    font-size:17px;                                                  /* bumped up */
    line-height:1.3;
    color:rgba(255,255,255,.88);
    max-width:22ch;
    margin:0;                                                        /* neutralise any inherited <p> margins */
  }

  @media (max-width: 900px){
    .reload-stats{ padding:12px clamp(14px, 4vw, 24px); }
    .reload-stats-grid{ grid-template-columns:1fr; gap:8px }
    .reload-stat{ padding:18px 22px; border-radius:18px }
    .reload-stat-num{ font-size:36px }
    .reload-stat-label{ font-size:16px }
  }

/* ============================================================
   03-what-we-do.html
   ============================================================ */
.reload-wwd{
    background:var(--reload-cream);
    padding:clamp(72px, 9vw, 112px) var(--reload-pad-x) 56px;
  }
  .reload-wwd-head{
    max-width:768px; margin:0 auto;
    text-align:center; display:flex; flex-direction:column; gap:24px;
    color:var(--reload-ink);
  }
  .reload-wwd-head h2{
    color:var(--reload-ink);
    font-size:clamp(40px, 5vw, 56px);
    line-height:1.05;
    letter-spacing:-.02em;
  }
  .reload-wwd-head p{
    font-size:clamp(16px, 1.4vw, 18px);
    line-height:1.55; margin:0;
  }

  .reload-wwd-grid{
    margin:80px auto 0;
    max-width:var(--reload-container);
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:16px;
  }
  /* Anchor wrapper — each card is a link to its career-path page */
  .reload-wwd-cardlink{
    display:block;
    text-decoration:none;
    color:inherit;
    border-radius:24px;
    outline:none;
  }
  .reload-wwd-cardlink:focus-visible{
    box-shadow:0 0 0 3px rgba(255,176,140,.55);
  }
  .reload-wwd-card{
    position:relative; isolation:isolate; overflow:hidden;
    aspect-ratio:240/300;
    border-radius:24px;
    padding:24px;
    color:#fff;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .4s cubic-bezier(.2,.7,.2,1),
               box-shadow .4s ease;
    cursor:pointer;
  }
  .reload-wwd-cardlink:hover .reload-wwd-card,
  .reload-wwd-cardlink:focus-visible .reload-wwd-card{
    transform:translateY(-6px);
    box-shadow:0 30px 50px -28px rgba(46,64,91,.45);
  }
  /* Legacy hover kept for standalone card usage (no link wrapper) */
  .reload-wwd-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 50px -28px rgba(46,64,91,.45);
  }
  /* Read-more CTA — subtle at rest, brightens on hover */
  .reload-wwd-cta{
    position:relative; z-index:1;
    display:inline-block; margin-top:12px;
    font-family:var(--reload-font-ui); font-weight:600;
    font-size:13px; letter-spacing:.02em;
    color:var(--reload-melon-2);
    opacity:.85;
    transition:opacity .25s ease, transform .25s ease;
  }
  .reload-wwd-cardlink:hover .reload-wwd-cta,
  .reload-wwd-cardlink:focus-visible .reload-wwd-cta{
    opacity:1;
    transform:translateX(4px);
  }
  .reload-wwd-card.navy{ background:var(--reload-ink) }
  .reload-wwd-card.mauve{ background:var(--reload-mauve) }

  .reload-wwd-pattern{
    position:absolute;
    width:400px; height:400px;
    right:-180px; top:-180px;
    opacity:.18;
    pointer-events:none;
    z-index:0;
    transform:rotate(0deg);
    transition:transform 1.4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  }
  .reload-wwd-card:hover .reload-wwd-pattern{
    transform:rotate(80deg);
    opacity:.28;
  }
  .reload-wwd-pattern img{ width:100%; height:100%; display:block }

  .reload-wwd-icon{
    width:48px; height:48px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff;
    position:relative; z-index:1;
  }
  .reload-wwd-icon svg{ width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

  .reload-wwd-title{
    font-family:var(--reload-font-display); font-weight:400;
    font-size:clamp(20px, 2vw, 26px);
    line-height:1.15;
    letter-spacing:-.02em;
    color:#fff;
    position:relative; z-index:1;
    margin:0;
  }

  @media (max-width: 1100px){
    .reload-wwd-grid{ grid-template-columns:repeat(3, 1fr) }
  }
  @media (max-width: 720px){
    .reload-wwd-grid{ grid-template-columns:repeat(2, 1fr) }
  }
  @media (max-width: 480px){
    .reload-wwd-grid{ grid-template-columns:1fr }
  }

/* ============================================================
   04-not-built.html
   ============================================================ */
.reload-nb{
    background:var(--reload-cream);
    padding:56px var(--reload-pad-x) clamp(72px, 9vw, 112px);
  }
  .reload-nb-grid{
    max-width:var(--reload-container);
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(320px, 460px) minmax(0, 1fr);
    gap:80px;
    align-items:center;
  }

  /* Video block — 9:11 to match the actual Vimeo aspect (no letterboxing) */
  .reload-nb-video{
    position:relative; isolation:isolate;
    width:100%; aspect-ratio:9/11;
    border:4px solid #8EB9B0;
    border-radius:32px;
    overflow:hidden;
    background:#0c1530;
    transition:transform .4s cubic-bezier(.2,.7,.2,1),
               border-color .4s ease;
  }
  .reload-nb-video:hover{ transform:translateY(-3px); border-color:var(--reload-melon-2) }
  .reload-nb-video img,
  .reload-nb-video video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  /* Vimeo iframe fills the frame edge-to-edge */
  .reload-nb-video iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0; display:block;
  }
  .reload-nb-play{
    position:absolute; top:50%; left:50%;
    width:64px; height:64px; border-radius:50%;
    transform:translate(-50%, -50%);
    background:rgba(255,255,255,.9);
    color:var(--reload-ink);
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform .35s ease, background-color .35s ease;
    z-index:2;
    box-shadow:0 14px 30px -16px rgba(0,0,0,.45);
  }
  .reload-nb-play::after{
    content:""; display:block;
    width:0; height:0;
    border-left:18px solid currentColor;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    margin-left:4px;
  }
  .reload-nb-video:hover .reload-nb-play{
    transform:translate(-50%, -50%) scale(1.08);
    background:var(--reload-melon-2);
  }

  /* Pulse ring around play button */
  .reload-nb-play::before{
    content:""; position:absolute; inset:-12px; border-radius:50%;
    border:2px solid rgba(255,255,255,.55);
    animation:reload-nb-pulse 2.4s ease-out infinite;
    z-index:-1;
  }
  @keyframes reload-nb-pulse{
    0%   { transform:scale(.85); opacity:.8 }
    100% { transform:scale(1.4);  opacity:0 }
  }

  /* Text column */
  .reload-nb-content{
    display:flex; flex-direction:column; gap:64px; align-items:flex-start;
    color:var(--reload-ink);
  }
  .reload-nb-content h2{
    color:var(--reload-ink);
    font-size:clamp(32px, 4vw, 48px);
    line-height:1.05;
    letter-spacing:-.02em;
    margin:0;
  }
  .reload-nb-body{
    font-size:clamp(17px, 1.4vw, 20px);
    line-height:1.55; margin:24px 0 0;
    color:var(--reload-ink);
  }
  .reload-nb-list{
    list-style:none; padding:0; margin:24px 0 0;
    display:flex; flex-direction:column; gap:16px;
    width:100%;
  }
  .reload-nb-list li{
    display:flex; gap:12px; align-items:center;
    font-size:18px; color:var(--reload-ink);
    opacity:.85;
  }
  .reload-nb-list .tick{
    flex:0 0 auto;
    width:24px; height:24px; border-radius:50%;
    background:#8EB9B0;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff;
  }
  .reload-nb-list .tick svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

  @media (max-width: 980px){
    .reload-nb-grid{ grid-template-columns:1fr; gap:48px }
    .reload-nb-video{ max-width:420px; margin:0 auto }
  }

/* ============================================================
   05-precision-hiring.html
   ============================================================ */
.reload-ph{
    background:#8EB9B0;       /* sage band */
    padding:0;
  }
  .reload-ph-grid{
    max-width:1440px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 720px;
    align-items:flex-start;
  }

  /* Sticky left column */
  .reload-ph-aside{
    position:sticky; top:80px;
    align-self:start;
    padding:96px var(--reload-pad-x);
    color:var(--reload-cream);
  }
  .reload-ph-aside h2{
    color:var(--reload-cream);
    font-size:clamp(34px, 4vw, 48px);
    line-height:1.05;
    letter-spacing:-.02em;
    margin:0 0 24px;
    max-width:520px;
  }
  .reload-ph-aside p{
    color:var(--reload-cream);
    font-size:clamp(16px, 1.4vw, 18px);
    line-height:1.55;
    margin:0;
    max-width:480px;
    opacity:.92;
  }
  .reload-ph-progress{
    margin-top:40px;
    display:flex; gap:8px;
  }
  .reload-ph-progress span{
    flex:1; height:3px; border-radius:3px;
    background:rgba(253,244,240,.25);
    transition:background-color .4s ease;
  }
  .reload-ph-progress span.is-active{ background:var(--reload-cream) }

  /* Right column — scrolling cards */
  .reload-ph-stack{
    padding:96px 32px;
    display:flex; flex-direction:column;
    gap:64px;
  }
  /* Anchor wrapper — each card is a link to its career-path page */
  .reload-ph-cardlink{
    display:block;
    text-decoration:none;
    color:inherit;
    border-radius:40px;
    outline:none;
  }
  .reload-ph-cardlink:focus-visible{
    box-shadow:0 0 0 3px rgba(255,176,140,.55);
  }
  .reload-ph-card{
    border-radius:40px;
    overflow:hidden;
    border:4px solid var(--reload-ink);
    background:var(--reload-ink);
    color:#fff;
    transform:translateY(0);
    transition:transform .6s cubic-bezier(.2,.7,.2,1),
               box-shadow .6s ease;
  }
  .reload-ph-cardlink:hover .reload-ph-card,
  .reload-ph-cardlink:focus-visible .reload-ph-card{
    box-shadow:0 40px 60px -28px rgba(0,0,0,.5);
  }
  /* "Read the career guide →" CTA on each card */
  .reload-ph-card-cta{
    display:inline-block; margin-top:8px;
    font-family:var(--reload-font-ui); font-weight:600;
    font-size:13px; letter-spacing:.02em;
    color:var(--reload-melon-2);
    opacity:.85;
    transition:opacity .25s ease, transform .25s ease;
  }
  .reload-ph-cardlink:hover .reload-ph-card-cta,
  .reload-ph-cardlink:focus-visible .reload-ph-card-cta{
    opacity:1;
    transform:translateX(4px);
  }
  .reload-ph-card.is-in{
    box-shadow:0 40px 60px -32px rgba(0,0,0,.4);
  }
  .reload-ph-card-img{
    position:relative;
    aspect-ratio:656/294;
    background:#0c1530;
    overflow:hidden;
  }
  .reload-ph-card-img img{
    width:100%; height:100%; display:block; object-fit:cover;
    transform:scale(1.05);
    transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .reload-ph-card:hover .reload-ph-card-img img{ transform:scale(1.0) }
  .reload-ph-card-body{
    padding:32px 64px;
    display:flex; flex-direction:column; gap:16px;
    max-width:560px;
  }
  .reload-ph-card-title{
    font-family:var(--reload-font-display); font-weight:400;
    font-size:clamp(24px, 2.4vw, 32px);
    line-height:1.15;
    letter-spacing:-.02em;
    margin:0;
    color:#fff;
  }
  .reload-ph-card-body p{
    margin:0; font-size:16px; color:rgba(255,255,255,.85);
  }

  @media (max-width: 1024px){
    .reload-ph-grid{ grid-template-columns:1fr; }
    .reload-ph-aside{ position:static; padding:80px var(--reload-pad-x) 24px }
    .reload-ph-stack{ padding:0 var(--reload-pad-x) 80px; gap:40px }
    .reload-ph-card-body{ padding:24px 32px }
  }

/* ============================================================
   06-roles.html
   ============================================================ */
.reload-roles{
    background:var(--reload-cream);
    padding:clamp(72px, 9vw, 112px) var(--reload-pad-x);
    overflow:hidden;
  }
  .reload-roles-head{
    max-width:560px; margin:0 auto;
    text-align:center; display:flex; flex-direction:column; gap:24px;
    color:var(--reload-ink);
  }
  .reload-roles-head h2{
    color:var(--reload-ink);
    font-size:clamp(34px, 4vw, 48px);
    line-height:1.05; letter-spacing:-.02em;
  }
  .reload-roles-head p{
    margin:0; font-size:clamp(16px, 1.4vw, 18px); line-height:1.55;
  }

  /* Marquee rail */
  .reload-roles-rail{
    position:relative;
    margin:80px calc(var(--reload-pad-x) * -1) 0;
    overflow:hidden;
    /* Soft fade at the rail edges so cards don't pop in/out abruptly */
    -webkit-mask-image:linear-gradient(90deg, transparent 0,
                       #000 6%, #000 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0,
                       #000 6%, #000 94%, transparent 100%);
  }
  .reload-roles-track{
    display:flex; gap:16px; width:max-content;
    padding:8px var(--reload-pad-x);
    animation:reload-roles-marquee 48s linear infinite;
    will-change:transform;
  }
  .reload-roles-rail:hover .reload-roles-track{
    animation-play-state:paused;
  }
  @keyframes reload-roles-marquee{
    /* The track contains two copies of the card set; -50% lands exactly
       on the seam, so the loop is perfectly continuous. */
    to{ transform:translateX(calc(-50% - 8px)); }
  }

  .reload-roles-card{
    position:relative; isolation:isolate; overflow:hidden;
    flex:0 0 308px;
    aspect-ratio:308/331;
    border-radius:24px;
    padding:24px;
    color:#fff;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .4s cubic-bezier(.2,.7,.2,1),
               box-shadow .4s ease;
    cursor:pointer;
  }
  .reload-roles-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 50px -28px rgba(46,64,91,.45);
  }
  .reload-roles-card.navy{ background:var(--reload-ink) }
  .reload-roles-card.mauve{ background:var(--reload-mauve) }

  .reload-roles-pattern{
    position:absolute;
    width:400px; height:400px;
    right:-180px; top:-180px;
    opacity:.18; pointer-events:none; z-index:0;
    transform:rotate(0deg);
    transition:transform 1.4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  }
  .reload-roles-card:hover .reload-roles-pattern{
    transform:rotate(80deg); opacity:.28;
  }
  .reload-roles-pattern img{ width:100%; height:100%; display:block }
  .reload-roles-icon{
    width:48px; height:48px; color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative; z-index:1;
  }
  .reload-roles-icon svg{ width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.6 }
  .reload-roles-title{
    font-family:var(--reload-font-display); font-weight:400;
    font-size:clamp(22px, 2.4vw, 32px);
    line-height:1.15;
    letter-spacing:-.02em;
    color:#fff; margin:0; position:relative; z-index:1;
  }

  @media (prefers-reduced-motion: reduce){
    .reload-roles-track{ animation:none; transform:none }
  }

/* ============================================================
   07-your-next-step.html
   ============================================================ */
.reload-step{
    position:relative; isolation:isolate; overflow:hidden;
    background:var(--reload-cream);
    color:var(--reload-ink);
    padding:clamp(72px, 9vw, 112px) var(--reload-pad-x);
    display:flex; align-items:center; justify-content:center;
  }

  .reload-step-inner{
    position:relative; z-index:2;
    max-width:720px; width:100%;
    text-align:center;
    display:flex; flex-direction:column; gap:32px; align-items:center;
  }
  .reload-step-title{
    color:var(--reload-ink);
    font-size:clamp(40px, 5vw, 56px);
    line-height:1.05; letter-spacing:-.02em;
    margin:0;
  }
  .reload-step-body{
    margin:0;
    font-size:clamp(16px, 1.4vw, 18px); line-height:1.55;
    max-width:560px;
  }
  .reload-step-actions{
    display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
    position:relative; z-index:3;       /* CTAs always sit above photos */
  }

  /* Floating portraits */
  .reload-step-photos{
    position:absolute; inset:0; z-index:1; pointer-events:none;
  }
  .reload-step-photo{
    position:absolute;
    width:var(--w,180px);
    height:var(--w,180px);
    border-radius:24px;
    border:2px solid #8EB9B0;
    overflow:hidden;
    background:#8EB9B0;
    pointer-events:auto;
    will-change:transform;
    transform-origin:50% 50%;

    /* CLOSED (initial) state — pulled toward the centre and scaled up,
       so the portraits cover the text before the section opens. */
    transform:translate(var(--close-x, 0), var(--close-y, 0))
              rotate(var(--r, 0))
              scale(var(--close-scale, 1.6));
    transition:transform 1.4s cubic-bezier(.22,.61,.36,1),
               box-shadow 1.4s ease;
    box-shadow:0 30px 50px -28px rgba(46,64,91,.45);
  }
  .reload-step-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* OPEN state — section in view: portraits fall back to their resting
     left/top positions, smaller, away from the text. */
  .reload-step.is-open .reload-step-photo{
    transform:translate(0, 0) rotate(var(--r, 0)) scale(1);
    box-shadow:0 10px 22px -16px rgba(46,64,91,.35);
    animation:reload-step-bob 6s ease-in-out infinite;
    animation-delay:var(--bob-delay, 0s);
  }
  @keyframes reload-step-bob{
    0%,100%{ transform:translate(0,0)    rotate(var(--r, 0)) scale(1) }
    50%   { transform:translate(0,-8px) rotate(var(--r, 0)) scale(1) }
  }

  /* Per-portrait: rest position (left/top), base size, rotation, and
     the closed-state offset (--close-x/--close-y) that pulls it toward
     the centre + how much to scale up while closed.

     ALL rest positions are arranged on the outer "ring" of the section
     so the centred content (headline + body + CTAs) stays clear once
     the photos have expanded.  The content occupies roughly the central
     50% x 40% of the section — that area must remain empty.

       ┌────────────────────────────────────────────┐
       │  p1            p3                p5        │   ← top band
       │                                            │
       │  p4    ┌──────────────────────┐    p6      │   ← side bands
       │        │     SAFE ZONE        │            │
       │  p2    │  (centre 50% x 40%)  │    p8      │
       │        └──────────────────────┘            │
       │                                            │
       │              p7                            │   ← bottom band
       └────────────────────────────────────────────┘  */
  .p1{ left:4%;  top:4%;
       --w:160px; --r:-3deg; --bob-delay:0s;
       --close-x: 32vw;  --close-y: 30vh; --close-scale:1.85; }
  .p2{ left:1%;  top:58%;
       --w:200px; --r:2deg;  --bob-delay:.4s;
       --close-x: 32vw;  --close-y:-8vh;  --close-scale:1.6;  }
  .p3{ left:38%; top:-2%;
       --w:170px; --r:-1deg; --bob-delay:.8s;
       --close-x: 5vw;   --close-y: 32vh; --close-scale:1.8;  }
  .p4{ left:1%;  top:32%;
       --w:180px; --r:3deg;  --bob-delay:1.2s;
       --close-x: 32vw;  --close-y: 10vh; --close-scale:1.7;  }
  .p5{ left:64%; top:-2%;
       --w:200px; --r:-3deg; --bob-delay:1.6s;
       --close-x:-16vw;  --close-y: 32vh; --close-scale:1.75; }
  .p6{ left:84%; top:32%;
       --w:180px; --r:2deg;  --bob-delay:2s;
       --close-x:-30vw;  --close-y: 10vh; --close-scale:1.7;  }
  .p7{ left:42%; top:80%;
       --w:180px; --r:-2deg; --bob-delay:2.4s;
       --close-x:  2vw;  --close-y:-26vh; --close-scale:1.7;  }
  .p8{ left:76%; top:62%;
       --w:220px; --r:3deg;  --bob-delay:2.8s;
       --close-x:-20vw;  --close-y:-14vh; --close-scale:1.8;  }

  /* Staggered open: each portrait eases out with its own small delay so
     the expansion reads as a choreographed swoosh, not a snap. */
  .reload-step.is-open .p1{ transition-delay:0s     }
  .reload-step.is-open .p2{ transition-delay:.06s   }
  .reload-step.is-open .p3{ transition-delay:.12s   }
  .reload-step.is-open .p4{ transition-delay:.18s   }
  .reload-step.is-open .p5{ transition-delay:.24s   }
  .reload-step.is-open .p6{ transition-delay:.30s   }
  .reload-step.is-open .p7{ transition-delay:.36s   }
  .reload-step.is-open .p8{ transition-delay:.42s   }

  @media (max-width: 980px){
    .reload-step{ min-height:640px }
    .p3,.p7{ display:none }
    .p1{ --w:110px; left:4%;  top:6%;  --close-x: 38vw; --close-y: 32vh; --close-scale:1.7 }
    .p2{ --w:160px; left:2%;  top:62%; --close-x: 36vw; --close-y:-8vh;  --close-scale:1.6 }
    .p4{ --w:130px; left:18%; top:34%; --close-x: 26vw; --close-y: 14vh; --close-scale:1.7 }
    .p5{ --w:170px; left:70%; top:4%;  --close-x:-22vw; --close-y: 36vh; --close-scale:1.7 }
    .p6{ --w:140px; left:78%; top:38%; --close-x:-30vw; --close-y: 14vh; --close-scale:1.7 }
    .p8{ --w:170px; left:64%; top:68%; --close-x:-20vw; --close-y:-18vh; --close-scale:1.7 }
  }
  @media (max-width: 600px){
    .reload-step-photos{ display:none }
  }

  @media (prefers-reduced-motion: reduce){
    /* Skip the closed/expand choreography */
    .reload-step-photo,
    .reload-step.is-open .reload-step-photo{
      transform:rotate(var(--r,0)) scale(1);
      animation:none;
      transition:none;
    }
  }

/* 08-global-reach.html — now rendered by the reload-placements plugin (shortcode [reload_placements]). */

/* 09-contact.html — now rendered by reload-child/footer.php on every page (assets/css/reload.css handles the styling). *//* End custom CSS */