/* =============================================================================
   Direct Skills UAE — homepage bands
   Hero slider + course finder · recognition frame · course group bento ·
   levels ladder · why panels · featured list · enrol steps · split bands ·
   questions & answers · reviews · awarding bodies · closing band.
   Counts vary with the data, so grids read their column count from
   --n / --cols set on the element, and 1, 2 or 3 items still sit deliberately.
   ========================================================================== */

/* ----------------------------------------------------------------- hero */
.ds-hero { position: relative; background: var(--ds-paper); }
.ds-hero__media { position: relative; height: clamp(560px, 84vh, 880px); overflow: hidden; background: var(--ds-ink-deep); }
.ds-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ds-ease); }
.ds-hero__slide.is-current { opacity: 1; }
.ds-hero__slide img, .ds-hero__slide video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); transition: transform 8s linear; }
.ds-hero__slide.is-current img, .ds-hero__slide.is-current video { transform: scale(1); }
.ds-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--ds-ink-deep-rgb) / .55) 0%, rgb(var(--ds-ink-deep-rgb) / .08) 38%, rgb(var(--ds-ink-deep-rgb) / .35) 100%); pointer-events: none; }

.ds-hero__place { position: absolute; top: 34px; left: 0; right: 0; z-index: 2; }
.ds-hero__place .ds-container { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ds-parchment); font-family: var(--ds-font-caps); font-size: .78rem; letter-spacing: .28em; }
.ds-hero__dots { display: flex; gap: 4px; }
.ds-hero__dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.ds-hero__dots button::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--ds-gold-soft); transition: background-color .3s var(--ds-ease); }
.ds-hero__dots button.is-current::after { background: var(--ds-gold); }

.ds-hero__card-wrap { position: relative; z-index: 3; margin-top: -300px; padding-bottom: 20px; }
.ds-hero__card {
  position: relative; max-width: 860px; margin: 0 auto; text-align: center;
  background: var(--ds-paper); padding: 118px 72px 56px;
  border-radius: 50% 50% 16px 16px / 170px 170px 16px 16px;
  box-shadow: var(--ds-shadow);
}
.ds-hero__card::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgb(var(--ds-gold-rgb) / .75); border-radius: 50% 50% 10px 10px / 158px 158px 10px 10px; pointer-events: none; }
.ds-hero__crest { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 64px; }
.ds-hero__stack { display: grid; }
/* The outgoing words leave before the incoming words arrive, so two headlines
   are never readable on top of each other while the photos cross-fade. */
.ds-hero__copy { grid-area: 1 / 1; transition: opacity .6s var(--ds-ease) .4s, visibility 0s; }
.ds-hero__copy:not(.is-current) { opacity: 0; visibility: hidden; transition: opacity .3s var(--ds-ease), visibility 0s linear .3s; }
.ds-hero__eyebrow { font-family: var(--ds-font-caps); color: var(--ds-gold-deep); letter-spacing: .26em; font-size: .8rem; margin-bottom: 18px; text-wrap: balance; }
.ds-hero__title { margin-bottom: 18px; font-family: var(--ds-font-head); font-weight: 300; color: var(--ds-ink); letter-spacing: -.01em; line-height: 1.12; font-size: clamp(2.2rem, 3.9vw, 3.5rem); text-wrap: balance; }
.ds-hero__copy .ds-lede { margin: 0 auto 32px; }
.ds-hero__alt { display: flex; justify-content: center; gap: 12px 28px; flex-wrap: wrap; font-size: .95rem; color: var(--ds-muted); }
.ds-hero__alt-stack { margin-top: 22px; }

