/* wp-content/plugins/notts-osteo-elements/assets/css/home-blocks.css
 *
 * The homepage blocks: quick links, services carousel, conditions grid, testimonials, team.
 * ONE stylesheet for all five on purpose — they share their section chrome, their card surface
 * and their carousel behaviour, and five files would be five requests for the same rules.
 *
 * No raw colours: everything resolves against tokens.css or the custom properties the
 * Elementor controls write onto each wrapper.
 *
 * ON THE SITE GRID: full-width backgrounds, content on the same 1440 / 72 as everything else.
 *
 * Author: Sean Burn
 */

/* ---------- shared section chrome ---------- */

.nosteo-sec {
  --nosteo-sec-bg: transparent;

  background: var(--nosteo-sec-bg);
  font-family: var(--nosteo-font);
  color: var(--nosteo-ink);
}

.nosteo-sec__inner {
  max-width: var(--nosteo-site-max);
  margin: 0 auto;
  padding: var(--nosteo-section-pad-y) var(--nosteo-site-pad);
  /* Each block measures itself, not the window — they can sit in any container. */
  container-type: inline-size;
  container-name: nosteo-sec;
}

/* The last block on a page has nothing beneath it to contribute the other half of the gap, so it
   restores the full value — otherwise the run-in to the footer is half the space of every seam
   above it. Covers the three inner wrappers the widgets use. */
[data-elementor-id] > .e-con:last-child .nosteo-sec__inner,
[data-elementor-id] > .e-con:last-child .nosteo-double__inner,
[data-elementor-id] > .e-con:last-child .nosteo-intro__inner {
  padding-bottom: var(--nosteo-section-gap-end);
}


.nosteo-sec__eyebrow {
  margin: 0 0 12px;
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nosteo-resolve-ink);
}

.nosteo-sec__title {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 16px;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--nosteo-weight-strong);
  text-transform: uppercase;
  text-wrap: balance;
}
.nosteo-sec__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--nosteo-resolve);
}

.nosteo-sec__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.65;
  color: var(--nosteo-ink);
}

.nosteo-sec__head { margin-bottom: clamp(24px, 3vw, 40px); }

/* Every collection in this sheet is a real <ul> so screen readers get the count — which means
   every one of them also inherits the browser's disc marker and 40px indent. Reset once here.
   `list-style: none` on the <li> too: the marker belongs to the item, and Elementor's own
   frontend CSS sets it there in places. */
.nosteo-rail__track,
.nosteo-quick__grid,
.nosteo-cond__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nosteo-rail__track > li,
.nosteo-quick__grid > li,
.nosteo-cond__grid > li {
  list-style: none;
}

/* ---------- reveal on scroll ----------
   One mechanism for all five blocks. Transform and opacity only, so it composites on the GPU
   and never triggers layout — the whole point of animating a page that has to stay fast.
   The default is VISIBLE: if the observer never runs, nothing is stuck invisible. */
.nosteo-reveal {
  opacity: 1;
}
.nosteo-reveal.is-armed {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--nosteo-ease), transform 620ms var(--nosteo-ease);
}
.nosteo-reveal.is-armed.is-in {
  opacity: 1;
  transform: none;
}
/* Staggered by index, set as a custom property by the script, so a row of cards arrives as a
   sequence rather than a block. Capped so a nine-tile grid does not take two seconds. */
.nosteo-reveal.is-armed { transition-delay: calc(var(--nosteo-i, 0) * 55ms); }

