/* ============ HERO (800px, photo + mosaic overlay + live text) ============ */
.ct-hero { position: relative; height: 800px; overflow: hidden; }
.ct-hero img { position: absolute; inset: 0; width: 100%; height: 800px; object-fit: cover; }
.ct-hero .ct-hero__mobile { display: none; }
.ct-hero__content { position: absolute; left: var(--edge); top: 162px; width: 1081px; height: 478px; background: linear-gradient(to bottom right, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.45) 100%); z-index: 2; }
.ct-hero__kicker { position: absolute; left: 120px; top: 76px; width: 273px; font-size: 20px; line-height: 24.2px; letter-spacing: .4px; color: var(--black); }
.ct-hero__title { position: absolute; left: 120px; top: 133px; width: 881px; margin: 0; font-size: 48px; font-weight: 400; line-height: 58.08px; letter-spacing: 0.96px; color: var(--black); }
.ct-hero__para { position: absolute; left: 120px; top: 297px; width: 881px; margin: 0; font-size: 20px; line-height: 24.2px; color: rgba(0,0,0,.5); }

/* ============ STANDARDS (737px, 4 white cards) ============ */
.ct-standards { height: 909px; background: #fff; background-image: linear-gradient(90deg, rgba(0,0,0,0.045), rgba(0,0,0,0.19)); padding: 120px var(--edge) 0; }
/* v2.8: quality-policy bar below the cert cards */
.qp-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
  border-top: 1px solid rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  justify-content: center;
  gap: 40px;
  padding: 0 48px;
  height: 108px;
  margin-top: 76px;
}
.qp-bar p { font-size: var(--fs-title); color: var(--black); }
@media (max-width: 767px) {
  .ct-standards { height: auto; padding-bottom: 60px; }
  .qp-bar { height: auto; flex-direction: column; text-align: center; gap: 24px; padding: 32px 24px; margin-top: 48px; }
}

