/*==================================================================================
  GY MARINE — ROTO NAUTICA
  Loaded after style.css on index.html, roto-nautica.html and the four model pages.

    A · the video opening
    B · light theme — the rx sections in style.css were authored dark
    C · the model selector, in the manufacturer's own idiom
    D · the "build your boat" invitation
    E · the model pages
    F · the ROTO range band on the home page

  Everything is namespaced (.rx- / .rxm- on the ROTO pages, .gyf- on the home
  page). It consumes the theme tokens style.css publishes — --theme-color,
  --heading-color, --font-color, --border-color — plus the page-local --rx-*
  neutrals declared on .rx.
==================================================================================*/


/*==================================================================================
  A · THE OPENING — the film, held behind four planes of depth

  The film is the deepest plane and moves least; above it a grade, a bloom, a
  vignette and a grain, then the type. Each plane gets its own scroll rate in
  gy-roto-exp.js. With JS off they simply stack and the hero is a still frame.
==================================================================================*/
.rx-open-film {
  position: absolute;
  inset: -7% -2% -12%;
  z-index: 1;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
}
.rx-open-film video,
.rx-open-film img.rx-open-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  display: block;
  /* the film is bright and the page below it is light, so the grade only has
     to be deep enough to hold white type — not enough to make it a night shot */
  filter: saturate(0.98) contrast(1.04) brightness(0.94);
}
.rx-open-fallback { position: absolute; inset: 0; z-index: 0; }
.rx-open-film video { position: relative; z-index: 1; }

/* the scrim: heavy at the left where the wordmark sits, open on the right so
   the boats stay visible */
.rx-open-grade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(7, 11, 15, 0.80) 0%,
      rgba(7, 11, 15, 0.52) 30%,
      rgba(7, 11, 15, 0.12) 62%,
      rgba(7, 11, 15, 0.04) 100%),
    linear-gradient(180deg,
      rgba(7, 11, 15, 0.52) 0%,
      rgba(7, 11, 15, 0.00) 26%,
      rgba(7, 11, 15, 0.18) 62%,
      rgba(7, 11, 15, 0.72) 100%);
}
.rx-open-bloom {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  will-change: transform;
  background: radial-gradient(58% 34% at 64% 42%,
      rgba(168, 214, 234, 0.22) 0%, rgba(168, 214, 234, 0.06) 44%, rgba(168, 214, 234, 0) 72%);
  mix-blend-mode: screen;
}
.rx-open-veil {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(132% 98% at 50% 42%,
              rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.42) 100%);
}
.rx-open-grain {
  position: absolute; inset: -50%; z-index: 5; pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: rx-grain 7s steps(6) infinite;
}
@keyframes rx-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-6%, 4%, 0); }
  40%  { transform: translate3d(4%, -5%, 0); }
  60%  { transform: translate3d(-3%, -3%, 0); }
  80%  { transform: translate3d(5%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.rx .rx-open-type,
.rx .rx-open-foot { z-index: 7; }

.rx-open-rule {
  display: block; width: min(420px, 46vw); height: 1px; margin: 30px 0 26px;
  background: linear-gradient(90deg,
              var(--theme-color) 0%, rgba(255,255,255,0.35) 42%, rgba(255,255,255,0) 100%);
}

/* an autoplaying film needs a stop — WCAG 2.2.2 */
.rx-open-ctl {
  position: absolute; right: var(--rx-gut); bottom: calc(var(--rx-gut) * 0.75);
  z-index: 8;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.42);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.rx-open-ctl:hover { border-color: var(--theme-color); transform: translateY(-2px); }
.rx-open-ctl svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
.rx-open-ctl .rx-ctl-play { display: none; }
.rx-open-ctl[aria-pressed="true"] .rx-ctl-play { display: block; }
.rx-open-ctl[aria-pressed="true"] .rx-ctl-pause { display: none; }

/* the hero resolves into the light page rather than stopping dead */
.rx-open-edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 24vh;
  z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--rx-paper) 97%);
}