@media (prefers-reduced-motion: reduce) {
  .nosteo-reveal.is-armed,
  .nosteo-reveal.is-armed.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- carousel ----------
   CSS scroll-snap, not a library. Native momentum and swipe on touch, keyboard-scrollable,
   and it works with no JS at all — the script only adds the arrows and the dots. Swiper would
   have been ~150KB for the same gesture. */

.nosteo-rail {
  /* --per is how many cards are in view. Every breakpoint below sets only this number and the
     column arithmetic follows, so a rail is retuned in one place instead of three.

     KEEP IT A WHOLE NUMBER. It was 1.12 so the next card peeked on a phone, which looked like a
     good idea and was a bug: a card can only snap flush to the left edge if it is at least as wide
     as the track, so any fraction above 1 makes the LAST card permanently unreachable. It came to
     rest ~37px short, so the final testimonial sat with dead space to its left while the first sat
     flush — visibly inconsistent, and guaranteed by the arithmetic rather than a browser quirk. */
  --per: 1;
  --nosteo-rail-gap: clamp(14px, 2vw, 24px);

  position: relative;
}

.nosteo-rail__track {
  display: grid;
  grid-auto-flow: column;
  /* Exactly --per cards spanning the track, gaps included. A fractional --per on a phone leaves
     the next card peeking, which is what tells a thumb there is more to the right. */
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--nosteo-rail-gap)) / var(--per));
  gap: var(--nosteo-rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the focus ring and card shadow, then pulled back so the row still starts on the
     site gutter. */
  padding: 6px 6px 18px;
  margin: -6px -6px -18px;
  /* Must match padding-left above. `scroll-snap-align: start` aligns to the SNAPPORT, and the
     snapport is the scrollport inset by scroll-padding — so without this every card snaps 6px
     left of where the first one actually sits, and the last card cannot reach its position at all.
     Matching the two makes every card land on the same x, which is the whole point. */
  scroll-padding-left: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.nosteo-rail__track::-webkit-scrollbar { display: none; }
.nosteo-rail__track > * { scroll-snap-align: start; }

/* ---- click-and-drag on desktop ----
   The grab cursor is only offered to a real pointer. On touch there is nothing to hint at — the
   rail already scrolls under a thumb — and on a coarse pointer a grab cursor is meaningless.
   The class is added by the script only when the rail actually has somewhere to scroll. */
@media (hover: hover) and (pointer: fine) {
  .nosteo-rail__track.is-grabbable { cursor: grab; }
  .nosteo-rail__track.is-dragging { cursor: grabbing; }
}

/* Both of these fight a drag, so they come off for its duration:
   snap-type keeps pulling scrollLeft back to the nearest card mid-gesture, and scroll-behavior
   tries to animate each of the many small writes the drag makes, which reads as lag.
   Not inside the media query above — correctness must not depend on the pointer type. */
.nosteo-rail__track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  /* Stops the drag turning into a text selection across the card titles. */
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-rail__track { scroll-behavior: auto; }
}

.nosteo-rail__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
/* An author `display: flex` outranks the UA stylesheet's `[hidden] { display: none }`, so without
   this the script's nav.hidden would set the attribute and change nothing on screen. */
.nosteo-rail__nav[hidden] { display: none; }

.nosteo-rail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nosteo-hair);
  border-radius: 999px;
  background: none;
  color: var(--nosteo-ink);
  cursor: pointer;
  transition: border-color 180ms var(--nosteo-ease), color 180ms var(--nosteo-ease),
              opacity 180ms var(--nosteo-ease);
}
.nosteo-rail__btn svg { width: 15px; height: 12px; }
/* Two classes to clear Hello Elementor's reset, which paints every button
   `background-color: #c36; color: #fff` on hover AND focus at (0,2,0) via [type=button]. */
.nosteo-sec .nosteo-rail__btn:hover,
.nosteo-sec .nosteo-rail__btn:focus {
  background: none;
  border-color: var(--nosteo-accent);
  color: var(--nosteo-accent);
}
/* Disabled rather than hidden at the ends: a control that vanishes moves everything beside it. */
.nosteo-rail__btn[disabled] {
  opacity: 0.32;
  cursor: default;
  border-color: var(--nosteo-hair);
  color: var(--nosteo-ink);
}

.nosteo-rail__dots {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.nosteo-rail__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nosteo-hair);
  cursor: pointer;
  transition: background 180ms var(--nosteo-ease), transform 180ms var(--nosteo-ease);
}
.nosteo-sec .nosteo-rail__dot[aria-current="true"] {
  background: var(--nosteo-resolve);
  transform: scale(1.5);
}

/* ---------- card surface, shared ---------- */

