/* The Designer Eye: inner-page framework styles (page-tde.php only). Tokens from tokens.css, base from theme.css.
   Bands: Ivory / Blush Sand / Umber (cta), cutting cleanly at straight edges (owner revision 28 Oct 2026, pass 2: no gradients between bands). */

/* ---------- Bands ---------- */
.tde-band { position: relative; padding: 72px 0; }
.tde-band--ivory { background: var(--ivory); color: var(--espresso); }
.tde-band--sand { background: var(--blush-sand); color: var(--espresso); }
.tde-band--mahogany { background: var(--umber); color: var(--ivory); } /* the cta band: Umber, the brand dark brown */
.tde-sec--hero-inner { padding: 0; }

/* Quote ribbon (rendered right after the hero from data/ribbons.json): the homepage band, identical, no gap. */
.tde-inner .tde-ribbon { position: relative; z-index: 1; }

/* ---------- Section heads and type on each tone ---------- */
.tde-sec__head { max-width: 800px; margin-bottom: 40px; }
.tde-sec__head .tde-sec__title { margin-bottom: 0; }
.tde-sec__intro { margin-top: 20px; font-size: 17px; line-height: 1.7; max-width: 680px; }
.tde-band--sand .tde-eyebrow { color: var(--espresso); }
.tde-band--mahogany .tde-eyebrow { color: var(--blush-sand); }
.tde-band--mahogany .tde-h2, .tde-band--mahogany h3 { color: var(--ivory); }
.tde-prose > * + * { margin-top: 1em; }
.tde-prose p { font-size: 16px; line-height: 1.75; }
.tde-prose a { color: var(--mahogany); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--clay); }
.tde-prose a:hover { text-decoration-color: var(--mahogany); }
.tde-band--mahogany .tde-prose a { color: var(--ivory); text-decoration-color: var(--taupe); }
.tde-list { margin-top: 1em; display: grid; gap: 8px; }
.tde-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; }
.tde-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 2px; background: var(--mahogany); }
.tde-band--mahogany .tde-list li::before { background: var(--blush-sand); }
.tde-tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; margin-bottom: 12px; border: 1px solid var(--mahogany); border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany);
}
.tde-tag--solid { background: var(--mahogany); color: var(--ivory); }
.tde-inner .tde-nav__link.is-current::after { transform: scaleX(1); }

/* Headings, FAQ questions and card titles wrap on balanced lines (no single-word last line) where the browser supports it. */
.tde-inner h1, .tde-inner h2, .tde-inner h3, .tde-inner .tde-acc__btn, .tde-inner .tde-ccard__title, .tde-inner .tde-lcard__title { text-wrap: balance; }

/* ---------- Inner hero ---------- */
.tde-ihero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; }
.tde-ihero--photo { min-height: clamp(460px, 38vw, 560px); }
.tde-ihero__media { position: absolute; inset: 0; z-index: -1; }
.tde-ihero__img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.tde-ihero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(243, 238, 231, .7) 0%, rgba(243, 238, 231, .25) 14%, rgba(243, 238, 231, 0) 28%),
    linear-gradient(90deg, rgba(243, 238, 231, .9) 0%, rgba(243, 238, 231, .82) 30%, rgba(243, 238, 231, .5) 48%, rgba(243, 238, 231, 0) 62%);
}
/* Text on the right (Sanaz on the left of the photo, 29 Oct 2026): wash from the right, copy in the right half. */
.tde-ihero--right .tde-ihero__media::after { background: linear-gradient(0deg, rgba(243, 238, 231, .7) 0%, rgba(243, 238, 231, .25) 14%, rgba(243, 238, 231, 0) 28%), linear-gradient(270deg, rgba(243, 238, 231, .92) 0%, rgba(243, 238, 231, .85) 34%, rgba(243, 238, 231, .5) 46%, rgba(243, 238, 231, 0) 58%); }
.tde-ihero--right .tde-ihero__inner { padding-left: calc(50% + 32px); }
.tde-ihero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 64px; padding-bottom: 64px; }
.tde-ihero--plain .tde-ihero__inner { padding-top: 56px; padding-bottom: 48px; }
.tde-crumbs { margin-bottom: 20px; max-width: min(600px, 58%); } /* stays inside the Ivory wash, off the photo */
.tde-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mahogany); }
.tde-crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--taupe); }
.tde-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
.tde-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tde-ihero__eyebrow { margin-bottom: 20px; font-size: 13px; font-weight: 400; }
.tde-ihero__title { font-size: clamp(44px, 4.6vw, 64px); line-height: .98; font-weight: 500; letter-spacing: -.04em; color: var(--mahogany); max-width: 680px; }
.tde-ihero__lead { max-width: 540px; margin-top: 28px; font-size: 17px; line-height: 1.7; color: var(--espresso); }
.tde-ihero__cta { margin-top: 28px; }