@media (max-width: 767px) {
  .rx-open-film { inset: -4% 0 -6%; }
  /* the data rail wraps to two rows on a phone and reaches the bottom of the
     frame, so the control moves up under the site header */
  .rx-open-ctl {
    top: 88px; right: 14px; left: auto; bottom: auto;
    padding: 7px 12px 7px 10px; font-size: 10px; gap: 8px;
  }
}


/*==================================================================================
  B · LIGHT THEME

  The rx sections in style.css were authored as a dark film. These rules turn
  the body of the page over to paper while leaving the opening — which sits on
  video and needs white type — alone. Two paper tones alternate so the sections
  still read as separate movements.
==================================================================================*/
.rx {
  --rx-paper: #ffffff;
  --rx-paper-2: #eef2f4;
  --rx-rule: #e2e7ea;
  --rx-quiet-ink: #5b6871;
}

.rx-light .rx-reveal,
.rx-light .rx-fleet,
.rx-light .rx-peak { background: var(--rx-paper-2); color: var(--heading-color); }
.rx-light .rx-spec,
.rx-light .rx-svc,
.rx-light .rx-proc,
.rx-light .rx-why,
.rx-light .rx-select { background: var(--rx-paper); }

/* headings and rules that were written white */
.rx-light .rx-reveal-head .rx-display,
.rx-light .rx-fleet-head .rx-display,
.rx-light .rx-boat-info h3,
.rx-light .rx-step-t,
.rx-light .rx-peak-lines { color: var(--heading-color); }
.rx-light .rx-peak-lines span { text-shadow: none; }
.rx-light .rx-peak-lines span:nth-child(3) { color: var(--theme-color); }
.rx-light .rx-peak-type::before {
  background: radial-gradient(closest-side,
              rgba(238, 242, 244, 0.92) 0%, rgba(238, 242, 244, 0.55) 54%, rgba(238, 242, 244, 0) 100%);
}
.rx-light .rx-label-inv span { color: var(--heading-color); opacity: 0.4; }
.rx-light .rx-fleet-note { color: var(--rx-quiet-ink); }
.rx-light .rx-steps li,
.rx-light .rx-boat-info dl > div { border-bottom-color: var(--rx-rule); }
.rx-light .rx-step-d,
.rx-light .rx-boat-info dt { color: var(--rx-quiet-ink); }
.rx-light .rx-boat-info dd { color: var(--heading-color); }
.rx-light .rx-boat-cta { color: var(--heading-color); }
.rx-light .rx-boat-cta::after,
.rx-light .rx-rail { background: var(--rx-rule); }
.rx-light .rx-fleet-dots i { background: rgba(0, 0, 0, 0.16); }
.rx-light .rx-fleet-dots i.is-on { background: var(--theme-color); }

/* the boats are white renders on transparent, so on paper they need their own
   shadow to sit down rather than float */
.rx-light .rx-boat-shot img,
.rx-light .rx-layer,
.rx-light .rx-peak-orbit canvas,
.rx-light .rx-peak-orbit img {
  filter: drop-shadow(0 26px 26px rgba(23, 38, 48, 0.28))
          drop-shadow(0 3px 5px rgba(23, 38, 48, 0.14));
}

/* the reveal's caption column had a white rail down it */
.rx-light .rx-rail-fill,
.rx-light #rx-rail-fill { background: var(--theme-color); }


/*==================================================================================
  C · THE RANGE — the manufacturer's own presentation

  Four overhead plates in a row with the model name beneath, the way ROTO
  present the range themselves. Each is a link to that model's own page.
==================================================================================*/
.rx-select { position: relative; padding-block: var(--rx-band); }
.rx-select-head { text-align: center; margin-bottom: clamp(30px, 4vw, 62px); }
.rx-select-head .rx-label { justify-content: center; }
.rx-select-head .rx-display { margin-bottom: 22px; }
.rx-select-head .rx-lede { margin-inline: auto; text-align: center; }

