/* Rove Overland partner page (rove-overland/index.html) only.
   Ported from the standalone concept page; the proof gate, report and PDF viewer styles were left behind. */
/* page-local: the tow-envelope table and the concept plates */
.envelope{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(30px,4vw,46px)}
.envcard{background:var(--paper);border:1px solid var(--hair);padding:clamp(22px,2.8vw,32px);
  box-shadow:0 30px 60px -44px rgba(14,33,54,.5)}
.envcard h3{font-size:clamp(18px,2vw,23px);margin-bottom:4px}
.envcard .who{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;color:var(--ember);display:block;margin-bottom:18px}
.envrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px}
.envrow:last-child{border-bottom:none}
.envrow b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:10px;color:var(--muted);align-self:center}
.envrow span{font-weight:600;text-align:right}
.envrow.flag span{color:var(--ember)}
.specdl{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:5px;
  transition:color .18s ease,border-color .18s ease}
.specdl:hover{color:var(--ember);border-bottom-color:var(--ember)}
.specdl svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.verdict{margin-top:clamp(26px,3.4vw,38px);border-left:4px solid var(--ember);padding:4px 0 4px 22px;
  display:flex;align-items:center;gap:clamp(30px,5vw,70px)}
.verdict-copy{flex:1 1 auto}
.verdict-mark{flex:0 0 auto;width:clamp(220px,24vw,330px);height:auto}
@media (max-width:940px){ .verdict{display:block} .verdict-mark{display:block;width:220px;margin:26px auto 0} }
.verdict p{font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;color:var(--muted);max-width:70ch}
/* ---- concept HUD: three-tab switcher with tappable feature markers ----
   Replaces the three small plates. One render at full size is what makes the
   markers big enough to hit on a phone, and it saves ~3,000px of page.

   Markers are real <button>s that TOGGLE. Hover is an enhancement layered on
   top for fine pointers only — a hover-only version is dead on a phone, which
   is the device Kris will read this on.

   Coordinates are percentages of the frame, never pixels, so they track the
   render at any width. All three renders are square and the frame is 1/1, so
   `contain` is a no-op and a percentage of the frame is a percentage of the
   image. Crop any replacement render square or every marker drifts.

   Above 700px the note floats beside its marker, on the side that keeps it
   inside the frame (`side-l` / `side-r`, chosen per marker at author time and
   verified in the browser). Below 700px the frame is only ~343px wide, where
   no floating box can be made to fit, so notes drop to a block under the
   image instead. */
.hud{margin-top:clamp(26px,3.4vw,40px)}
/* Orange buttons, not text tabs. The first version was an underlined text
   row and read as a caption — it was missed entirely on first look, which
   is fatal for the one control that reveals two thirds of this section.
   Selected is a solid ember fill; unselected is an ember outline, so all
   three read as buttons at a glance. Hover is a wash rather than a fill,
   or hovering an unselected tab would look identical to the selected one. */
.hud-tabs{display:flex;flex-wrap:wrap;gap:10px}
.hud-tab{appearance:none;cursor:pointer;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;padding:14px 26px;
  background:transparent;color:var(--ember);border:2px solid var(--ember);
  transition:background .18s ease,color .18s ease,transform .18s ease}
.hud-tab:hover{background:rgba(195,84,29,.12);transform:translateY(-2px)}
.hud-tab[aria-selected="true"]{background:var(--ember);color:#fff}
.hud-tab[aria-selected="true"]:hover{background:var(--ember)}
.hud-tab:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

.hud-view[hidden]{display:none}
.hud-stage{position:relative;max-width:840px;margin:clamp(20px,2.6vw,30px) auto 0;
  background:#fff;border:1px solid var(--hair);padding:14px}
.hud-frame{position:relative}
.hud-frame > img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}

.hs{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer;z-index:3;
  border:2px solid #fff;background:var(--ember);
  box-shadow:0 4px 16px rgba(14,33,54,.4);
  transition:transform .2s ease,background .2s ease}
.hs::before,.hs::after{content:"";position:absolute;background:#fff;border-radius:1px;
  top:50%;left:50%;transition:transform .24s ease}
.hs::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.hs::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.hs:hover{transform:translate(-50%,-50%) scale(1.12)}
.hs:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* + becomes x: rotate both bars 45deg, so they cross rather than overlap */
.hs[aria-expanded="true"]{background:var(--navy)}
.hs[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg)}
.hs[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(45deg)}
/* a slow ring so the markers read as interactive without being asked to */
.hs-ring{position:absolute;inset:-9px;border:2px solid var(--ember);border-radius:50%;
  pointer-events:none;animation:hsping 2.8s cubic-bezier(.2,.7,.3,1) infinite}
