.ro-offer {
  --ink: #22201b;
  --paper: #f4f0e6;
  --white: #fcfaf4;
  --rust: #963d25;
  --line: #d9cdbb;
  --muted: #5b5143;
  --serif: "Rekon Serif", Georgia, serif;
  --sans: "Rekon Sans", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
}
.ro-offer :is(h1,h2,h3,p,figure) { margin: 0; }
.ro-offer img { display: block; width: 100%; height: auto; }
.ro-offer a { color: inherit; text-underline-offset: 4px; }
.ro-offer a:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.ro-offer .shell { width: min(calc(100% - 2 * var(--rk-gutter)), 1350px); margin-inline: auto; }
.ro-offer .ro-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(38px, 8vw, 112px) clamp(30px, 5vw, 66px);
}
.ro-offer .kicker { color: var(--rust); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ro-offer .kicker::before { content: "/"; margin-right: .65em; }
.ro-offer .ro-intro h1 { margin: 15px 0 20px; font: 400 clamp(56px, 7.6vw, 117px)/.98 var(--serif); letter-spacing: -.057em; }
.ro-offer :is(.ro-intro h1,.closing h2) span { color: var(--rust); }
.ro-offer .lead { max-width: 46ch; font-size: clamp(17px, 1.62vw, 22px); line-height: 1.5; }
.ro-offer .story-index { padding-left: 22px; border-left: 1px solid var(--line); }
.ro-offer .story-index p { margin: 11px 0 1px; color: var(--muted); font-size: 13px; }
.ro-offer .story-index a {
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  text-decoration: none;
}
.ro-offer .story-index :is(a:hover,a span) { color: var(--rust); }
.ro-offer .story { padding-block: clamp(28px, 6vw, 84px); border-top: 1px solid var(--line); scroll-margin-top: 76px; }
.ro-offer .story-grid { display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); gap: clamp(25px, 6vw, 95px); align-items: start; }
.ro-offer :is(.story figure,.story-copy) { min-width: 0; }
.ro-offer .story figure img { aspect-ratio: 1.32; object-fit: cover; border-radius: 5px; background: #ddd0b8; }
.ro-offer .story-1 figure img { object-position: 48% 57%; }
.ro-offer .story-2 { background: var(--white); }
.ro-offer .story-2 figure { order: 2; }
.ro-offer .story-2 figure img { object-position: 62% 50%; }
.ro-offer .story img.map-capture { aspect-ratio: 8 / 5; }
.ro-offer .watch-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(12px, 3vw, 32px);
  border-radius: 5px;
  background: #22201b;
  color: #fcf5e7;
}
.ro-offer .watch-sample { min-width: 0; text-align: center; }
.ro-offer .story .watch-sample img { aspect-ratio: 1; border-radius: 50%; background: #12110f; }
.ro-offer .watch-sample p { margin-top: 8px; font-size: 13px; line-height: 1.35; }
.ro-offer .story figcaption { padding-top: 10px; color: var(--muted); font-size: 13px; }
.ro-offer :is(.story h2,.closing h2) {
  margin-top: 10px;
  font: 400 clamp(35px, 4.3vw, 67px)/1.04 var(--serif);
  letter-spacing: -.044em;
  text-wrap: balance;
}
.ro-offer .need { margin: 14px 0 18px; max-width: 52ch; line-height: 1.57; }
.ro-offer .story h3 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.ro-offer .scope { padding-left: 18px; margin: 6px 0 18px; font-size: 15px; line-height: 1.5; }
.ro-offer .scope li + li { margin-top: 5px; }
.ro-offer .scope li::marker { color: var(--rust); }
.ro-offer .proof { border-top: 1px solid var(--line); padding-top: 15px; }
.ro-offer .proof p { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.52; }
.ro-offer .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 15px; margin-top: 19px; }
.ro-offer .button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.ro-offer .button:hover { background: var(--rust); }
.ro-offer .text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.ro-offer .text-link:hover { color: var(--rust); }
.ro-offer .story-3 { background: #23211d; color: #fcf5e7; --muted: #e1d2bf; --line: #61564a; --rust: #f0bc9f; }
.ro-offer .story-3 .button { background: #fcf5e7; color: #23211d; }
.ro-offer .story-3 .button:hover { background: #f0bc9f; }
.ro-offer .story-3 figure img { background: #322c24; }
.ro-offer .closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 25px;
  padding-block: clamp(32px, 6vw, 75px);
}
.ro-offer .closing p { margin-top: 12px; max-width: 58ch; }
@media (max-width: 720px) {
  .ro-offer :is(.ro-intro,.story-grid,.closing) { grid-template-columns: minmax(0, 1fr); }
  .ro-offer .ro-intro { gap: 22px; }
  .ro-offer .ro-intro h1 { font-size: clamp(47px, 11vw, 71px); }
  .ro-offer .story-index { border-left: 0; padding: 0; }
  .ro-offer .story-2 figure { order: 0; }
  .ro-offer .story-grid { gap: 20px; }
  .ro-offer .story figure img { aspect-ratio: 1.45; }
  .ro-offer .story img.map-capture { aspect-ratio: 8 / 5; }
  .ro-offer .story .watch-sample img { aspect-ratio: 1; }
  .ro-offer .closing { gap: 4px; }
}