/* =====================================================================
   EQUITABLE — homepage hero reel.
   Same arched frame as before; seven photographs that drift slowly
   (a "Ken Burns" move) and dissolve into each other. A small label
   names the part of the business, and thin bars under the frame fill
   as each photo plays. Pauses on hover/focus, when the tab is hidden,
   and on the pause button. Reduced motion: dissolves only, no drift.
   ===================================================================== */
.reel{position:relative;}
.reel__frame{
  position:relative; width:100%; aspect-ratio:4 / 3; overflow:hidden;
  border-radius:var(--r-arch); background:var(--c-bg-sunk);
  box-shadow:0 30px 60px -34px rgba(28,31,35,.45);
  isolation:isolate;
}
.reel__slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.4s ease; z-index:0;}
.reel__slide.is-on{opacity:1; z-index:1;}
.reel__slide.is-leaving{opacity:0; z-index:2; transition:opacity 1.4s ease;}
.reel .reel__slide picture,.reel .reel__slide img{
  display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:0;
}
.reel__slide img{transform-origin:50% 50%; will-change:transform;}
/* three slow moves, alternated so consecutive photos never drift the same way */
.reel__slide.is-run[data-kb="a"] img{animation:reelA var(--reel-ms,7000ms) linear both;}
.reel__slide.is-run[data-kb="b"] img{animation:reelB var(--reel-ms,7000ms) linear both;}
.reel__slide.is-run[data-kb="c"] img{animation:reelC var(--reel-ms,7000ms) linear both;}
@keyframes reelA{from{transform:scale(1.02) translate(0,0);}to{transform:scale(1.13) translate(-2.2%,-1.2%);}}
@keyframes reelB{from{transform:scale(1.14) translate(2%,1%);}to{transform:scale(1.03) translate(-1%,0);}}
@keyframes reelC{from{transform:scale(1.04) translate(-2%,1.2%);}to{transform:scale(1.14) translate(1.6%,-1%);}}
.reel.is-paused .reel__slide img{animation-play-state:paused !important;}

/* the label — a small bone tag, bottom-left, links to that part of the site */
.reel__slide figcaption{position:absolute; left:18px; bottom:18px; z-index:3;}
.reel__tag{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:999px;
  background:rgba(251,248,243,.92); color:var(--c-text, #1C1F23); text-decoration:none;
  font:600 13.5px/1.1 var(--f-body, 'Inter', system-ui, sans-serif);
  box-shadow:0 8px 20px -10px rgba(28,31,35,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(8px); transition:opacity .6s ease .5s, transform .6s ease .5s, background .2s;
}
.reel__tag span{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-deep, #A14A26); font-weight:700;}
.reel__tag::after{content:"→"; color:var(--c-accent-deep, #A14A26); margin-left:2px; transition:transform .2s;}
.reel__tag:hover{background:#fff;}
.reel__tag:hover::after{transform:translateX(3px);}
.reel__slide.is-on .reel__tag{opacity:1; transform:none;}
[data-theme="dark"] .reel__tag{background:rgba(28,31,35,.86); color:#ECE5D9;}
[data-theme="dark"] .reel__tag span,[data-theme="dark"] .reel__tag::after{color:var(--c-accent-lite, #E08A5F);}

/* the bar — pause + seven thin progress lines */
.reel__bar{display:flex; align-items:center; gap:14px; margin-top:16px; padding:0 4px;}
.reel__pause{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--c-line, #DCD3C4); background:transparent; color:var(--c-text, #1C1F23); padding:0;
  transition:border-color .2s, background .2s;
}
.reel__pause:hover{border-color:var(--c-accent, #C7663E);}
.reel__pause svg{width:14px; height:14px; fill:currentColor;}
.reel__pause .i-play{display:none;}
.reel.is-paused .reel__pause .i-pause{display:none;}
.reel.is-paused .reel__pause .i-play{display:block;}
.reel__dots{flex:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px;}
.reel__dot{position:relative; height:22px; padding:0; border:0; background:none; cursor:pointer;}
.reel__dot::before{content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  border-radius:3px; background:var(--c-line, #DCD3C4);}
.reel__dot i{position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:0; border-radius:3px; background:var(--c-accent, #C7663E);}
.reel__dot.is-done i{width:100%;}
.reel__dot.is-on i{animation:reelFill var(--reel-ms,7000ms) linear both;}
.reel.is-paused .reel__dot.is-on i{animation-play-state:paused;}
.reel__dot:hover::before{background:var(--c-text-faint, #6E6A63);}
.reel__dot:focus-visible{outline:2px solid var(--c-accent, #C7663E); outline-offset:2px; border-radius:4px;}
@keyframes reelFill{from{width:0;}to{width:100%;}}

@media (prefers-reduced-motion:reduce){
  .reel__slide.is-run img{animation:none !important; transform:none;}
  .reel__slide,.reel__slide.is-leaving{transition-duration:.9s;}
  .reel__tag{transition:none;}
}
@media (max-width:600px){
  .reel__slide figcaption{left:12px; bottom:12px;}
  .reel__tag{font-size:12.5px; padding:7px 12px 7px 10px;}
  .reel__bar{margin-top:12px; gap:10px;}
}

/* =====================================================================
   BIGGER FRAME (12 Nov, second pass). Petra's red box: the same arched
   frame, inside the page margins, but filling the right-hand side of the
   hero — wider column, taller picture, less empty space above and below.
   The progress lines stay underneath, as before. (A first pass that ran
   the picture to the window edge was rejected: "not good at all".)
   ===================================================================== */
@media (min-width:900px){
  .hero .hero__inner{grid-template-columns:.9fr 1.1fr; gap:var(--sp-6, 2rem); padding-block:var(--sp-6, 2rem) var(--sp-7, 3rem);}
  .hero .reel__frame{aspect-ratio:6 / 5;}
}
@media (min-width:1200px){
  .hero .reel__frame{aspect-ratio:5 / 4;}
}