/*==================================================================================
  GY MARINE — SEAKEEPER RIDE

  A small sheet, scoped to .gyr, sitting on top of the theme. It supplies the
  things the theme has no pattern for: the three-axis diagram, the model table
  and the fitting notes. Everything else on the page uses the theme's own
  section, container and heading classes so it reads as the same publication as
  the Cox and Tohatsu pages.
==================================================================================*/
.gyr {
  --gyr-ink: #101a21;
  --gyr-quiet: #5b6871;
  --gyr-rule: #e2e7ea;
  --gyr-paper-2: #eef2f4;
}

/* ── the opening ────────────────────────────────────────────────────────── */
.gyr-hero {
  position: relative;
  min-height: min(84vh, 780px);
  display: flex; align-items: center;
  overflow: hidden;
  background: #0b141a;
  color: #fff;
}
.gyr-hero-shot { position: absolute; inset: 0; z-index: 0; }
.gyr-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the type sits on the left, so the photograph is darkened hardest there and
   left alone over the controller on the right */
.gyr-hero-shot::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(6, 12, 17, 0.92) 0%, rgba(6, 12, 17, 0.74) 38%, rgba(6, 12, 17, 0.16) 76%, rgba(6, 12, 17, 0.32) 100%),
    linear-gradient(180deg, rgba(6, 12, 17, 0.66) 0%, rgba(6, 12, 17, 0) 30%, rgba(6, 12, 17, 0.5) 100%);
}
/* the hero is a flex row, which makes .container a flex item; without this it
   shrinks to its content instead of taking the theme's width and centring, and
   the hero type stops lining up with every heading further down */
.gyr-hero > .container { width: 100%; }
.gyr-hero-grid {
  position: relative; z-index: 1;
  max-width: 660px;
  margin-left: 0; margin-right: auto;
  padding-block: clamp(70px, 9vw, 120px);
}
@media (max-width: 991px) {
  /* the header floats over the hero, so the eyebrow needs to start below it */
  .gyr-hero-grid { padding-top: 132px; }
}

.gyr-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.gyr-eyebrow i { display: block; width: 34px; height: 1px; background: var(--theme-color); }
.gyr-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(40px, 6vw, 82px); line-height: 0.96;
  letter-spacing: -0.045em; font-weight: 700; color: #fff;
}
.gyr-hero h1 em { font-style: normal; color: var(--theme-color); }
.gyr-hero-line {
  margin: 0 0 34px; max-width: 520px;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.62;
  color: rgba(255, 255, 255, 0.76);
}
.gyr-hero-rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 560px;
}
.gyr-hero-rail > div { padding: 18px 18px 0 0; }
.gyr-hero-rail dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 7px;
}
.gyr-hero-rail dd { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }

/* ── the three-axis diagram ─────────────────────────────────────────────── */
.gyr-axes { width: 100%; height: auto; display: block; }
.gyr-axes .hull { fill: rgba(255, 255, 255, 0.09); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.4; }
.gyr-axes .water { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 5 5; }
.gyr-axes .arc { fill: none; stroke: var(--theme-color); stroke-width: 1.8; stroke-linecap: round; }
.gyr-axes .pin { fill: var(--theme-color); }
.gyr-axes .lbl {
  fill: rgba(255, 255, 255, 0.72); font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.gyr-axes .sub { fill: rgba(255, 255, 255, 0.42); font-size: 7.5px; letter-spacing: 0.06em; }

/* the same diagram again inside the light part of the page */
.gyr-light .gyr-axes .hull { fill: rgba(16, 26, 33, 0.05); stroke: rgba(16, 26, 33, 0.55); }
.gyr-light .gyr-axes .water { stroke: rgba(16, 26, 33, 0.2); }
.gyr-light .gyr-axes .lbl { fill: var(--gyr-ink); }
.gyr-light .gyr-axes .sub { fill: var(--gyr-quiet); }

/* ── the numbers band ───────────────────────────────────────────────────── */
/* ── a dark band for artwork that carries its own white labels ──────────── */
.gyr-panel {
  background: linear-gradient(168deg, #0d1a22 0%, #10222c 60%, #0a141b 100%);
  border-radius: 4px;
  padding: clamp(24px, 3.4vw, 48px);
  margin-bottom: clamp(34px, 4vw, 56px);
}
.gyr-panel img { display: block; width: 100%; height: auto; }
.gyr-panel figcaption {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.62);
}
.gyr-panel figcaption b { color: #fff; font-weight: 600; }

/* ── two product shots side by side ─────────────────────────────────────── */
.gyr-shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-bottom: clamp(34px, 4vw, 56px);
}
@media (max-width: 700px) { .gyr-shots { grid-template-columns: 1fr; } }
.gyr-shot { margin: 0; }
.gyr-shot img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--gyr-rule); border-radius: 3px;
}
.gyr-shot figcaption {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--gyr-quiet);
}

