/* ============================================================
   Clearance sizes — guide-price cards (clearance service page only)
   To add an image: place <img src="..." alt="..." width="..." height="..."
   loading="lazy" decoding="async"> inside .clr-card__media where the
   comment marks it. Sizing, cover-fit and the gradient are already handled.
   ============================================================ */
.clr-sizes{
  padding: 116px 0;
  background: var(--white);
}

.clr-sizes__grid,
.clr-sizes__header{ width: 100%; }

.clr-sizes__header{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: 56px;
}
.clr-sizes__header .hero__eyebrow{ margin-bottom: 16px; }
.clr-sizes__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--black);
}
.clr-sizes__intro{
  max-width: 34em;
  justify-self: end;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.clr-sizes__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.clr-sizes__grid > li{ display: flex; }

.clr-card{
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--grey-light);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.clr-card:hover{
  box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 14px 36px rgba(17,17,17,.10);
  transform: translateY(-2px);
}
.clr-card:focus-visible{
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* Media area — fills the card; images go here later */
.clr-card__media{
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--grey-light);
}
.clr-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Soft charcoal gradient over the lower part only */
.clr-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(28,28,30,0) 0%,
    rgba(28,28,30,0) 38%,
    rgba(28,28,30,.12) 52%,
    rgba(28,28,30,.38) 66%,
    rgba(28,28,30,.62) 82%,
    rgba(28,28,30,.78) 100%
  );
}

.clr-card__body{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 28px;
}
.clr-card__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.clr-card__rule{
  display: block;
  width: 32px;
  height: 3px;
  margin: 12px 0 14px;
  border-radius: 2px;
  background: var(--red);
}
.clr-card__price{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.clr-card__from{
  font-family: var(--font-text);
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
}
.clr-card__amount{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.clr-card__arrow{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.clr-card__arrow svg{ transition: transform .3s var(--ease); }
.clr-card:hover .clr-card__arrow,
.clr-card:focus-visible .clr-card__arrow{
  background: var(--red);
  color: var(--white);
}
.clr-card:hover .clr-card__arrow svg,
.clr-card:focus-visible .clr-card__arrow svg{ transform: translateX(3px); }

.clr-sizes__note{
  margin-top: 28px;
  font-family: var(--font-text);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 1100px){
  .clr-sizes__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .clr-sizes{ padding: 88px 0; }
  .clr-sizes__header{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 40px;
  }
  .clr-sizes__intro{ justify-self: start; }
}
@media (max-width: 700px){
  .clr-sizes{ padding: 72px 0; }
  .clr-sizes__grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .clr-card{ aspect-ratio: 4 / 3; }
  .clr-card__body{ padding: 22px; }
  .clr-card__amount{ font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce){
  .clr-card,
  .clr-card__arrow,
  .clr-card__arrow svg{ transition: none; }
  .clr-card:hover{ transform: none; }
}

/* ============================================================
   Before / after clearance comparison (clearance page only)
   Image 2 (after) is the full-size base layer; image 1 (before) sits on
   exactly the same box and is clipped from the right, so its visible
   width always equals --pos. Neither image is ever resized while
   dragging. Driven by clearance-compare.js via a native range input.
   ============================================================ */
.clr-compare{
  padding: 0 0 116px;
  background: var(--white);
}
.clr-compare__header{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: end;
  margin-bottom: 56px;
}
.clr-compare__header .hero__eyebrow{ margin-bottom: 16px; }
.clr-compare__heading{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--black);
}
.clr-compare__intro{
  max-width: 34em;
  justify-self: end;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.clr-compare__disclaimer{
  display: block;
  margin-top: 8px;
  font-size: .82rem;
  color: var(--text-secondary);
  opacity: .8;
}

.clr-compare__frame{
  --pos: 50%;
  position: relative;
  width: 100%;
  /* ~80% of the original 820px; on short laptop screens the square is
     also capped by viewport height so the whole plan fits in view. */
  max-width: min(660px, 78vh);
  margin: 0 auto;
  aspect-ratio: 1 / 1;          /* matches the 1254×1254 source images */
  touch-action: pan-y;          /* horizontal drags move the slider, not the page */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.clr-compare__img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}
.clr-compare__img--before{
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.clr-compare__divider{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: var(--red);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 2px 10px rgba(17,17,17,.18);
  pointer-events: none;
}
.clr-compare__handle{
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  color: var(--red);
  border: 2px solid var(--red);
  box-shadow: 0 6px 18px rgba(17,17,17,.22);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.clr-compare__frame.is-dragging .clr-compare__handle{
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 8px 22px rgba(17,17,17,.28);
}

/* Visually hidden but focusable: keyboard + screen-reader control */
.clr-compare__range{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.clr-compare__range:focus-visible ~ .clr-compare__divider .clr-compare__handle{
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

/* Static state labels (not interactive): matched pill pair */
.clr-compare__label{
  position: absolute;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(17,17,17,.10);
  pointer-events: none;
}
.clr-compare__label svg{
  flex-shrink: 0;
  width: 21px;
  height: 21px;
}
.clr-compare__label--before{
  left: 16px;
  background: #FFF1F2;
  color: var(--red);
}
.clr-compare__label--after{
  right: 16px;
  background: #ECF9F0;
  color: #087A50;
}

@media (max-width: 900px){
  .clr-compare{ padding-bottom: 88px; }
  .clr-compare__header{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
  .clr-compare__intro{ justify-self: start; }
}
@media (max-width: 700px){
  .clr-compare{ padding-bottom: 72px; }
  .clr-compare__handle{ width: 48px; height: 48px; }
  .clr-compare__label{ bottom: 8px; gap: 8px; height: 40px; padding: 10px 16px; font-size: .9375rem; }
  .clr-compare__label svg{ width: 18px; height: 18px; }
  .clr-compare__label--before{ left: 8px; }
  .clr-compare__label--after{ right: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .clr-compare__handle{ transition: none; }
}

/* ============================================================
   Hero (clearance page only): fill the first screen under the sticky
   header on two-column layouts, so the next section starts below the
   fold. Content stays vertically centred in the taller box. ≤900px
   (single column) keeps the shared content-driven height.
   ============================================================ */
@media (min-width: 901px){
  .service-page .svcd-hero{
    display: grid;
    align-content: center;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }
}