.ds-finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0; border: 1px solid var(--ds-line); border-radius: 4px; background: var(--ds-parchment); text-align: left; }
.ds-finder--one { grid-template-columns: minmax(0, 1fr) auto; }
.ds-finder label { display: grid; gap: 2px; padding: 10px 18px; border-right: 1px solid var(--ds-line); min-width: 0; }
.ds-finder label span { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ds-muted); font-weight: 600; }
.ds-finder select {
  width: 100%; min-width: 0; text-overflow: ellipsis; border: 0; background-color: transparent; padding: 2px 24px 2px 0;
  font-weight: 600; color: var(--ds-ink); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ds-gold-deep) 50%), linear-gradient(135deg, var(--ds-gold-deep) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.ds-finder select:focus { outline: none; }
.ds-finder label:focus-within { box-shadow: inset 0 -2px 0 var(--ds-gold); }
.ds-finder .ds-btn { margin: 6px; min-height: 52px; }

/* ------------------------------------------------------ recognition bar */
.ds-recognition { padding: 60px 0 40px; }
.ds-recognition__frame { border: 1px solid var(--ds-gold); outline: 1px solid rgb(var(--ds-gold-rgb) / .45); outline-offset: 5px; border-radius: 3px; display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(var(--n, 4), minmax(0, 1fr)); align-items: stretch; background: var(--ds-paper); }
.ds-recognition__frame--figures { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.ds-recognition__frame--bodies { grid-template-columns: 1fr; }
.ds-recognition__bodies { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 26px 32px; border-right: 1px solid var(--ds-line); min-width: 0; }
.ds-recognition__frame--bodies .ds-recognition__bodies { border-right: 0; flex-direction: row; align-items: center; }
.ds-recognition__bodies p { font-size: .9rem; color: var(--ds-muted); line-height: 1.55; text-wrap: pretty; }
.ds-recognition__bodies b { color: var(--ds-ink); font-weight: 600; }
.ds-recognition__logos { display: flex; gap: 14px; flex-wrap: wrap; }
.ds-recognition__logos a { width: 96px; height: 58px; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: 3px; display: grid; place-items: center; padding: 8px; transition: border-color .25s var(--ds-ease); }
.ds-recognition__logos a:hover { border-color: var(--ds-gold); }
.ds-recognition__logos img { max-height: 40px; width: auto; object-fit: contain; }
.ds-figure { display: flex; flex-direction: column; justify-content: center; padding: 22px 18px; text-align: center; border-right: 1px solid var(--ds-line); min-width: 0; }
.ds-figure:last-child { border-right: 0; }
.ds-figure strong { display: block; font-family: var(--ds-font-caps); font-weight: 600; font-size: 2.3rem; color: var(--ds-ink); line-height: 1.1; }
.ds-figure span { font-size: .86rem; color: var(--ds-muted); line-height: 1.4; }

/* -------------------------------------------------- course group tiles */
.ds-groups { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 26px; }
.ds-group { display: grid; grid-template-rows: 1fr auto; gap: 16px; color: var(--ds-ink); min-width: 0; }
.ds-groups--span .ds-group--feature { grid-row: span 2; }
.ds-group__img { position: relative; overflow: hidden; border-radius: var(--ds-arch); aspect-ratio: 4 / 5; background: var(--ds-parchment-2); }
.ds-groups--cols-1 .ds-group__img { aspect-ratio: 21 / 9; }
.ds-groups--cols-2 .ds-group__img { aspect-ratio: 4 / 3; }
.ds-groups--span .ds-group--feature .ds-group__img { aspect-ratio: auto; height: 100%; min-height: 420px; }
.ds-group__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: transform .8s var(--ds-ease); }
/* The tall feature tile shows only a narrow slice of a landscape photo; the
   subject of the group photos sits left of centre, so the slice follows it. */
.ds-group--feature .ds-group__img img { object-position: 38% 40%; }
.ds-group:hover .ds-group__img img { transform: scale(1.05); }
.ds-group__img::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(var(--ds-paper-rgb) / .55); border-radius: 999px 999px 8px 8px / 140px 140px 8px 8px; pointer-events: none; }
.ds-group__count { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--ds-paper); color: var(--ds-ink); font-size: .78rem; font-weight: 600; padding: 5px 14px; border-radius: 2px; white-space: nowrap; box-shadow: inset 0 -2px 0 var(--ds-gold); }
.ds-group__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ds-line); padding-bottom: 12px; min-height: 52px; transition: border-color .3s var(--ds-ease); }
.ds-group__label h3 { font-size: 1.22rem; text-wrap: balance; }
.ds-group--feature .ds-group__label h3 { font-size: 1.6rem; }
.ds-group__label .ds-btn__arrow { color: var(--ds-gold-deep); }
.ds-group:hover .ds-btn__arrow { transform: translateX(4px); }
.ds-group:hover .ds-group__label { border-bottom-color: var(--ds-gold); }

