/* ============================================================
   BENT ROD CHARTERS — demo
   Direction taken from solhaugmaritim.no: blue-hour maritime,
   heavy restraint, spec-driven cards, calm. Deliberately NOT the
   standard charter site (grip-and-grin hero, yellow BOOK NOW).
   A captain selling competence, not excitement.

   Palette is sampled off the hero frame: near-black navy ground,
   ice for type, one warm dawn accent taken from the band of light
   on the horizon so the accent belongs to the photograph.
   ============================================================ */

:root{
  --deep:    #08161F;
  --navy:    #0D2436;
  --navy-2:  #12304A;
  --surface: #10293C;
  --line:    rgba(233,240,245,.13);
  --line-2:  rgba(233,240,245,.26);

  --ice:     #E9F0F5;
  --ice-2:   #A9BDCB;
  --slate:   #6C8598;

  --dawn:    #D9A05B;
  --dawn-2:  #EBBB7E;
  --dawn-dim:rgba(217,160,91,.14);

  /* Display is Bevan: a vintage slab, the tackle-label and painted-
     harbour-sign family. It answers the brief for rugged without
     costume, and it echoes the serif already on Anthony's own
     business card, so it continues his identity rather than
     replacing it. Bevan ships ONE weight (400) — never ask for 700
     or the browser synthesises a smeared fake bold. */
  --disp: "Bevan", Georgia, "Times New Roman", serif;
  --sans: "Barlow", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1240px;
  --gap:  clamp(64px, 9vw, 132px);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; background:var(--deep); color:var(--ice);
  font-family:var(--sans); font-size:16.5px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 26px; }
.section{ padding:var(--gap) 0; }

/* ── type ─────────────────────────────────────────────────── */
.eyebrow{
  display:block; font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0 0 20px;
}
.eyebrow--dawn{ color:var(--dawn); }
h1,h2,h3{ font-family:var(--disp); font-weight:400; letter-spacing:0;
  margin:0; text-wrap:balance; }
h2{ font-size:clamp(30px,4vw,50px); line-height:1.1; }
h3{ font-size:clamp(19px,2vw,23px); line-height:1.28; letter-spacing:0; }
p{ margin:0 0 18px; color:var(--ice-2); }
p:last-child{ margin-bottom:0; }
.lede{ font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--ice); max-width:60ch; }
strong{ color:var(--ice); font-weight:500; }

/* placeholder marker: everything invented is labelled, nothing pretends */
.ph{
  display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dawn);
  border:1px solid rgba(217,160,91,.4); padding:2px 6px; vertical-align:2px;
  margin-left:8px; white-space:nowrap;
}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:50px; padding:0 26px; border:1px solid transparent; border-radius:2px;
  font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:.01em;
  cursor:pointer; white-space:nowrap; transition:all .25s var(--ease);
}
.btn--dawn{ background:var(--dawn); color:#0A1A24; }
.btn--dawn:hover{ background:var(--dawn-2); transform:translateY(-1px); }
.btn--ghost{ border-color:var(--line-2); color:var(--ice); background:rgba(233,240,245,.04); }
.btn--ghost:hover{ border-color:var(--ice); background:rgba(233,240,245,.09); }
.btn--sm{ height:40px; padding:0 18px; font-size:13.5px; }

/* ── notice ───────────────────────────────────────────────── */
.notice{
  background:var(--dawn-dim); border-bottom:1px solid rgba(217,160,91,.28);
  font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ice-2);
  text-align:center; padding:11px 24px;
}
.notice strong{ color:var(--dawn-2); font-weight:400; }

