/* ============================================================
   DUCKIT — service detail pages (service-*.html).
   Reuses catalog.css .cat__grid / .card for the related-products grid.
   ============================================================ */

/* ------------------------------------------------------------ 1 · hero */

.dhero {
  position: relative;
  /* --band-h alone is a phone-sized floor; on a wide screen the band's height is
     what sets how big the (uncropped) photo can be, so scale it with the
     viewport and cap it against tall windows. */
  --dhero-h: max(var(--band-h), min(40vw, 70svh));
  /* The photo is shown whole and parked right, so its width follows from the
     band height and the file's own ratio — which is what lets the type below
     work out where it has to stop. */
  --dhero-photo-w: calc(var(--dhero-h) * var(--dhero-ar, 1.5));
  /* Room left over on the left, measured from the page gutter (the .wrap is
     centred once the viewport passes --maxw), minus a gap so a headline never
     runs onto the photo. */
  --dhero-text-w: calc(
    100vw - var(--dhero-photo-w)
    - max(0px, (100vw - var(--maxw)) / 2)
    - var(--pad-x) - 28px
  );
  min-height: var(--dhero-h);
  display: grid;
  align-items: end;
  isolation: isolate;
}
.dhero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; display: flex; justify-content: flex-end; }
/* The photo is shown whole (contain), so the band is wider than the frame. The
   leftover is filled by the same photo blown up, blurred and dimmed — the band
   stays full-bleed instead of ending in hard letterbox bars. Each page passes
   its own file in --dhero-img; it is the URL the <img> already loaded, so the
   backdrop costs no extra request. */
.dhero__media::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--dhero-img) center / cover no-repeat;
  filter: blur(30px) brightness(0.42) saturate(0.75);
  /* overscanned so the blur's soft edge never reaches the band's edge */
  transform: scale(1.12);
}
/* Whole frame, no crop. Sized by its own aspect (auto width, full height) so
   the element box IS the photo box — which is what lets the mask below land
   exactly on the photo's edge instead of somewhere out in the blur. Parked
   against the right so the type down the left has dim blur behind it rather
   than the photo's own subject. */
.dhero__media img {
  position: relative;
  width: auto; height: 100%; max-width: 100%;
  object-fit: contain;
}
@media (min-width: 861px) {
  /* melt the photo's left edge into the blur instead of a hard seam */
  .dhero__media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  }
}
@media (max-width: 860px) {
  /* A phone is too narrow to sit the photo beside the type and too short to sit
     it behind: overlaid, the eyebrow lands on a sunlit panel and cannot be read.
     So the band stops being a band here — photo in flow at full width, whole,
     with the type below it on the page's own ground. No crop, no scrim needed. */
  .dhero { display: block; min-height: 0; }
  .dhero::before { content: none; }
  .dhero__media { position: static; display: block; overflow: visible; }
  .dhero__media::before { content: none; }
  .dhero__media img {
    width: 100%; height: auto; max-width: none;
    -webkit-mask-image: none; mask-image: none;
  }
}
/* No scrim over the band any more. It was there to buy the type contrast off a
   photo it sat on top of; the type now sits on the blurred backdrop, which is
   already dark, and the scrim's only remaining effect was dulling the photo. */
.dhero__in { padding-block: clamp(30px, 5vw, 60px); }
.dhero__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
  margin-bottom: clamp(16px, 3vw, 28px);
  transition: color 0.2s var(--ease);
}
.dhero__back svg { width: 15px; height: 15px; }
.dhero__back:hover { color: var(--white); }
.dhero__h { font-size: clamp(2.1rem, 1.2rem + 3.8vw, 3.9rem); margin: 12px 0 18px; letter-spacing: -0.03em; }
.dhero__p { color: rgba(255, 255, 255, 0.86); font-size: var(--t-md); max-width: 48ch; }
.dhero__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }

@media (min-width: 861px) {
  /* Type stops where the photo starts — nothing overlaps the frame. Declared
     after the rules above so it wins on source order, not specificity. */
  .dhero__in .eyebrow,
  .dhero__h,
  .dhero__row { max-width: var(--dhero-text-w); }
  .dhero__p { max-width: min(48ch, var(--dhero-text-w)); }
  /* The headline was sized to run the full band width back when it sat on top
     of the photo. In a column it has to be smaller or it breaks every second
     word onto its own line. */
  .dhero__h { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.2rem); }
}

/* ------------------------------------------------------------ 2 · the work */