/* ------------------------------------------------------- levels ladder */
.ds-ladder { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); align-items: end; position: relative; margin-top: 20px; }
.ds-ladder--few { max-width: calc(var(--n) * 300px); }
.ds-step { position: relative; padding: 0 12px; min-width: 0; color: var(--ds-ink); }
.ds-step__block { background: var(--ds-paper); border: 1px solid var(--ds-line); border-bottom: 0; border-top: 2px solid var(--ds-gold); padding: 54px 16px 26px; text-align: center; position: relative; min-height: calc(340px + var(--i, 0) * 34px); transition: background-color .3s var(--ds-ease); }
.ds-step:last-of-type .ds-step__block { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-parchment); }
.ds-step:last-of-type h3 { color: var(--ds-parchment); }
.ds-step:last-of-type p { color: rgb(var(--ds-parchment-rgb) / .75); }
.ds-step .ds-seal { --size: 64px; position: absolute; top: -33px; left: 50%; transform: translateX(-50%); font-size: 1.15rem; }
.ds-step h3 { font-size: 1.3rem; margin-bottom: 10px; }
/* Descriptions are shown in full — a sentence cut off with an ellipsis reads as
   unfinished. The steps are tall enough for the longest seeded description. */
.ds-step p { font-size: .9rem; color: var(--ds-muted); line-height: 1.55; text-wrap: pretty; }
.ds-step__count { display: inline-block; margin-top: 16px; font-weight: 600; font-size: .84rem; box-shadow: inset 0 -1px 0 var(--ds-gold); color: var(--ds-ink); }
.ds-step:last-of-type .ds-step__count { color: var(--ds-gold-soft); }
.ds-step:hover .ds-step__block { background: var(--ds-parchment-2); }
.ds-step:last-of-type:hover .ds-step__block { background: var(--ds-ink-2); }
.ds-ladder__ground { grid-column: 1 / -1; height: 10px; border-top: 1px solid var(--ds-gold); border-bottom: 1px solid rgb(var(--ds-gold-rgb) / .45); }

/* --------------------------------------------------------- why panels */
.ds-why { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.ds-why--no-photo { grid-template-columns: 1fr; }
.ds-why > * { min-width: 0; }
.ds-why__photo { position: relative; }
.ds-why__photo .ds-arch-img { aspect-ratio: 4 / 5.2; }
.ds-why__photo .ds-arch-img img { object-position: 40% 30%; }
.ds-why__stamp { position: absolute; right: -26px; bottom: 60px; }
.ds-why__stamp .ds-seal { --size: 140px; font-size: .62rem; text-align: center; line-height: 1.5; letter-spacing: .08em; padding: 22px; text-transform: uppercase; }
.ds-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.ds-panels > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ds-panel { background: var(--ds-paper); border: 1px solid var(--ds-line); outline: 1px solid transparent; outline-offset: -8px; border-radius: 3px; padding: 30px 28px; min-width: 0; transition: outline-color .3s var(--ds-ease), box-shadow .3s var(--ds-ease); }
.ds-panel:hover { outline-color: rgb(var(--ds-gold-rgb) / .6); box-shadow: var(--ds-shadow-soft); }
.ds-panel__icon { width: 44px; height: 44px; color: var(--ds-gold-deep); margin-bottom: 18px; stroke-width: 1.3; }
.ds-panel h3 { font-size: 1.2rem; margin-bottom: 8px; }
.ds-panel p { font-size: .93rem; color: var(--ds-muted); }

/* ----------------------------------------------- featured course list */
.ds-list { border-top: 1px solid var(--ds-gold); }
.ds-row { display: grid; grid-template-columns: 176px 64px minmax(0, 1fr) 150px 44px; align-items: center; gap: 28px; padding: 22px 12px; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink); transition: background-color .3s var(--ds-ease); }
.ds-row:hover { background: var(--ds-parchment); }
.ds-section--parchment .ds-row:hover { background: var(--ds-paper); }
.ds-row__thumb { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 999px 999px 4px 4px / 60px 60px 4px 4px; background: var(--ds-parchment-2); }
.ds-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-row__title h3 { font-size: 1.32rem; margin-bottom: 6px; text-wrap: balance; }
.ds-row__meta { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: .86rem; color: var(--ds-muted); }
.ds-row__meta b { font-weight: 600; color: var(--ds-ink-2); }
.ds-row .ds-seal { --size: 56px; font-size: .95rem; }
.ds-row .ds-seal--empty { visibility: hidden; }
.ds-row__price { text-align: right; }
.ds-row__price strong { display: block; font-family: var(--ds-font-head); font-weight: 400; font-size: 1.6rem; color: var(--ds-ink); line-height: 1.1; }
.ds-row__price s, .ds-row__price small { font-size: .86rem; color: var(--ds-muted); }
.ds-row__go { width: 40px; height: 40px; border: 1px solid var(--ds-line); border-radius: 50%; display: grid; place-items: center; color: var(--ds-gold-deep); transition: background-color .3s var(--ds-ease), color .3s var(--ds-ease), border-color .3s var(--ds-ease); }
.ds-row:hover .ds-row__go { background: var(--ds-ink); color: var(--ds-gold-soft); border-color: var(--ds-ink); }
.ds-list__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; color: var(--ds-muted); }