/* ── nav ──────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:100; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease); }
.nav.is-stuck{ background:rgba(8,22,31,.9); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; gap:28px; height:84px; }
.brand{ display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.brand__name{ font-family:var(--disp); font-size:18px; font-weight:400; letter-spacing:.012em; }
.brand__sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--slate); }
.nav__links{ display:flex; gap:26px; margin-left:auto; align-items:center; }
.nav__links a:not(.btn){ font-size:14.5px; color:var(--ice-2); transition:color .25s var(--ease); }
.nav__links a:not(.btn):hover{ color:var(--ice); }

/* ── hero ─────────────────────────────────────────────────── */
.hero{ position:relative; min-height:min(92vh,880px); display:flex; flex-direction:column;
  justify-content:flex-end; margin-top:-84px; padding-top:84px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0;
  background:var(--deep) url("assets/img/hero-poster.jpg") center/cover no-repeat; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(8,22,31,.97) 0%, rgba(8,22,31,.72) 30%, rgba(8,22,31,.18) 62%, rgba(8,22,31,.5) 100%),
    linear-gradient(to right, rgba(8,22,31,.72) 0%, rgba(8,22,31,.05) 60%); }
.hero__inner{ position:relative; z-index:2; padding-bottom:56px; }
.hero__title{ font-size:clamp(36px,5.4vw,74px); line-height:1.08; letter-spacing:-.004em;
  font-weight:400; margin:0 0 22px; max-width:15ch; }
.hero__title em{ font-style:normal; color:var(--dawn-2); }
.hero__lede{ max-width:50ch; font-size:clamp(16px,1.5vw,18.5px); color:var(--ice-2); margin:0 0 32px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* status strip under the hero: what is running right now */
.strip{ position:relative; z-index:2; border-top:1px solid var(--line);
  background:rgba(8,22,31,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.strip__inner{ display:flex; flex-wrap:wrap; gap:12px 40px; padding:18px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--slate); align-items:center; }
.strip b{ font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ice); }
.dot{ display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--dawn); margin-right:8px; vertical-align:1px; }

/* ── the two fisheries ────────────────────────────────────── */
.waters{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.water{ position:relative; background:var(--navy); overflow:hidden;
  display:flex; flex-direction:column; min-height:440px; }
.water__img{ position:absolute; inset:0; }
.water__img img{ width:100%; height:100%; object-fit:cover; opacity:.5;
  transition:opacity .5s var(--ease), transform .7s var(--ease); }
.water:hover .water__img img{ opacity:.62; transform:scale(1.03); }
.water::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,22,31,.96) 8%, rgba(8,22,31,.35) 70%); }
.water__body{ position:relative; z-index:2; margin-top:auto; padding:34px 34px 32px; }
.water__where{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dawn); margin:0 0 12px; }
.water__name{ font-family:var(--disp); font-size:clamp(23px,2.5vw,31px); font-weight:400; letter-spacing:0; margin:0 0 12px; }
.water__meta{ font-size:14.5px; color:var(--ice-2); margin:0 0 20px; max-width:38ch; }
.water__link{ display:inline-flex; align-items:center; gap:9px; font-size:14px;
  color:var(--dawn-2); border-bottom:1px solid rgba(235,187,126,.34);
  padding-bottom:4px; transition:gap .3s var(--ease); }
.water:hover .water__link{ gap:15px; }

/* ── data rows (seasons, specs) ───────────────────────────── */
.rows{ border-top:1px solid var(--line); margin-top:34px; }
.row{ display:grid; grid-template-columns:190px 1fr 180px; gap:24px;
  padding:19px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.row__k{ font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate); }
.row__v{ font-size:15.5px; color:var(--ice); }
.row__n{ font-family:var(--mono); font-size:11px; color:var(--slate); line-height:1.55; }

/* ── section with a photographic ground ───────────────────
   The image sits in an absolutely positioned layer inside the
   section, NOT as a 100vw child. A 100vw element inside a body
   that hides overflow-x turns the body into the scroller and
   kills vertical scrolling on some browsers. Learned on Luna.   */
