/*!
 * RoundAbout Travel — Hero Fare Slider
 * Production stylesheet. Namespace: .rat-hero
 *
 * One DOM, two behaviours (see hero-slider.js). The numbers are Elementor's own
 * breakpoints, so the panel's Tablet/Mobile control values land on the same widths
 * these rules do:
 *   >= 1025px  desktop  two columns (copy | media), track moves on Y, fixed height
 *   <= 1024px  stacked  media over copy, track moves on X, height content-driven
 *
 * Mobile (<= 767px) is that same stacked layout with a tighter type scale, padding and
 * image band — not a separate model. It was previously a native scroll-snap rail of
 * cards with no autoplay and no controls; the only mobile-specific structural rule left
 * is the single-column USP band.
 *
 * Every colour/size below is a custom property so Elementor style controls can
 * override them per-widget by printing a scoped rule on the wrapper:
 *   .elementor-element-<id> .rat-hero { --rat-navy: #093C77; }
 */

.rat-hero {
  /* palette — from roundabouttravel.co.nz brand blues */
  --rat-navy: #093C77;          /* primary / buttons / labels          */
  --rat-navy-deep: #062C56;     /* media backdrop, phone chrome        */
  --rat-headline: #0B4C96;      /* headline + price                    */
  --rat-body: #4A5A6B;          /* body copy                           */
  --rat-muted: #566A80;         /* eyebrows, meta (>= 4.5:1 on #FAFCFE)*/
  --rat-meta: #93A2B1;          /* counter                             */
  --rat-panel: #FAFCFE;         /* copy panel                          */
  --rat-band: #F1F6FB;          /* USP band                            */
  --rat-hairline: #DCE7F2;
  --rat-trust: #00B67A;

  /* geometry */
  --rat-height: 560px;          /* desktop stage height                */
  --rat-copy-height: 300px;     /* copy band floor, below 1025px       */
  /* --rat-media-height is deliberately NOT defaulted here. Left unset it means "fill
     the column", which is what the desktop layout wants; the below-desktop block sets
     its own default, and the Image Height control can override at any breakpoint. Every
     reference therefore carries an explicit fallback. */
  /* desktop copy | media ratio. Percentage + minmax(0,1fr), never fr + calc():
     fr is a <flex>, not a <length>, and CSS forbids it inside calc(). */
  --rat-split: 46% minmax(0, 1fr);
  --rat-pad-x: 60px;
  --rat-radius: 2px;            /* USP icon tiles                      */
  --rat-frame-radius: 20px;     /* the whole component, site token     */
  --rat-ease: cubic-bezier(0.6, 0, 0.2, 1);
  --rat-speed: 0.75s;
  --rat-drift: 26s;             /* Ken Burns cycle                     */

  /* Manrope is this component's design font; Outfit is the site kit's, so an
     install without Manrope lands on the rest of the site rather than on a generic
     grotesque. Override per-widget with the Typography controls. */
  font-family: Manrope, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--rat-panel);
  position: relative;
  /* One radius for the whole component, clipping the imagery at the top and the USP
     band at the bottom. overflow:hidden is what makes the corners actually cut — the
     mobile rail still scrolls, because the scroll container is the track itself. */
  border-radius: var(--rat-frame-radius);
  overflow: hidden;
}

.rat-hero *,
.rat-hero *::before,
.rat-hero *::after { box-sizing: border-box; }

/* Margin reset guard.
 *
 * The Elementor kit ships `.elementor-kit-NNNN p { margin-block-end: 16px }` at
 * specificity 0,1,1, which outranks each element's own `margin: 0` at 0,1,0. Note the
 * *logical* property: grepping the theme for `margin-bottom` does not find it. The
 * theme piles on `body p { margin-bottom: 16px }` (0,0,2) and `p { margin-block: 0
 * 0.9rem }` (0,0,1) as well.
 *
 * Every paragraph in this component therefore carried a phantom 16px bottom margin.
 * Two visible consequences: the control strip is `align-items: center` and flexbox
 * centres the *margin box*, so the counter's text sat 8px above the progress ticks;
 * and the copy column gained 48px of dead space across the eyebrow, description and
 * price, on top of its intended 16px flex gap.
 *
 * Repeating the wrapper class gives 0,2,0, which beats 0,1,1 on the class count alone
 * — no element name, so it holds for the headline whose tag is a control (h1/h2/h3/div),
 * and no !important. A new text element in this component needs adding to this list.
 */
.rat-hero .rat-hero__eyebrow,
.rat-hero .rat-hero__headline,
.rat-hero .rat-hero__desc,
.rat-hero .rat-hero__price,
.rat-hero .rat-hero__trust,
.rat-hero .rat-hero__counter { margin: 0; }