/* ---------- Text ---------- */
.tde-text--photo { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: center; }
.tde-text--left { grid-template-columns: 560px minmax(0, 1fr); }
.tde-text--left .tde-text__body { order: 2; }
.tde-text--left .tde-text__media { order: 1; }
.tde-text__body { max-width: 760px; }
.tde-text--photo .tde-sec__head { margin-bottom: 28px; }
.tde-text__media { margin: 0; overflow: hidden; background: var(--umber); }
/* Photos show whole at their own proportions: never a crop that cuts Sanaz (Amir, 30 Oct 2026). */
.tde-text__img { display: block; width: 100%; height: auto; }

/* ---------- Steps ---------- */
.tde-steps { display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; margin: 0; padding: 0; }
.tde-steps--row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 32px; } /* one even row, never a short second row (Amir, 30 Oct 2026) */
.tde-step { position: relative; }
.tde-step__mark { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--clay); box-shadow: 0 0 0 6px rgba(243, 238, 231, .55); color: var(--mahogany); }
.tde-step__mark svg { width: 24px; height: 24px; }
.tde-step__year { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--mahogany); }
.tde-steps--row .tde-step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 72px; right: -16px; height: 1px; background: var(--clay); } /* connector to the next step */
.tde-step__body { margin-top: 20px; }
.tde-band--sand .tde-step__mark { background: var(--ivory); }
.tde-band--mahogany .tde-step__mark { background: transparent; border-color: var(--taupe); color: var(--blush-sand); box-shadow: none; }
.tde-band--mahogany .tde-steps--row .tde-step:not(:last-child)::after { background: var(--taupe); }
.tde-step__title { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--mahogany); }
.tde-step__text { margin-top: 12px; font-size: 15px; line-height: 1.65; }

/* ---------- Cards ---------- */
.tde-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tde-cards--2 { grid-template-columns: repeat(2, 1fr); }
.tde-cards--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tde-cards--even { display: flex; flex-wrap: wrap; justify-content: center; }
.tde-cards--even > li { flex: 0 0 calc((100% - 2 * 26px) / 3); }
.tde-cards--2.tde-cards--even > li { flex-basis: calc((100% - 26px) / 2); }
.tde-cards--4.tde-cards--even > li { flex-basis: calc((100% - 3 * 20px) / 4); }
.tde-ccard { display: flex; }
.tde-ccard__inner { display: flex; flex-direction: column; width: 100%; background: var(--ivory); border: 1px solid var(--clay); color: var(--espresso); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tde-band--sand .tde-ccard__inner { border-color: transparent; }
a.tde-ccard__inner:hover { border-color: var(--taupe); box-shadow: 0 12px 30px rgba(36, 23, 20, .08); }
.tde-ccard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--umber); }
.tde-cards--tall .tde-ccard__media { aspect-ratio: 4 / 5; }
.tde-ccard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
a.tde-ccard__inner:hover .tde-ccard__img { transform: scale(1.04); }
.tde-ccard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; }
.tde-ccard__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany); margin-bottom: 10px; }
.tde-ccard__title { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--mahogany); }
.tde-ccard__text { display: block; margin-top: 12px; font-size: 15px; line-height: 1.6; flex: 1; }
.tde-ccard__link { margin-top: 18px; min-height: 32px; }
.tde-cards--4 .tde-ccard__body { padding: 22px 20px 20px; }
.tde-cards--4 .tde-ccard__title { font-size: 19px; }

