/*
 * ORM Services landing page.
 *
 * The page loads seo-reseller.css first and carries .lp-page, so the hero,
 * benefits grid, pill list, card recipe and rail all come from there. Only the
 * sections this design adds are written below, every rule scoped to .orm-page
 * so nothing can leak back into the SEO Reseller template.
 */

.orm-page {
  --orm-indigo: #4b3fd4;
  --orm-violet: #7c3aed;
  --orm-green: #16a34a;
  --orm-orange: #f97316;
  --orm-ink: #0b1020;
}

/* Tone map: one place decides the accent for a channel row, a stepper stage
   and a case-study row, so the three sections stay in step. */
.orm-page .is-blue {
  --orm-tone: var(--blue);
  --orm-tone-soft: #e8f1ff;
}
.orm-page .is-violet {
  --orm-tone: var(--orm-violet);
  --orm-tone-soft: #f1e9ff;
}
.orm-page .is-green {
  --orm-tone: var(--orm-green);
  --orm-tone-soft: #e4f7ea;
}
.orm-page .is-orange {
  --orm-tone: var(--orm-orange);
  --orm-tone-soft: #fff0e2;
}

/* ---------- Hero ---------- */
/* The supplied hero-bg carries the whole wash; the gradient underneath only
   shows on viewports wider than the artwork, so nothing hard-edges. */
.orm-page .orm-hero {
  background:
    url("../images/orm/hero-bg.png") center top / cover no-repeat,
    linear-gradient(160deg, #ffffff 0%, #eff5ff 55%, #e4eeff 100%);
}

.orm-page .orm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 11px 22px 11px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(22, 104, 255, 0.14);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink-2);
}

.orm-page .orm-eyebrow-star {
  display: inline-flex;
  color: #fbbf24;
}

.orm-page .orm-eyebrow-star .lp-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke-width: 1.2;
}

/* The reseller hero ticks become tinted chips here. */
.orm-page .orm-hero-points li {
  gap: 14px;
  font-weight: 500;
}

.orm-page .orm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.orm-page .orm-chip .lp-icon {
  width: 19px;
  height: 19px;
}

/* hero-art.png is 674px wide — filling the column upscaled it and made the
   figure tower over the copy. Capped well under that and centred in the column
   it leaves behind, which is also what the design shows. */
.orm-page .lp-hero-art {
  display: flex;
  justify-content: center;
}

.orm-page .lp-hero-art img {
  width: min(100%, 600px);
}

/* ---------- Reputation risks ---------- */
.orm-page .orm-risk-note {
  margin-top: 18px;
  font-weight: 600;
  color: var(--ink-2);
}

.orm-page .orm-risk-foot {
  margin-top: clamp(32px, 4vw, 52px);
}

.orm-page .orm-risk-foot p {
  max-width: var(--lead-w);
  margin: 0 auto 26px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  color: var(--ink);
}

.orm-page .orm-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(32px, 4vw, 54px);
}

.orm-page .orm-risk {
  background: #f1f5ff;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 26px 26px 34px;
  transition: var(--lp-lift);
}

.orm-page .orm-risk:hover {
  transform: translateY(-6px);
  border-color: var(--lp-card-line-hover);
  box-shadow: var(--lp-card-shadow-hover);
}

.orm-page .orm-risk-art {
  margin: 0 0 26px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
}

.orm-page .orm-risk-art img {
  display: block;
  width: 100%;
  height: auto;
}

.orm-page .orm-risk h3 {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 12px;
}

.orm-page .orm-risk p {
  margin: 0;
  color: #5c6779;
  line-height: 1.7;
}

/* ---------- ORM goes beyond reviews ---------- */
.orm-page .orm-beyond {
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

/* Copy is centred over the full width, with the channel chips as a single
   wrapping row above the stepper. */
.orm-page .orm-beyond-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 44px);
}

.orm-page .orm-beyond-copy {
  text-align: center;
}

.orm-page .orm-beyond-copy .heading-main {
  font-size: clamp(30px, 3.6vw, 50px);
  margin-bottom: 22px;
}

/* Accent rule under the heading, matching the .sr-whatis treatment. */
.orm-page .orm-beyond-copy .heading-main::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue) 0%, rgba(22, 104, 255, 0.15) 100%);
}

.orm-page .orm-beyond-copy p {
  color: #5c6779;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto 34px;
}

.orm-page .orm-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Each channel is a tinted chip: icon plate plus label. */
.orm-page .orm-channel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 12px;
  border-radius: var(--r);
  border: 1px solid var(--orm-tone-soft);
  background: var(--orm-tone-soft);
}

.orm-page .orm-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--white);
  color: var(--orm-tone);
}

.orm-page .orm-channel-icon .lp-icon {
  width: 20px;
  height: 20px;
}