/* ── stage ─────────────────────────────────────────────────────────────── */
.rat-hero__viewport {
  position: relative;
  overflow: hidden;
  height: var(--rat-height);
}

.rat-hero__track {
  display: flex;
  flex-direction: column;      /* desktop: vertical motion */
  height: 400%;                /* set by JS to slides × 100% */
  transition: transform var(--rat-speed) var(--rat-ease);
  will-change: transform;
}

.rat-hero__slide {
  display: grid;
  grid-template-columns: var(--rat-split);
  height: 25%;                 /* set by JS: 100% / slides */
  flex: 0 0 auto;
}

/* copy side */
.rat-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  /* top/bottom padding reserves the trust line and the control strip, both of
     which are absolutely positioned into those bands */
  padding: 76px 56px 80px var(--rat-pad-x);
  background: var(--rat-panel);
}

.rat-hero__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rat-muted);
}

.rat-hero__headline {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--rat-headline);
  text-wrap: pretty;
}

.rat-hero__desc {
  margin: 0;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rat-body);
  text-wrap: pretty;
}

.rat-hero__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.rat-hero__price-affix { font-size: 15px; font-weight: 600; color: #5C6B7B; }
.rat-hero__price-value {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--rat-headline);
  font-variant-numeric: tabular-nums;
}

.rat-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

.rat-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;            /* >= 44px touch target */
  padding: 0 30px;
  border: 1px solid transparent;
  /* Not --rat-radius: each button has its own radius control under Style › Buttons,
     and --rat-radius is now only the USP icon tile. This is the no-Elementor-CSS
     fallback; the controls carry defaults and override it at 0,2,0. */
  border-radius: 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.rat-hero__btn--primary { background: var(--rat-navy); color: #fff; }
.rat-hero__btn--primary:hover,
.rat-hero__btn--primary:focus-visible { background: var(--rat-headline); color: #fff; }
.rat-hero__btn--ghost { background: transparent; color: var(--rat-navy); border-color: var(--rat-navy); }
.rat-hero__btn--ghost:hover,
.rat-hero__btn--ghost:focus-visible { background: var(--rat-navy); color: #fff; }

/* media side */
.rat-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--rat-navy-deep);
}
.rat-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: rat-drift var(--rat-drift) ease-in-out infinite alternate;
}
@keyframes rat-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
}
.rat-hero[data-ken-burns="false"] .rat-hero__media img { animation: none; }

/* ── controls ──────────────────────────────────────────────────────────── */
.rat-hero__controls {
  position: absolute;
  left: var(--rat-pad-x);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 22px;
  z-index: 2;
}
.rat-hero__dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rat-hero__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #C7D6E4;
  cursor: pointer;
  transition: background-color 0.3s;
}
.rat-hero__dot[aria-selected="true"] { background: var(--rat-navy); }
.rat-hero__dot:focus-visible { outline: 2px solid var(--rat-navy); outline-offset: 4px; }

.rat-hero__counter {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rat-meta);
  font-variant-numeric: tabular-nums;
}

.rat-hero__trust {
  position: absolute;
  left: var(--rat-pad-x);
  top: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  z-index: 2;
}
.rat-hero__stars { font-size: 11px; letter-spacing: 0.1em; color: var(--rat-trust); }
.rat-hero__trust-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rat-muted);
  text-decoration: none;
}
.rat-hero__trust-label:hover { text-decoration: underline; }

.rat-hero__arrows {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  gap: 10px;
  z-index: 2;
}
/* Specificity note. Three separate rules were beating a bare `.rat-hero__arrow`
 * (0,1,0), which is why the glyph sat high and off-centre:
 *
 *   .elementor-kit-NNNN button          0,1,1  font-family "Outfit",
 *                                              line-height 1.2em (20.4px, not 1),
 *                                              letter-spacing 0.5px
 *   [type="button"], button             0,1,0  padding 0.5rem 1rem on a fixed 46px box
 *   button (theme reset)                0,0,1  display, text-transform, appearance
 *
 * The kit's values come from --e-global-typography-* custom properties defined on
 * body, so they are real values, not invalid fallbacks. Qualifying the selector with
 * the element name gives 0,2,1, which clears all three without !important. The
 * declarations below therefore also re-assert what the theme reset touches — padding,
 * font, appearance — rather than assuming a clean slate. */
