/* ============================================================
   HERO — full-viewport campaign image, header sits over it
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  /* the bar lies over the photograph, so the first screen is the hero alone */
  min-height:100vh;                             /* older engines */
  min-height:100svh;
  background:var(--dark);color:var(--on-dark);
  display:flex;
}

/* the first thing anyone sees, so it arrives rather than simply appears:
   a longer rise than the rest of the page, each line a beat behind the one
   above it. The .in rule is repeated at this weight because the sheet loads
   after base.css and would otherwise hold the lines down. */
.hero [data-rv]{transform:translateY(22px);transition-duration:.8s}
.hero [data-rv].in{transform:none}

.hero__bg{position:absolute;inset:0;margin:0}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:62% 40%;
  transform:scale(1.04);animation:heroIn 2s var(--slow) .05s forwards;
}
@keyframes heroIn{to{transform:scale(1)}}
/* Three soft layers, no hard edges anywhere: a warm pool in the lower left
   that gives the type something to sit on, a gentle lift from the bottom edge,
   and a shallow fall at the top so the cream navigation lying over the
   photograph keeps its contrast. The centre of the picture stays untouched. */
.hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(118% 92% at 6% 86%, rgba(36,22,11,.52) 0%, rgba(36,22,11,.30) 32%,
      rgba(36,22,11,.10) 56%, rgba(36,22,11,0) 74%),
    linear-gradient(0deg, rgba(30,19,10,.34), rgba(30,19,10,.10) 26%, rgba(30,19,10,0) 48%),
    linear-gradient(180deg, rgba(24,16,9,.58) 0%, rgba(24,16,9,.42) 35%,
      rgba(24,16,9,.20) 62%, rgba(24,16,9,0) 100%) top / 100% calc(var(--bar-h) * 2.1) no-repeat;
}

.hero__in{
  position:relative;z-index:2;width:100%;
  display:grid;align-content:end;justify-items:start;gap:clamp(14px,1.8vw,22px);
  padding-top:24px;
  padding-bottom:clamp(44px,8vh,104px);
}

.hero__eyebrow{display:flex;align-items:center;gap:14px;color:rgba(242,237,230,.78)}
.hero__eyebrow .label{color:inherit}
.hero__eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--accent-soft)}

.hero__head{
  font-family:var(--display);font-weight:300;line-height:.95;letter-spacing:-.022em;
  font-size:clamp(2.95rem,7.6vw,6.5rem);color:var(--on-dark);max-width:16ch;
}
.hero__head em{font-style:italic}
.hero__head .l2{display:block}
.hero__head .mark{
  display:inline-block;width:clamp(40px,5vw,86px);height:1px;background:currentColor;
  vertical-align:middle;margin:0 .22em .22em 0;opacity:.8;
  transform:scaleX(0);transform-origin:left;animation:markIn 1.1s var(--slow) .5s forwards;
}
@keyframes markIn{to{transform:scaleX(1)}}

.hero__sub{
  color:rgba(242,237,230,.84);font-size:var(--t-lead);max-width:42ch;text-wrap:pretty;
}
.hero__act{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;padding-top:clamp(4px,1vw,10px)}
.hero__act .link{color:var(--on-dark)}

.hero__scroll{
  position:absolute;right:var(--gutter);bottom:clamp(44px,8vh,104px);z-index:2;
  display:flex;align-items:center;gap:12px;color:rgba(242,237,230,.6);
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
}
.hero__scroll i{display:block;width:46px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--on-dark);
  transform:translateX(-100%);animation:scrollCue 2.6s var(--ease) infinite;
}
@keyframes scrollCue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- brand ticker under the hero ---------- */
/* no closing margin: the strip is a thin band under the hero, not a section of
   its own, and a full section gap on both sides left it floating in white.
   The block below gives the gap, as it gives it to anything else. */
.ticker{border-bottom:1px solid var(--line-soft);overflow:hidden;background:var(--milk)}
.ticker__in{display:flex;width:max-content;animation:scroll 46s linear infinite}
/* stop the strip while it is being read, used or tabbed through. The hover half
   is for pointers only: a tap leaves :hover stuck on many touch browsers, which
   would park the marquee for good after the first touch. */
@media (hover:hover){
  .ticker:hover .ticker__in{animation-play-state:paused}
}
.ticker:focus-within .ticker__in{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;gap:clamp(26px,3.4vw,56px);padding:15px clamp(13px,1.7vw,28px)}
.ticker__set i{width:3px;height:3px;background:var(--sand);border-radius:50%;flex:none}
.tk{
  font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap;
  padding:4px 0;position:relative;display:inline-block;
  transition:color .3s var(--ease),opacity .3s var(--ease),transform .35s var(--slow);
}
a.tk:hover{color:var(--ink);transform:translateY(-1px)}
a.tk::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--slow);
}
a.tk:hover::after{transform:scaleX(1)}
.tk.is-current{color:var(--ink)}
.tk.is-current::after{transform:scaleX(1);background:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* touch: the strip runs here too. It used to be turned into a row you swiped
   yourself — animation:none, the second set hidden and overflow-x:auto — which
   on a phone just looked like a list that had stopped. The marquee is what says
   the row is alive, and a phone has no hover to say it instead.
   The second set and width:max-content stay, so translateX(-50%) still lands
   exactly one set along and the loop has no seam. */
@media (hover:none){
  .ticker__in{animation-duration:26s}
  .ticker__set{padding-block:6px}  /* the taller tap target carries the height */
  .tk{padding:13px 0}
}
@media (prefers-reduced-motion:reduce){.ticker__in{animation:none}}

@media (max-width:860px){
  .hero__bg img{object-position:64% 34%}
  /* half again as large on a phone: floor, rate and cap all scaled by 1.5,
     so the step is exactly 50% at every width rather than only where the
     clamp happens to land on its middle term. max-width is in ch, so the
     line breaks keep their proportions. */
  .hero__head{font-size:clamp(3.5rem,14.8vw,3.95rem);max-width:12ch}
  .hero__sub{font-size:var(--t-body);max-width:34ch}
  .hero__scroll{display:none}
  .hero__act{gap:18px}
  .hero__act .btn{height:50px}
}
@media (max-width:420px){
  .hero__in{padding-bottom:clamp(36px,6vh,64px)}
  .hero__head{font-size:clamp(3.2rem,15.5vw,3.75rem)}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg img,.hero__head .mark,.hero__scroll i::after{animation:none}
  .hero__head .mark{transform:none}
}