/* ---------- Gallery and lightbox ---------- */
.tde-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tde-gal--4 { grid-template-columns: repeat(4, 1fr); }
.tde-gal--5 { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tde-gal--even { display: flex; flex-wrap: wrap; justify-content: center; }
.tde-gal--even .tde-gal__item { flex: 0 0 calc((100% - 2 * 16px) / 3); }
.tde-gal--4.tde-gal--even .tde-gal__item { flex-basis: calc((100% - 3 * 16px) / 4); }
.tde-gal__link { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--umber); }
.tde-gal__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tde-gal__link:hover .tde-gal__img { transform: scale(1.04); }
.tde-lb { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 72px 88px; }
.tde-lb[hidden] { display: none; }
.tde-lb__backdrop { position: absolute; inset: 0; background: rgba(36, 23, 20, .94); }
.tde-lb__dialog { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; outline: 0; }
.tde-lb__figure { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.tde-lb__img { max-width: 100%; max-height: calc(100vh - 180px); width: auto; height: auto; object-fit: contain; background: var(--umber); }
.tde-lb__caption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--clay); text-align: center; max-width: 720px; }
.tde-lb__count { position: absolute; left: 0; top: -48px; font-size: 12px; letter-spacing: .14em; color: var(--clay); }
.tde-lb__btn { position: absolute; z-index: 2; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease); }
.tde-lb__btn .tde-icon { width: 24px; height: 24px; }
.tde-lb__btn--close { right: 20px; top: 20px; }
.tde-lb__btn--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.tde-lb__btn--next { right: 20px; top: 50%; transform: translateY(-50%); }
.tde-lb__btn[disabled] { background: rgba(36, 23, 20, .28); cursor: default; }

/* ---------- FAQ accordion ---------- */
.tde-faq .tde-sec__head { margin: 0 auto 24px; text-align: center; } /* FAQ headline and list centred in the section (Sanaz, 29 Oct 2026) */
.tde-acc { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--clay); }
.tde-acc__item { border-bottom: 1px solid var(--clay); }
.tde-band--mahogany .tde-acc, .tde-band--mahogany .tde-acc__item { border-color: var(--taupe); }
.tde-acc__q { font-size: inherit; }
.tde-acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 64px; padding: 18px 0; text-align: left; font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; color: var(--mahogany); }
.tde-acc__btn:hover .tde-acc__label { color: var(--espresso); }
.tde-band--mahogany .tde-acc__btn:hover .tde-acc__label { color: var(--blush-sand); }
.tde-acc__icon { position: relative; flex: none; width: 20px; height: 20px; }
.tde-acc__icon::before, .tde-acc__icon::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 2px; background: var(--mahogany); transition: transform .25s var(--ease); }
.tde-acc__icon::after { transform: rotate(90deg); }
.tde-acc__btn[aria-expanded="true"] .tde-acc__icon::after { transform: rotate(0); }
.tde-band--mahogany .tde-acc__icon::before, .tde-band--mahogany .tde-acc__icon::after { background: var(--blush-sand); }
.tde-acc__panel[hidden] { display: none; }
.tde-acc__a { padding: 0 44px 24px 0; max-width: 760px; }
.tde-acc__a p { font-size: 16px; line-height: 1.7; }

/* ---------- Testimonials (homepage quote-card style, in a grid) ---------- */
.tde-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 26px; align-items: stretch; }
.tde-quotes--even { display: flex; flex-wrap: wrap; justify-content: center; }
.tde-quotes--even > li { flex: 0 0 calc((100% - 2 * 26px) / 3); }
.tde-quote { display: flex; }
.tde-quote .tde-tcard__figure { width: 100%; }
.tde-quote__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--umber); }
.tde-quote__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tde-quote .tde-tcard__box { width: auto; margin: 0; min-height: 180px; padding: 30px 24px 34px; } /* the box sits directly under the photo, same width, nothing overlaps */
.tde-quote:not(.tde-quote--photo) .tde-tcard__box { flex: 0 0 auto; margin-top: auto; } /* a card without a photo keeps its box at the foot, level with the photo cards' boxes */
.tde-quote .tde-tcard__quote p { font-size: 15px; line-height: 1.6; }
.tde-band--ivory .tde-quote .tde-tcard__box { box-shadow: 0 1px 0 var(--clay), 0 12px 30px rgba(36, 23, 20, .1); }