.nosteo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--nosteo-white);
  color: var(--nosteo-ink);
  text-decoration: none;
  /* Transform and box-shadow only — no layout properties, so hovering a card cannot reflow
     the row it sits in. */
  transition: transform 260ms var(--nosteo-ease), box-shadow 260ms var(--nosteo-ease);
}
.nosteo-card:hover,
.nosteo-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(50, 62, 72, 0.13);
  /* Restated, not redundant: the parent theme's reset.css has `a:active,a:hover{color:#336}` at
     (0,1,1), which outranks the base .nosteo-card (0,1,0). Without this the card's inherited text
     — service titles, quick-link and condition labels — turns navy on hover. */
  color: var(--nosteo-ink);
}
.nosteo-card:focus-visible {
  outline: 2px solid var(--nosteo-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-card { transition: none; }
  .nosteo-card:hover, .nosteo-card:focus-visible { transform: none; }
}

/* ---------- quick links ---------- */

.nosteo-quick__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.nosteo-quick__card {
  align-items: flex-start;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--nosteo-tint);
}
.nosteo-quick__card--accent { background: var(--nosteo-accent); color: var(--nosteo-white); }
/* Doubled class for (0,3,0) so it decisively outranks .nosteo-card:hover (0,2,0) rather than
   depending on source order: the accent card keeps white text on hover, where the shared card
   rule would otherwise repaint it ink. The label inherits, so this covers it too. */
.nosteo-quick__card.nosteo-quick__card--accent:hover,
.nosteo-quick__card.nosteo-quick__card--accent:focus-visible { color: var(--nosteo-white); }

.nosteo-quick__label {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--nosteo-weight-strong);
}
.nosteo-quick__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--nosteo-muted);
}
.nosteo-quick__card--accent .nosteo-quick__text { color: var(--nosteo-white); opacity: 0.9; }

.nosteo-quick__go {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nosteo-resolve-ink);
}
.nosteo-quick__card--accent .nosteo-quick__go { color: var(--nosteo-white); }

@container nosteo-sec (min-width: 560px) {
  .nosteo-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container nosteo-sec (min-width: 900px) {
  .nosteo-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- services carousel ---------- */

/* The six service photographs are 200x200 and that is the largest that exists anywhere on the
   live site — no bigger original was ever uploaded. A full-bleed card image would mean a 2x
   upscale on a 420px card, which is why the first attempt letterboxed a 116px thumbnail in a pale
   wash and looked like an accident.
   So the square becomes a deliberate circular medallion at 168px. That is a DOWNSCALE from 200,
   so it renders sharp, and a round plate on a tinted field reads as a considered clinical
   treatment menu rather than a photo that failed to fill its box. */

.nosteo-svc__card {
  padding: 0 0 28px;
  background: var(--nosteo-white);
  box-shadow: inset 0 0 0 1px var(--nosteo-hair);
  overflow: hidden;
}

.nosteo-svc__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 34px 26px 30px;
  background: var(--nosteo-tint);
  /* Contains the ring's scale so it can never spill past the media panel. */
  overflow: hidden;
}

.nosteo-svc__media img {
  display: block;
  width: 168px;
  height: 168px;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* The ring is a shadow, not a border, so it cannot change the image's box and reflow the card. */
  box-shadow: 0 0 0 6px var(--nosteo-white), 0 0 0 7px var(--nosteo-hair);
  transition: transform 420ms var(--nosteo-ease), box-shadow 420ms var(--nosteo-ease);
}

/* The signature: on hover the ring is redrawn in the accent and the plate lifts a touch. One
   moment, on the element the eye is already on — not four competing effects. */
.nosteo-svc__card:hover .nosteo-svc__media img,
.nosteo-svc__card:focus-visible .nosteo-svc__media img {
  transform: scale(1.04);
  box-shadow: 0 0 0 6px var(--nosteo-white), 0 0 0 7px var(--nosteo-accent);
}

.nosteo-svc__title {
  margin: 24px 26px 0;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  font-weight: var(--nosteo-weight-strong);
  text-wrap: balance;
}

.nosteo-svc__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* The card is a stretch-aligned flex column, so without this the row would fill the card width
     and the underline would run edge to edge instead of sitting under the label.
     `margin-top: auto` pins it to the bottom, which is what keeps a row of cards' CTAs on one
     line when the titles wrap to different heights. */
  align-self: flex-start;
  margin: auto 26px 0;
  padding-top: 20px;
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nosteo-resolve-ink);
}
/* A rule that draws itself under the label on hover. Scale on a 1px block, so it animates on the
   compositor instead of animating `width`. */