.rat-hero button.rat-hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(6, 28, 54, 0.35);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.25s, color 0.25s;
}
.rat-hero button.rat-hero__arrow:hover,
.rat-hero button.rat-hero__arrow:focus-visible { background: #fff; color: var(--rat-navy); }
.rat-hero button.rat-hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* desktop moves on Y → up/down; tablet moves on X → left/right (see media query) */
.rat-hero__arrow[data-dir="prev"]::before { content: "\2191"; }
.rat-hero__arrow[data-dir="next"]::before { content: "\2193"; }

@media (min-width: 1025px) {
  /* Image Height applies here too. Unset means fill the column, which is the default
     look; give it a value and the image is that tall with the panel showing beneath. */
  .rat-hero__media { height: var(--rat-media-height, 100%); }
}

/* Imagery on the left: the trust line and the control strip are positioned against
 * the viewport, not the copy column, so they would sit on top of the photo. Mirror
 * them — and the arrows with them — so each stays over the panel it belongs to. */
@media (min-width: 1025px) {
  .rat-hero[data-media="left"] .rat-hero__trust,
  .rat-hero[data-media="left"] .rat-hero__controls {
    left: auto;
    right: var(--rat-pad-x);
  }
  .rat-hero[data-media="left"] .rat-hero__arrows {
    right: auto;
    left: 28px;
  }
  .rat-hero[data-media="left"] .rat-hero__copy {
    padding-right: var(--rat-pad-x);
    padding-left: 56px;
  }
}

/* ── USP band ──────────────────────────────────────────────────────────── */
.rat-hero__usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rat-band);
  border-top: 1px solid var(--rat-hairline);
}
/* Icon left, title + text right — at every width. The base rule covers desktop and
 * widescreen alike, since nothing here uses a min-width query. */
.rat-hero__usp {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding: 34px 40px;
}
.rat-hero__usp + .rat-hero__usp { border-left: 1px solid var(--rat-hairline); }
.rat-hero__usp-icon {
  flex: 0 0 auto;              /* never squeezed by a long title */
  display: flex;
  align-items: center;
  justify-content: center;
}
.rat-hero__usp img,
.rat-hero__usp svg { width: 44px; height: 44px; object-fit: contain; }

/* Recolouring an uploaded SVG icon.
 *
 * Elementor inlines uploaded SVGs, so they are reachable from CSS at all — but the
 * exported files carry a hardcoded fill="#000000" on every shape. That is a
 * *presentation attribute*, which ranks below any CSS rule in the cascade, so a plain
 * selector beats it and no !important is needed.
 *
 * `:not([fill="none"])` is the part that matters. Outline-style icons draw with stroke
 * and set fill="none" on their paths; filling those turns the icon into a solid blob.
 * One of the three icons on this site is exactly that — 12 of its 13 shapes are
 * fill="none" — so it is not a hypothetical. Strokes are recoloured separately and only
 * where a stroke already exists.
 *
 * Defaults to the primary colour, so the icons follow the brand without the Icon Colour
 * control being touched. An <img> icon — a PNG, or an SVG the media library served as a
 * file rather than inlining — cannot be recoloured this way; nothing in CSS reaches
 * inside it. */
.rat-hero__usp-icon svg,
.rat-hero__usp-icon svg *:not([fill="none"]) {
  fill: var(--rat-usp-icon, var(--rat-navy));
}
.rat-hero__usp-icon svg [stroke]:not([stroke="none"]) {
  stroke: var(--rat-usp-icon, var(--rat-navy));
}
.rat-hero__usp-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rat-navy);
}
.rat-hero__usp-text { font-size: 15px; line-height: 1.45; color: var(--rat-body); }
/* min-width:0 lets a long promise wrap instead of widening the flex item. */
.rat-hero__usp-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* alternative USP layout: icon in a tile, text beside it */
.rat-hero__usps[data-layout="tiles"] { background: #fff; }
.rat-hero__usps[data-layout="tiles"] .rat-hero__usp {
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 36px;
}
.rat-hero__usps[data-layout="tiles"] .rat-hero__usp-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--rat-radius);
  background: var(--rat-band);
}
.rat-hero__usps[data-layout="tiles"] .rat-hero__usp img,
.rat-hero__usps[data-layout="tiles"] .rat-hero__usp svg { width: 34px; height: 34px; }

/* ── below desktop: one layout for tablet portrait AND mobile ───────────────
 *
 * Stacked bands (imagery over copy), horizontal motion, arrows and ticks visible,
 * autoplay running. Mobile used to be a third model — a native scroll-snap rail of
 * cards with no autoplay and no controls — and is now just this layout with a tighter
 * type scale and padding. That leaves two motion models instead of three: translateY
 * above 1025px, translateX below it.
 *
 * Heights are content-driven here, not fixed. That is safe because the motion is
 * translateX and a percentage translateX resolves against the track's own *width*, so
 * nothing depends on a known height. In a flex row the slides stretch to the tallest
 * of them, which is what sizes the stage; --rat-copy-height survives as a floor via
 * minmax(). Previously a fixed 300px copy band was shorter than its own content and
 * the CTAs ran through the progress ticks. sizeTrack() must therefore not write inline
 * heights below desktop — an inline height would beat these rules. */