/* ---------- Video grid ---------- */
.tde-vgroup + .tde-vgroup { margin-top: 48px; }
.tde-vgroup__label { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.tde-band--sand .tde-vgroup__label { color: var(--espresso); }
.tde-band--sand .tde-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
/* Shorts: 9:16 frames (the 16:9 thumbnail is centre-cropped, which removes the blurred pillarbox). */
.tde-video--short .tde-thumb { aspect-ratio: 9 / 16; }
.tde-vgrid--shorts { grid-template-columns: repeat(6, 1fr); gap: 24px 16px; }
.tde-vgrid--shorts .tde-video__title { font-size: 14px; }
/* Video rails (Sanaz, 29 Oct 2026): at most two rows, scrolling left and right; arrows beside the group label. */
.tde-vtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tde-vtabs__tab { min-height: 40px; padding: 0 16px; border: 1px solid var(--clay); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--espresso); background: transparent; transition: background-color .2s var(--ease), color .2s var(--ease); }
.tde-vtabs__tab:hover { background: rgba(243, 238, 231, .5); }
.tde-vtabs__tab[aria-selected="true"] { background: var(--umber); border-color: var(--umber); color: var(--ivory); }
.tde-vgroup[hidden] { display: none; }
.tde-vtabs + .tde-vgroup, .tde-vgroup + .tde-vgroup { margin-top: 0; }
.tde-vtabs ~ .tde-vgroup .tde-vgroup__head { justify-content: flex-end; margin-top: -64px; margin-bottom: 20px; pointer-events: none; }
.tde-vtabs ~ .tde-vgroup .tde-vgroup__arrows { pointer-events: auto; }
.tde-vgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tde-vgroup__head .tde-vgroup__label { margin-bottom: 0; }
.tde-vgroup__arrows { display: flex; gap: 8px; margin-left: auto; }
.tde-vgroup--nolabel .tde-vgroup__head { margin-top: -84px; margin-bottom: 40px; pointer-events: none; } /* arrows level with the section title */
.tde-vgroup--nolabel .tde-vgroup__arrows { pointer-events: auto; }
.tde-vgrid.tde-vrail { display: grid; grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 3), var(--cw)); --cw: calc((100% - 48px) / 3); gap: 28px 24px; overflow-x: auto; overscroll-behavior-x: contain; }
.tde-vgrid.tde-vrail.tde-vgrid--shorts { --cw: calc((100% - 80px) / 6); gap: 24px 16px; }
.tde-thumb__img--empty { display: block; width: 100%; height: 100%; background: var(--umber); }
.tde-video__title { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.tde-video__meta { margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mahogany); }
.tde-band--sand .tde-video__meta { color: var(--espresso); }

/* ---------- Series (LessonCard) ---------- */
.tde-series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tde-lcard { display: flex; flex-direction: column; background: var(--blush-sand); color: var(--espresso); }
.tde-band--sand .tde-lcard { background: var(--ivory); }
.tde-lcard__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--umber); }
.tde-lcard__img { width: 100%; height: 100%; object-fit: cover; }
.tde-lcard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 26px; }
.tde-lcard__title { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--mahogany); }
.tde-lcard__title a:hover { color: var(--espresso); }
.tde-lcard__meta { margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany); }
.tde-lcard__text { margin-top: 14px; font-size: 15px; line-height: 1.6; }
.tde-lcard__lessons { margin-top: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; flex: 1; align-content: start; }
.tde-lcard__lessons li { display: flex; gap: 10px; align-items: baseline; }
.tde-lcard__n { flex: none; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--mahogany); min-width: 20px; }
.tde-lcard__btn { align-self: flex-start; margin-top: 24px; }
/* Light buttons on Blush Sand grounds (sand bands, Blush Sand lesson cards) and on the Umber cta band: Ivory fill; on an Ivory card inside a sand band: Blush Sand. */
.tde-lcard .tde-underline-btn, .tde-band--sand .tde-underline-btn, .tde-band--sand .tde-btn--primary, .tde-band--mahogany .tde-btn--primary { background: var(--ivory); border-color: var(--ivory); color: var(--espresso); }
.tde-lcard .tde-underline-btn:hover, .tde-band--sand .tde-underline-btn:hover, .tde-band--sand .tde-btn--primary:hover, .tde-band--mahogany .tde-btn--primary:hover { background: var(--clay); border-color: var(--clay); }
.tde-band--sand .tde-lcard .tde-underline-btn { background: var(--blush-sand); border-color: var(--blush-sand); }
.tde-band--sand .tde-lcard .tde-underline-btn:hover { background: var(--clay); border-color: var(--clay); }