.rx-select-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 30px);
  align-items: end;
}
@media (max-width: 900px) { .rx-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .rx-select-grid { grid-template-columns: 1fr; } }

.rx-pick {
  display: block; text-decoration: none; color: inherit;
  padding: 18px 10px 22px;
  border-radius: 3px;
  transition: background 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.rx-pick:hover, .rx-pick:focus-visible { background: var(--rx-paper-2); transform: translateY(-6px); }

/* the plate. The renders are shot from above in portrait, so the box is tall
   and the hull is centred in it at a common scale. */
.rx-pick-plate {
  display: block; position: relative;
  aspect-ratio: 5 / 7;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.rx-pick-plate img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transform: rotate(-90deg) scale(1.34);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 18px 22px rgba(23, 38, 48, 0.20));
}
.rx-pick:hover .rx-pick-plate img { transform: rotate(-90deg) scale(1.4); }

.rx-pick-name {
  display: block; text-align: center;
  font-family: var(--heading-font, inherit);
  font-size: clamp(17px, 1.42vw, 23px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--heading-color);
  margin-bottom: 7px;
}
.rx-pick-sub {
  display: block; text-align: center;
  font-size: 12.5px; color: var(--rx-quiet-ink);
  font-variant-numeric: tabular-nums;
}
.rx-pick-kicker {
  display: block; text-align: center;
  margin-bottom: 9px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--theme-color);
}
.rx-pick-go {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 15px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--heading-color);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s, transform 0.35s;
}
.rx-pick:hover .rx-pick-go, .rx-pick:focus-visible .rx-pick-go { opacity: 1; transform: none; }
.rx-pick-go i { display: block; width: 24px; height: 1px; background: var(--theme-color); }
@media (hover: none) { .rx-pick-go { opacity: 1; transform: none; } }


/*==================================================================================
  D · BUILD YOUR BOAT — the invitation shown once on arrival

  Held back a few seconds so it does not land on top of the film, dismissable
  by button, backdrop or Escape, and remembered for the session so it does not
  greet the same visitor twice.

  The four renders come off the configurator's own camera at one scale, so the
  Korkyra reads as the biggest boat in the row because it is. Their background
  is --rx-paper-2, which is why the plates are painted that colour: the contact
  shadow under each hull then blends into the plate with nothing to key out.
==================================================================================*/
.rx-invite {
  /* the dialog is a sibling of .rx, not a child, so it does not inherit the
     paper palette declared there — it carries its own copy */
  --rx-paper: #ffffff;
  --rx-paper-2: #eef2f4;
  --rx-rule: #e2e7ea;
  --rx-quiet-ink: #5b6871;

  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  /* visibility is switched outright rather than transitioned: a transitioned
     visibility stays computed-hidden while it runs, and focus() on a hidden
     element is a no-op, which left the keyboard out on the page behind */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.rx-invite.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}