/* Was two columns of nothing but type, and .dincl below it was two columns of
   nothing but type as well - the same skeleton twice in a row on a page whose
   only photograph was the hero. This is a plate with the copy offset over its
   lower-right corner: it carries a real image, and it shares its shape with no
   other section on the page. */
.dabout { border-bottom: 1px solid var(--line); }

.dabout__plate {
  position: relative;
  margin: 0;
  /* An explicit ratio, not leftover space: a plate whose only child is
     absolutely positioned has no intrinsic height and collapses to 0. */
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line);
  background: var(--ink-3);
  overflow: hidden;
}
.dabout__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* per-page: some of these frames put the car low */
  object-position: var(--plate-pos, 50% 50%);
}

.dabout__copy {
  position: relative;
  z-index: 1;
  width: min(600px, 100%);
  margin-top: clamp(-96px, -7vw, -40px);
  margin-left: auto;
  padding: clamp(24px, 3vw, 38px);
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  /* the same cut corner the rest of the site uses on panels */
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.dabout__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
  color: var(--white);
  max-width: 24ch;
  text-wrap: balance;
}
.dabout__body { display: flex; flex-direction: column; gap: 14px; }
.dabout__body p { color: var(--mute); font-size: var(--t-body); }

@media (max-width: 800px) {
  /* the overlap needs room either side to read as one; stacked, it just
     clips the photo, so the panel drops back into normal flow */
  .dabout__plate { aspect-ratio: 4 / 3; }
  .dabout__copy { width: 100%; margin-top: -28px; }
}

/* ------------------------------------------------------------ 3 · what we fit */

/* Heading across the top, then the list beneath it — deliberately NOT the
   lead-column-beside-content shape .dabout used to share with it. The rows are
   numbered rather than ticked: six identical checkmarks said nothing, and an
   index reads as a workshop spec sheet, which is what this list is. */
.dincl { padding-block: clamp(52px, 6.5vw, 96px); border-bottom: 1px solid var(--line); }
.dincl__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px clamp(24px, 4vw, 64px);
  padding-bottom: clamp(20px, 2.6vw, 32px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line-strong);
}
.dincl__h { font-size: var(--t-lg); margin: 12px 0 0; }
.dincl__p { color: var(--mute); font-size: var(--t-sm); max-width: 38ch; }

.dincl__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 44px);
  counter-reset: fit;
}
.dincl__list li {
  counter-increment: fit;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: var(--t-body);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
/* the index is generated, so the markup carries no throwaway numbering to keep
   in step when a line is added or removed */
.dincl__list li::before {
  content: counter(fit, decimal-leading-zero);
  flex: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--torch);
}

@media (max-width: 900px) { .dincl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dincl__list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 3 · related products */

.dprod__head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: clamp(24px, 3vw, 40px);
}
.dprod__h { font-size: var(--t-lg); margin-top: 12px; }
.dprod__all {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--torch);
  white-space: nowrap;
}
.dprod__all svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.dprod__all:hover svg { transform: translateX(5px); }

/* ============================================================ part detail
   One page per catalogued part: the photo one side, everything we can state
   for certain the other. */

