.elementor-7 .elementor-element.elementor-element-fed5736{--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-7 .elementor-element.elementor-element-750f87e{--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-7 .elementor-element.elementor-element-20a4880{--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-7 .elementor-element.elementor-element-00ba48f{--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-7 .elementor-element.elementor-element-d22a788{--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-7 .elementor-element.elementor-element-cef092b{--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 *//* ============================================================
   about/01-hero.html
   ============================================================ */
.reload-about-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(420px, 50vh, 560px);
    display:flex; align-items:center; justify-content:center;
  }

  .reload-about-hero-mark{
    position:absolute; top:50%; left:50%;
    width:min(120vh, 120vw);
    aspect-ratio:1;
    z-index:0; pointer-events:none;
    transform:translate(-50%, -50%);
    opacity:.85;
    animation:reload-spin 120s linear infinite reverse;
    transform-origin:50% 50%;
  }
  .reload-about-hero-mark img{ width:100%; height:100%; display:block }

  .reload-about-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;
  }

  .reload-about-hero-inner{
    position:relative; z-index:1;
    max-width:768px; width:100%;
    display:flex; flex-direction:column; gap:24px;
    align-items:center; text-align:center;
  }
  .reload-about-hero-title{
    color:var(--reload-cream);
    font-size:clamp(40px, 6vw, 72px);
    line-height:1.1;
    letter-spacing:-.02em;
    margin:0;
  }
  .reload-about-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-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 }
  @keyframes reload-hero-text-in{ to{ opacity:1; transform:none } }

  @media (prefers-reduced-motion: reduce){
    .reload-about-hero-mark{ animation:none }
    .reload-hero-fadein{ animation:none; opacity:1; transform:none }
  }

/* ============================================================
   about/02-story.html
   ============================================================ */
.reload-about-story{
    background:var(--reload-cream);
    padding:clamp(72px, 9vw, 112px) var(--reload-pad-x) 56px;
    overflow:hidden;
  }
  .reload-about-story-grid{
    max-width:var(--reload-container);
    margin:0 auto;
    display:grid;
    grid-template-columns:618px 474px;
    gap:107px;
    align-items:center;
    justify-content:center;
  }

  /* Image collage */
  .reload-about-collage{
    position:relative;
    width:618px;
    height:516px;
  }
  .reload-about-collage-tag{
    position:absolute; left:150px; top:183px;
    width:246px; height:238px;
    background:#8EB9B0;
    border-radius:8px;
    z-index:1;
  }
  .reload-about-img{
    position:absolute;
    border-radius:24px;
    overflow:hidden;
    background:#cbd0d8;
  }
  .reload-about-img img{
    width:100%; height:100%;
    object-fit:cover; display:block;
  }
  .reload-about-img-a{
    left:0; top:0;
    width:260px; height:279px;
    z-index:2;
    box-shadow:0 24px 40px -28px rgba(46,64,91,.35);
  }
  .reload-about-img-b{
    left:295px; top:107px;
    width:323px; height:409px;
    z-index:2;
    box-shadow:0 24px 40px -28px rgba(46,64,91,.35);
  }

  /* Content */
  .reload-about-content{
    color:var(--reload-ink);
  }
  .reload-about-content h2{
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(40px, 5vw, 56px);
    line-height:1.05;
    letter-spacing:-.02em;
    margin:0 0 24px;
    color:var(--reload-ink);
  }
  .reload-about-content p{
    font-size:18px;
    line-height:1.55;
    margin:0 0 18px;
  }
  .reload-about-content p:last-child{ margin-bottom:0 }

  @media (max-width: 1100px){
    .reload-about-story-grid{
      grid-template-columns:1fr;
      gap:64px;
      justify-items:center;
    }
    .reload-about-content{ max-width:560px }
  }
  @media (max-width: 700px){
    .reload-about-collage{
      width:100%; max-width:520px;
      height:auto; aspect-ratio:618/516;
    }
    .reload-about-collage-tag{
      left:24%; top:36%;
      width:40%; height:46%;
    }
    .reload-about-img-a{
      left:0; top:0;
      width:42%; height:54%;
    }
    .reload-about-img-b{
      left:48%; top:21%;
      width:52%; height:79%;
    }
  }

/* ============================================================
   about/03-team-in-action.html
   ============================================================ */
.reload-team-action{
    background:var(--reload-cream);
    padding:56px var(--reload-pad-x) clamp(72px, 9vw, 112px);
    color:var(--reload-ink);
  }
  .reload-team-action-head{
    text-align:center;
    margin:0 auto 56px;
    max-width:768px;
  }
  .reload-team-action-head h2{
    font-family:var(--reload-font-display);   /* Erstoria */
    font-weight:400;
    color:var(--reload-ink);
    font-size:clamp(34px, 4.5vw, 56px);
    line-height:1.1; letter-spacing:-.02em;
    margin:0;
  }

  /* Hero video */
  .reload-team-action-video{
    position:relative; isolation:isolate;
    max-width:var(--reload-container);
    margin:0 auto 16px;
    border-radius:32px;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#0c1530;
    display:block;
    cursor:pointer;
  }
  .reload-team-action-video img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .reload-team-action-video:hover img{ transform:scale(1.02) }
  /* Vimeo iframe fills the framed 16:9-ish container */
  .reload-team-action-video iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
    display:block;
  }
  /* The .video wrapper is a <div> now (was <a>), so no default cursor. */
  .reload-team-action-video:has(iframe){ cursor:default; }
  .reload-team-action-play{
    position:absolute; top:50%; left:50%;
    width:92px; height:92px; border-radius:50%;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.92);
    color:var(--reload-ink);
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 20px 36px -18px rgba(0,0,0,.5);
    transition:transform .35s ease, background-color .35s ease;
  }
  .reload-team-action-play::after{
    content:""; display:block;
    width:0; height:0;
    border-left:24px solid currentColor;
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;
    margin-left:6px;
  }
  .reload-team-action-video:hover .reload-team-action-play{
    transform:translate(-50%,-50%) scale(1.06);
    background:var(--reload-melon-2);
  }

  /* Tile rail */
  .reload-team-action-rail{
    position:relative;
    max-width:var(--reload-container);
    margin:0 auto;
    overflow:hidden;
  }
  .reload-team-action-track{
    display:flex; gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:4px 0 16px;
  }
  .reload-team-action-track::-webkit-scrollbar{ display:none }

  .reload-team-action-tile{
    position:relative; isolation:isolate;
    /* Show 3 full tiles plus ~40% of a 4th peeking in — makes it obvious
       the rail scrolls without needing to hover the nav buttons. */
    flex:0 0 calc((100% - 3 * 16px) / 3.4);
    min-width:240px;
    aspect-ratio:9/11;               /* portrait — matches homepage video */
    border:4px solid var(--reload-ink);
    border-radius:32px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    background:#0c1530;
    scroll-snap-align:start;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),
               box-shadow .4s ease;
    display:flex; flex-direction:column;
    /* Reset button defaults — tiles are <button> so we can drive click-to-play cleanly */
    font:inherit; text-align:left;
    padding:0; margin:0; cursor:pointer;
    -webkit-appearance:none; appearance:none;
  }
  /* Iframe fills the poster area once a tile is playing */
  .reload-team-action-tile-img iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }
  .reload-team-action-tile.is-playing .reload-team-action-tile-play{ display:none; }
  .reload-team-action-tile:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 50px -28px rgba(46,64,91,.45);
  }
  .reload-team-action-tile-img{
    position:absolute; inset:0;    /* fills the entire tile — video's own title serves as label */
    overflow:hidden;
  }
  .reload-team-action-tile-img img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
  }
  .reload-team-action-tile:hover .reload-team-action-tile-img img{
    transform:scale(1.05);
  }
  .reload-team-action-tile-play{
    position:absolute; top:50%; left:50%;
    width:56px; height:56px; border-radius:50%;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.72);
    color:var(--reload-ink);
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px -12px rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:transform .25s ease, background-color .25s ease, opacity .25s ease;
    pointer-events:none;   /* click passes through to the button behind */
  }
  .reload-team-action-tile-play svg{
    width:20px; height:20px;
    margin-left:2px;       /* optical centering — the triangle sits left-heavy */
  }
  .reload-team-action-tile:hover .reload-team-action-tile-play,
  .reload-team-action-tile:focus-visible .reload-team-action-tile-play{
    background:var(--reload-melon-2);
    transform:translate(-50%,-50%) scale(1.08);
  }
  .reload-team-action-tile-body{
    background:var(--reload-ink);
    padding:24px 32px;
    flex:0 0 auto;
  }
  .reload-team-action-tile-title{
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(20px, 1.8vw, 28px);
    line-height:1.15;
    letter-spacing:-.01em;
    margin:0;
    color:#fff;
  }

  /* Prev/next chevrons */
  .reload-team-action-nav{
    display:flex; gap:10px; justify-content:center;
    margin-top:28px;
  }
  .reload-team-action-nav button{
    width:56px; height:56px;
    border:0; border-radius:14px;
    background:#fff; color:var(--reload-ink);
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow:0 12px 24px -14px rgba(46,64,91,.35);
  }
  .reload-team-action-nav button[data-active="1"]{
    background:var(--reload-melon-2);
  }
  .reload-team-action-nav button:hover{
    background:var(--reload-melon-2); transform:translateY(-2px);
    box-shadow:0 18px 32px -18px rgba(46,64,91,.45);
  }
  .reload-team-action-nav button:disabled{
    opacity:.35; cursor:default; transform:none;
  }
  .reload-team-action-nav svg{
    width:22px; height:22px;
    stroke:currentColor; fill:none;
    stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  }

  @media (max-width: 720px){
    .reload-team-action-tile{ flex-basis:80% }
  }

