/* ============================================================
   Divano - Home hero (2026) - replaces the Revolution Slider
   Identity kept: #001416 / #3e5252 · accent #E4D3C0 · Dosis/Open Sans
   ============================================================ */

/* ---------- OUR PROJECTS band - quiet framed panel between photo sections ---------- */
.homeProjectsGrid {
  position: relative;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(228, 211, 192, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(0, 20, 22, 0.55) 0%, rgba(0, 20, 22, 0.22) 40%, rgba(0, 20, 22, 0.5) 100%);
  border-top: 1px solid rgba(228, 211, 192, 0.10);
  border-bottom: 1px solid rgba(228, 211, 192, 0.10);
  box-shadow: inset 0 26px 60px rgba(0, 10, 11, 0.30);
}

.hm-hero {
  position: relative;
  min-height: min(92svh, 920px);
  display: flex; align-items: center;
  overflow: hidden;
  color: #eef3f1;
  /* strength of the white wash over the reel - one number, safe to tune.
     kept low on purpose: a white haze over this bright footage flattens the
     pleats and edges, and that flattening reads as softness. */
  --hm-veil: 0.06;
}
.hm-hero__bg { position: absolute; inset: 0; z-index: 0; }
/* soft white veil, laid on the reel itself and *under* the dark gradient below,
   so it lifts the footage without eating into the headline contrast */
.hm-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(255, 255, 255, var(--hm-veil));
  pointer-events: none;
}
/* looping showreel: one muted video behind the copy. The poster frame carries
   the first paint (LCP), so it must stay identical to frame 1 of the clip. */
.hm-hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  display: block; background: #001416;
  pointer-events: none;
}
/* legacy photo gallery - kept so the hero still works if the video is dropped */
/* crossfading gallery: each slide is a full-bleed layer, only the active one
   is visible + slowly zooming (Ken Burns). JS toggles .is-active. */
.hm-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.6s ease;
  will-change: opacity;
}
.hm-hero__slide.is-active { opacity: 1; }
.hm-hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block;
  transform: scale(1.08);
}
.hm-hero__slide.is-active img {
  animation: hmZoom 7s ease-out forwards;
}
/* single-image fallback (no JS / one slide) keeps the original behaviour */
.hm-hero__bg > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block;
  animation: hmZoom 16s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hmZoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.hm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,20,22,0.88) 5%, rgba(0,20,22,0.55) 50%, rgba(0,20,22,0.28) 100%);
}
.hm-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 120px clamp(20px, 5vw, 48px) 60px;
}
.hm-hero__ey {
  display: inline-block;
  font-family: 'Dosis', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: #E4D3C0;
  opacity: 0; animation: hmUp 0.9s cubic-bezier(.22,1,.36,1) 0.25s forwards;
}
.hm-hero__title {
  font-family: 'Dosis', sans-serif; font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.08em; color: #fff; line-height: 1.1;
  /* sized so the headline never exceeds two lines */
  font-size: clamp(1.3rem, 0.5rem + 3.2vw, 3.6rem);
  margin: 14px 0 0; padding: 0;
  text-align: left !important; /* theme centers h1 - keep it stacked with the copy */
  max-width: 26ch;
  text-wrap: balance;
  opacity: 0; animation: hmUp 0.9s cubic-bezier(.22,1,.36,1) 0.45s forwards;
}
.hm-hero__lead {
  margin-top: 22px; max-width: 52ch;
  color: #dfe8e4; font-size: 18px; line-height: 1.8;
  opacity: 0; animation: hmUp 0.9s cubic-bezier(.22,1,.36,1) 0.65s forwards;
}
.hm-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px;
  opacity: 0; animation: hmUp 0.9s cubic-bezier(.22,1,.36,1) 0.85s forwards;
}
@keyframes hmUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hm-hero__bg img, .hm-hero__slide.is-active img { animation: none; transform: none; }
  .hm-hero__ey, .hm-hero__title, .hm-hero__lead, .hm-hero__actions { animation: none; opacity: 1; }
}