.part { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.part__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* width:100% is load-bearing, not tidying. This is a <button>, and a form
   control with width:auto shrinks to fit its content even at display:block -
   so the frame took its size from whichever photo was showing, and the img's
   own width:100% resolved against that same shrunk box. Every photo produced
   a different frame, which is what made the page jump when you changed
   thumbnails. Pinning the width lets aspect-ratio give a constant height.
   .part__thumb is the same kind of element and gets an explicit width for the
   same reason; .card__shot escapes it only by being a <span>. */
.part__shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
  transition: border-color 0.22s var(--ease);
}
.part__shot:hover { border-color: var(--torch); }
.part__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.part__zoom {
  position: absolute;
  right: 14px; bottom: 14px;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: rgba(10, 10, 11, 0.62);
  border: 1px solid var(--line-strong);
  color: var(--white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.part__shot:hover .part__zoom { background: var(--torch); border-color: var(--torch); color: var(--ink); }
.part__zoom svg { width: 18px; height: 18px; }

/* ---- thumbnail strip (only rendered when a part has more than one photo) ----
   A rail rather than a wrapping grid: at twenty photos a grid would push the
   description a long way down the page, and on a phone the row scrolls. */
.part__thumbnav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.part__thumbs {
  display: flex;
  gap: 8px;
  /* min-width:0 lets the rail shrink inside the flex row - without it the
     thumbnails' own width wins and the arrows get pushed off the edge. */
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* paged by the arrows, so the bar itself is just noise */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.part__thumbs::-webkit-scrollbar { display: none; }

/* These sit on --ink beside bright photos. Any dark-grey slab tops out near
   2:1 against the page, so a grey control reads as background no matter how
   its border is tuned; the accent clears 5.89:1. That is the same torch/--ink
   pairing .btn already uses, and for the same documented reason. */
.pthumb__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 72px;
  padding: 0;
  background: var(--torch);
  border: 1px solid var(--torch);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.pthumb__nav:hover { background: var(--torch-hot); border-color: var(--torch-hot); }
/* overrides the inline stroke-width attribute - CSS beats presentation attrs */
.pthumb__nav svg { width: 19px; height: 19px; stroke-width: 2.4; }
.pthumb__nav:focus-visible { outline: 2px solid var(--torch); outline-offset: 2px; }

/* At either end the arrow stays in place rather than collapsing, so the rail
   does not jump sideways when you reach the last photo. */
.pthumb__nav[disabled] { opacity: 0.28; pointer-events: none; }

/* [hidden] is only a UA default, and the display above would beat it */
.pthumb__nav[hidden] { display: none; }

.part__thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 96px;
  padding: 0;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.18s var(--ease), border-color 0.18s var(--ease);
}
.part__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.part__thumb:hover { opacity: 1; border-color: var(--line-strong); }

/* The selected photo is marked by more than opacity, so it still reads for
   anyone who cannot pick the brighter tile out of the row. */
.part__thumb.is-active { opacity: 1; border-color: var(--torch); }
.part__thumb.is-active::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--torch);
}
.part__thumb:focus-visible { outline: 2px solid var(--torch); outline-offset: 2px; }

/* ---- photo carousel (only rendered when a part has more than one shot) ---- */
.pshots { position: relative; }
.pshots__track {
  display: flex;
  overflow-x: auto;
  /* one shot at a time, and a swipe on a phone lands cleanly on the next */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pshots__track::-webkit-scrollbar { display: none; }
.pshots__track .part__shot { flex: 0 0 100%; scroll-snap-align: center; }

.pshots__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(10, 10, 11, 0.62);
  border: 1px solid var(--line-strong);
  color: var(--white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.pshots__nav:hover { background: var(--torch); border-color: var(--torch); color: var(--ink); }
.pshots__nav svg { width: 20px; height: 20px; }
.pshots__nav--prev { left: 14px; }
.pshots__nav--next { right: 14px; }
/* at either end the arrow stays put but stops inviting a click */
.pshots__nav[disabled] { opacity: 0.3; pointer-events: none; }

.pshots__dots {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.pshots__dot {
  position: relative;
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.42);
  transition: background 0.18s var(--ease), width 0.18s var(--ease);
}
.pshots__dot.is-on { background: var(--torch); width: 20px; }
/* the dot itself is 7px — this gives the tap target its 44px without pushing
   the dots apart to get it */
.pshots__dot::after { content: ''; position: absolute; inset: -18px -6px; }

/* The part page carries the fitment line in --plate, bigger and bolder than
   an eyebrow elsewhere. The name itself is set in the page's own heading face:
   a monospace works on a card at 15px, where a part name reads as a code, but
   at 40px it was a wall - too wide and too heavy for the column it sits in. */
.part .eyebrow {
  font-family: var(--plate);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
}
/* Sized for the half column it sits in rather than for the scale's own steps:
   --t-xl was set for a page title with the width to itself, and even --t-lg
   crowds the fitment line above it and the copy below. The section headings
   further down the page are larger, which is unusual for an h1 but right here -
   they head full-width bands, this heads a narrow column. */
.part__h {
  margin: 14px 0 18px;
  font-size: clamp(1.3rem, 1.02rem + 1.05vw, 1.875rem);
  letter-spacing: -0.02em;
}
/* The description is admin-authored rich text now, not a single paragraph, so
   everything the editor can emit needs a style here — an unstyled <ul> or <h3>
   in the middle of the detail column reads as a bug. Same muted body colour and
   48ch measure throughout so it still sits as one block of copy. */
/* --copy-clamp is read back by site.js, so the fold height lives here in the
   stylesheet rather than being hard-coded in two places */
.part__copy { --copy-clamp: 340px; color: var(--mute); font-size: var(--t-body); }
.part__copy > * { max-width: 48ch; }
.part__copy p { color: inherit; font-size: inherit; }
.part__copy > * + * { margin-top: 12px; }
/* 500, not 600: supplier copy is routinely pasted with the whole description
   wrapped in <strong>, so a heavy weight makes the entire block shout rather
   than emphasising anything within it. */
.part__copy strong, .part__copy b { color: var(--white); font-weight: 500; }
.part__copy em, .part__copy i { font-style: italic; }
.part__copy a { color: var(--torch); text-decoration: underline; text-underline-offset: 3px; }
.part__copy h2, .part__copy h3, .part__copy h4, .part__copy h5, .part__copy h6 {
  color: var(--white);
  font-size: var(--t-md);
  letter-spacing: 0.01em;
  margin-top: 20px;
}
.part__copy ul, .part__copy ol { padding-left: 20px; }
.part__copy ul { list-style: disc; }
.part__copy ol { list-style: decimal; }
.part__copy li + li { margin-top: 6px; }
.part__copy li::marker { color: var(--torch); }
.part__copy blockquote {
  border-left: 2px solid var(--torch);
  padding-left: 14px;
  color: var(--mute-dim);
}
.part__copy code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.92em;
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 1px 5px;
}
.part__copy pre {
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 12px 14px;
  overflow-x: auto;
}
.part__copy pre code { background: none; border: 0; padding: 0; }
.part__copy img { max-width: 100%; height: auto; }
.part__copy hr { border: 0; border-top: 1px solid var(--line); margin-block: 18px; }
/* a table can legitimately run past the copy measure, so it scrolls itself
   rather than pushing the detail column wide */
.part__copy table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.part__copy th, .part__copy td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
}
.part__copy th { color: var(--white); font-weight: 600; background: var(--ink-3); }