.rx-invite-veil {
  position: absolute; inset: 0;
  background: rgba(9, 14, 18, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rx-invite-card {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(30px, 3.4vw, 44px) clamp(22px, 3vw, 40px) clamp(16px, 1.8vw, 22px);
  background:
    radial-gradient(120% 62% at 50% -8%, #f7fafb 0%, rgba(247, 250, 251, 0) 66%),
    var(--rx-paper);
  border: 1px solid var(--rx-rule);
  border-radius: 6px;
  box-shadow: 0 60px 110px -46px rgba(6, 12, 17, 0.72);
  transform: translateY(20px) scale(0.982);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rx-invite.is-open .rx-invite-card { transform: none; }

/* the head, centred — the grid below it is symmetrical, and a modal reads
   better balanced than ranged left */
.rx-invite-head { text-align: center; max-width: 520px; margin: 0 auto clamp(20px, 2.3vw, 30px); }
.rx-invite-head .rx-label { justify-content: center; margin-bottom: 15px; }
.rx-invite-head h2 {
  margin: 0 0 13px;
  font-family: var(--heading-font, inherit);
  font-size: clamp(26px, 3vw, 38px); line-height: 1.03;
  letter-spacing: -0.035em; font-weight: 700;
  color: var(--heading-color);
}
.rx-invite-lede {
  margin: 0;
  font-size: 14px; line-height: 1.68; color: var(--rx-quiet-ink);
}

/* four across wherever there is room: on one camera at one scale the row is a
   size chart as well as a chooser — the Korkyra really is half again the 450 */
.rx-invite-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(9px, 1.1vw, 14px);
}
@media (max-width: 760px) { .rx-invite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-invite-pick, .rx-invite-pick:hover, .rx-invite-pick:focus {
  text-decoration: none;              /* the theme underlines links on focus */
}
.rx-invite-pick {
  display: block;
  border: 1px solid var(--rx-rule); border-radius: 4px;
  background: var(--rx-paper);
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rx-invite-pick:hover, .rx-invite-pick:focus-visible {
  border-color: rgba(20, 38, 50, 0.28);
  box-shadow: 0 18px 34px -22px rgba(9, 18, 26, 0.5);
  transform: translateY(-3px);
}
/* a real ring for the keyboard, rather than recolouring the card's own border */
.rx-invite-pick:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
}

.rx-invite-plate {
  display: block; background: var(--rx-paper-2);
  aspect-ratio: 200 / 142; overflow: hidden;
}
.rx-invite-plate img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rx-invite-pick:hover .rx-invite-plate img { transform: scale(1.045); }

.rx-invite-txt {
  display: block;
  padding: 12px 13px 14px;
  border-top: 1px solid var(--rx-rule);
}
.rx-invite-name {
  display: block;
  font-family: var(--heading-font, inherit);
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--heading-color);
  transition: color 0.3s;
}
.rx-invite-pick:hover .rx-invite-name { color: var(--theme-color); }
.rx-invite-sub {
  display: block; margin-top: 4px;
  font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; color: var(--rx-quiet-ink);
}

.rx-invite-foot {
  display: flex; flex-wrap: wrap; gap: 2px 18px;
  align-items: center; justify-content: space-between;
  margin-top: clamp(16px, 2vw, 22px);
  padding-top: 4px;
  border-top: 1px solid var(--rx-rule);
}
.rx-invite-later, .rx-invite-all {
  font-size: 11px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 14px 2px; background: none; border: 0; cursor: pointer; text-decoration: none;
}
.rx-invite-later { color: var(--rx-quiet-ink); transition: color 0.3s; }
.rx-invite-later:hover { color: var(--heading-color); }
.rx-invite-all {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--heading-color);
}
.rx-invite-all i {
  display: block; width: 26px; height: 1px; background: var(--theme-color);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rx-invite-all:hover { color: var(--theme-color); }
.rx-invite-all:hover i { width: 40px; }

.rx-invite-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--rx-rule); background: var(--rx-paper);
  color: var(--heading-color); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.rx-invite-x:hover { background: var(--theme-color); border-color: var(--theme-color); color: #fff; }
.rx-invite-x svg { width: 11px; height: 11px; }

/* on a handset the dialog is the page: the type steps down and the four boats
   stay two-up, which keeps them comparable rather than a long scroll */
@media (max-width: 560px) {
  .rx-invite { padding: 12px; }
  .rx-invite-card { padding: 30px 16px 14px; border-radius: 5px; }
  .rx-invite-lede { font-size: 13px; }
  .rx-invite-txt { padding: 10px 11px 12px; }
  .rx-invite-name { font-size: 14px; }
  .rx-invite-sub { font-size: 10.5px; }
  .rx-invite-foot { justify-content: center; gap: 0 14px; }
  .rx-invite-later, .rx-invite-all { padding: 11px 2px; }
}


/*==================================================================================
  E · MODEL PAGES

  One template, four boats. Reuses .rx-wrap, .rx-label, .rx-display, .rx-lede
  and .rx-btn from style.css so a model page and the range page are visibly the
  same publication.
==================================================================================*/
.rxm-hero {
  position: relative;
  min-height: min(74vh, 720px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--rx-ink);
  isolation: isolate;
}
.rxm-hero-shot { position: absolute; inset: 0; z-index: 0; }
.rxm-hero-shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95) contrast(1.04) brightness(0.9);
}
.rxm-hero-shot::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7,11,15,0.82) 0%, rgba(7,11,15,0.46) 40%, rgba(7,11,15,0.06) 78%),
    linear-gradient(180deg, rgba(7,11,15,0.46) 0%, rgba(7,11,15,0) 32%, rgba(7,11,15,0.72) 100%);
}
.rxm-hero-type { position: relative; z-index: 1; width: 100%; padding-block: clamp(46px, 6vw, 96px); }
.rxm-hero-type .rx-label { color: #fff; }
.rxm-hero-type .rx-label span { color: #fff; opacity: 0.5; }
.rxm-hero h1 {
  margin: 0 0 16px;
  font-family: var(--heading-font, inherit);
  font-size: clamp(40px, 6.6vw, 96px); line-height: 0.9;
  letter-spacing: -0.04em; font-weight: 700; color: #fff;
}
.rxm-hero-line {
  margin: 0; max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.rxm-key {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px; margin-top: clamp(28px, 3.4vw, 46px);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.rxm-key > div { padding: 18px 20px 0 0; }
.rxm-key > div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.rxm-key dt {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); margin-bottom: 6px;
}
.rxm-key dd {
  margin: 0; font-size: clamp(14px, 1.15vw, 18px); font-weight: 600;
  color: #fff; letter-spacing: -0.01em;
}
@media (max-width: 620px) {
  .rxm-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rxm-key > div:nth-child(3), .rxm-key > div:nth-child(4) {
    border-top: 1px solid rgba(255,255,255,0.14); margin-top: 14px; padding-top: 14px;
  }
  .rxm-key > div:nth-child(3) { border-left: 0; padding-left: 0; }
}

.rxm-sec { padding-block: var(--rx-band); }
.rxm-sec-alt { background: var(--rx-paper-2); }

.rxm-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 88px);
  align-items: start;
}
@media (max-width: 900px) { .rxm-split { grid-template-columns: 1fr; } }
/* The two columns are never the same length — the copy runs long on the Korkyra
   and short on the 450 — so whichever finished first left a hole beside the
   other. Letting the specification travel with the reader fills it in both
   directions: on a long page the table stays in view while the copy scrolls
   past, and on a short one it simply sits where it always did. The offset
   clears the header when it reveals itself on an upward scroll. */
@media (min-width: 901px) {
  .rxm-split > :last-child { position: sticky; top: clamp(96px, 12vh, 128px); }
}
.rxm-copy p { margin: 0 0 20px; font-size: var(--rx-body); line-height: 1.78; color: var(--font-color); }
.rxm-copy p:last-child { margin-bottom: 0; }
.rxm-copy h3 {
  margin: 34px 0 14px; font-size: var(--rx-h3); font-weight: 700;
  letter-spacing: -0.02em; color: var(--heading-color);
}
.rxm-copy h3:first-child { margin-top: 0; }

/* the specification table */
.rxm-spec { width: 100%; border-collapse: collapse; }
.rxm-spec th, .rxm-spec td {
  text-align: left; padding: 15px 0; border-bottom: 1px solid var(--rx-rule);
  font-size: 14.5px;
}
.rxm-spec th { font-weight: 400; color: var(--rx-quiet-ink); width: 46%; }
.rxm-spec td { font-weight: 600; color: var(--heading-color); font-variant-numeric: tabular-nums; }
.rxm-spec-note { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--rx-quiet-ink); }

