/* ============================================================
   Contactable — Dominion (UBO verification) page styles
   Loads on top of tokens.css + iip.css.
   Figma: DOMINION • Desktop (node 13311-610), Dev-Ready file.
   ============================================================ */

/* ===== Hero (Header / 5) — purple, composed magnifier subject right =====
   Background art is a fully-composed 1659x948 photo (man in magnifier +
   three plain orange dots + search pill, wording patched to the design's
   overlay text — Figma node 11889-2162). Its flat purple IS --periwinkle
   (#6962F0), matching the section bg, so the art blends seamlessly.
   Figma places the art at w 96.97% / anchored right+bottom of the frame
   (left/top gaps show the flat purple bg). */
.dom-hero {
  position: relative;
  aspect-ratio: 1440 / 822;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background-color: var(--periwinkle);
  background-image: url("../assets/brand/dominion-hero.webp?v=3");
  background-repeat: no-repeat;
  background-size: 96.97% auto;
  background-position: right bottom;
}
/* Orange icon circles — CSS overlays (not baked into the raster) so they stay
   vector-crisp at any DPI. Positions/size derived from the Figma dots
   (85px at container (658,277)/(862,-20)/(709,90), frame 1440×822) as % of
   the box; they track the art at every width ≥641 because the art's rendered
   width (96.97%) and the box scale together. */
.dom-hero__dot {
  position: absolute;
  width: 5.91%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--deep-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  container-type: inline-size;
}
.dom-hero__dot svg {
  /* Figma icons ≈ 58% of the circle diameter, ~2.8-unit strokes */
  width: 58%;
  height: 58%;
  display: block;
}
.dom-hero__dot--a { left: 51.22%; top: 46.83%; }  /* ownership tree */
.dom-hero__dot--b { left: 65.38%; top: 10.68%; }  /* company */
.dom-hero__dot--c { left: 54.77%; top: 24.07%; }  /* shield */
/* Full-bleed hero copy aligns to the nav gutter, not the centred .wrap —
   the composition (pill + icons) is baked into the art, so the copy column
   must stay left of the pill tip (37% across the art) at every width. */
