/* ===========================================================================
   Arena Rise — hero layout, stats ticker, theme toggle, and the light mode.

   Loaded last. Dark is the default and is left exactly as the other sheets
   define it; every light-mode rule here is scoped to
   html:not([data-theme="dark"]) so switching cannot leak into the dark look.
   =========================================================================== */

/* ------------------------------------------------------------- hero ------ */
/* the film carries the frame; only the two calls to action sit on it,
   anchored to the bottom of the reading side */
.hero{align-items:flex-end}
.hero__inner{padding-block:0 clamp(56px,9vh,104px)}
.hero__cta{margin-top:0;justify-content:flex-start}

/* ----------------------------------------------------------- ticker ------ */
.ticker{
  position:relative;overflow:hidden;
  /* LTR on the CONTAINER, not the row: an overflowing max-content child is
     placed against the right edge under dir=rtl, which is what walked the
     band off-screen. Direction on the row itself only orders its children. */
  direction:ltr;
  border-block:1px solid var(--site-line);
  padding-block:20px;
  background:var(--site-panel);
  /* the band dissolves into the page at both ends instead of being cut off */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
.ticker__row{display:flex;width:max-content;align-items:center;
  animation:ticker-run 46s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ticker__stat,.ticker__word{
  display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;
  padding-inline:30px;position:relative}
[dir="rtl"] .ticker__stat{direction:rtl}
/* one teal lozenge between every item, drawn on the item rather than as extra
   markup so the cloned half stays identical. Physical `left` because the row
   is always LTR — a logical property would flip per item. */
.ticker__stat::after,.ticker__word::after{
  content:"";position:absolute;left:-3px;top:50%;
  width:5px;height:5px;margin-top:-2.5px;background:var(--ar-teal-400)}

.ticker__stat b{font:var(--fw-black) var(--fs-xl)/1 var(--font-display);color:var(--text-strong)}
.ticker__stat i{font-style:normal;font-size:var(--fs-xs);color:var(--text-muted)}
.ticker__word{font-size:var(--fs-xs);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--text-faint)}

@media (prefers-reduced-motion:reduce){
  .ticker__row{animation:none}
  .ticker{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}

/* ------------------------------------------------------ theme toggle ----- */
.themebtn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:34px;padding:0 12px;cursor:pointer;
  background:transparent;border:1px solid var(--site-line-strong);border-radius:var(--radius-pill);
  font:var(--fw-medium) var(--fs-3xs)/1 var(--font-sans);letter-spacing:var(--ls-wide);
  color:var(--nav-fg,rgba(255,255,255,.62));text-transform:uppercase;
  transition:var(--motion-hover)}
.themebtn:hover{color:var(--nav-fg-on,#fff);border-color:var(--ar-teal-400)}
.themebtn svg{width:15px;height:15px;display:block}
.themebtn__icon{display:none;line-height:0}
/* the button shows the mode it will switch TO */
html[data-theme="dark"] .themebtn__icon--sun{display:block}
html:not([data-theme="dark"]) .themebtn__icon--moon{display:block}
@media (max-width:760px){
  .nav__links .themebtn{align-self:flex-start;margin-top:10px}
}

/* =====================================================  LIGHT MODE  ======= */
/* scoped to the root, not body, so :root and body never disagree about the
   palette — anything reading a --site-* var gets the same answer either way */
html:not([data-theme="dark"]){
  --site-ground:#F7F5F0;
  --site-panel:rgba(255,255,255,.78);
  --site-card:rgba(255,255,255,.94);
  --site-card-hover:#FFFFFF;
  --site-line:rgba(29,29,27,.12);
  --site-line-strong:rgba(29,29,27,.22);
  --nav-fg:var(--text-muted);
  --nav-fg-on:var(--text-strong);
}

/* nav: ink type on ivory, and the colour mark returns */
html:not([data-theme="dark"]) .nav[data-solid="true"]{background:rgba(247,245,240,.88)}
html:not([data-theme="dark"]) .nav .nav__link{color:var(--text-muted)}
html:not([data-theme="dark"]) .nav .nav__link[aria-current="true"]{color:var(--text-strong)}
html:not([data-theme="dark"]) .nav .lockup__word{color:var(--text-strong)}
html:not([data-theme="dark"]) .nav .lockup__tag{color:var(--text-muted)}
html:not([data-theme="dark"]) .nav .mark-color{display:block}
html:not([data-theme="dark"]) .nav .mark-white{display:none}
html:not([data-theme="dark"]) .nav__toggle{color:var(--text-strong);border-color:var(--site-line-strong)}
html:not([data-theme="dark"]) .nav .langbtn,
html:not([data-theme="dark"]) .themebtn{color:var(--text-muted);border-color:var(--site-line-strong)}
html:not([data-theme="dark"]) .nav .langbtn:hover,
html:not([data-theme="dark"]) .themebtn:hover{color:var(--text-strong)}
@media (max-width:760px){
  html:not([data-theme="dark"]) .nav__links{background:rgba(247,245,240,.97)}
}

/* the hero veil stays dark in both modes — it sits on the film, not the page */

html:not([data-theme="dark"]) .step__num{color:var(--ar-n-300)}
html:not([data-theme="dark"]) .service__num,
html:not([data-theme="dark"]) .service__icon{color:var(--ar-teal-600)}
html:not([data-theme="dark"]) .wcard__shot,
html:not([data-theme="dark"]) .pf__shot{background:var(--ar-n-100)}
html:not([data-theme="dark"]) .wcard__more{color:var(--ar-teal-600)}
html:not([data-theme="dark"]) .wcard:hover,
html:not([data-theme="dark"]) .wcard:focus-visible{box-shadow:var(--shadow-md)}
html:not([data-theme="dark"]) .sec-head__top .ar-eyebrow{color:var(--ar-teal-600)}

/* buttons that sat on black need ink type on ivory */
html:not([data-theme="dark"]) .btn--accent{color:var(--text-strong)}
html:not([data-theme="dark"]) .btn--accent:hover{color:var(--ar-ink)}
html:not([data-theme="dark"]) .btn--outline{color:var(--text-strong);border-color:var(--border-default)}
html:not([data-theme="dark"]) .btn--outline:hover{color:var(--ar-ink)}

/* the two dark bands keep their own contrast in either mode */
html:not([data-theme="dark"]) .cta{
  background:linear-gradient(to bottom,rgba(10,46,46,.94),rgba(10,46,46,1))}
html:not([data-theme="dark"]) .footer{background:var(--site-deep)}

/* the whole page cross-fades rather than snapping between modes */
html.theme-shift body,
html.theme-shift .nav,
html.theme-shift .ticker,
html.theme-shift .wcard,
html.theme-shift .service,
html.theme-shift .contact-card,
html.theme-shift .field input,
html.theme-shift .field textarea,
html.theme-shift .field select{
  transition:background-color 420ms var(--ease-standard),
             color 420ms var(--ease-standard),
             border-color 420ms var(--ease-standard)}
@media (prefers-reduced-motion:reduce){
  html.theme-shift *{transition:none!important}
}