.hs[aria-expanded="true"] .hs-ring{animation:none;opacity:0}
@keyframes hsping{0%{transform:scale(.72);opacity:.65}70%,100%{transform:scale(1.3);opacity:0}}

/* The notes are a SIBLING of .hud-frame, never a child. As a child they are
   in flow at mobile widths, which grows the frame the moment a note opens —
   and every marker's `top:<pct>` resolves against that frame, so all four
   would slide down the render. Out here the frame is always exactly the
   image, and the markers cannot drift.
   inset:14px is the stage's own padding, so on desktop this box lines up
   with the frame to the pixel and the same percentages still apply. */
.hud-notes{position:absolute;inset:14px;pointer-events:none;z-index:4}
.hs-note{position:absolute;left:var(--x);top:var(--y);width:250px;pointer-events:auto;
  translate:var(--tx,0) -50%;
  background:var(--navy);color:#F4F1DE;padding:15px 17px 16px;
  box-shadow:0 28px 54px -26px rgba(14,33,54,.8);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.hs-note.is-open{opacity:1;visibility:visible;transform:none}
.hs-note.side-r{--tx:0;margin-left:29px}
.hs-note.side-l{--tx:-100%;margin-left:-29px}
.hs-note b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:12px;color:var(--ember-lt);margin-bottom:7px;padding-right:16px}
.hs-note p{font-size:14px;line-height:1.55;color:#E5E1D4}
.hs-x{position:absolute;top:8px;right:8px;width:22px;height:22px;padding:0;cursor:pointer;
  background:none;border:0;color:var(--muted-rev);font-size:17px;line-height:1;
  transition:color .16s ease}
.hs-x:hover{color:#fff}
.hs-x:focus-visible{outline:2px solid var(--ember-lt);outline-offset:1px}
.hud-hint{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.hud-hint b{font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:10.5px;color:var(--ember)}

@media (max-width:699px){
  /* three equal columns rather than flex: the labels are very uneven, and
     left to themselves they wrap to a ragged two rows on a 375px phone */
  .hud-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  .hud-tab{padding:12px 4px;font-size:10.5px;letter-spacing:.04em;text-align:center}
  /* the notes container stops being an overlay and becomes flow content
     under the image, because nothing 250px wide fits beside a marker here.
     It sits after .hud-frame, so the stage grows and the frame does not. */
  .hud-notes{position:static;inset:auto;pointer-events:auto}
  /* relative, not static: .hs-x is absolute, and with a static note it
     anchors to .hud-stage instead and flies to the corner of the render.
     left/top MUST be reset with it — a relatively positioned box still
     honours them, so the marker's own coordinates would shove the note
     off the right edge of a phone. */
  .hs-note{position:relative;left:auto;top:auto;width:auto;translate:none;
    margin:0;display:none;transform:none;transition:none}
  /* .side-l/.side-r are two classes deep, so they outrank the margin:0 above
     and would hang the note 29px past the stage edge */
  .hs-note.side-l,.hs-note.side-r{margin-left:0}
  .hs-note.is-open{display:block;margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .hs-ring{animation:none}
  .hs-note{transition:none;transform:none}
  .hud-tab{transition:none}
  .hud-tab:hover{transform:none}
}

.wildgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(28px,3.6vw,42px)}
.wildgrid figure{position:relative;overflow:hidden}
.wildgrid img{width:100%;height:auto;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.wildgrid figure:hover img{transform:scale(1.04)}
.wildgrid figcaption{margin-top:11px;font-size:13.5px;color:var(--muted)}
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:clamp(26px,3.4vw,40px);background:var(--hair)}
.statline div{background:var(--paper);padding:20px 16px;text-align:center}
.statline b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(22px,3vw,34px);color:var(--navy);line-height:1}
.statline span{display:block;margin-top:7px;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:9.5px;color:var(--muted)}
/* this page runs denser than the main site, where 118px top and bottom
   leaves dead air between sections. Local override only. */
.section{padding:clamp(50px,6vw,84px) 0}
.sec-head{margin-bottom:0}

/* The hero copy sits at about half the hero height, which is where the site
   scrim is thinnest, and the clip peaks at 251 luminance there. Wash the left
   side where the words are and leave the rig on the right bright. */
.ihero .ihero-media::after{
  background:
    linear-gradient(95deg,rgba(14,33,54,.88) 0%,rgba(14,33,54,.52) 44%,rgba(14,33,54,.06) 72%),
    linear-gradient(180deg,rgba(14,33,54,.55) 0%,rgba(14,33,54,.12) 42%,rgba(14,33,54,.86) 100%);
}
@media (max-width:940px){
  /* full-width copy on a phone, so the horizontal wash cannot help */
  .ihero .ihero-media::after{
    background:linear-gradient(180deg,rgba(14,33,54,.74) 0%,rgba(14,33,54,.62) 45%,rgba(14,33,54,.93) 100%);
  }
}

/* the morning clip, sitting beside its copy rather than behind it */
.vidcard-plain{position:relative;margin:0}
.vidcard-plain video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--navy-deep)}
.vidcard-plain::after{content:"";position:absolute;left:0;bottom:auto;top:0;width:64px;height:5px;background:var(--ember)}
.vidcard-plain figcaption{margin-top:14px;font-size:13px;color:var(--muted)}