.sec--sea{ position:relative; isolation:isolate; overflow:hidden; }
.sec--sea__bg{ position:absolute; inset:0; z-index:0; }
.sec--sea__bg img{ width:100%; height:100%; object-fit:cover; opacity:.78; }
.sec--sea::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--deep) 0%, rgba(8,22,31,.30) 14%, rgba(8,22,31,.30) 86%, var(--deep) 100%),
    linear-gradient(to right, rgba(8,22,31,.88) 0%, rgba(8,22,31,.66) 38%, rgba(8,22,31,.10) 72%);
}
.sec--sea > .wrap{ position:relative; z-index:2; }

/* ── split ────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.split__media img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:2px; }
.split--flip .split__media{ order:2; }

/* ── rate cards ───────────────────────────────────────────── */
.rates{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
/* a lone card on the final row centres instead of hanging off the left.
   Excludes the feature card, which spans the full width by design and
   whose lower specificity would otherwise lose to this selector. */
.rates > .rate:last-child:nth-child(3n+1):not(.rate--feature){ grid-column:2; }
.rate{ background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:28px 26px 30px; display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease); }
.rate:hover{ border-color:var(--line-2); transform:translateY(-3px); }

/* Seven trips into a three column grid leaves an orphan on the last row, so the
   biggest trip on the card takes the full width and lays out sideways. It is
   the one people come for, so it earns the room rather than being padded to fit. */
.rate--feature{ grid-column:1 / -1; flex-direction:row; align-items:center;
  gap:38px; flex-wrap:wrap;
  background:linear-gradient(90deg, var(--surface) 0%, rgba(217,160,91,.06) 100%);
  border-color:var(--line-2); }
.rate--feature .rate__where{ margin-bottom:8px; }
.rate--feature .rate__name{ margin:0; }
.rate--feature .rate__hours{ margin:4px 0 0; }
.rate--feature .rate__price{ margin:0 0 0 auto; white-space:nowrap; }
.rate--feature .rate__list{ margin:0; border-top:0; padding-top:0;
  border-left:1px solid var(--line); padding-left:38px; }

@media (max-width:900px){
  .rate--feature{ flex-direction:column; align-items:flex-start; gap:0; }
  .rate--feature .rate__price{ margin:18px 0 0; }
  .rate--feature .rate__list{ border-left:0; padding-left:0; }
}
.rate__where{ font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dawn); margin:0 0 14px; }
.rate__name{ font-family:var(--disp); font-size:20px; font-weight:400; letter-spacing:.004em; margin:0 0 6px; }
.rate__hours{ font-family:var(--mono); font-size:11.5px; color:var(--slate); margin:0 0 22px; }
.rate__price{ font-family:var(--disp); font-size:34px; font-weight:400; letter-spacing:0; margin:0 0 4px;
  font-variant-numeric:tabular-nums; }
.rate__price span{ font-family:var(--sans); font-size:14px; color:var(--slate); font-weight:400; letter-spacing:0; }
.rate__list{ list-style:none; margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; }
.rate__list li{ font-size:14px; color:var(--ice-2); padding-left:18px; position:relative; }
.rate__list li::before{ content:''; position:absolute; left:0; top:9px;
  width:6px; height:1px; background:var(--dawn); }

/* ── gallery ──────────────────────────────────────────────
   His own photos, so the grid stays plain and lets them talk.
   Four up, fixed columns rather than auto-fit: auto-fit quietly
   becomes five on a wide screen and the rhythm goes.            */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:44px; }
.gal figure{ margin:0; position:relative; overflow:hidden; background:var(--navy); border-radius:2px; }
.gal img{ width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform .6s var(--ease), filter .4s var(--ease); filter:saturate(.94); }
.gal figure:hover img{ transform:scale(1.045); filter:saturate(1.02); }
/* two of them run tall so the grid is not a flat wall of squares */
.gal figure.tall{ grid-row:span 2; }
.gal figure.tall img{ aspect-ratio:3/8; }

/* ── captain ──────────────────────────────────────────────── */
.capt__quote{
  font-family:var(--disp); font-size:clamp(20px,2.2vw,27px); line-height:1.4; letter-spacing:0;
  color:var(--ice); font-weight:400; margin:0 0 24px; text-wrap:balance;
}
.capt__quote::before{ content:'\201C'; color:var(--dawn); margin-right:2px; }
.capt__quote::after{ content:'\201D'; color:var(--dawn); }
.capt__by{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); }