.ct-standards .head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: flex-start; } /* v2.9: fluid 50/50, 80px gap */
.ct-standards h2 { font-size: var(--fs-h2); width: auto; max-width: 552px; }
.ct-standards .head p { width: auto; text-align: right; font-size: 16px; line-height: 1.21; letter-spacing: 0.02em; padding-top: 6px; }
.ct-standards .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 77px; } /* V4: card edges align with the heading grid */
.cert-card { width: auto; min-width: 0; height: 304px; text-align: center; }
.cert-card .frame { height: 259px; background: #ffffff; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; } /* v2.8: links to certificate PDF */
.cert-card img { max-height: 152px; max-width: 152px; }
.cert-card .label { margin-top: 30px; font-size: var(--fs-title); }

/* v2.7: icons pop out on hover (client: "should pop out when hovered upon") */

/* v2.7: scroll-reveal entrance for all certificate icons (client: "Animate these icons") */
/* v4.1: secure cards use animated iframe icons instead of static SVGs */
.cert-card .frame img, .qc-item .icon img, .secure-card img, .reg-item img,
.secure-card iframe.secure-anim {
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity .6s ease, transform 1.022s cubic-bezier(.22,1,.36,1);
}
.cert-card.in-view .frame img, .qc-item.in-view .icon img,
.secure-card.in-view img, .reg-item.in-view img,
.secure-card.in-view iframe.secure-anim {
  opacity: 1; transform: translateY(0) scale(1);
}
/* v2.7: hover pop wins over the reveal state */
.cert-card.in-view:hover .frame img, .cert-card.in-view:focus-within .frame img { transform: translateY(0) scale(1.12); }
.qc-item.in-view:hover .icon img { transform: translateY(0) scale(1.1); }
.secure-card.in-view:hover img, .secure-card.in-view:hover iframe.secure-anim { transform: translateY(0) scale(1.1); }
.reg-item.in-view:hover img { transform: translateY(0) scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .cert-card .frame img, .qc-item .icon img, .secure-card img, .reg-item img,
  .secure-card iframe.secure-anim {
    opacity: 1; transform: none; transition: none;
  }
}

/* ============ QUALITY CHECKS (1082px, grey bg) ============ */
.ct-checks { position: relative; height: 1082px; background: #BFBFBF; }
.ct-checks__photo { position: absolute; left: calc(var(--edge) - 120px); top: 0; width: 720px; height: 1082px; object-fit: cover; filter: grayscale(1); }
.ct-checks .content { position: absolute; left: calc(var(--edge) + 720px); top: 120px; width: 480px; }
.ct-checks h2 { font-size: var(--fs-h2); white-space: pre-line; }
.ct-checks .lede { margin-top: 40px; }
.qc-item { display: flex; align-items: center; margin-top: 40px; }
.qc-item .icon { width: 100px; height: 100px; flex: none; display: flex; align-items: center; justify-content: center; }
.qc-item .icon img,
.qc-item .icon .cert-animation { display: block; width: 100px; height: 100px; border: 0; object-fit: contain; }
.qc-item p { width: 350px; margin-left: 30px; font-size: var(--fs-title); line-height: 1.21; }

/* ============ REGULATED (757px, coded Figma zig-zag) ============ */
.ct-regulated { position: relative; height: 757px; overflow: hidden; background: #000; color: #fff; }
.ct-regulated__inner { position: absolute; left: calc(50% - 628px); top: 120px; width: 1256px; height: 459px; }
.ct-regulated__head { width: 780px; margin: 0 auto; text-align: center; }
.ct-regulated__head h2 { font-size: var(--fs-h2); }
.ct-regulated__head p { margin-top: 40px; font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.5); }
.reg-timeline { position: relative; width: 1256px; height: 295px; margin-top: 77px; }
.reg-timeline__line { position: absolute; left: 28px; top: 130px; width: 1199px; height: 1px; background: #fff; }
.reg-timeline__bands {
  position: absolute;
  left: 28px;
  top: 122px;
  width: 4px;
  height: 16px;
  background: #fff;
  box-shadow: 305px 0 #fff, 610px 0 #fff, 915px 0 #fff;
}
.reg-item { position: absolute; width: 240px; height: 129px; font-size: var(--fs-title); color: #fff; }
.reg-item img { display: block; width: 60px; height: 60px; object-fit: contain; }
.reg-item p { margin-top: 20px; line-height: 1.21; }
.reg-item--top p { line-height: .98; }
.reg-item::after { content: ''; position: absolute; left: -10px; width: 1px; background: rgba(255,255,255,.5); }
.reg-item--top::after { top: 0; height: 122px; }
.reg-item--bottom::after { top: -28px; height: 145px; }
.reg-item--controlled::after { top: -20px; }
.reg-item--documented { left: 344px; top: 0; }
.reg-item--controlled { left: 38px; top: 158px; }
.reg-item--batches { left: 650px; top: 166px; }
.reg-item--audit { left: 954px; top: 0; }

/* ============ SECURE (538px, coded cards) ============ */
.ct-secure { height: 538px; overflow: hidden; padding: 120px var(--edge) 0; background: #fff; background-image: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.085)); }
.ct-secure h2 { width: 850px; font-size: var(--fs-h2); color: var(--black); }
.ct-secure > p { width: 1200px; margin-top: 40px; font-weight: 500; letter-spacing: 0; }
.secure-cards { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; gap: 40px; margin-top: 59px; } /* v2.9: 4 equal 25% columns, centered */
.secure-card { height: auto; padding: 20px; border: 1px solid #ccc; background: rgba(0,0,0,.05); }
.secure-card img { display: block; width: 60px; height: 60px; margin: 0 auto; object-fit: contain; }
.secure-card iframe.secure-anim { display: block; width: 100px; height: 100px; margin: 0 auto; border: 0; pointer-events: none; }
.secure-card p { max-width: 227px; width: auto; margin: 20px auto 0; font-size: 16px; line-height: 1.21; text-align: center; color: var(--black); }

/* ============ WORKFLOWS (714px black, left text + right photo) ============ */
.ct-workflows { position: relative; height: 714px; background: #000; color: #fff; overflow: hidden; }
.ct-workflows .photo { position: absolute; left: calc(var(--edge) + 600px); top: 0; width: 720px; height: 714px; object-fit: cover; filter: grayscale(1); }
.ct-workflows .panel { position: absolute; left: calc(var(--edge) - 120px); top: 90px; width: 720px; height: 535px; padding: 100px 0 0 120px; }
.ct-workflows h2 { font-size: var(--fs-h2); width: 480px; }
.ct-workflows ul { list-style: none; margin-top: 40px; width: 480px; }
.ct-workflows li { height: 36px; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; padding: 0; color: rgba(255,255,255,0.7); }
.ct-workflows li + li { border-top: none; }

/* ============ SCALE (807px) ============ */
.ct-scale { height: 807px; background: #fff; background-image: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.215)); padding-top: 120px; }
.ct-scale .head { display: flex; justify-content: space-between; width: 1200px; margin: 0 auto; }
.ct-scale h2 { font-size: var(--fs-h2); width: 580px; }
.ct-scale ul { list-style: none; width: 580px; }
.ct-scale li { height: 36px; border-top: 1px solid rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); display: flex; align-items: center; padding: 0; }
.ct-scale li + li { border-top: none; }
.ct-scale li.tall { height: 55px; align-items: flex-start; padding-top: 12px; }
.ct-scale .photos { display: flex; gap: 20px; width: 1440px; margin: 60px auto 0; } /* v2.8: centered band */
.ct-scale .photos img { width: 710px; height: 428px; object-fit: cover; filter: grayscale(1); }

/* ============ COMPACT DESKTOP (768–1439px) ============ */
@media (min-width: 768px) and (max-width: 1439px) {
  .ct-hero { height: clamp(600px, 51vw, 720px); }
  .ct-hero img { height: 100%; }
  .ct-hero__content {
    left: var(--chrome-edge);
    top: clamp(70px, 8vw, 115px);
    width: min(1081px, calc(100% - (2 * var(--chrome-edge))));
    height: auto;
    min-height: 420px;
    padding: clamp(54px, 6vw, 76px) clamp(48px, 7vw, 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ct-hero__kicker,
  .ct-hero__title,
  .ct-hero__para { position: static; width: auto; }
  .ct-hero__title { margin-top: 28px; font-size: clamp(40px, 4.1vw, 48px); line-height: 1.16; }
  .ct-hero__para { margin-top: 32px; font-size: clamp(17px, 1.65vw, 20px); line-height: 1.3; }

  .ct-standards { height: auto; padding: clamp(80px, 8vw, 110px) var(--chrome-edge); }
  .ct-standards .head { column-gap: clamp(40px, 6vw, 80px); }
  .ct-standards .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 28px; margin-top: 64px; }
  .cert-card { width: auto; height: auto; }
  .cert-card .frame { height: 220px; }
  .cert-card .label { margin-top: 22px; }
  .qp-bar { height: auto; min-height: 108px; margin-top: 64px; padding: 24px 32px; }

  .ct-checks { height: auto; min-height: 760px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ct-checks__photo { position: relative; left: auto; top: auto; width: 100%; height: 100%; min-height: 760px; display: block; }
  .ct-checks .content { position: relative; left: auto; top: auto; width: auto; padding: clamp(72px, 8vw, 110px) var(--chrome-edge) clamp(72px, 8vw, 110px) clamp(38px, 5vw, 72px); }
  .ct-checks h2 { white-space: normal; }
  .ct-checks .lede { margin-top: 32px; }
  .qc-item { margin-top: 30px; }
  .qc-item .icon,
  .qc-item .icon img,
  .qc-item .icon .cert-animation { width: 100px; height: 100px; }
  .qc-item p { width: auto; min-width: 0; margin-left: 22px; }

  .ct-regulated { height: auto; min-height: 650px; }
  .ct-regulated__inner { position: relative; left: auto; top: auto; width: calc(100% - (2 * var(--chrome-edge))); height: auto; min-height: 650px; margin: 0 auto; padding: 88px 0 80px; }
  .ct-regulated__head { width: min(780px, 100%); }
  .reg-timeline { width: 100%; height: 290px; margin-top: 68px; }
  .reg-timeline__line { left: 1%; top: 130px; width: 98%; }
  .reg-timeline__bands {
    left: 1%;
    top: 122px;
    width: 98%;
    height: 16px;
    box-shadow: none;
    background:
      linear-gradient(#fff 0 0) 0 0 / 4px 16px no-repeat,
      linear-gradient(#fff 0 0) 33.333% 0 / 4px 16px no-repeat,
      linear-gradient(#fff 0 0) 66.667% 0 / 4px 16px no-repeat,
      linear-gradient(#fff 0 0) 100% 0 / 4px 16px no-repeat;
  }
  .reg-item { width: 23%; font-size: clamp(15px, 1.55vw, 18px); }
  .reg-item p,
  .reg-item--top p { margin-top: 12px; line-height: 1.12; }
  .reg-item--controlled { left: 1%; top: 156px; }
  .reg-item--documented { left: 26%; }
  .reg-item--batches { left: 51%; top: 156px; }
  .reg-item--audit { left: 76%; }

  .ct-secure { height: auto; padding: 88px var(--chrome-edge); }
  .ct-secure h2, .ct-secure > p { width: auto; }
  .secure-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 52px; }
  .secure-card { height: auto; min-height: 151px; }

  .ct-workflows { height: auto; min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ct-workflows .photo { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 650px; display: block; }
  .ct-workflows .panel { position: relative; left: auto; top: auto; grid-column: 1; grid-row: 1; width: auto; height: auto; padding: 0 var(--chrome-edge); display: flex; flex-direction: column; justify-content: center; }
  .ct-workflows h2, .ct-workflows ul { width: auto; }
  .ct-workflows li { height: auto; min-height: 42px; padding: 8px 0; }

  .ct-scale { height: auto; padding: 88px var(--chrome-edge); }
  .ct-scale .head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 80px); width: auto; }
  .ct-scale h2, .ct-scale ul { width: auto; }
  .ct-scale li { height: auto; min-height: 42px; padding: 8px 0; }
  .ct-scale li.tall { height: auto; min-height: 58px; padding: 10px 0; }
  .ct-scale .photos { width: 100%; gap: 20px; }
  .ct-scale .photos img { width: calc(50% - 10px); height: clamp(300px, 33vw, 428px); }
}

@media (min-width: 1100px) and (max-width: 1439px) {
  .ct-standards .cards,
  .secure-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { font-size: 16px; }
  .shell { width: 100vw; max-width: none; margin: 0; }


  .ct-hero { height: 784px; background: linear-gradient(90deg,#fcfcfc,#e4e4e4); overflow: hidden; }
  .ct-hero .ct-hero__desktop, .ct-hero .ct-hero__content { display: none; }
  .ct-hero img.ct-hero__mobile { display: block; width: 661px; height: 400px; left: 50%; right: auto; object-fit: cover; transform: translateX(-50%); }
  .ct-hero::before { content: 'Multiple Certifications.\A One Standard. Excellence.'; white-space: pre-line; position: absolute; left: 20px; top: 460px; width: calc(100% - 40px); text-align: center; font-size: 30px; line-height: 1.2; font-weight: 400; }
  .ct-hero::after { content: 'Our quality management system ensures consistency, process control, and continuous improvement across all operations. Recognized by the Government of India for export performance and reliability. Hi-Tech is a proud member of the Bombay Master Printers Association.'; position: absolute; left: 20px; top: 612px; width: calc(100% - 40px); color: rgba(0,0,0,.5); text-align: center; font-size: 16px; line-height: 1.21; letter-spacing: .02em; }

  .ct-standards { height: 1290px; padding: 60px 20px 0; }
  .ct-standards .head { display: block; }
  .ct-standards h2 { width: 100%; font-size: 30px; line-height: 1.21; text-align: center; }
  .ct-standards .head p { display: none; }
  .ct-standards .cards { display: block; margin-top: 40px; }
  .cert-card { width: 100%; height: 235px; margin-bottom: 40px; }
  .cert-card .frame { width: 200px; height: 200px; margin: 0 auto; }
  .cert-card img { max-width: 152px; max-height: 152px; }
  .cert-card .label { margin-top: 20px; font-size: 20px; line-height: 24px; }

  .ct-checks { height: 1645px; }
  .ct-checks__photo { position: relative; width: 100%; height: 440px; object-fit: cover; }
  .ct-checks .content { left: 0; top: 440px; width: 100%; height: 1145px; padding: 60px 20px 0; text-align: center; }
  .ct-checks h2 { width: 100%; font-size: 30px; line-height: 1.21; white-space: normal; }
  .ct-checks .lede { width: 100%; margin-top: 40px; color: rgba(0,0,0,.5); line-height: 1.21; }
  .qc-item { position: relative; display: block; width: 100%; height: 235px; margin: 0; padding-top: 40px; }
  .qc-item:first-of-type { margin-top: 0; }
  .qc-item:not(:last-child)::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid rgba(0,0,0,.2); }
  .qc-item .icon { width: 100px; height: 100px; margin: 0 auto; }
  .qc-item .icon img,
  .qc-item .icon .cert-animation { width: 100px; height: 100px; }
  .qc-item p { width: 100%; margin: 20px 0 0; font-size: 20px; line-height: 1.21; }

  .ct-regulated { height: auto; } /* v4.2: content-driven — fixed 821px clipped the last timeline item */
  .ct-regulated__inner { position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 60px 0 90px; }
  .ct-regulated__head { width: 100%; padding: 0 20px; }
  .ct-regulated__head h2 { font-size: 30px; line-height: 1.21; }
  .ct-regulated__head p { margin-top: 40px; font-size: 16px; line-height: 1.21; }
  .reg-timeline { width: calc(100% - 40px); height: 520px; margin: 40px 20px 0; }
  .reg-timeline__line { left: 0; top: 0; width: 1px; height: 520px; }
  .reg-timeline__bands { display: block; left: 0; top: 42px; width: 4px; height: 16px; box-shadow: 0 140px #fff, 0 280px #fff, 0 420px #fff; }
  .reg-item { position: absolute; left: 0 !important; width: 100%; height: 100px; display: flex; align-items: center; font-size: 20px; }
  .reg-item img { position: absolute; right: 0; width: 100px; height: 100px; }
  .reg-item p { width: 256px; margin: 0; padding-left: 16px; line-height: 1.21 !important; }
  .reg-item::after { display: none; }
  .reg-item--controlled { top: 0; }
  .reg-item--documented { top: 140px; }
  .reg-item--batches { top: 280px; }
  .reg-item--audit { top: 420px; }

  .ct-secure { height: auto; padding: 60px 20px 64px; } /* v4.2: content-driven — cards grew with the anim icons */
  .ct-secure h2 { width: 100%; font-size: 30px; line-height: 1.21; text-align: center; }
  .ct-secure > p { width: 100%; margin-top: 40px; text-align: center; color: rgba(0,0,0,.5); line-height: 1.21; }
  .secure-cards { grid-template-columns: repeat(2, minmax(0,1fr)); width: 100%; gap: 20px; margin-top: 60px; }
  .secure-card { width: auto; height: auto; padding: 20px 10px; } /* v4.2: hug content — text can't spill */
  .secure-card p { width: auto; max-width: 170px; margin: 16px auto 0; font-size: 16px; line-height: 1.21; }
  .secure-card iframe.secure-anim { width: 72px; height: 72px; }

  .ct-workflows { height: 908px; padding: 60px 20px 0; }
  .ct-workflows .photo { position: relative; left: 0; top: 0; width: 100%; height: 494px; object-fit: cover; }
  .ct-workflows .panel { position: relative; left: 0; top: 0; width: 100%; height: auto; padding: 40px 0 0; }
  .ct-workflows h2 { width: 100%; font-size: 30px; line-height: 1.21; text-align: center; }
  .ct-workflows ul { width: 100%; margin-top: 40px; text-align: center; }
  .ct-workflows li { height: 36px; justify-content: center; font-size: 16px; }

  .ct-scale { height: 996px; padding: 60px 20px 0; }
  .ct-scale .head { display: block; width: 100%; }
  .ct-scale h2 { width: 100%; font-size: 30px; line-height: 1.21; text-align: center; }
  .ct-scale ul { width: 100%; margin-top: 40px; }
  .ct-scale li { height: 48px; justify-content: center; text-align: center; color: rgba(0,0,0,.5); }
  .ct-scale li.tall { height: 85px; align-items: center; padding: 0 8px; }
  .ct-scale .photos { gap: 20px; margin-top: 60px; width: 100%; justify-content: center; transform: none; }
  .ct-scale .photos img { width: calc(50% - 10px); height: 429px; object-fit: cover; }

  /* V4 mobile: remove fixed-height staging and let content define each band. */
  .ct-hero {
    height: auto;
    min-height: 0;
    padding: clamp(380px, 102vw, 460px) 0 60px;
  }
  .ct-hero img.ct-hero__mobile { top: 0; width: 100%; height: clamp(320px, 90vw, 400px); }
  .ct-hero::before,
  .ct-hero::after { position: relative; left: auto; top: auto; display: block; width: auto; margin-left: 20px; margin-right: 20px; }
  .ct-hero::before { margin-top: 0; }
  .ct-hero::after { margin-top: 34px; }

  .ct-standards { height: auto; padding-bottom: 60px; }
  .ct-standards .cards { margin-bottom: 0; }
  .cert-card { height: auto; min-height: 235px; }
  .cert-card:last-child { margin-bottom: 0; }

  .ct-checks { height: auto; display: flex; flex-direction: column; }
  .ct-checks__photo { position: relative; left: auto; top: auto; width: 100%; height: clamp(320px, 112vw, 440px); display: block; }
  .ct-checks .content { position: relative; left: auto; top: auto; height: auto; padding: 60px 20px; }
  .qc-item { height: auto; min-height: 220px; }

  .ct-regulated { height: auto; }
  .ct-regulated__inner { height: auto; padding-bottom: 60px; }
  .reg-timeline { height: 520px; }
  .reg-item { display: grid; grid-template-columns: clamp(70px, 24vw, 100px) minmax(0, 1fr); gap: 26px; align-items: center; padding-left: 20px; }
  .reg-item img { position: relative; right: auto; width: clamp(70px, 24vw, 100px); height: clamp(70px, 24vw, 100px); }
  .reg-item p { width: auto; min-width: 0; margin: 0; padding-left: 0; font-size: clamp(15px, 4.5vw, 18px); line-height: 1.15 !important; }

  .ct-secure { height: auto; padding-bottom: 60px; }
  .secure-card:nth-child(n+3) { height: auto; min-height: 170px; }

  .ct-workflows { height: auto; padding-bottom: 60px; }
  .ct-workflows .photo { height: clamp(300px, 112vw, 494px); display: block; }
  .ct-workflows .panel { height: auto; }
  .ct-workflows li { height: auto; min-height: 42px; padding: 8px 0; }

  .ct-scale { height: auto; padding-bottom: 60px; }
  .ct-scale li { height: auto; min-height: 48px; padding: 8px 0; }
  .ct-scale li.tall { height: auto; min-height: 76px; }
  .ct-scale .photos { flex-direction: column; gap: 20px; }
  .ct-scale .photos img { width: 100%; height: clamp(300px, 112vw, 429px); }

}