/* The deck plan used to sit at the foot of the specification column, where a
   784px-tall portrait drawing hung some 600px below everything else and left
   the copy column looking abandoned — the gap between 01 and 02. Rotated to
   bow-left and given a band of its own under both columns, it fills that space
   instead of creating it, and the two columns above now finish within about
   70px of each other. */
.rxm-plan {
  margin: clamp(34px, 4vw, 58px) 0 0;
  padding: clamp(22px, 2.6vw, 38px) clamp(18px, 3vw, 44px);
  background: var(--rx-paper-2);
  border-radius: 3px;
  text-align: center;
}
.rxm-plan img {
  display: block; width: 100%; height: auto;
  max-width: 780px; margin-inline: auto;
  mix-blend-mode: multiply;        /* the drawing's white ground meets the panel */
}
.rxm-plan figcaption {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--rx-quiet-ink);
}

/* variants */
.rxm-variants {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
  margin-top: clamp(30px, 3.6vw, 54px);
}
.rxm-var {
  padding: 26px 24px 28px;
  background: var(--rx-paper);
  border: 1px solid var(--rx-rule);
  border-radius: 3px;
}
.rxm-sec-alt .rxm-var { background: #fff; }
.rxm-var h3 {
  margin: 0 0 6px; font-size: var(--rx-h3); font-weight: 700;
  letter-spacing: -0.02em; color: var(--heading-color);
}
.rxm-var-use {
  display: block; margin-bottom: 16px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--theme-color);
}
.rxm-var ul { margin: 0; padding: 0; list-style: none; }
.rxm-var li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.6; color: var(--font-color);
}
.rxm-var li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: var(--theme-color);
}
.rxm-var .rx-btn { margin-top: 20px; width: 100%; }