/* ── faq ──────────────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); margin-top:40px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--disp); font-size:16.5px; font-weight:400; color:var(--ice); transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--dawn-2); }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--dawn); border-bottom:1.5px solid var(--dawn);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq .a{ padding:0 60px 24px 0; color:var(--ice-2); font-size:15.5px; line-height:1.65; }
.faq .a p{ margin:0 0 12px; }
.faq .a p:last-child{ margin:0; }

/* ── booking ──────────────────────────────────────────────── */
.book{ background:var(--navy); border-top:1px solid var(--line); }
.book__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.form{ display:flex; flex-direction:column; gap:15px; }
.field label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--deep); color:var(--ice); border:1px solid var(--line);
  border-radius:2px; padding:13px 15px; font-family:var(--sans); font-size:15px;
  transition:border-color .25s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--dawn); }
.field textarea{ min-height:104px; resize:vertical; }
.form__note{ font-family:var(--mono); font-size:10.5px; color:var(--slate); margin:2px 0 0; line-height:1.6; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }

/* ── footer ───────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--line); padding:56px 0 44px; }
.footer__inner{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px; }
.footer h4{ font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); margin:0 0 15px; }
.footer a, .footer p{ display:block; font-size:14.5px; color:var(--ice-2); margin:0 0 9px; }
.footer a:hover{ color:var(--ice); }
.legal{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--slate); line-height:1.75; }

@media (max-width:900px){
  .waters,.split,.book__inner,.rates{ grid-template-columns:1fr; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal figure.tall{ grid-row:span 1; }
  .gal figure.tall img{ aspect-ratio:3/4; }
  .split--flip .split__media{ order:0; }
  .row{ grid-template-columns:1fr; gap:7px; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .nav__links a:not(.btn){ display:none; }
}
@media (max-width:560px){
  .footer__inner,.two{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ============================================================
   MOTION
   Added Aug 30. The brief was "add animation", but the whole
   direction is Solhaug restraint, so nothing here bounces,
   slides sideways or draws attention to itself. It is a rise
   and a fade, a slow drift on the hero, and that is all.

   Three safety rules, in order of importance:
   1. The hidden state is scoped to .anim, a class JS adds to
      <html>. No JS, no hiding — the page is fully readable.
   2. The hidden state ALSO sits inside
      prefers-reduced-motion:no-preference. The global reduce
      rule below kills transitions, so without this scoping a
      reduced-motion visitor would be left with opacity:0
      content and no transition to bring it back.
   3. Transform and opacity only, so it stays on the compositor.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  .anim .reveal{
    opacity:0; transform:translateY(20px);
    transition:opacity .7s var(--ease), transform .8s var(--ease);
    transition-delay:calc(var(--d,0) * 70ms);
    will-change:opacity, transform;
  }
  .anim .reveal.is-in{ opacity:1; transform:none; will-change:auto; }

  /* images rise a touch further and settle a touch slower, so a
     photo never arrives before the heading that introduces it */
  .anim .reveal--media{ transform:translateY(30px) scale(1.015); }
  .anim .reveal--media.is-in{ transform:none; }

  /* hero: one staggered entrance on load, no scroll trigger */
  .anim .hero__inner > *{
    opacity:0; transform:translateY(22px);
    animation:heroIn .95s var(--ease) forwards;
  }
  .anim .hero__inner > *:nth-child(1){ animation-delay:.15s; }
  .anim .hero__inner > *:nth-child(2){ animation-delay:.27s; }
  .anim .hero__inner > *:nth-child(3){ animation-delay:.39s; }
  .anim .hero__inner > *:nth-child(4){ animation-delay:.51s; }
  .anim .strip{ opacity:0; animation:heroIn .9s var(--ease) .66s forwards; }
  @keyframes heroIn{ to{ opacity:1; transform:none; } }

  /* a very slow push on the hero frame. 1.5% over 24s reads as the
     boat holding way on, not as a zoom. */
  .anim .hero__media img{ animation:drift 24s var(--ease) infinite alternate; }
  @keyframes drift{
    from{ transform:scale(1.005); }
    to  { transform:scale(1.045) translateY(-.8%); }
  }

  /* the "running now" dot actually pulses */
  .anim .dot{ animation:pulse 2.6s ease-in-out infinite; }
  @keyframes pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(217,160,91,.5); }
    70%    { box-shadow:0 0 0 7px rgba(217,160,91,0); }
  }
}