/* ============================================================
   about/04-team-grid.html
   ============================================================ */
.reload-meet-team{
    background:var(--reload-mauve);
    padding:clamp(80px, 11vw, 112px) var(--reload-pad-x);
    color:var(--reload-cream);
  }
  .reload-meet-team-head{
    text-align:center;
    margin:0 auto 80px;
    max-width:528px;
  }
  .reload-meet-team-head h2{
    color:var(--reload-cream);
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(36px, 4.2vw, 48px);
    line-height:1.1; letter-spacing:-.02em;
    margin:0;
  }

  /* Provide a sensible default for column count and let the shortcode
     attribute override it via inline style on .reload-team-grid. */
  .reload-meet-team .reload-team-grid{ --reload-team-cols:3 }

/* ============================================================
   about/05-perks.html
   ============================================================ */
.reload-perks{
    background:var(--reload-cream);
    padding:clamp(80px, 11vw, 112px) 0;
  }
  .reload-perks-head{
    text-align:center;
    margin:0 auto 80px;
    max-width:728px;
    padding:0 var(--reload-pad-x);
  }
  .reload-perks-head h2{
    color:var(--reload-ink);
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(34px, 4.2vw, 48px);
    line-height:1.1; letter-spacing:-.02em;
    margin:0;
  }

  .reload-perks-rail{
    position:relative;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .reload-perks-track{
    display:flex; gap:16px; width:max-content;
    padding:8px var(--reload-pad-x);
    animation:reload-perks-marquee 90s linear infinite;
    will-change:transform;
  }
  .reload-perks-rail:hover .reload-perks-track{ animation-play-state:paused }
  @keyframes reload-perks-marquee{
    to{ transform:translateX(calc(-50% - 8px)) }
  }

  .reload-perk{
    position:relative; isolation:isolate; overflow:hidden;
    flex:0 0 308px;
    height:331px;
    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;
  }
  .reload-perk:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 50px -28px rgba(46,64,91,.45);
  }
  .reload-perk.navy{ background:var(--reload-ink) }
  .reload-perk.mauve{ background:var(--reload-mauve) }

  .reload-perk-pattern{
    position:absolute;
    width:400px; height:400px;
    left:144px; top:-184px;
    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-perk:hover .reload-perk-pattern{
    transform:rotate(80deg); opacity:.28;
  }
  .reload-perk-pattern img{ width:100%; height:100%; display:block }

  .reload-perk-icon{
    width:48px; height:48px;
    color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    position:relative; z-index:1;
  }
  .reload-perk-icon svg{
    width:36px; height:36px;
    stroke:currentColor; fill:none; stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .reload-perk-text{
    position:relative; z-index:1;
    font-weight:500;
    font-size:24px;
    line-height:1.5;
    color:#fff;
    margin:0;
  }

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

/* ============================================================
   about/06-beliefs.html
   ============================================================ */
.reload-beliefs{
    background:var(--reload-ink);
    color:var(--reload-cream);
    padding:clamp(80px, 11vw, 128px) var(--reload-pad-x);
  }
  .reload-beliefs-head{
    max-width:720px; margin:0 auto 64px;
    text-align:center;
  }
  .reload-beliefs-head h2{
    color:var(--reload-cream);
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(34px, 4.2vw, 48px);
    line-height:1.1; letter-spacing:-.02em;
    margin:0 0 16px;
  }
  .reload-beliefs-head p{
    color:rgba(253,244,240,.75);
    font-size:15px; line-height:1.55; margin:0;
    letter-spacing:.06em; text-transform:uppercase;
  }

  .reload-beliefs-grid{
    max-width:var(--reload-container);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
  }
  .reload-belief{
    position:relative; overflow:hidden;
    border:1px solid rgba(253,244,240,.14);
    border-radius:20px;
    padding:36px 32px 32px;
    background:linear-gradient(180deg, rgba(253,244,240,.03), rgba(253,244,240,.01));
    transition:border-color .35s ease, transform .35s ease, background-color .35s ease;
  }
  .reload-belief:hover{
    border-color:var(--reload-melon);
    transform:translateY(-4px);
    background:linear-gradient(180deg, rgba(244,168,147,.06), rgba(244,168,147,.02));
  }
  .reload-belief-num{
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:14px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--reload-melon);
    margin:0 0 12px;
  }
  .reload-belief h3{
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(24px, 2.4vw, 30px);
    line-height:1.15;
    letter-spacing:-.01em;
    color:var(--reload-cream);
    margin:0 0 14px;
  }
  .reload-belief p{
    font-size:16px; line-height:1.6;
    color:rgba(253,244,240,.82);
    margin:0;
  }

  .reload-beliefs-tagline{
    max-width:720px;
    margin:56px auto 0;
    text-align:center;
    padding-top:32px;
    border-top:1px solid rgba(253,244,240,.14);
    color:var(--reload-melon);
    font-family:var(--reload-font-display);
    font-weight:400;
    font-size:clamp(20px, 2vw, 26px);
    line-height:1.35;
    letter-spacing:-.005em;
  }
  .reload-beliefs-tagline em{ color:var(--reload-cream); font-style:normal }

  @media (max-width: 720px){
    .reload-beliefs-grid{ grid-template-columns:1fr }
    .reload-belief{ padding:28px 24px }
  }

/* ============================================================
   07-your-next-step.html
   ============================================================ */
.reload-step{
    position:relative; isolation:isolate; overflow:hidden;
    background:var(--reload-cream);
    color:var(--reload-ink);
    padding:clamp(96px, 12vw, 160px) var(--reload-pad-x);
    min-height:760px;
    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;
    }
  }

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