/* equipment columns */
.rxm-equip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 44px; }
.rxm-equip ul { margin: 0; padding: 0; list-style: none; columns: 1; }
.rxm-equip li {
  position: relative; padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--rx-rule);
  font-size: 14px; color: var(--font-color);
}
.rxm-equip li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 8px; height: 1px; background: var(--theme-color);
}
.rxm-equip h3 {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--heading-color);
}

/* the manufacturer's claim badges */
.rxm-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(28px, 3vw, 44px);
}
.rxm-badges span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--rx-rule); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rx-quiet-ink);
}
.rxm-badges span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--theme-color); flex: none;
}

/* gallery */
.rxm-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); }
@media (max-width: 760px) { .rxm-gallery { grid-template-columns: 1fr; } }
.rxm-gallery figure { margin: 0; overflow: hidden; background: var(--rx-paper-2); border-radius: 3px; }
.rxm-gallery img {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.rxm-gallery figure:hover img { transform: scale(1.05); }

/* other models, at the foot of each model page — the same overhead plates as
   the range page, held to a sensible size in a three-column row */
.rxm-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 26px); }
@media (max-width: 760px) { .rxm-more { grid-template-columns: 1fr; } }
.rxm-more .rx-pick-plate { max-width: 290px; margin-inline: auto; }


/*==================================================================================
  F · HOME PAGE — the ROTO range band

  Light, on a still lifted from the intro film, with the four overhead renders
  on paper plates.
==================================================================================*/
.gyf {
  position: relative;
  overflow: hidden;
  background: #f4f6f7;
  isolation: isolate;
}
/* the film still, held well back so the type stays comfortable over it */
.gyf-bg { position: absolute; inset: 0; z-index: 0; }
.gyf-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.gyf-bg::after {
  content: ""; position: absolute; inset: 0;
  /* enough white to carry dark type over the sea, little enough that the
     boats still read behind the heading */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.62) 0%,
      rgba(255,255,255,0.80) 26%,
      rgba(255,255,255,0.94) 58%,
      rgba(255,255,255,0.99) 100%);
}
.gyf > .container { position: relative; z-index: 1; }

.gyf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 26px);
}
@media (max-width: 1100px) { .gyf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .gyf-grid { grid-template-columns: 1fr; } }

.gyf-card { position: relative; display: block; perspective: 1100px; text-decoration: none; color: inherit; }
.gyf-inner {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e9ec;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s, box-shadow 0.5s;
  box-shadow: 0 14px 30px -24px rgba(20, 38, 50, 0.5);
}
.gyf-card:hover .gyf-inner,
.gyf-card:focus-visible .gyf-inner {
  border-color: #cdd6db;
  box-shadow: 0 40px 60px -34px rgba(20, 38, 50, 0.55);
}