/* dots - subtle gallery position indicator */
.hm-hero__dots {
  position: absolute; z-index: 2; left: clamp(20px, 5vw, 48px); bottom: 30px;
  display: flex; gap: 9px;
}
.hm-hero__dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: rgba(238, 243, 241, 0.35);
  transition: background 0.35s, transform 0.35s;
}
.hm-hero__dot.is-active { background: #E4D3C0; transform: scale(1.25); }

.hm-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border: 1px solid #E4D3C0; color: #E4D3C0;
  font-family: 'Dosis', sans-serif; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; font-size: 13.5px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.4s, transform 0.4s;
}
.hm-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #E4D3C0; transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s cubic-bezier(.22,1,.36,1);
}
.hm-btn:hover { color: #001416; transform: translateY(-2px); }
.hm-btn:hover::before { transform: scaleX(1); transform-origin: left; }
.hm-btn--solid { background: #E4D3C0; color: #001416; }
.hm-btn--solid::before { background: #fff; }

/* scroll cue */
.hm-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  transform: translateX(-50%);
  width: 22px; height: 38px; border: 1.5px solid rgba(238,243,241,0.5); border-radius: 20px;
}
.hm-scroll::after {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; border-radius: 3px; background: #E4D3C0;
  animation: hmDot 1.6s infinite;
}
@keyframes hmDot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

@media (max-width: 600px) {
  .hm-hero { min-height: 88svh; }
  .hm-hero__inner { padding-top: 140px; }
}

/* ============================================================
   Divano Factory - in-house craftsmanship band
   ============================================================ */
.dm-factory {
  position: relative;
  background: linear-gradient(180deg, rgba(0,20,22,0.35) 0%, rgba(0,20,22,0.78) 100%);
  padding: clamp(70px, 9vw, 120px) 0;
  border-top: 1px solid rgba(228,211,192,0.10);
  border-bottom: 1px solid rgba(228,211,192,0.10);
}
.dm-factory__wrap {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: clamp(34px, 5vw, 74px); align-items: center;
}
.dm-factory__ey {
  display: inline-block; font-family: 'Dosis', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: #E4D3C0; margin-bottom: 14px;
}
.dm-factory__title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.08;
  color: #f2ede4; margin: 0 0 22px; text-align: left !important;
}
.dm-factory__lead { font-size: 18px; line-height: 1.85; color: #e8e2d5; margin: 0 0 18px; }
.dm-factory__body { font-size: 15.5px; line-height: 1.8; color: #b9c6c2; margin: 0 0 28px; }
.dm-factory__points { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.dm-factory__points li { position: relative; padding-left: 34px; color: #d6e0dc; font-size: 14.5px; line-height: 1.45; }
.dm-factory__points li span {
  position: absolute; left: 0; top: 1px; font-family: 'Dosis', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: rgba(228,211,192,0.6);
}
.dm-factory__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dm-factory__gallery figure { margin: 0; overflow: hidden; border-radius: 4px; background: #001416; aspect-ratio: 4 / 3; }
.dm-factory__gallery img {
  width: 100% !important; height: 100% !important; aspect-ratio: 4 / 3;
  object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(.22,1,.36,1);
}
.dm-factory__gallery figure:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
  .dm-factory__wrap { grid-template-columns: 1fr; gap: 30px; }
  .dm-factory__gallery { order: -1; }
}
@media (max-width: 600px) {
  .dm-factory__points { grid-template-columns: 1fr; gap: 11px; }
  .dm-factory__lead { font-size: 15.5px; line-height: 1.7; }
  .dm-factory__body { font-size: 14.5px; }
}

/* ---- Factory on a phone -------------------------------------------------
   Six 4:3 photos stacked two-up ran ~3 screens tall and pushed the heading
   off the top of the section, so the phone gets a different arrangement:
   heading first, then the workshop as one edge-to-edge swipe rail, then the
   copy. display:contents lifts the text block's children into the wrap grid
   so the rail can be ordered between the heading and the paragraphs.        */
@media (max-width: 700px) {
  .dm-factory__wrap { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
  .dm-factory__txt { display: contents; }

  .dm-factory__title--lead {
    order: 1; margin: 0 0 6px !important;
    font-size: clamp(2rem, 8.4vw, 2.5rem) !important;
  }
  .dm-factory__ey--sub { order: 2; margin: 0 0 18px !important; font-size: 11.5px; }
  .dm-factory__gallery { order: 3; }
  .dm-factory__lead { order: 4; margin: 0 0 14px; }
  .dm-factory__body { order: 5; margin: 0 0 22px; }
  .dm-factory__points { order: 6; margin: 0 0 26px; }
  .dm-factory .hm-btn { order: 7; justify-self: start; }

  /* the rail: bleeds to both screen edges, one and a half frames in view */
  .dm-factory__gallery {
    display: flex; gap: 10px; margin: 0 0 24px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(20px, 5vw, 48px));
    padding-inline: clamp(20px, 5vw, 48px);
  }
  .dm-factory__gallery::-webkit-scrollbar { display: none; }
  .dm-factory__gallery figure {
    flex: 0 0 64%; scroll-snap-align: center;
  }
  /* numbered points: two tight columns again - they are three words each */
  .dm-factory__points { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .dm-factory__points li { padding-left: 0; font-size: 13px; line-height: 1.35; }
  .dm-factory__points li span { position: static; display: block; margin-bottom: 3px; }
  [dir="rtl"] .dm-factory__points li { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-factory__gallery { scroll-snap-type: none; }
}

/* ============================================================
   Our Clients - logo wall
   ============================================================ */
.dm-clients {
  position: relative; padding: clamp(64px, 8vw, 104px) 0; background: rgba(0,20,22,0.5);
  /* the full-bleed rows are sized with vw, which ignores the scrollbar -
     clip the overshoot here instead of leaking a horizontal scroll */
  overflow-x: clip;
}
.dm-clients__wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); text-align: center; }
.dm-clients__ey {
  display: inline-block; font-family: 'Dosis', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: #E4D3C0; margin-bottom: 12px;
}
.dm-clients__title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; color: #f2ede4;
  margin: 0 0 clamp(34px, 5vw, 56px);
}
/* ---- two marquee rows, opposite directions, one shared clock ----
   The rows bleed edge-to-edge like the Our Process band - logos in constant
   motion across the WHOLE screen, never a strip floating in empty background,
   no fade-in/fade-out at the ends. Each track holds the logo set six times
   (a half-track is ~4400px, wider than any screen), translates by exactly
   -50%, and spacing is a margin ON each logo - never flex gap, which would
   make the -50% seam miss by half a space. Both rows share one duration over
   the same width, one time-reversed: equal speed, opposite headings, locked
   in phase. */
.dm-clients__rows {
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px);
  /* break out of the centered 1200px wrap to the full viewport width */
  margin-inline: calc(50% - 50vw);
}
/* the clipping box must be LTR as well, not just the track inside it: in RTL a child
   wider than its container is anchored to the RIGHT edge, so the marquee slid off to
   the left and the Arabic page showed a handful of logos with dead space beside them */
.dm-clients__row { overflow: hidden; direction: ltr; }
.dm-clients__track {
  display: flex; align-items: center;
  width: max-content;
  will-change: transform;
  /* same px/s as the old 1470px half over 42s - the half is 3x longer now */
  animation: dmMarquee 126s linear infinite;
  /* keep the physical layout LTR on the Arabic pages too - the transform is
     physical, so an RTL flex row would leave a gap instead of looping */
  direction: ltr;
}
/* same keyframes, same duration, played backwards - the mirror of row 1 */
.dm-clients__track--rev { animation-direction: reverse; }
/* pausing on hover lets a visitor look at a logo - both rows together,
   or the pair falls out of step and never recovers */
.dm-clients__rows:hover .dm-clients__track { animation-play-state: paused; }
@keyframes dmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.dm-clients__logo {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: clamp(104px, 12vw, 150px); height: clamp(46px, 6vw, 68px);
  /* the spacing every logo carries with it - see the note above */
  margin-right: clamp(28px, 4vw, 60px);
}
.dm-clients__logo img {
  max-width: 100%; max-height: 100%; width: auto !important; height: auto !important;
  object-fit: contain; opacity: 0.72; filter: grayscale(1) brightness(1.6);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.dm-clients__logo:hover img { opacity: 1; filter: none; transform: scale(1.04); }
@media (max-width: 620px) {
  .dm-clients__logo { width: 96px; height: 42px; margin-right: 24px; }
  .dm-clients__track { animation-duration: 96s; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-clients__track { animation: none; }
  .dm-clients__row { overflow-x: auto; scrollbar-width: none; }
  .dm-clients__row::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Customer Says (home) - the About page's review content in a
   different arrangement: one lead quote beside a stacked column,
   the rest revealed in place by "Show all reviews".
   ============================================================ */
.dm-tst {
  position: relative; padding: clamp(64px, 8vw, 108px) 0;
  /* the B/W site photograph the legacy section carried - its wrapper (and the
     backdrop with it) was dropped when the reviews were rebuilt. Restored with
     the same fixed-scroll feel on desktop, from a TRUE grayscale copy of the
     photo: a CSS filter would have broken background-attachment: fixed, so the
     desaturation is baked into bg-testimonials-bw.jpg itself. */
  background: #0d0d0d url(../images/site/bg-testimonials-bw.jpg) center / cover no-repeat;
  /* the theme forces `section { background-size: 100% !important }` */
  background-size: cover !important;
}
@media (min-width: 1200px) {
  /* the theme's own .bg-fixed also fell back to scroll under 1200px -
     background-attachment: fixed is unreliable on touch browsers */
  .dm-tst { background-attachment: fixed; background-position: 50% 0; }
}
/* dark veil so the review text keeps its contrast over the photo -
   NEUTRAL black, not the brand green: the green veil was re-tinting the
   grayscale photograph and it read as a colour image again */
.dm-tst::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.8) 100%);
}
.dm-tst__wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.dm-tst__head { text-align: center; margin-bottom: clamp(32px, 4.5vw, 54px); }
.dm-tst__ey {
  display: inline-block; font-family: 'Dosis', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: #E4D3C0; margin-bottom: 12px;
}
.dm-tst__title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; color: #f2ede4; margin: 0;
}

/* One horizontal rail of reviews at every width - cards side by side over the
   full-width B/W band, swiped/scrolled sideways, equal heights from the flex
   stretch. (The earlier two-column arrangements kept leaving voids: a grid
   stretched the lead card, multicol left a short column.) */
.dm-tst__grid {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 10px;
}
.dm-tst__grid::-webkit-scrollbar { display: none; }
.dm-tst__col { display: contents; }

.dm-tst__card {
  position: relative;
  background: linear-gradient(180deg, rgba(228,211,192,0.07), rgba(0,20,22,0.35));
  border: 1px solid rgba(228,211,192,0.16);
  border-radius: 4px;
  padding: clamp(22px, 2.6vw, 34px);
  flex: 0 0 clamp(300px, 32vw, 430px);
  margin: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
}
/* the reviewer's name sits on the same baseline in every card */
.dm-tst__by { margin-top: auto !important; padding-top: 18px; }
.dm-tst__stars { display: block; color: #E4D3C0; font-size: 14px; letter-spacing: 0.22em; margin-bottom: 14px; }
.dm-tst__quote { color: #e3ebe8; font-size: 15.5px; line-height: 1.85; margin: 0; }
.dm-tst__card--lead .dm-tst__quote { font-size: 17px; }
.dm-tst__src { color: #8fa5a0; font-size: 12px; letter-spacing: 0.04em; margin: 12px 0 0; }
.dm-tst__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; }
.dm-tst__name { font-family: 'Dosis', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: #fff; }
.dm-tst__role { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(228,211,192,0.7); }
.dm-tst__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.dm-tst__shots img { width: 100% !important; height: 84px !important; object-fit: cover; display: block; border-radius: 3px; }

/* reviews past the first three stay in the DOM but hidden until asked for */
.dm-tst__card[hidden] { display: none; }
.dm-tst__more { text-align: center; margin-top: clamp(26px, 3.4vw, 40px); }
.dm-tst__btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: transparent; border: 1px solid #E4D3C0; border-radius: 0; color: #E4D3C0;
  font-family: 'Dosis', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 26px;
  transition: background 0.35s, color 0.35s;
}
.dm-tst__btn:hover { background: #E4D3C0; color: #001416; }
.dm-tst__btn .n { opacity: 0.7; }
.dm-tst__google { margin: 16px 0 0; font-size: 13px; }
.dm-tst__google a { color: #cbdad6; letter-spacing: 0.04em; border-bottom: 1px solid rgba(228,211,192,0.35); padding-bottom: 3px; transition: color 0.3s; }
.dm-tst__google a:hover { color: #fff; }

@media (max-width: 860px) {
  .dm-tst__card--lead .dm-tst__quote { font-size: 15.5px; }
}
/* handhelds: one card in view with the next peeking; the rail bleeds past the
   wrap padding to the screen edges */
@media (max-width: 700px) {
  .dm-tst__grid {
    gap: 12px;
    margin-inline: calc(-1 * clamp(20px, 5vw, 48px));
    padding-inline: clamp(20px, 5vw, 48px);
  }
  .dm-tst__card { flex: 0 0 84%; max-width: 84%; }
}
@media (max-width: 600px) {
  .dm-tst { padding: 52px 0 !important; }
  .dm-tst__card { padding: 18px 16px; }
  .dm-tst__quote, .dm-tst__card--lead .dm-tst__quote { font-size: 14.5px; line-height: 1.72; }
  .dm-tst__shots img { height: 64px !important; }
  .dm-tst__btn { padding: 11px 20px; font-size: 11px; }
}

/* ============================================================
   Customer Says - Google review support layer (2026)
   Every review is shown in the language of the page it sits on, with a
   small "translated from …" note where the original was another language
   (the Google Maps convention) + real project photos on the Gym review
   ============================================================ */

/* Safety net for any review paragraph explicitly marked dir="rtl"
   (e.g. an Arabic quote left in its original language on the English
   site) - right-aligned, roomy leading for the diacritics */
.de_testi blockquote p[dir="rtl"] {
  direction: rtl;
  text-align: right !important;
  line-height: 2;
}

/* "Translated from …" provenance note under a review whose original was
   written in another language. This is a caption, NOT body copy: small,
   upright, tan-muted, and quiet enough to stay subordinate to the quote.
   Specificity: divano-modern.css sets colour / font-family / font-size /
   line-height / letter-spacing on `.de_testi blockquote p` with !important,
   and mobile.css re-sizes `.testimonial__carousel .de_testi blockquote p`
   below 600px - so the caption needs !important AND a selector heavier than
   both. The short `.testimonial__carousel .dm-testi-src` form is kept first
   so the note still styles correctly if it is ever not a <p>. */
.testimonial__carousel .dm-testi-src,
.testimonial__carousel .de_testi blockquote p.dm-testi-src {
  margin: 10px 0 0;
  font-family: 'Dosis', 'Open Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500;
  font-style: normal;
  line-height: 1.6 !important;
  letter-spacing: 0.06em !important;
  color: rgba(228, 211, 192, 0.6) !important;
}

/* Real project photo strip inside a review card (Action in Motion Gym) -
   a tidy 3-up row of small rounded thumbnails */
.dm-testi-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 4px;
}
.dm-testi-photos img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* data-autoheight="false": top-align the visible pair and let the taller
   photo card (Vladimir) grow instead of being clipped */
.testimonial__carousel .owl-wrapper-outer { height: auto !important; }
.testimonial__carousel .owl-wrapper { align-items: flex-start; }

@media (max-width: 480px) {
  .dm-testi-photos { gap: 7px; }
}

/* Divano Factory: title leads, clear and large; craftsmanship line sits under it */
.dm-factory__title--lead { margin: 0 0 8px !important; font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem) !important; }
.dm-factory__ey--sub { display: inline-block; margin: 0 0 22px !important; opacity: 0.92; }