/* -------------------------------------------------------- enrol steps */
.ds-steps { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 26px; position: relative; list-style: none; margin: 0; padding: 0; }
.ds-steps--few { max-width: calc(var(--n) * 290px); margin-inline: auto; }
.ds-steps::before { content: ""; position: absolute; top: 36px; left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); height: 1px; background: repeating-linear-gradient(90deg, var(--ds-gold) 0 10px, transparent 10px 18px); }
.ds-steps li { text-align: center; position: relative; min-width: 0; }
.ds-steps .ds-seal { --size: 72px; margin: 0 auto 22px; font-size: 1.3rem; }
.ds-steps h3 { font-size: 1.24rem; margin-bottom: 8px; }
.ds-steps p { font-size: .96rem; color: var(--ds-muted); text-wrap: pretty; }

/* ---------------------------------------------------- split (partner) */
.ds-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ds-split > * { min-width: 0; }
.ds-split--no-photo { grid-template-columns: minmax(0, 760px); }
.ds-split--reverse > .ds-arch-img { order: 2; }
.ds-split .ds-arch-img { aspect-ratio: 5 / 4; border-radius: 999px 999px 14px 14px / 220px 220px 14px 14px; }
.ds-split .ds-lede { margin-top: 18px; }
.ds-split .ds-head + .ds-btn { margin-top: 32px; }

/* --------------------------------------------------------------- faq */
.ds-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.ds-faq--one { grid-template-columns: minmax(0, 860px); }
.ds-faq > div { min-width: 0; }
.ds-faq details { border-bottom: 1px solid var(--ds-line); }
.ds-faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative; font-family: var(--ds-font-head); font-size: 1.18rem; line-height: 1.4; color: var(--ds-ink); }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--ds-gold-deep); border-bottom: 1.5px solid var(--ds-gold-deep); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ds-ease); }
.ds-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ds-faq__answer { padding: 0 40px 24px 0; color: var(--ds-muted); }
.ds-faq__answer p + p { margin-top: 10px; }
.ds-faq__answer a { color: var(--ds-ink); box-shadow: inset 0 -1px 0 var(--ds-gold); }

/* ----------------------------------------------------------- reviews */
.ds-reviews { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 22px; }
.ds-reviews--few { max-width: calc(var(--cols) * 420px); }
.ds-quote { position: relative; margin: 0; background: var(--ds-paper); border: 1px solid var(--ds-line); border-top: 2px solid var(--ds-gold); border-radius: 3px; padding: 38px 30px 30px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.ds-quote::before { content: "\201C"; position: absolute; top: 4px; right: 22px; font-family: var(--ds-font-caps); font-size: 4rem; line-height: 1; color: rgb(var(--ds-gold-rgb) / .45); }
.ds-quote blockquote { margin: 0; font-size: 1.02rem; color: var(--ds-text); }
.ds-quote__stars { color: var(--ds-gold-deep); letter-spacing: .2em; font-size: .9rem; }
.ds-quote figcaption { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--ds-line); padding-top: 18px; }
.ds-quote figcaption img, .ds-quote__initial { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; }
.ds-quote__initial { display: grid; place-items: center; background: var(--ds-parchment-2); color: var(--ds-ink); font-family: var(--ds-font-caps); font-weight: 600; box-shadow: 0 0 0 1px var(--ds-gold); }
.ds-quote figcaption strong { display: block; font-weight: 600; color: var(--ds-ink); line-height: 1.3; }
.ds-quote figcaption span { font-size: .85rem; color: var(--ds-muted); }