/* ---------- Product ---------- */
.tde-product--photo { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 64px; align-items: center; }
.tde-product__media { margin: 0; background: var(--umber); overflow: hidden; }
.tde-product__img { width: 100%; height: auto; }
.tde-product__body { max-width: 600px; }
.tde-product__title { margin-bottom: 12px; }
.tde-product__price { font-size: 24px; font-weight: 500; color: var(--mahogany); margin-bottom: 20px; }
.tde-band--mahogany .tde-product__price { color: var(--blush-sand); }
.tde-product__cta { margin-top: 28px; }

/* ---------- Contact ---------- */
.tde-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tde-contact__block { border-left: 2px solid var(--mahogany); padding-left: 20px; }
.tde-band--mahogany .tde-contact__block { border-color: var(--blush-sand); }
.tde-contact__label { font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--mahogany); margin-bottom: 8px; }
.tde-band--mahogany .tde-contact__label { color: var(--blush-sand); }
.tde-contact__value { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tde-contact__value a { display: inline-block; padding: 4px 0; }
.tde-contact__value a:hover { color: var(--mahogany); }
.tde-band--mahogany .tde-contact__value a:hover { color: var(--blush-sand); }
.tde-contact__note { margin-top: 36px; max-width: 680px; font-size: 16px; line-height: 1.7; }

/* ---------- CTA band ---------- */
.tde-sec--cta { padding: 56px 0; }
.tde-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; }
.tde-cta__title { font-size: 36px; }
.tde-cta__lead { margin-top: 12px; font-size: 16px; line-height: 1.6; max-width: 600px; color: var(--ivory); }
.tde-cta__btn { flex: none; }