.nosteo-svc__go::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--nosteo-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--nosteo-ease);
}
/* The arrow travels the same distance the rule grows, so the two read as one gesture. */
.nosteo-svc__go::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 320ms var(--nosteo-ease);
}
.nosteo-svc__card:hover .nosteo-svc__go::before,
.nosteo-svc__card:focus-visible .nosteo-svc__go::before { transform: scaleX(1); }
.nosteo-svc__card:hover .nosteo-svc__go::after,
.nosteo-svc__card:focus-visible .nosteo-svc__go::after { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .nosteo-svc__media img,
  .nosteo-svc__go::before,
  .nosteo-svc__go::after { transition: none; }
  .nosteo-svc__card:hover .nosteo-svc__media img { transform: none; }
  .nosteo-svc__card:hover .nosteo-svc__go::after { transform: none; }
}

/* ---------- conditions grid ---------- */

/* The nine icons are 64x54 line drawings. Sitting loose on a flat tile they read as clip art, so
   each one gets a round tinted plate — the same medallion device as the service cards, at a
   smaller size, which is what ties the two sliders together as one family. */

/* Compact by default, because the default is a phone showing three of these at once: at 375px that
   is ~102px per tile, and the full-size 76px plate does not fit inside 16px of side padding. Both
   the plate and the padding come in here and scale back up once there is room. */
.nosteo-cond__card {
  align-items: center;
  gap: 10px;
  padding: 22px 8px 20px;
  background: var(--nosteo-white);
  box-shadow: inset 0 0 0 1px var(--nosteo-hair);
  text-align: center;
}

.nosteo-cond__plate {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--nosteo-tint);
  transition: background 280ms var(--nosteo-ease), transform 280ms var(--nosteo-ease);
}
.nosteo-cond__card:hover .nosteo-cond__plate,
.nosteo-cond__card:focus-visible .nosteo-cond__plate {
  background: var(--nosteo-tint-deep);
  transform: scale(1.06);
}

.nosteo-cond__card img {
  display: block;
  width: 32px;
  height: 27px;
  object-fit: contain;
}

.nosteo-cond__label {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: var(--nosteo-weight-strong);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Room for the full-size medallion. 370px of container is ~114px per tile at 3-up, leaving 82px
   inside the padding — 6px clear of the 76px plate. That takes in the larger phones (a 430px
   viewport gives 390px of container) while 375-390px devices keep the compact tile. */
@container nosteo-sec (min-width: 370px) {
  .nosteo-cond__card { gap: 14px; padding: 30px 16px 26px; }
  .nosteo-cond__plate { width: 76px; height: 76px; }
  .nosteo-cond__card img { width: 40px; height: 34px; }
  .nosteo-cond__label { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-cond__plate { transition: none; }
  .nosteo-cond__card:hover .nosteo-cond__plate { transform: none; }
}

/* ---------- testimonials ---------- */

.nosteo-quote__card {
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--nosteo-white);
  cursor: default;
}
/* Not a link, so it should not lift or take a focus ring. */
.nosteo-quote__card:hover { transform: none; box-shadow: none; }

.nosteo-quote__mark {
  width: 30px;
  height: 24px;
  color: var(--nosteo-resolve);
}

.nosteo-quote__text {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.62;
  color: var(--nosteo-ink);
}

.nosteo-quote__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.nosteo-quote__by img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.nosteo-quote__name {
  font-size: 14px;
  font-weight: var(--nosteo-weight-strong);
}
.nosteo-quote__role {
  display: block;
  font-size: 13px;
  color: var(--nosteo-muted);
}

/* ---------- team ---------- */

.nosteo-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.nosteo-team__media { margin: 0; }
.nosteo-team__media img {
  display: block;
  width: 100%;
  height: auto;
}

.nosteo-team__body > p {
  margin: 0 0 1em;
  max-width: 60ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.68;
}
.nosteo-team__body > p:last-child { margin-bottom: 0; }

/* The stacked link box. One outer hairline and dividers between rows, drawn so adjacent borders
   cannot double up into a 2px line. */
.nosteo-team__links {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  max-width: 420px;
  box-shadow: inset 0 0 0 1px var(--nosteo-hair);
}
.nosteo-team__links > li { list-style: none; }
.nosteo-team__links > li + li { box-shadow: inset 0 1px 0 var(--nosteo-hair); }

.nosteo-team__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nosteo-ink);
  text-decoration: none;
  transition: background 220ms var(--nosteo-ease), color 220ms var(--nosteo-ease);
}
/* Restated colour: reset.css's `a:hover{color:#336}` at (0,1,1) beats the base rule above. */
.nosteo-team__link:hover,
.nosteo-team__link:focus-visible {
  background: var(--nosteo-tint);
  color: var(--nosteo-resolve-ink);
}
.nosteo-team__link:focus-visible {
  outline: 2px solid var(--nosteo-accent);
  outline-offset: -2px;
}