@media (max-width: 1024px) {
  /* The band default lives here, not on .rat-hero, so that leaving Image Height unset
     at desktop still means "fill the column" up there. An Elementor control value lands
     at 0,2,0 and beats this 0,1,0 rule at whichever breakpoint it is set. */
  .rat-hero { --rat-pad-x: 40px; --rat-media-height: 360px; }
  .rat-hero__viewport,
  .rat-hero__track,
  .rat-hero__slide { height: auto; }
  .rat-hero__track { flex-direction: row; width: 400%; }
  .rat-hero__slide {
    grid-template-columns: 1fr;
    /* `min-content 1fr`, not two auto rows.
     *
     * Slides stretch to the tallest of them, so every slide but the tallest has surplus
     * height to place. With both rows auto-sized the grid split that surplus between
     * them: a slide with no eyebrow and no price ended up with a dead ~18px band under
     * its image and a copy panel 18px shorter than its neighbours', so the copy sat at a
     * different height on every slide. `1fr` on the copy row makes it absorb all of it,
     * and `min-content` stops the image row growing. Note 1fr is minmax(auto, 1fr), so it
     * still cannot clip content that exceeds its share.
     *
     * The row-2 floor moved to min-height on the copy itself; expressing it as
     * minmax(--rat-copy-height, 1fr) would work too, but the min-height reads better
     * beside the padding it interacts with.
     *
     * min-content rather than a bare height so the guard from Image Height survives: if
     * that variable ever leaked a percentage against an indefinite row, this falls back
     * to the image's intrinsic height instead of collapsing. */
    grid-template-rows: min-content 1fr;
    width: 25%;
  }
  .rat-hero__media { grid-row: 1; height: var(--rat-media-height, 360px); }
  /* Padding is what centres the content: `justify-content: center` on this box splits the
     free space, so a top pad equal to the trust/counter row's footprint and a small bottom
     pad put the midpoint in the middle of the space actually available below that row.
     Measured within 1px across all four slides at 375px. */
  .rat-hero__copy {
    grid-row: 2;
    gap: 13px;
    min-height: var(--rat-copy-height);
    padding: 56px var(--rat-pad-x) 28px;
  }
  .rat-hero__headline { font-size: clamp(28px, 4.4vw, 36px); }
  .rat-hero__price-value { font-size: 30px; }

  /* Trust line left, counter right, on one row at the top of the copy band. Both are
     siblings of the track rather than part of a slide, so they cannot be placed in the
     copy's flow — they are positioned against the stage, offset by the image band.
     The dots go entirely: below 1025px the counter is the progress indicator, and
     navigation is the arrows plus drag. */
  .rat-hero__trust,
  .rat-hero__controls {
    top: calc(var(--rat-media-height, 360px) + 20px);
    bottom: auto;
  }
  .rat-hero__trust {
    left: var(--rat-pad-x);
    right: auto;
    justify-content: flex-start;
    /* Capped so it cannot run under the counter sharing this row. Both are absolutely
       positioned siblings, so nothing stops them colliding otherwise — at 320px the
       Trustpilot label was 221px wide and the counter began at 226px. The reservation is
       the counter's width plus a gap; the label wraps to a second line rather than
       overlapping, which the copy's top padding accounts for. */
    max-width: calc(100% - 2 * var(--rat-pad-x) - 58px);
  }
  .rat-hero__controls {
    left: auto;
    right: var(--rat-pad-x);
  }
  .rat-hero__dots { display: none; }

  .rat-hero__arrows { top: calc(var(--rat-media-height, 360px) - 68px); bottom: auto; right: 24px; }
  .rat-hero__arrow[data-dir="prev"]::before { content: "\2190"; }
  .rat-hero__arrow[data-dir="next"]::before { content: "\2192"; }
  .rat-hero__usp { gap: 16px; padding: 28px 26px; }
  .rat-hero__usp img, .rat-hero__usp svg { width: 38px; height: 38px; }
  .rat-hero__usp-text { font-size: 14px; }
}

/* ── tablet portrait only: icon above the USP text ──────────────────────── */
/* The one width where three cells sit side by side and are narrow enough that a
 * left-hand icon squeezes the text. Beside the text on desktop (wide cells) and on
 * mobile (one full-width cell). */