.orm-page .orm-channel-label {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

/* Stepper. One dashed spine runs the height of the panel behind the numerals,
   and each stage is a card with a tinted plate carrying its icon. */
.orm-page .orm-stepper {
  position: relative;
  display: grid;
  gap: 34px;
  padding: clamp(20px, 2.4vw, 34px) clamp(16px, 2vw, 28px);
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #f7f9ff 0%, #eef3fe 100%);
}

.orm-page .orm-stepper::before {
  content: "";
  position: absolute;
  left: calc(clamp(16px, 2vw, 28px) + 20px);
  top: clamp(40px, 5vw, 66px);
  bottom: clamp(40px, 5vw, 66px);
  border-left: 2px dashed rgba(22, 104, 255, 0.35);
}

.orm-page .orm-stage {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
}

.orm-page .orm-stage-num {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--orm-tone);
  color: var(--white);
  font-family: var(--lp-num-font);
  font-weight: 700;
  font-size: 14px;
  /* the ring masks the dashed spine where it would run under the numeral */
  box-shadow: 0 0 0 6px #f2f6fe;
}

.orm-page .orm-stage-body {
  position: relative;
  background: var(--white);
  border: 1px solid var(--lp-card-line);
  border-radius: var(--r);
  box-shadow: var(--lp-card-shadow);
  padding: 22px 28px 22px 118px;
  transition: var(--lp-lift);
}

/* Tinted plate down the left edge of the card, with the stage icon on it. */
.orm-page .orm-stage-body::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 96px;
  border-radius: var(--r) 0 0 var(--r);
  background: var(--orm-tone-soft);
}

.orm-page .orm-stage-icon {
  display: inline-flex;
  position: absolute;
  left: 27px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orm-tone);
}

.orm-page .orm-stage-icon .lp-icon {
  width: 42px;
  height: 42px;
  stroke-width: 1.3;
}

.orm-page .orm-stage:hover .orm-stage-body {
  transform: translateX(4px);
  border-color: var(--lp-card-line-hover);
  box-shadow: var(--lp-card-shadow-hover);
}

.orm-page .orm-stage-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--orm-ink);
  margin-bottom: 8px;
}

.orm-page .orm-stage-body p {
  margin: 0;
  color: #5c6779;
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- What our ORM services do ---------- */
.orm-page .orm-what-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 56px);
  align-items: center;
}

.orm-page .orm-what-copy .heading-main {
  font-size: clamp(30px, 3.4vw, 46px);
  margin-bottom: 20px;
}

.orm-page .orm-what-copy p {
  margin: 0;
  color: #5c6779;
  line-height: 1.8;
}

.orm-page .orm-what-copy .btn-strategy {
  margin-top: clamp(26px, 2.6vw, 36px);
}

/* The rail is allowed to bleed past the container's right edge, the way the
   design cuts the third card off mid-word. */
.orm-page .orm-what-rail {
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}

.orm-page .orm-svc {
  flex: 0 0 clamp(280px, 24vw, 340px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--lp-card-line);
  border-radius: var(--r);
  box-shadow: var(--lp-card-shadow);
  padding: 30px 28px 34px;
}

.orm-page .orm-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  border-radius: 50% 50% 50% 6px;
  background: var(--blue);
  color: var(--white);
}

.orm-page .orm-svc-icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.orm-page .orm-svc h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 14px;
}

.orm-page .orm-svc p {
  margin: 0;
  color: #5c6779;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Why businesses choose ORM ---------- */
/* Flat tinted panels rather than the reseller page's white cards. */
.orm-page .orm-why .lp-feature {
  background: #f7f8fc;
  border-color: transparent;
  box-shadow: none;
  grid-template-columns: 88px minmax(0, 1fr);
  padding: 26px 30px;
}

.orm-page .orm-why .lp-feature-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #f9736a;
  color: var(--white);
}

/* The supplied benefit icons are white line art, so they read on the coral
   disc and nowhere else — keep the disc. */
.orm-page .orm-why .lp-feature-icon img {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.orm-page .orm-why .lp-feature h3 {
  font-size: 20px;
}

.orm-page .orm-why .lp-feature p {
  font-size: 14.5px;
}

/* ---------- Indigo CTA band ---------- */
.orm-page .orm-band {
  background: var(--orm-indigo);
  text-align: left;
}

/* .band paints two white blurred glows — they wash out an indigo ground. */
.orm-page .orm-band::before,
.orm-page .orm-band::after {
  display: none;
}

.orm-page .orm-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(30px, 5vw, 70px);
  position: relative;
}

.orm-page .orm-band .trusted-heading {
  color: var(--white);
  font-size: clamp(32px, 3.8vw, 54px);
  margin-bottom: 24px;
}

.orm-page .orm-band .trusted-lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  max-width: 60ch;
  margin: 0 0 36px;
}