.gyf-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f7f9fa; }
.gyf-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.gyf-card:hover .gyf-shot img { transform: scale(1.07); }
.gyf-no {
  position: absolute; top: 13px; left: 15px; z-index: 3;
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  color: rgba(20, 38, 50, 0.42);
  font-variant-numeric: tabular-nums;
  transform: translateZ(36px);
}

.gyf-body {
  position: relative; z-index: 3;
  padding: 18px 20px 22px;
  border-top: 1px solid #eef2f4;
  transform: translateZ(20px);
}
.gyf-kicker {
  display: block; margin: 0 0 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--theme-color);
}
.gyf-body h3 {
  margin: 0 0 12px;
  font-size: clamp(19px, 1.5vw, 25px); line-height: 1; letter-spacing: -0.02em;
  color: #10181e;
}
.gyf-nums {
  display: flex; flex-wrap: wrap; gap: 5px 13px; margin: 0;
  font-size: 12.5px; color: #5b6871;
  font-variant-numeric: tabular-nums;
}
.gyf-nums span + span { padding-left: 13px; border-left: 1px solid #e4e9ec; }

.gyf-go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #10181e;
}
.gyf-go i {
  display: block; width: 22px; height: 1px; background: var(--theme-color);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gyf-card:hover .gyf-go i { width: 40px; }

.gyf-glow {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity 0.45s;
  background: radial-gradient(30% 42% at var(--gx, 50%) var(--gy, 40%),
              rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: overlay;
}
.gyf-card:hover .gyf-glow { opacity: 1; }

.gyf-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px;
  margin-top: clamp(30px, 3.4vw, 52px);
  padding-top: clamp(22px, 2.4vw, 34px);
  border-top: 1px solid #e0e6ea;
}
.gyf-foot p { margin: 0; margin-right: auto; max-width: 56ch; color: #4a5760; }
.gyf-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #10181e; text-decoration: none;
}
.gyf-link::after {
  content: ""; width: 22px; height: 1px; background: var(--theme-color);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gyf-link:hover { color: var(--theme-color); }
.gyf-link:hover::after { width: 38px; }

@media (hover: none) { .gyf-inner, .rx-pick { transform: none !important; } }


/*==================================================================================
  the slide, once the fleet moved out of it
==================================================================================*/
.slide-content.gy-roto-hero.gy-roto-hero-lean > .content { max-width: 940px; }
.gy-roto-hero-lean .gy-roto-hero-head { display: block; }
.gy-roto-hero-lean .gy-roto-lead { max-width: 60ch; }
.gy-roto-hero-lean .gy-roto-cta { margin-top: clamp(26px, 3vw, 44px); }


@media (prefers-reduced-motion: reduce) {
  .rx-open-grain { animation: none; }
  .rx-pick, .gyf-inner, .gyf-shot img, .rx-pick-plate img, .rx-invite-card { transition: none; }
}


/*==================================================================================
  G · THE ROTO SLIDE, BACK IN THE TEMPLATE'S OWN COLUMN

  style.css gives .slide-content.gy-roto-hero position:absolute + inset:0, which
  pulled it out of the slider's .dsn-container and started its type at 92px while
  the Cox and Tohatsu slides start at the container's own margin — 223px at
  1440, and a percentage of the viewport below that. It needed the full width
  when the fleet grid lived in the slide; that grid now has its own section, so
  the slide can sit where every other slide sits.
==================================================================================*/
.dsn-slider .dsn-root-slider .dsn-slider-content .slide-content.gy-roto-hero.gy-roto-hero-lean {
  position: absolute;
  inset: auto;
  display: block;
  padding: 40px 0;
}
.slide-content.gy-roto-hero.gy-roto-hero-lean > .content {
  width: auto;
  max-width: 640px;
  padding: 0;
}