@media (min-width: 768px) and (max-width: 1024px) {
  .rat-hero__usp { flex-direction: column; align-items: flex-start; }
}

/* ── mobile: the same layout, tightened ─────────────────────────────────────
 *
 * 767px, not 640px: this must be Elementor's own mobile breakpoint, or the panel
 * emits its Mobile control values onto a viewport these rules still treat as a
 * tablet. Nothing here changes the layout model — only type scale, padding, band
 * height and the CTA stack. */
@media (max-width: 767px) {
  .rat-hero { --rat-pad-x: 18px; }
  /* 58px of top padding, not 50: the capped trust label wraps to two lines on a narrow
     phone, and the eyebrow has to start below it. */
  .rat-hero__copy { gap: 10px; padding: 58px var(--rat-pad-x) 26px; }
  .rat-hero__headline { font-size: 21px; letter-spacing: -0.015em; line-height: 1.25; }
  .rat-hero__desc { font-size: 14px; }

  /* Price scales with the viewport rather than taking a second breakpoint. At 320px a
     28px value with a 10px gap pushed the "return, inc. taxes" suffix onto its own line
     and crowded the row; these shrink smoothly and stop at the previous sizes on a wide
     phone, so nothing changes at 767px. */
  .rat-hero__price { gap: clamp(3px, 1.6vw, 10px); }
  .rat-hero__price-value { font-size: clamp(21px, 6.6vw, 28px); }
  .rat-hero__price-affix { font-size: clamp(12px, 3.4vw, 15px); }

  /* Side by side and wrapping only if they must — not one full-width block each. 44px is
     the floor on height: it is the minimum touch target, so do not reduce it. */
  .rat-hero__btn { width: auto; min-height: 44px; padding: 0 18px; }

  .rat-hero__trust,
  .rat-hero__controls { top: calc(var(--rat-media-height, 220px) + 18px); }
  .rat-hero__arrows { top: calc(var(--rat-media-height, 220px) - 58px); right: 14px; gap: 8px; }
  .rat-hero button.rat-hero__arrow { width: 38px; height: 38px; font-size: 15px; }

  /* Three promises across rather than stacked. The cells get narrow, so the icon returns
     above the text and every size scales with the viewport to survive 320px, where a cell
     is only about 107px wide. */

  /* No inset of its own on a phone: the band runs edge to edge, and the only horizontal
     space is the cells' own 5px, set by the Cell Padding control. There was a fluid
     padding-inline here — deliberately on the band rather than the cells, since cell
     padding is a control writing at 0,2,0 and a clamp() there would be overridden — but it
     read as too much at these widths. Put it back here, not on the cells, if it returns. */
  .rat-hero__usps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: 0;
  }
  .rat-hero__usp {
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 1.8vw, 10px);
    text-align: center;
  }
  /* No dividers between the cells on a phone — the whitespace separates them. Both edges
     have to be zeroed: border-left is the base rule's, border-top was the old stacked
     layout's. The band keeps its own border-top, which separates it from the copy. */
  .rat-hero__usp + .rat-hero__usp {
    border-left: 0;
    border-top: 0;
  }
  .rat-hero__usp-body { align-items: center; gap: 4px; }
  .rat-hero__usp img,
  .rat-hero__usp svg {
    width: clamp(20px, 6.4vw, 28px);
    height: clamp(20px, 6.4vw, 28px);
  }
  .rat-hero__usp-title { font-size: clamp(9px, 2.5vw, 11px); letter-spacing: 0.1em; }
  .rat-hero__usp-text { font-size: clamp(10px, 2.9vw, 12px); line-height: 1.35; }

  /* The tile treatment cannot survive three columns on a phone: a 64px filled square
     beside the text needs width the cell does not have. Both layouts render the same
     compact cell here. Specificity has to match the [data-layout] rules above, which sit
     at 0,3,0 — the plain-layout rules in this block would otherwise lose to them. */
  .rat-hero__usps[data-layout="tiles"] .rat-hero__usp {
    flex-direction: column;
    align-items: center;
  }
  .rat-hero__usps[data-layout="tiles"] .rat-hero__usp-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
  }
  .rat-hero__usps[data-layout="tiles"] .rat-hero__usp img,
  .rat-hero__usps[data-layout="tiles"] .rat-hero__usp svg {
    width: clamp(20px, 6.4vw, 28px);
    height: clamp(20px, 6.4vw, 28px);
  }
}

/* ── accessibility / motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rat-hero__track { transition: none; }
  .rat-hero__media img { animation: none; }
}

.rat-hero__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}