.nosteo-team__arrow {
  width: 15px;
  height: 12px;
  flex: none;
  transition: transform 220ms var(--nosteo-ease);
}
.nosteo-team__link:hover .nosteo-team__arrow,
.nosteo-team__link:focus-visible .nosteo-team__arrow { transform: translateX(5px); }

/* Optional single CTA, off by default. Ink-filled so it never competes with an orange Book
   button elsewhere on the page. */
.nosteo-team__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 14px 26px;
  background: var(--nosteo-ink);
  color: var(--nosteo-white);
  font-size: 15px;
  font-weight: var(--nosteo-weight-strong);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--nosteo-ink);
  transition: background 220ms var(--nosteo-ease), color 220ms var(--nosteo-ease);
}
.nosteo-team__cta:hover,
.nosteo-team__cta:focus-visible {
  background: var(--nosteo-white);
  color: var(--nosteo-ink);
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-team__link,
  .nosteo-team__arrow,
  .nosteo-team__cta { transition: none; }
  .nosteo-team__link:hover .nosteo-team__arrow { transform: none; }
}

@container nosteo-sec (min-width: 820px) {
  .nosteo-team__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  /* Photo second in the source so the words are read first on a phone, but shown first on a
     wide screen where the image is the way in. */
  .nosteo-team__media { order: -1; }
}

/* ---------- how many cards each rail shows ----------
   These stay rails at every width. The earlier build turned them into static grids above 900px
   and hid the arrows, which is why nothing slid on a desktop — the one thing a carousel has to
   do. Sean asked for sliders; a slider it is, at all widths. */

/* Services: six cards, so three in view reads as a set with more to come. */
@container nosteo-sec (min-width: 560px) { .nosteo-svc__rail { --per: 2; } }
@container nosteo-sec (min-width: 900px) { .nosteo-svc__rail { --per: 3; } }

/* Conditions: nine small tiles, so they can go tighter. Whole numbers only — see .nosteo-rail.
   Three from the smallest phone up, which Sean asked for and which also happens to divide 9
   exactly, so every page — including the last — starts flush. */
.nosteo-cond__rail { --per: 3; }
@container nosteo-sec (min-width: 780px) { .nosteo-cond__rail { --per: 4; } }
@container nosteo-sec (min-width: 1040px) { .nosteo-cond__rail { --per: 5; } }

/* Testimonials: long text, so never more than two. */
@container nosteo-sec (min-width: 820px) { .nosteo-quote__rail { --per: 2; } }

@supports not (container-type: inline-size) {
  @media (min-width: 1000px) {
    .nosteo-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nosteo-team__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
    .nosteo-team__media { order: -1; }
    .nosteo-svc__rail { --per: 3; }
    .nosteo-cond__rail { --per: 5; }
    .nosteo-quote__rail { --per: 2; }

    /* The compact tile above is sized for a phone at 3-up. Without this, a browser with no
       container-query support would pair desktop 5-up tiles with the 60px plate. */
    .nosteo-cond__card { gap: 14px; padding: 30px 16px 26px; }
    .nosteo-cond__plate { width: 76px; height: 76px; }
    .nosteo-cond__card img { width: 40px; height: 34px; }
    .nosteo-cond__label { font-size: 15px; }
  }
}