/* ---------- Legal ---------- */
.tde-legal { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; }
.tde-legal__head { margin-bottom: 36px; }
.tde-legal__title { margin-bottom: 0; }
.tde-legal__updated { margin-top: 14px; font-size: 13px; letter-spacing: .04em; color: var(--mahogany); }
.tde-legal__h { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; margin-top: 40px; color: var(--mahogany); }
.tde-legal__h + p { margin-top: 12px; }
.tde-legal__body > p:first-child { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .tde-text--photo { grid-template-columns: minmax(0, 1fr) 46%; gap: 40px; }
  .tde-text--left { grid-template-columns: 46% minmax(0, 1fr); }
  .tde-product--photo { grid-template-columns: 44% minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1024px) {
  .tde-steps--row { grid-template-columns: 1fr; gap: 0; }
  .tde-steps .tde-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
  .tde-steps .tde-step:last-child { padding-bottom: 0; }
  .tde-steps .tde-step:not(:last-child)::after { content: ""; position: absolute; left: 28px; top: 62px; bottom: 6px; right: auto; width: 1px; height: auto; background: var(--clay); }
  .tde-step__body { margin-top: 12px; }
  .tde-band { padding: 64px 0; }
  .tde-sec--hero-inner { padding-top: 0; padding-bottom: 0; } /* hero sits flush under the header and on the ribbon on tablets and phones (Amir, 29 Oct 2026) */
  .tde-ihero--photo { min-height: 440px; }
  .tde-ihero__title { font-size: clamp(40px, 5.2vw, 54px); }
  .tde-cards, .tde-cards--4, .tde-series, .tde-quotes, .tde-vgrid { grid-template-columns: repeat(2, 1fr); }
  .tde-cards--even > li, .tde-cards--4.tde-cards--even > li, .tde-cards--2.tde-cards--even > li { flex-basis: calc((100% - 26px) / 2); }
  .tde-cards--4.tde-cards--even > li { flex-basis: calc((100% - 20px) / 2); }
  .tde-quotes--even > li { flex-basis: calc((100% - 26px) / 2); }
  .tde-vgrid--shorts { grid-template-columns: repeat(4, 1fr); }
  .tde-vgrid.tde-vrail { --cw: calc((100% - 24px) / 2); }
  .tde-vgrid.tde-vrail.tde-vgrid--shorts { --cw: calc((100% - 48px) / 4); }
  .tde-gal, .tde-gal--4, .tde-gal--5 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tde-gal--even .tde-gal__item, .tde-gal--4.tde-gal--even .tde-gal__item { flex-basis: calc((100% - 2 * 12px) / 3); }
  .tde-contact__grid { gap: 24px; }
  .tde-contact__value { font-size: 20px; }
  .tde-cta__title { font-size: 32px; }
  .tde-lb { padding: 72px 80px 56px; }
}
@media (max-width: 768px) {
  .tde-band { padding: 52px 0; }
  .tde-sec--hero-inner { padding-top: 0; padding-bottom: 0; }
  .tde-sec__head { margin-bottom: 28px; }
  .tde-sec__intro { font-size: 16px; margin-top: 14px; }
  /* Hero: the photo is a block above the text, its foot fading into Ivory (as on the homepage). */
  .tde-ihero--photo { min-height: 0; flex-direction: column; align-items: stretch; }
  .tde-ihero__media { position: relative; inset: auto; height: clamp(240px, 72vw, 420px); }
  .tde-ihero__img { object-position: 60% 35%; }
  .tde-ihero__media::after { background: linear-gradient(180deg, rgba(243, 238, 231, 0) 50%, rgba(243, 238, 231, .6) 78%, var(--ivory) 100%); }
  .tde-ihero__inner { padding-top: 0; padding-bottom: 40px; margin-top: -24px; }
  .tde-ihero--right .tde-ihero__inner { padding-left: var(--gutter); }
  .tde-ihero--right .tde-ihero__media::after { background: linear-gradient(180deg, rgba(243, 238, 231, 0) 50%, rgba(243, 238, 231, .6) 78%, var(--ivory) 100%); }
  .tde-ihero--plain .tde-ihero__inner { padding-top: 40px; padding-bottom: 36px; margin-top: 0; }
  .tde-ihero__title { font-size: clamp(36px, 10vw, 44px); max-width: 100%; }
  .tde-ihero__lead { margin-top: 20px; font-size: 16px; }
  .tde-ihero__cta { margin-top: 22px; }
  .tde-text--photo, .tde-text--left { display: flex; flex-direction: column; gap: 28px; }
  .tde-text--left .tde-text__media { order: 0; }
  .tde-text--left .tde-text__body { order: 1; }
  .tde-text__media { width: 100%; }
  .tde-cards, .tde-cards--2, .tde-cards--4, .tde-series, .tde-quotes, .tde-vgrid, .tde-cards--even, .tde-quotes--even { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .tde-cards--even > li, .tde-cards--4.tde-cards--even > li, .tde-cards--2.tde-cards--even > li, .tde-quotes--even > li { flex-basis: auto; }
  .tde-vgrid--shorts { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .tde-vgrid.tde-vrail { --cw: 78%; gap: 24px 16px; }
  .tde-vtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter); }
  .tde-vtabs::-webkit-scrollbar { display: none; }
  .tde-vtabs__tab { flex: none; }
  .tde-vtabs ~ .tde-vgroup .tde-vgroup__head { margin-top: 0; margin-bottom: 16px; }
  .tde-vgroup--nolabel .tde-vgroup__head { margin-top: 0; margin-bottom: 16px; }
  .tde-vgrid.tde-vrail.tde-vgrid--shorts { --cw: 42%; gap: 20px 12px; }
  .tde-ccard__body { padding: 22px 20px 20px; }
  .tde-gal, .tde-gal--4, .tde-gal--5, .tde-gal--even { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tde-gal--even .tde-gal__item, .tde-gal--4.tde-gal--even .tde-gal__item { flex-basis: auto; }
  .tde-lb { padding: 64px 12px 76px; }
  .tde-lb__img { max-height: calc(100vh - 176px); }
  .tde-lb__btn { width: 48px; height: 48px; }
  .tde-lb__btn--close { right: 12px; top: 10px; }
  .tde-lb__btn--prev { left: 12px; top: auto; bottom: 14px; transform: none; }
  .tde-lb__btn--next { right: 12px; top: auto; bottom: 14px; transform: none; }
  .tde-lb__count { top: -40px; }
  .tde-acc__btn { font-size: 16px; min-height: 56px; padding: 14px 0; }
  .tde-acc__a { padding-right: 0; }
  .tde-product--photo { display: flex; flex-direction: column; gap: 28px; }
  .tde-contact__grid { grid-template-columns: 1fr; gap: 20px; }
  .tde-sec--cta { padding: 48px 0; }
  .tde-cta { flex-direction: column; align-items: flex-start; }
  .tde-cta__title { font-size: 30px; }
  .tde-legal__h { font-size: 21px; margin-top: 32px; }
  .tde-lcard__body { padding: 22px 20px; }
}
@media (max-width: 400px) {
  .tde-ihero__title { font-size: 34px; }
  .tde-gal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tde-contact__value { font-size: 18px; }
  .tde-cta__title { font-size: 28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tde-ccard__img, .tde-gal__img, .tde-acc__icon::before, .tde-acc__icon::after, .tde-lb__btn, .tde-ccard__inner { transition: none; }
  a.tde-ccard__inner:hover .tde-ccard__img, .tde-gal__link:hover .tde-gal__img { transform: none; }
}

/* ---------- Video hero (About, 29 Oct 2026, after kellywearstler.com): name in two lines around a looping video that grows to full screen on scroll ---------- */
.tde-sec--video-hero { padding: 0 !important; }
.tde-vh { position: relative; height: 240vh; --p: 0; }
.tde-vh__sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; }
.tde-vh__frame { position: absolute; left: 50%; top: 50%; z-index: 1; overflow: hidden; background: var(--umber) center / cover no-repeat;
  width: calc(30vw + 70vw * var(--p)); height: calc(32% + 68% * var(--p)); transform: translate(-50%, -50%); }
.tde-vh__video { opacity: 0; transition: opacity .6s ease; } /* still frame shows until the loop is actually playing */
.tde-vh__video.is-playing { opacity: 1; }
.tde-vh__poster { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.4); } /* the episode is letterboxed: zoom crops the black bars */
.tde-vh__video { position: absolute; inset: 0; }
.tde-vh__video iframe { position: absolute; left: 50%; top: 50%; width: 248.9vh; height: 78.75vw; min-width: 140vw; min-height: 140vh; transform: translate(-50%, -50%); pointer-events: none; border: 0; }
.tde-vh__name { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; font-size: clamp(56px, 12vw, 200px); font-weight: 500; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; color: var(--mahogany); }
.tde-vh__line { position: absolute; left: 0; right: 0; text-align: center; opacity: calc(1 - var(--p) * 1.6); }
.tde-vh__line--top { bottom: calc(50% + 16% + 12px + 40% * var(--p)); }
.tde-vh__line--bottom { top: calc(50% + 16% + 12px + 40% * var(--p)); }
.tde-vh__label { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2; text-align: center; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); opacity: var(--p); }
@media (max-width: 768px) {
  .tde-vh { height: 200vh; }
  .tde-vh__frame { width: calc(62vw + 38vw * var(--p)); height: calc(26% + 74% * var(--p)); }
  .tde-vh__line--top { bottom: calc(50% + 13% + 10px + 40% * var(--p)); }
  .tde-vh__line--bottom { top: calc(50% + 13% + 10px + 40% * var(--p)); }
}
@media (prefers-reduced-motion: reduce) {
  .tde-vh { height: auto; }
  .tde-vh__sticky { position: relative; top: 0; height: 80vh; }
}