/* ---------------------------------------------------- awarding bodies */
.ds-bodies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 26px; }
.ds-bodycard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; padding: 26px; background: var(--ds-paper); border: 1px solid var(--ds-gold); outline: 1px solid rgb(var(--ds-gold-rgb) / .45); outline-offset: 5px; border-radius: 3px; color: var(--ds-ink); transition: background-color .3s var(--ds-ease); }
.ds-bodycard:hover { background: var(--ds-parchment); }
.ds-bodycard__logo { height: 80px; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: 3px; display: grid; place-items: center; padding: 10px; }
.ds-bodycard__logo img { max-height: 56px; width: auto; object-fit: contain; }
.ds-bodycard h3 { font-size: 1.3rem; margin-bottom: 6px; }
.ds-bodycard p { font-size: .92rem; color: var(--ds-muted); line-height: 1.55; }

/* ------------------------------------------------------ closing band */
.ds-closing { background: var(--ds-ink-deep); color: var(--ds-parchment); padding: 120px 0; position: relative; overflow: hidden; text-align: center; }
.ds-closing::before { content: ""; position: absolute; inset: 0; opacity: .08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c9a55c' stroke-width='1'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
.ds-closing__ring { position: absolute; left: 50%; top: 50%; width: min(760px, 120vw); transform: translate(-50%, -50%); opacity: .09; pointer-events: none; }
.ds-closing .ds-container { position: relative; }
.ds-closing h2 { color: var(--ds-parchment); max-width: 20ch; margin: 18px auto 20px; }
.ds-closing p { color: rgb(var(--ds-parchment-rgb) / .75); max-width: 56ch; margin: 0 auto 36px; text-wrap: pretty; }
.ds-closing .ds-closing__eyebrow { font-family: var(--ds-font-caps); letter-spacing: .28em; font-size: .8rem; color: var(--ds-gold); margin: 0 auto; }
.ds-closing__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------- shown on one kind of device */
@media (max-width: 768px) { .ds-vis--desktop { display: none; } }
@media (min-width: 769px) { .ds-vis--mobile { display: none; } }

/* ------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .ds-recognition__frame { grid-template-columns: 1fr 1fr; }
  .ds-recognition__frame--bodies { grid-template-columns: 1fr; }
  .ds-recognition__bodies { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--ds-line); }
  .ds-recognition__frame--bodies .ds-recognition__bodies { border-bottom: 0; }
  .ds-figure { border-bottom: 1px solid var(--ds-line); }
  .ds-recognition__frame > .ds-figure:nth-child(odd) { border-right: 0; }
  .ds-recognition__frame > .ds-figure:last-child, .ds-recognition__frame > .ds-figure:nth-last-child(2):nth-child(even) { border-bottom: 0; }
  .ds-recognition__frame > .ds-figure:last-child:nth-child(even) { grid-column: 1 / -1; }
  .ds-recognition__frame--figures > .ds-figure:nth-child(odd) { border-right: 1px solid var(--ds-line); }
  .ds-recognition__frame--figures > .ds-figure:nth-child(even) { border-right: 0; }
  .ds-recognition__frame--figures > .ds-figure:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--ds-line); }
  .ds-recognition__frame--figures > .ds-figure:nth-last-child(2):nth-child(odd), .ds-recognition__frame--figures > .ds-figure:last-child { border-bottom: 0; }
  .ds-recognition__frame--figures > .ds-figure:last-child:nth-child(even) { grid-column: auto; }
  .ds-recognition__frame--figures > .ds-figure:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .ds-ladder { grid-template-columns: repeat(var(--n-md, 3), minmax(0, 1fr)); row-gap: 56px; }
  .ds-ladder__ground { display: none; }
  .ds-step .ds-step__block { min-height: 0; height: 100%; border-bottom: 1px solid var(--ds-line); }
  .ds-step { align-self: stretch; }
}
@media (max-width: 1024px) {
  .ds-section { padding: 88px 0; }
  .ds-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-groups--cols-1 { grid-template-columns: 1fr; }
  .ds-groups .ds-group--feature { grid-row: auto; }
  .ds-groups--odd .ds-group--feature { grid-column: 1 / -1; }
  .ds-groups--odd .ds-group--feature .ds-group__img, .ds-groups--span .ds-group--feature .ds-group__img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .ds-groups .ds-group__img { aspect-ratio: 4 / 4.4; }
  .ds-groups--cols-1 .ds-group__img, .ds-groups--odd .ds-group--feature .ds-group__img { aspect-ratio: 16 / 10; }
  .ds-why { grid-template-columns: 1fr; gap: 48px; }
  .ds-why__photo { max-width: 520px; width: 100%; margin: 0 auto; }
  .ds-why__stamp { right: 10px; }
  .ds-row { grid-template-columns: 110px minmax(0, 1fr) 150px 40px; }
  .ds-row .ds-seal { display: none; }
  .ds-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; max-width: none; }
  .ds-steps--one { grid-template-columns: 1fr; }
  .ds-steps::before { display: none; }
  .ds-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ds-split { grid-template-columns: 1fr; gap: 44px; }
  .ds-split--reverse > .ds-arch-img { order: 0; }
  .ds-faq { grid-template-columns: 1fr; }
  .ds-reviews { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 768px) {
  .ds-section { padding: 72px 0; }
  .ds-head { margin-bottom: 40px; }
  .ds-hero__media { height: 460px; }
  .ds-hero__card-wrap { margin-top: -180px; }
  .ds-hero__card { padding: 92px 22px 34px; border-radius: 50% 50% 12px 12px / 90px 90px 12px 12px; }
  .ds-hero__card::before { inset: 9px; border-radius: 50% 50% 8px 8px / 82px 82px 8px 8px; }
  .ds-hero__crest { top: 22px; width: 52px; }
  .ds-hero__place { top: 24px; }
  .ds-hero__place .ds-container { font-size: .62rem; letter-spacing: .16em; }
  .ds-hero__eyebrow { font-size: .68rem; letter-spacing: .14em; }
  .ds-finder, .ds-finder--one { grid-template-columns: minmax(0, 1fr); }
  .ds-finder label { border-right: 0; border-bottom: 1px solid var(--ds-line); }
  .ds-recognition { padding: 44px 0 24px; }
  .ds-recognition__bodies, .ds-recognition__frame--bodies .ds-recognition__bodies { flex-direction: column; align-items: center; text-align: center; padding: 24px 18px; }
  .ds-recognition__logos { justify-content: center; }
  .ds-figure strong { font-size: 1.9rem; }
  .ds-groups { gap: 18px; }
  .ds-group__label h3 { font-size: 1.02rem; }
  .ds-ladder { grid-template-columns: repeat(var(--n-sm, 2), minmax(0, 1fr)); }
  .ds-panels { grid-template-columns: 1fr; }
  .ds-why__stamp .ds-seal { --size: 116px; font-size: .5rem; letter-spacing: .04em; padding: 18px; }
  /* On a phone the photo is narrow, so a seal half-way up sits on the face;
     it drops to the bottom corner, over the clothing. */
  .ds-why__stamp { right: 12px; bottom: 14px; }
  .ds-row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 6px 16px; padding: 20px 4px; }
  .ds-row__thumb { grid-row: span 2; }
  .ds-row__title h3 { font-size: 1.1rem; }
  .ds-row__meta { gap: 2px 12px; font-size: .8rem; line-height: 1.5; }
  .ds-row__price { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .ds-row__price strong { font-size: 1.35rem; }
  .ds-row__go { display: none; }
  .ds-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ds-bodycard { grid-template-columns: 1fr; text-align: center; }
  .ds-bodycard__logo { max-width: 180px; width: 100%; margin: 0 auto; }
  .ds-closing { padding: 88px 0; }
}
@media (max-width: 430px) {
  .ds-groups, .ds-groups--odd { grid-template-columns: 1fr; }
  .ds-groups .ds-group__img, .ds-groups--odd .ds-group--feature .ds-group__img, .ds-groups--cols-1 .ds-group__img { aspect-ratio: 4 / 3.3; min-height: 0; }
  /* The slide indicator must stay on a phone — it is the only cue the banner
     is a carousel and where to swipe. Stacked under the place label, centred,
     and a touch larger for a clear tap target. */
  .ds-hero__place .ds-container { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .ds-hero__dots { display: flex; justify-content: center; gap: 6px; }
  .ds-hero__dots button { width: 26px; height: 26px; }
  .ds-hero__dots button::after { width: 10px; height: 10px; }
  .ds-ladder { grid-template-columns: 1fr; }
  .ds-hero__alt { gap: 14px; flex-direction: column; align-items: center; }
  .ds-closing__actions .ds-btn, .ds-list__foot .ds-btn, .ds-split .ds-btn { width: 100%; }
  .ds-recognition__frame, .ds-recognition__frame--figures { grid-template-columns: 1fr 1fr; }
}