/* their units */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(26px,3.4vw,40px)}
.gal figure{overflow:hidden}
.gal .g-wide{grid-column:span 2}
.gal img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.logocard.lead{border-color:var(--ember)}


/* ---- parallax reveal band ----
   The video is fixed to the viewport so the section slides over it as you
   scroll, and the copy fades up once the band is roughly half on screen.
   Both effects are driven by a --rb variable that site.js writes. */
/* The video is oversized inside an overflow:hidden box and translated as the
   band crosses the viewport. position:fixed was tried first and is wrong
   here: the band makes a stacking context but does not clip a fixed child,
   so the video painted over the sections above it. */
.revealband{position:relative;min-height:min(96vh,860px);display:flex;align-items:center;
  overflow:hidden;color:#fff;background:var(--navy-deep)}
.rb-media{position:absolute;left:0;right:0;top:-14%;bottom:-14%;overflow:hidden}
.revealband video{width:100%;height:100%;object-fit:cover;display:block;
  transform:translate3d(0,calc(var(--rb-par,0) * 1%),0);will-change:transform}
.rb-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,33,54,.94),rgba(14,33,54,.34) 42%,rgba(14,33,54,.5) 72%,rgba(14,33,54,.95))}
.revealband .wrap{position:relative;z-index:1}
.rb-in{max-width:720px;opacity:var(--rb,0);transform:translateY(calc((1 - var(--rb,0)) * 42px));
  transition:opacity .1s linear,transform .1s linear}
.revealband h2{margin:18px 0 20px;text-shadow:0 6px 34px rgba(0,0,0,.6)}
.revealband p{color:#E5E1D4;font-size:clamp(16px,1.7vw,19px);max-width:62ch}

/* ---- partner logos, matched by eye rather than by height ----
   A tall vertical lockup, a wide wordmark and a horizontal logo with a
   tagline all render very differently under one max-height, so each gets a
   cap tuned so the three read as the same weight. */
/* the base plate is display:block, so a short mark like the Can-Am wordmark
   sat on the baseline with all the slack underneath. Centre it properly. */
.herologos .logoplate{display:inline-flex;align-items:center;justify-content:center;
  min-height:74px;padding:11px 16px}
/* max-height, never height: a fixed height fights the reset's max-width:100%
   and the browser honours both, which squashed the wide Can-Am wordmark from
   5.6:1 to 1.9:1 on narrow cards. */
.herologos .logoplate img,.logocard img{width:auto;height:auto;max-width:100%}
.herologos .logoplate img.logo-wl{max-height:46px}
.herologos .logoplate img.logo-rove{max-height:56px}
.herologos .logoplate img.logo-canam{max-height:26px}
.logocard{min-height:120px}
.logocard .logo-wl{max-height:56px}
.logocard .logo-rove{max-height:70px}
.logocard .logo-canam{max-height:32px}

@media (max-width:940px){
  .envelope,.wildgrid{grid-template-columns:1fr}
  .statline{grid-template-columns:repeat(2,1fr)}
  .revealband{min-height:auto;padding:clamp(70px,16vw,120px) 0}
  .herologos .logoplate img.logo-wl{max-height:34px}
  .herologos .logoplate img.logo-rove{max-height:42px}
  .herologos .logoplate img.logo-canam{max-height:20px}
  /* the gallery kept four columns because .gal was added after this query;
     wide frames go full width, details pair up */
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .g-wide{grid-column:span 2}
  /* three logo cards across 375px left no room for a 5.6:1 wordmark */
  .logocards{grid-template-columns:1fr !important}
  .logocard{min-height:96px}
}
@media (prefers-reduced-motion:reduce){
  .revealband video{transform:none}
  .rb-in{opacity:1;transform:none;transition:none}
}

/* the main stylesheet caps hero plates at 150px on phones, which crushed the tall Rove lockup */
@media (max-width:940px){.herologos .logoplate{max-width:none}}