.dom-hero__inner { position: relative; z-index: 1; width: 100%; max-width: none; margin-inline: 0; padding-inline: clamp(24px, 6vw, 88px); }
.dom-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 640px; }
.dom-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.dom-hero__eyebrow { color: #fff; font-size: clamp(15px, 1.56vw, 20px); letter-spacing: 1px; }
.dom-hero__title {
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.72vw, 70px);  /* hits the Figma 70px at ~1480; smaller below so the last line clears the baked tree icon */
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.dom-hero__text { font-size: 18px; line-height: 1.5; color: #fff; margin: 0; max-width: min(474px, 30vw); }

/* ===== Logo strip (Logo / 3) — same component as rica-logos ===== */
.dom-logos { background: #fff; padding: 80px 0; }
.dom-logos__heading { font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--deep-blue); text-align: center; margin: 0 auto 48px; max-width: 688px; }
.dom-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 35px 48px; }
.dom-logos__row img { height: 48px; width: auto; object-fit: contain; }

/* ===== The problem (Layout / 195) — image left, copy + two grey cards right ===== */
.dom-problem { background: #fff; padding: 112px 0; }
.dom-problem__inner { display: flex; gap: 80px; align-items: center; }
.dom-problem__img { flex: 1 1 0; min-width: 0; aspect-ratio: 620 / 661; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); }
.dom-problem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dom-problem__content { flex: 0.94 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }  /* Figma 620:580 */
.dom-problem__copy { display: flex; flex-direction: column; gap: 24px; }
.dom-problem__eyebrow { margin: 0; }
.dom-problem__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.dom-problem__text { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.dom-problem__cards { display: flex; gap: 24px; padding: 8px 0; }
.dom-problem-card { flex: 1 0 0; min-width: 0; background: var(--soft-grey); border-radius: 15px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.dom-problem-card__title { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--periwinkle); margin: 0; }
.dom-problem-card__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }

/* ===== The challenge (CTA / 26) — full-bleed boardroom photo, quote left =====
   One 1734x907 photo shared by all bands; per-band size/position converted from
   the nodes' recorded image transforms (11893-1738 / 11897-1766 / 11897-1756).
   Gradient overlay is a bg layer (dark on the left, under the copy). Box keeps
   each band's frame aspect so the converted percentages stay valid. */
.dom-challenge {
  position: relative;
  aspect-ratio: 1440 / 751;
  display: flex;
  align-items: center;
  padding: 112px 0;
  background-color: #4a3a2b; /* photo's wood tone (fallback only) */
  background-image:
    linear-gradient(269.5deg, rgba(0, 0, 0, 0.2) 0.3%, rgba(0, 0, 0, 0.73) 99.9%),
    url("../assets/brand/dominion-challenge.webp");
  background-repeat: no-repeat;
  background-size: auto, 139.48% auto;
  background-position: 0 0, 0% 39.06%;
}
/* Full-bleed copy aligns to the nav/hero gutter, not the centred .wrap
   (About-hero rule) — Figma puts the quote hard-left of the photo subject. */
.dom-challenge__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: clamp(24px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.dom-challenge__eyebrow { font-size: clamp(15px, 1.56vw, 20px); letter-spacing: 1px; margin: 0; }
.dom-challenge__heading {
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  /* Figma heading box is 705px @ 48px = 14.7em — em keeps the design's wrap
     points valid at the site's 0.85 heading scale */
  max-width: 14.7em;
  text-wrap: wrap;
}
.dom-challenge__accent { color: var(--bright-orange); }
.dom-challenge__text { font-size: 18px; line-height: 1.5; color: #fff; margin: 0; max-width: 647px; }
/* ≥1600 band: stop the box (and photo) growing with the viewport — freeze
   both at their 1600px-wide rendered size (site-wide full-bleed rule).
   Rendered photo w = 139.48% × 1600 = 2232px; x stays left-anchored and
   y% stays valid because box + photo heights freeze together. */
@media (min-width: 1600px) {
  .dom-challenge {
    aspect-ratio: auto;
    height: 834px; /* 1600 × 751/1440 */
    background-size: auto, 2232px auto;
  }
}
/* Tablet node 11897-1766 (834x587): stronger left gradient, quote all-white */
@media (max-width: 900px) {
  .dom-challenge {
    aspect-ratio: 834 / 587;
    padding: 50px 0;
    background-image:
      linear-gradient(90.3deg, rgba(0, 0, 0, 0.74) 7.3%, rgba(102, 102, 102, 0.27) 100%),
      url("../assets/brand/dominion-challenge.webp");
    background-size: auto, 173.91% auto;
    background-position: 0 0, 0% 49.44%;
  }
  .dom-challenge__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .dom-challenge__accent { color: #fff; }
  .dom-challenge__text { max-width: 516px; }
}
/* Mobile node 11897-1756 (393x648) */
@media (max-width: 640px) {
  .dom-challenge {
    aspect-ratio: 393 / 648;
    padding: 40px 0;
    background-size: auto, 381.76% auto;
    background-position: 0 0, 4.49% 89.67%;
  }
  .dom-challenge__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
}

/* ===== The solution (Layout / 1) — orange 3D ownership tree, copy left =====
   Photo asset is the tree render rotated 180° (root circle at top) — Figma
   places the source flipped (negative w/h in the node's recorded transform).
   size/position converted from that transform (node 11891-1734, frame
   1440x716): rendered 153.53% x 154.39% at offset (3.82%, -26.28%). The
   %-pair scales with the box, so the placement holds while the box keeps
   the frame aspect. Copy aligns to the nav/hero gutter (full-bleed rule). */
.dom-solution {
  position: relative;
  aspect-ratio: 1440 / 716;
  display: flex;
  align-items: flex-start;
  padding: 85px 0;
  background-color: #e4702a; /* photo's flat orange (fallback only) */
  background-image:
    url("../assets/brand/dominion-solution-tree.webp?v=2"),
    linear-gradient(180deg, #e16a26 0%, #e8732d 100%);
  background-repeat: no-repeat;
  background-size: 153.53% 154.39%, auto;
  background-position: -7.14% 48.32%, 0 0;
}
.dom-solution__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: clamp(24px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.dom-solution__eyebrow { font-size: clamp(15px, 1.56vw, 20px); letter-spacing: 1px; margin: 0; }
.dom-solution__heading {
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.dom-solution__text { font-size: 18px; font-weight: 600; line-height: 1.5; color: #fff; margin: 0; max-width: 586px; }
.dom-solution .pill-btn { margin-top: 8px; }  /* Figma: 32px above button vs 24px content gap */
/* ≥1600 band: freeze box + photo at their 1600px-wide rendered size.
   Rendered = 153.53%×1600 x 154.39%×796 = 2456×1229px; x offset freezes at
   3.82%×1600 = 61px; y% stays valid as both heights are frozen. */
@media (min-width: 1600px) {
  .dom-solution {
    aspect-ratio: auto;
    height: 796px; /* 1600 × 716/1440 */
    background-size: 2456px 1229px, auto;
    background-position: 61px 48.32%, 0 0;
  }
}
/* Tablet (Figma 11897-1740, 834×587): tree zoomed on lower branches, copy
   unchanged. size/position converted from the node's recorded transform. */
@media (max-width: 900px) {
  .dom-solution {
    aspect-ratio: 834 / 587;
    padding: 26px 0;
    background-image:
      url("../assets/brand/dominion-solution-tree.webp?v=2"),
      linear-gradient(269.76deg, #e37f21 0%, #e98928 99.7%);
    background-size: 213.62% auto, auto;
    background-position: 5.98% 36.84%, 0 0;
  }
  .dom-solution__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .dom-solution__text { max-width: 497px; }
}
/* Mobile (Figma 11897-1756 sibling, 393×610): flat orange top, tree bottom —
   photo covers only the lower band (rendered height < box), gradient above. */
@media (max-width: 640px) {
  .dom-solution {
    aspect-ratio: 393 / 610;
    align-items: flex-start; /* Figma: copy sits top (column top 32 + 24 pad) */
    padding: 56px 0 40px;
    /* top layer fades the flat orange into the photo across the seam at
       33.6% (photo's top edge) — the photo edge is vignetted so a flat
       join always shows a line; Figma flat colour: #db611f */
    background-image:
      linear-gradient(180deg, #db611f 30%, rgba(215, 96, 30, 0) 46%),
      url("../assets/brand/dominion-solution-tree.webp?v=2"),
      linear-gradient(180deg, #db611f 0%, #d7601e 100%);
    background-size: auto, 272.78% auto, auto;
    background-position: 0 0, 16.85% 171.09%, 0 0;
  }
  .dom-solution__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .dom-solution__text { max-width: 100%; }
}

/* ===== How it works (Layout / 507) — lifecycle tabs ===== */
.dom-how { background: #fff; padding: 107px 0 106px; }
.dom-how__inner { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.dom-how__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 898px; }
.dom-how__head .eyebrow { margin: 0; }
.dom-how__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; }
.dom-how__sub { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--deep-blue); margin: 8px 0 0; }
.dom-tabs { width: 100%; background: #fff; border: 2px solid #959abb; border-radius: 26px; overflow: hidden; }
/* Figma gap is 48, but .wrap's inner width (1149 at ≥1408) can't fit 4 fixed-260px
   pills + 3×48 gaps — pills size to their own content instead (site-gutter trade-off),
   which also gives "Dynamic Risk Assessment" the room it needs to stay on one line. */
.dom-tabs__menu { min-height: 134px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; padding: 24px; }
.dom-tab {
  flex: 0 1 auto; max-width: 100%; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #8087b0; border-radius: 43px; background: none;
  font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.3;
  color: #8087b0; cursor: pointer; padding: 0 24px; white-space: nowrap;
}
.dom-tab[data-active="true"] { background: var(--periwinkle); border-color: var(--periwinkle); color: #fff; }
.dom-pane { display: none; gap: 68px; align-items: flex-start; padding: 0 48px 48px; }
.dom-pane[data-active="true"] { display: flex; }
/* Icon box — same template as the capability-page .cap-pane__icon (260px gradient
   box, 188px wght100-outlined icon) so this section matches the pattern already
   rolled out on every capability page. */
.dom-pane__art {
  flex: none; width: 260px; aspect-ratio: 1; border-radius: 15px;
  background: linear-gradient(127deg, var(--bright-orange) 4%, var(--deep-orange) 97%);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.dom-pane__art .material-symbols-rounded {
  font-size: 188px; font-weight: 100;
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}
.dom-pane__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 2px; }
.dom-pane__num { margin: 0; }
.dom-pane__title { font-size: clamp(28px, 3.13vw, 40px); font-weight: 600; line-height: 1.2; color: var(--deep-orange); margin: 0; max-width: 460px; }
.dom-pane__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 8px 0 0; max-width: 797px; }

/* ===== The platform regulators trust (Layout / 198) — photo + glass cards ===== */
.dom-trust {
  position: relative;
  padding: 75px 0 77px;
  background-color: #3b2a56;
  background-image: url("../assets/brand/dominion-trust-bg.webp");
  background-repeat: no-repeat;
  /* Figma 11889-2288 transform: h 212.01%, top -56% → the visible window is
     the vertical MIDDLE 47% of the photo (her full face). Height-anchored
     sizing keeps that window whatever the section's content height, unlike
     the old width-anchored crop that slid her face off the top. */
  background-size: auto 212.01%;
  background-position: 0 50%;
}
.dom-trust::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.2); z-index: 0; }
.dom-trust__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; }
.dom-trust__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: #fff; margin: 0 0 24px; }
.dom-trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dom-trust-card {
  background: rgba(255,255,255,0.75); border-radius: 15px; padding: 15px 19px;
  min-height: 205px; display: flex; align-items: flex-start; gap: 16px;
}
.dom-trust-card__circle {
  width: 48px; height: 48px; border-radius: 50%; background: var(--deep-orange); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.dom-trust-card__circle .material-symbols-rounded { font-size: 28px; color: #fff; font-weight: 600; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.dom-trust-card__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.dom-trust-card__title { font-size: 24px; font-weight: 600; line-height: 1.4; color: var(--periwinkle); margin: 0; }
.dom-trust-card__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.dom-trust__actions { display: flex; justify-content: center; margin-top: 16px; }

/* ===== Why Dominion (Layout / 399) — 2x2 cards + actions ===== */
.dom-why { background: #fff; padding: 104px 0 100px; }
.dom-why__inner { display: flex; flex-direction: column; gap: 52px; }
/* Line break hard-coded (<br>) to match Figma: "Why compliance teams / choose Dominion." */
.dom-why__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.dom-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dom-why-card { background: var(--soft-grey); border-radius: 15px; padding: 22px 24px; min-height: 407px; display: flex; flex-direction: column; gap: 8px; }
.dom-why-card__circle {
  width: 82px; height: 82px; border-radius: 50%; background: var(--deep-orange); flex: none; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
/* Same icon treatment as the trust-card circles, scaled to the 82px circle. */
.dom-why-card__circle .material-symbols-rounded {
  font-size: 44px; font-weight: 400;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.dom-why-card__title { font-size: clamp(26px, 2.66vw, 34px); font-weight: 600; line-height: 1.4; color: var(--deep-blue); margin: 0; }
.dom-why-card__text { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.dom-why-card__text p { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.dom-why-card__tags { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--periwinkle); margin: 8px 0 0; }
.dom-why__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; margin-top: 28px; }

/* ===== CIPC register (Layout / 195) — outlined card + two periwinkle cards ===== */
.dom-register { background: #fff; padding: 77px 0 90px; }
.dom-register__inner { display: flex; gap: 50px; align-items: stretch; }
.dom-register__main {
  flex: 1 0 0; min-width: 0;
  border: 1px solid var(--deep-blue); border-radius: 15px; padding: 30px;
  display: flex; flex-direction: column; gap: 24px;
}
.dom-register__eyebrow { margin: 0; }
.dom-register__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.dom-register__text { display: flex; flex-direction: column; gap: 24px; }
.dom-register__text p { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; max-width: 518px; }
.dom-register__side { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 50px; }
.dom-register-card {
  flex: 1 0 0; background: var(--periwinkle); border-radius: 15px; padding: 40px 30px;
  display: flex; flex-direction: column; gap: 24px; justify-content: center;
}
.dom-register-card__title { font-size: 28px; font-weight: 600; line-height: 1.4; color: #fff; margin: 0; }
.dom-register-card__text { font-size: 16px; line-height: 1.5; color: #fff; margin: 0; }
.dom-register-card__link { font-size: 16px; font-weight: 700; line-height: 1.5; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.dom-register-card__link:hover { text-decoration: underline; }

/* ===== Testimonials (Testimonial / 1) — logo + quote ===== */
.dom-quote { background: #fff; padding: 112px 0; }
.dom-quote--grey { background: var(--soft-grey); }
.dom-quote__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 1076px; margin: 0 auto; text-align: center; }
.dom-quote__logo { height: 40px; width: auto; object-fit: contain; }  /* Figma 11889-2420: 188px-wide mark ≈ 40px tall */
.dom-quote__logo--deloitte { height: 31px; }  /* Figma 11889-2440: wider wordmark, 165px wide ≈ 31px tall */
.dom-quote__text { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.3; color: var(--periwinkle); margin: 0; }
.dom-quote__person { display: flex; flex-direction: column; align-items: center; }
.dom-quote__name { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--deep-blue); }
.dom-quote__role { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--deep-blue); }

/* ===== Reusable capability (Layout / 1) — dark glasses photo ===== */
/* The design MIRRORS the photo (Figma img has negative width) — face on the right,
   looking left toward the copy. The bg lives on a scaleX(-1) child layer; each band's
   background-size/position below is Figma's own recorded transform converted into the
   flipped layer's coordinates. Valid because each band's box is aspect-locked to its
   Figma frame. Copy is BOTTOM-anchored (Figma justify-end), not centred. */
.dom-audience {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 1440 / 716; padding: 85px 0 63px;    /* content bottom = Figma 653/716 */
  background-color: #131018;  /* photo-matched fallback, not a brand colour */
  overflow: hidden;
}
.dom-audience__bg {
  position: absolute; inset: 0; z-index: 0;
  transform: scaleX(-1);
  background-image: url("../assets/brand/dominion-audience.webp");
  background-repeat: no-repeat;
  /* Figma desktop (13311:862): w 120.36%, right edge at 107.18%, top ~0 → flipped-layer 35.26% 0 */
  background-size: 120.36% auto;
  background-position: 35.26% 0%;
}
.dom-audience::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 1; }
.dom-audience__inner { position: relative; z-index: 2; width: 100%; max-width: none; margin-inline: 0; padding-inline: clamp(24px, 6vw, 88px); }
.dom-audience__content { max-width: 636px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.dom-audience__eyebrow { color: #fff; margin: 0; }
.dom-audience__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: #fff; margin: 0; text-wrap: wrap; }
.dom-audience__text { font-size: 18px; font-weight: 500; line-height: 1.5; color: #fff; margin: 0; max-width: 628px; }
.dom-audience__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.dom-audience__actions .cx-btn--secondary { color: #fff; border-color: #fff; }
.dom-audience__actions .cx-btn--secondary:hover { color: #fff; border-color: #fff; opacity: 0.85; }

/* ===== FAQ — uses the shared .faq template verbatim (iip.css), no overrides ===== */

/* ===== Final CTA (CTA / 15) — reuses .final ===== */
.dom-final { padding: 112px 64px; }
.dom-final__link { color: #fff; }
.dom-final__link:hover { color: #fff; opacity: 0.85; }
@media (min-width: 901px) {
  .dom-final .final__inner { grid-template-columns: 2.06fr 1fr; }
}

/* ============================================================
   RESPONSIVE (largest → smallest; only desktop is specced in
   Figma — bands follow the site conventions / rica precedents)
   ============================================================ */

/* Freeze full-bleed backgrounds on very wide monitors (≥1600 band rule) */
@media (min-width: 1600px) {
  .dom-trust { background-size: min(124.73%, 2200px) auto; }
}

/* --- Hero --- */
/* 901–1100: the copy column (max 500px) reaches the pill/magnifier baked into
   the art, so slide the art (and its %-tracking dots) right by 6vw. Scoped to
   this band only — ≤900 re-anchors the art (82% 100%) with its own values. */
@media (min-width: 901px) and (max-width: 1100px) {
  .dom-hero { background-position: calc(100% + 6vw) bottom; }
  .dom-hero__dot--a { left: calc(51.22% + 6vw); }
  .dom-hero__dot--b { left: calc(65.38% + 6vw); }
  .dom-hero__dot--c { left: calc(54.77% + 6vw); }
}
@media (max-width: 1100px) {
  .dom-hero { align-items: flex-start; padding: 56px 0; }
  .dom-hero__content { max-width: 500px; }
  .dom-hero__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .dom-hero__title { font-size: 44px; }
  .dom-hero__text { max-width: 400px; }
}
@media (max-width: 900px) {
  /* Tablet per Figma 11933-1743 (834×592 frame). The recorded image transform
     (w 110.78% / left −4.13% / top 10.97%) converts to the background values
     below because the box keeps the frame aspect 834/592. Dots re-derived from
     the art-relative desktop fractions mapped into this crop. */
  .dom-hero { aspect-ratio: 834 / 592; padding: 40px 0; background-size: 110.78% auto; background-position: 38.3% 100%; }
  .dom-hero__inner { padding-inline: clamp(24px, 4.2vw, 35px); }
  .dom-hero__content { gap: 24px; max-width: 560px; }
  /* Copy scales with the same proportions as the art (anchored to the exact
     Figma px at the 834 frame width) so it stays clear of the pill, whose left
     edge sits at a constant ~39.3% of the box at every width in this band. */
  .dom-hero__title { font-size: clamp(34px, 5.76vw, 48px); max-width: min(405px, 48.6vw); }
  .dom-hero__text { font-size: 18px; max-width: min(296px, 35.5vw); }
  .dom-hero__dot { width: 6.47%; }
  .dom-hero__dot--a { left: 52.63%; top: 52.57%; }  /* tree */
  .dom-hero__dot--b { left: 68.30%; top: 20.42%; }  /* company */
  .dom-hero__dot--c { left: 56.54%; top: 32.38%; }  /* shield */
}
@media (max-width: 640px) {
  /* Mobile per Figma 11933-1737 (393×903 frame). Recorded image transform
     (w 251.26% / left −94.36% / top 41.09%) converted with the matched-box
     min-height (903 = the frame height). Dots measured from the frame raster
     (57.5px dia = 14.63% of 393). */
  .dom-hero { aspect-ratio: auto; min-height: 903px; padding: 34px 0; background-size: 251.26% auto; background-position: 62.38% 109.35%; }
  .dom-hero__dot { width: 14.63%; }
  .dom-hero__dot--a { left: 34.45%; top: 70.25%; }  /* tree */
  .dom-hero__dot--b { left: 69.99%; top: 47.74%; }  /* company */
  .dom-hero__dot--c { left: 43.28%; top: 56.11%; }  /* shield */
  .dom-hero__inner { padding-inline: 24px; }
  .dom-hero__content { gap: 32px; }
  .dom-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .dom-hero__title { font-size: 36px; max-width: 100%; }
  .dom-hero__text { font-size: 18px; max-width: 100%; }
}

/* --- Logos --- */
@media (max-width: 640px) {
  .dom-logos { padding: 56px 0; }
  .dom-logos__row { gap: 28px 36px; }
  .dom-logos__row img { height: 38px; }
}

/* --- Problem --- */
@media (min-width: 901px) and (max-width: 1100px) { .dom-problem__inner { gap: 56px; } }
@media (max-width: 900px) {
  /* trim the logos→image gap: 80+112 desktop padding reads huge stacked */
  .dom-logos { padding-bottom: 56px; }
  .dom-problem { padding: 48px 0 80px; }
  .dom-problem__inner { flex-direction: column; align-items: center; gap: 40px; }
  .dom-problem__img { flex: none; width: 100%; max-width: 460px; aspect-ratio: auto; }
  .dom-problem__img img { height: auto; }
  .dom-problem__content { flex: none; width: 100%; align-items: center; text-align: center; }
}
@media (max-width: 640px) {
  .dom-problem__cards { flex-direction: column; gap: 24px; }
  .dom-problem-card { flex: none; }
}

/* --- How it works / tabs --- */
/* .wrap's fluid gutters make the container narrower than Figma's 1280 (site-wide
   trade-off) — below 1408 the four fixed 260px pills can't share one row, so they
   shrink to fit-content. */
@media (max-width: 1407px) {
  .dom-tabs__menu { gap: 24px; }
  .dom-tab { font-size: 16px; padding: 0 20px; }
}
@media (max-width: 1100px) {
  .dom-tabs__menu { gap: 14px; padding: 24px; }
  .dom-tab { padding: 0 18px; height: 46px; }
  .dom-tab .material-symbols-rounded { font-size: 18px; }
}
@media (max-width: 900px) {
  .dom-how { padding: 80px 0; }
  .dom-pane { flex-direction: column; align-items: center; text-align: center; gap: 32px; padding: 0 24px 40px; }
  .dom-pane__art { width: 200px; }
  .dom-pane__art .material-symbols-rounded { font-size: 145px; }  /* 188 × 200/260, keeps the icon proportional to the shrunk box */
  .dom-pane__content { flex: none; width: 100%; align-items: center; }
}

/* --- Trust --- */
/* Tablet (Figma 13311:1107, 834×975): the 2×2 grid PERSISTS — do not stack.
   Bg transform w 177.95%, left −8.56%, top −35.16% → 11% 80% (woman centre-right,
   face in the gap above the right cards). Heading stays at the Figma 48
   (× the site-wide 0.85 heading scale), gutter 44, card titles 20px. */
@media (max-width: 1100px) {
  /* Face pinned at a fixed 153px from the section top (level with the heading, like
     the mock) at every width in the band: her eyes sit 33.5% down / 46% across the
     photo, so offset-y = 153px − 0.335×imgH, with imgH = 0.9467×(200vw÷100)×…
     = 63.43vw. The 200% zoom (vs Figma's 177.95%) buys bottom coverage on the
     taller live boxes at the band's narrow end. KNOBS: 153px = face height
     (smaller = higher); 19% = face left/right. */
  .dom-trust { padding: 74px 0; background-size: 200% auto; background-position: 19% calc(110px - 63.43vw); }
  .dom-trust__inner { --wrap-pad: 44px; }
  .dom-trust__heading { font-size: calc(48px * var(--heading-scale)); max-width: 542px; }
  /* stack: circle on top, heading + text underneath */
  .dom-trust-card { min-height: 261px; flex-direction: column; gap: 12px; }
  .dom-trust-card__body { padding-top: 0; }
  .dom-trust-card__title { font-size: 20px; }
}
/* Narrow tablets (641–767): the section grows taller while the image shrinks, so the
   200% zoom stops covering the bottom — 250% restores coverage, same face pin. */
@media (max-width: 767px) {
  .dom-trust { background-size: 250% auto; background-position: 28% calc(110px - 79.29vw); }
}
/* Phones (Figma 13311:1066, 393×1453): single column; the crop shows the abstract
   warm/purple bokeh RIGHT of the subject — no face (w 461.62%, left −306.94%,
   top −9.09% → 84.88% 50%). */
@media (max-width: 640px) {
  .dom-trust { padding: 42px 0 47px; background-size: 461.62% auto; background-position: 84.88% 50%; }
  .dom-trust__heading { font-size: calc(36px * var(--heading-scale)); margin-bottom: 0; }
  .dom-trust__grid { grid-template-columns: 1fr; gap: 27px; }
  .dom-trust-card { min-height: 265px; border-radius: 18px; }
}

/* --- Why --- */
@media (max-width: 900px) {
  .dom-why { padding: 80px 0; }
  .dom-why__grid { grid-template-columns: 1fr; }
  .dom-why-card { min-height: 0; }
  /* circle + icon 20% smaller on tablet/mobile */
  .dom-why-card__circle { width: 66px; height: 66px; }
  .dom-why-card__circle .material-symbols-rounded { font-size: 35px; }
}

/* --- Register --- */
@media (max-width: 980px) {
  .dom-register { padding: 64px 0 80px; }
  .dom-register__inner { flex-direction: column; }
  .dom-register__main, .dom-register__side, .dom-register-card { flex: none; }
  .dom-register__side { gap: 32px; }
  .dom-register__text p { max-width: none; }
}

/* --- Testimonials --- */
@media (max-width: 900px) {
  .dom-quote { padding: 80px 0; }
  .dom-quote__logo { height: 32px; }
}

/* --- Audience --- */
/* Tablet (Figma 13311:1152, 834×587): w 158.81%, right edge 145.84%, top −9.18%
   → flipped-layer 77.95% 100%. Copy bottom at 533/587, gutter 39. */
@media (max-width: 1100px) {
  .dom-audience { aspect-ratio: 834 / 587; padding: 50px 0 54px; }
  .dom-audience__bg { background-size: 158.81% auto; background-position: 77.95% 100%; }
  .dom-audience__inner { padding-inline: 40px; }
  .dom-audience__heading { font-size: 36px; max-width: 438px; }
  .dom-audience__text { max-width: 421px; }
}
/* Mobile (Figma 13311:1142, 393×648): w 352.14%, right edge 236.62%, top −3.37%
   → flipped-layer 54.19% 100%. Copy bottom-anchored, 344px column. */
@media (max-width: 640px) {
  .dom-audience { aspect-ratio: 393 / 648; padding: 48px 0 40px; }
  .dom-audience__bg { background-size: 352.14% auto; background-position: 54.19% 100%; }
  .dom-audience__inner { padding-inline: 24px; }
  .dom-audience__content { max-width: 345px; }
  .dom-audience__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .dom-audience__heading { font-size: 28px; max-width: none; }
  .dom-audience__text { max-width: none; }
}

/* --- Final --- */
/* Tablet (Figma 13311:1168, 834×347): two-column LEFT-aligned layout persists (shared
   .final ≤900 centres — override it, as rica-final does). The photo is MIRRORED
   (Figma img w −158.75%, left 121.72%, top −120.28%, h 254.37%) — scaleX(-1) +
   Figma's absolute box (visual left = 121.72 − 158.75 = −37.03%). */
@media (min-width: 641px) and (max-width: 900px) {
  .dom-final { padding: 72px 27px; }
  /* heading column wide enough that "UBO COMPLIANCE?" holds one line at 36px
     (Figma 3-line wrap: READY TO / OPERATIONALISE / UBO COMPLIANCE?) */
  .dom-final .final__inner { grid-template-columns: 1.35fr 1fr; gap: 29px; align-items: center; text-align: left; }
  .dom-final h2 { font-size: 36px; }
  .dom-final .final__right { align-items: flex-start; }
  .dom-final .final__right p { font-size: 18px; font-weight: 500; max-width: 297px; }
  .dom-final .final__actions { justify-content: flex-start; }
  .dom-final .final__bg { transform: scaleX(-1); width: 158.75%; height: 254.37%; left: -37.03%; top: -120.28%; right: auto; bottom: auto; }
}
/* Mobile (Figma 13311:1058, 393×514): left-aligned single column, 36px heading on a
   311px measure; mirrored photo (w −272.25%, left 160.55%, top −38.83%, h 138.77%
   → visual left −111.7%). */
@media (max-width: 640px) {
  .dom-final { padding: 70px 24px 50px; }
  .dom-final .final__inner { text-align: left; }
  .dom-final h2 { font-size: clamp(30px, 9.16vw, 36px); }
  .dom-final .final__right { align-items: flex-start; }
  .dom-final .final__right p { font-size: 18px; font-weight: 500; max-width: 311px; }
  .dom-final .final__actions { justify-content: flex-start; }
  .dom-final .final__bg { transform: scaleX(-1); width: 272.25%; height: 138.77%; left: -111.7%; top: -38.83%; right: auto; bottom: auto; }
}