/* lift on the cards, which the page had no hover state for at all */
.rate{ transition:border-color .3s var(--ease), transform .3s var(--ease),
  background .3s var(--ease); }
.rate:hover{ transform:translateY(-3px); border-color:var(--line-2); }

/* ============================================================
   VIDEO BACKGROUNDS
   A still always sits underneath and is what most visitors on a
   phone actually get. The clip layers on top and crossfades in
   only once it is genuinely playing, so a slow connection, a
   blocked autoplay or a missing file degrades to the photograph
   rather than to a black rectangle.
   ============================================================ */
.vidbg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.vidbg img, .vidbg video{ width:100%; height:100%; object-fit:cover; display:block; }
.vidbg img{ opacity:.78; }
.vidbg video{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s var(--ease);
}
.vidbg video.is-playing{ opacity:.78; }

/* the booking section gets the calmer clip, held well back so the
   form stays the thing you look at */
.book{ position:relative; overflow:hidden; isolation:isolate; }
.book > .wrap{ position:relative; z-index:2; }
.book .vidbg img{ opacity:.42; }
.book .vidbg video.is-playing{ opacity:.42; }
.book::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--navy) 0%, rgba(13,36,54,.82) 22%, rgba(13,36,54,.82) 78%, var(--navy) 100%),
    linear-gradient(to right, rgba(13,36,54,.92) 0%, rgba(13,36,54,.62) 55%, rgba(13,36,54,.86) 100%);
}

/* ── the mark ─────────────────────────────────────────────────
   Redrawn from Anthony's business card and vectorised. Inline in
   the markup rather than an <img> so it inherits currentColor and
   can pick up the dawn accent on hover. */
.brand{ flex-direction:row; align-items:center; gap:11px; }
.brand__wm{ display:flex; flex-direction:column; gap:1px; }
.brand__mark{
  width:auto; height:30px; flex:none; color:var(--ice);
  transition:color .25s var(--ease), transform .4s var(--ease);
}
.brand:hover .brand__mark{ color:var(--dawn); transform:translateY(-2px); }

/* ── fluke scale macro behind the rates ───────────────────────
   Held back hard: it is a texture, not a picture. The rate cards
   have to stay the thing you read, so the scrim is heavy and the
   cards get their own solid ground. */
.sec--scales{ position:relative; overflow:hidden; isolation:isolate; }
.sec--scales > .wrap{ position:relative; z-index:2; }
/* .30 under a .72 scrim was completely invisible — the same mistake the
   rough-sea layer made at .42. If a texture is worth generating it has to
   be legible, so the scale pattern runs strong and the READING SURFACES
   defend themselves instead: the cards sit on near-solid ground. */
.sec--scales .vidbg img{ opacity:.62; }
.sec--scales .vidbg video.is-playing{ opacity:.62; }
.sec--scales::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--deep) 0%, rgba(8,22,31,.34) 16%, rgba(8,22,31,.34) 84%, var(--deep) 100%);
}
.sec--scales .rate{
  background:rgba(8,22,31,.90);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  border-color:var(--line-2);
}
/* the intro copy needs its own protection now the texture is this strong */
.sec--scales > .wrap > .eyebrow,
.sec--scales > .wrap > h2,
.sec--scales > .wrap > p{ text-shadow:0 2px 18px rgba(8,22,31,.9); }