/* The supplied artwork already carries the concentric rings, so nothing is
   drawn behind it — the CSS ring set that served the placeholder is gone.

   The phone is cropped at the foot of the PNG itself. Floated in the middle of
   the band that reads as a mistake, so the column is bottom-aligned and the
   art is pulled down by the band's own padding: the cut lands exactly on the
   band's edge and the phone reads as bleeding out of it. .band clips. */
.orm-page .orm-band-inner {
  align-items: end;
}

.orm-page .orm-band-art {
  align-self: end;
  margin-bottom: calc(-1 * clamp(60px, 8vw, 100px));
}

/* The art used to be width:100% of its column, so between 960px and 1300px the
   phone shrank with the column while the heading beside it kept its size and
   the band read as lopsided. Sized against the viewport instead, with the
   column widened to match, it holds the same presence all the way down. */
.orm-page .orm-band-art img {
  display: block;
  width: clamp(300px, 46vw, 620px);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ---------- India-based expertise ---------- */
.orm-page .orm-expertise {
  background: linear-gradient(120deg, #faf7f8 0%, #f6f4f6 55%, #f4f3f8 100%);
}

.orm-page .orm-expertise .lp-checklist-icon {
  width: 59px;
  height: 59px;
  border-radius: 14px;
}

.orm-page .orm-expertise .lp-checklist-icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.orm-page .orm-expertise .lp-checklist li {
  grid-template-columns: 59px minmax(0, 1fr) 26px;
}

/* The heading here is longer than the reseller page's, so the copy column
   takes the wider half rather than the pill list. Kept above the breakpoint
   where seo-reseller.css collapses this grid to one column — outranking that
   rule would leave two columns on a phone. */
@media (min-width: 961px) {
  .orm-page .orm-expertise .lp-checklist-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* ---------- Reputation strategy ---------- */
/* Seven steps on the shared .js-slider. It runs in variable-width mode, so the
   slide width below is what decides how many are on screen — no breakpoint
   list inside the script to keep in step with this one. */
.orm-page .orm-strategy-slider {
  margin-top: clamp(32px, 4vw, 54px);
}

.orm-page .orm-strategy-slider .slider-slide {
  width: 25%;
  padding-inline: clamp(6px, 0.7vw, 11px);
}

.orm-page .orm-strategy-card {
  width: 100%;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 34vw, 440px);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: var(--lp-lift);
}

.orm-page .orm-strategy-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lp-card-shadow-hover);
}

.orm-page .orm-strategy-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: the copy sits on photography, so it needs a guaranteed contrast
   floor rather than luck with whatever image is dropped in. */
.orm-page .orm-strategy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 22, 0) 32%, rgba(6, 10, 22, 0.82) 78%, rgba(6, 10, 22, 0.94) 100%);
}

.orm-page .orm-strategy-copy {
  padding: 26px 24px 30px;
  color: var(--white);
}

.orm-page .orm-strategy-copy h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
}

.orm-page .orm-strategy-copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Feedback cards ---------- */
.orm-page .orm-feedback {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%);
}

.orm-page .orm-feedback-grid {
  margin-top: clamp(32px, 4vw, 54px);
}

.orm-page .orm-feedback-grid .lp-card {
  background: linear-gradient(160deg, #eef3fd 0%, #f8fbff 100%);
  border-color: transparent;
}

.orm-page .orm-feedback-icon {
  display: block;
  margin-bottom: 30px;
}

.orm-page .orm-feedback-icon img {
  display: block;
  width: auto;
  max-width: 110px;
  height: 96px;
  object-fit: contain;
  object-position: left center;
}

.orm-page .orm-feedback-foot {
  margin-top: clamp(32px, 4vw, 52px);
}

/* ---------- Case study ---------- */
/* Only the photograph travels. The cards are a .slider-panels stack beside the
   stage — one grid cell, cross-faded — so the copy changes with the slide
   without the layout moving. Dots are appended to the slider root by the
   script, which is why the root places them by grid row rather than by source
   order. */
.orm-page .orm-case-slider {
  margin-top: clamp(32px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  column-gap: clamp(26px, 3.4vw, 56px);
  row-gap: 22px;
  align-items: center;
}

.orm-page .orm-case-stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 525px);
  margin-inline: auto;
}

.orm-page .orm-case-slider .slider-dots {
  grid-column: 1;
  grid-row: 2;
}