/* A supplier description can run to twenty lines and push the specs, the price
   and the enquire button off the screen. Past --copy-clamp it folds, with the
   last line faded out so it reads as "there is more" rather than as a cut. */
.part__copy.is-clamped {
  position: relative;
  max-height: var(--copy-clamp, 340px);
  overflow: hidden;
}
.part__copy.is-clamped::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: linear-gradient(180deg, transparent, var(--ink));
  pointer-events: none;
}
.part__more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 0;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--torch);
  transition: color 0.2s var(--ease);
}
/* An author `display` beats the UA stylesheet's [hidden] { display: none }, so
   without this the button paints even while site.js still considers it hidden —
   which is every short description, where it is a control that does nothing. */
.part__more[hidden] { display: none; }
.part__more:hover { color: var(--white); }
.part__more svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.part__more[aria-expanded='true'] svg { transform: rotate(180deg); }

.part__specs {
  margin: clamp(22px, 3vw, 32px) 0 0;
  border-top: 1px solid var(--line);
}
.pspec {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
/* --mute-dim clears AA at this size on paper, but as 12px uppercase mono with
   0.14em of tracking these are the thinnest marks on the page, and they name
   the rows beside them. One step up the grey, and a heavier weight to hold it. */
.pspec__k {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.pspec__d { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pspec__v { font-size: var(--t-sm); color: var(--white); }
/* the one spec a customer scans for — mono and a size up from the rest */
.pspec__price {
  font-family: var(--mono);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  color: var(--torch);
}
.pspec__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--white);
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.pspec__link em { font-family: var(--mono); font-size: var(--t-xs); font-style: normal; color: var(--mute); }
.pspec__link:hover { color: var(--torch); border-color: var(--torch); }

.part__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }
.part__note { margin-top: 16px; color: var(--mute-dim); font-size: var(--t-sm); max-width: 46ch; }

/* ---- more for the same car */
.prel { padding-block: 0 var(--sec-y); }
.prel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.prel__h { font-size: var(--t-lg); margin-top: 12px; }
.prel__all {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--torch);
  white-space: nowrap;
}
.prel__all svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.prel__all:hover svg { transform: translateX(5px); }
.prel .cat__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .prel .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Above the stack point the photo follows the description down. A long
   description otherwise scrolls the reader into a wall of text with the part it
   describes long gone off the top. Below 900px the columns stack, so there is
   nothing beside it to stick against and it stays in flow. */
@media (min-width: 901px) {
  .part__in > .part__gal,
  .part__in > .part__shot,
  .part__in > .pshots {
    position: sticky;
    top: calc(var(--header-h) + 16px);
  }
}

@media (max-width: 900px) {
  .part__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
  .prel .cat__grid { grid-template-columns: minmax(0, 1fr); }
  .pspec { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; }
}

/* Phone type scale — see the note in shell.css. Original values x 0.9. */
@media (max-width: 767px) {
  .dhero__h { font-size: clamp(1.89rem, 1.08rem + 3.42vw, 3.51rem); }
}