/* ── the axes diagram, given room of its own ────────────────────────────── */
.gyr-axes-box {
  max-width: 620px; margin: 0 0 clamp(30px, 3.6vw, 48px);
}

.gyr-figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}
@media (max-width: 860px) { .gyr-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gyr-fig { border-top: 2px solid var(--theme-color); padding-top: 18px; }
.gyr-fig b {
  display: block;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1;
  letter-spacing: -0.03em; font-weight: 700; color: var(--heading-color);
}
.gyr-fig span {
  display: block; margin-top: 10px;
  font-size: 13px; line-height: 1.55; color: var(--gyr-quiet);
}

/* ── the model table ────────────────────────────────────────────────────── */
/* ── the range ──────────────────────────────────────────────────────────── */
.gyr-models { border-top: 1px solid var(--gyr-rule); }
.gyr-model {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--gyr-rule);
}
@media (max-width: 700px) {
  .gyr-model { grid-template-columns: 128px minmax(0, 1fr); row-gap: 6px; }
  .gyr-model-len { grid-column: 2; }
}
.gyr-model-shot { background: var(--gyr-paper-2); border-radius: 3px; padding: 10px 12px; }
.gyr-model-shot img { display: block; width: 100%; height: auto; }
.gyr-model-name {
  font-size: clamp(16px, 1.7vw, 19px); font-weight: 700;
  letter-spacing: -0.015em; color: var(--heading-color);
}
.gyr-model-len { font-size: 15px; color: var(--font-color); white-space: nowrap; }
.gyr-model-len span { color: var(--gyr-quiet); }

.gyr-table-wrap { overflow-x: auto; }
.gyr-table { width: 100%; min-width: 340px; border-collapse: collapse; }
.gyr-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gyr-table th, .gyr-table td {
  text-align: left; padding: 17px 18px 17px 0;
  border-bottom: 1px solid var(--gyr-rule); font-size: 15px;
}
.gyr-table thead th {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gyr-quiet); padding-bottom: 13px;
}
.gyr-table tbody th { font-weight: 700; color: var(--heading-color); width: 30%; }
.gyr-table td { color: var(--font-color); }
.gyr-alt { color: var(--gyr-quiet); white-space: nowrap; }
.gyr-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--gyr-quiet); }

/* ── fitting and ownership ──────────────────────────────────────────────── */
.gyr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 34px); }
@media (max-width: 760px) { .gyr-facts { grid-template-columns: 1fr; } }
.gyr-fact { padding: 26px 26px 28px; background: var(--gyr-paper-2); border-radius: 3px; }
.gyr-fact h3 {
  margin: 0 0 12px; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--heading-color);
}
.gyr-fact p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--font-color); }
.gyr-fact p + p { margin-top: 12px; }

/* ── the close ──────────────────────────────────────────────────────────── */
.gyr-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.gyr-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 28px; border: 1px solid var(--gyr-rule); border-radius: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--heading-color); text-decoration: none;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.gyr-btn:hover { background: var(--gyr-paper-2); color: var(--heading-color); }
.gyr-btn-solid {
  background: var(--theme-color); border-color: var(--theme-color); color: #fff;
}
.gyr-btn-solid:hover { background: #c9331d; border-color: #c9331d; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gyr-btn { transition: none; }
}