.orm-page .orm-case-panels {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Over the photograph's edges rather than under it — the stage is only as tall
   as the image, so a row of controls beneath would push the card off centre. */
.orm-page .orm-case-slider .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.orm-page .orm-case-slider .slider-prev {
  left: -18px;
}

.orm-page .orm-case-slider .slider-next {
  right: -18px;
}

.orm-page .orm-case-art {
  margin: 0;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.orm-page .orm-case-art img {
  display: block;
  width: 100%;
  height: auto;
}

.orm-page .orm-case-num {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.orm-page .orm-case-card {
  background: var(--white);
  border: 1px solid var(--lp-card-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 3vw, 46px);
}

.orm-page .orm-case-card h3 {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  margin-bottom: 8px;
}

.orm-page .orm-case-meta {
  color: #5c6779;
  margin-bottom: 30px;
}

.orm-page .orm-case-rows {
  display: grid;
  gap: 26px;
  margin: 0;
}

.orm-page .orm-case-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
}

.orm-page .orm-case-icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--orm-tone);
  color: var(--orm-tone);
}

.orm-page .orm-case-icon .lp-icon {
  width: 18px;
  height: 18px;
}

.orm-page .orm-case-row dt {
  font-size: 18px;
  font-weight: 700;
  color: var(--orm-ink);
}

.orm-page .orm-case-row dd {
  margin: 0;
  color: #4a5364;
  line-height: 1.7;
}

/* ---------- What we track ---------- */
/* The flow sits in its own .container, so the lead has to close its own gap. */
.orm-page .orm-track .lp-lead {
  margin-bottom: clamp(30px, 4vw, 54px);
}

/* Tile copy sits under a centred title on a narrow measure — justifying it
   opened visible word gaps. Overrides the .lp-page justify rule in
   landing.css for this section only. */
.orm-page .orm-track .flow-body p {
  text-align: center;
  hyphens: manual;
}

.orm-page .orm-track-foot {
  margin-top: clamp(28px, 3.4vw, 46px);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Closing CTA ---------- */
/* cta-skyline.png is the whole panel — skyline, pins and rating cards — so it
   covers rather than sitting as a strip along the bottom. */
.orm-page .orm-cta {
  background:
    url("../images/orm/cta-skyline.png") center / cover no-repeat,
    linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
}

.orm-page .orm-cta .trusted-heading {
  font-size: clamp(30px, 3.4vw, 46px);
}

.orm-page .orm-cta .trusted-lead {
  font-size: 18px;
  margin-bottom: 22px;
}

.orm-page .orm-cta .btn-strategy {
  margin-top: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1300px) {
  /* the art is sized against the viewport now, so its column has to keep up */
  .orm-page .orm-band-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3vw, 48px);
  }
}

@media (max-width: 1100px) {
  .orm-page .orm-risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .orm-page .orm-strategy-slider .slider-slide {
    width: 33.3333%;
  }

  /* stacked: stage, dots, then the card */
  .orm-page .orm-case-slider {
    grid-template-columns: minmax(0, 1fr);
  }

  .orm-page .orm-case-stage,
  .orm-page .orm-case-slider .slider-dots,
  .orm-page .orm-case-panels {
    grid-column: 1;
  }

  .orm-page .orm-case-stage {
    grid-row: 1;
  }

  .orm-page .orm-case-slider .slider-dots {
    grid-row: 2;
  }

  .orm-page .orm-case-panels {
    grid-row: 3;
  }
}

@media (max-width: 960px) {
  .orm-page .orm-what-inner,
  .orm-page .orm-band-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .orm-page .orm-strategy-slider .slider-slide {
    width: 50%;
  }

  /* the artwork leads the copy once the band stacks, so it stops bleeding */
  .orm-page .orm-band-art {
    align-self: auto;
    margin-bottom: 0;
  }

  .orm-page .orm-what-rail {
    margin-right: calc(-1 * var(--gutter));
  }

  .orm-page .orm-band {
    text-align: center;
  }

  .orm-page .orm-band .trusted-lead {
    margin-inline: auto;
  }

  .orm-page .orm-band-art {
    order: -1;
  }

  .orm-page .orm-stage-body {
    padding: 20px 22px 20px 96px;
  }

  .orm-page .orm-stage-body::before {
    width: 78px;
  }

  .orm-page .orm-stage-icon {
    left: 20px;
  }

  .orm-page .orm-stage-icon .lp-icon {
    width: 34px;
    height: 34px;
  }
}

/* Below 860px .flow--tile is a left-rail timeline with the copy ranged left,
   so centring the paragraph there strands it against the tile. */
@media (max-width: 860px) {
  .orm-page .orm-track .flow-body p {
    text-align: left;
  }

  /* the arrows have no margin to hang in once the stage is full width */
  .orm-page .orm-case-slider .slider-prev {
    left: 10px;
  }

  .orm-page .orm-case-slider .slider-next {
    right: 10px;
  }
}

@media (max-width: 720px) {
  .orm-page .orm-risk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .orm-page .orm-hero-points {
    grid-template-columns: minmax(0, 1fr);
  }

  .orm-page .orm-strategy-card {
    min-height: 300px;
  }

  .orm-page .orm-case-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }
}