/* ============================================================
   TALANTA — core-block adapters (CONVERSION-PLAN.md section 0, rule 1)
   Core blocks wrap content differently from the static HTML (figure around images,
   ul/li inside navigation, …). These rules give the block markup the static site's look.
   Loaded after talanta.css, which stays verbatim. Additions only.
   WordPress's flow-layout margins are off (theme.json spacing.blockGap: null), so Bootstrap's
   and talanta.css's own margins apply as on the static site.
   ============================================================ */

/* ---------------- skip link (static markup, rule 11) ----------------
   On the static site the focused link sits under the fixed nav, in Bootstrap blue.
   Here it shows above the header in brand colours while it has focus. */
.visually-hidden-focusable:focus{
  position: fixed; z-index: 2001; top: .75rem; inset-inline-start: .75rem;
  padding: .75rem 1.25rem; border-radius: var(--bs-border-radius);
  background: var(--tal-navy); color: #fff;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--track-nav); text-decoration: none;
}
.visually-hidden-focusable:focus-visible{ outline: 2px solid var(--tal-gold); outline-offset: 3px; }

/* ---------------- header: the fixed nav sits below the admin bar (rule 10) ---------------- */
.admin-bar .site-nav{ top: 32px; }
@media (max-width: 782px){ .admin-bar .site-nav{ top: 46px; } }

/* logos: core/image wraps the static <a>/<img> in a figure (classes moved by inc/block-attrs.php).
   Core's `.wp-block-image img{height:auto;max-width:100%}` outranks .brand-lockup's height: restate it. */
.site-nav .wp-block-image, .site-footer .wp-block-image{ margin: 0; }
.site-nav .wp-block-image{ display: flex; }   /* static a.brand-word is a flex item, not inline on a text baseline */
.site-nav .wp-block-image .brand-lockup{ height: 52px; max-width: none; }
@media (max-width: 575.98px){ .site-nav .wp-block-image .brand-lockup{ height: 42px; } }

/* header menu: core/navigation renders nav.nav-main > ul > li.nav-a > a.
   talanta.css styles li.nav-a; core makes the link inherit its colour. */
.site-nav .nav-main, .site-nav .nav-main .wp-block-navigation__container{ gap: 1.5rem; }   /* gap-md-4 */
.site-nav .nav-a.current-menu-item{ color: var(--tal-gold-ink); }                           /* static: .nav-a[aria-current="page"] */
@media (max-width: 767.98px){
  .site-nav .nav-main, .site-nav .nav-main .wp-block-navigation__container{ flex-direction: column; align-items: stretch; gap: 0; }
  /* static: the link itself is the padded full-width block, so its whole row is clickable */
  .site-nav .nav-links .nav-a{ display: block; width: 100%; padding: 0; }
  .site-nav .nav-links .nav-a > a{ padding: .5rem 0; }
}
.tal-lang-switcher:not(:has(*)){ display: none; }   /* phase 07 fills it */
/* language switcher (phase 07, inc/i18n.php): a link to this page in the other language, after the CTA,
   in the menu links' type; the Arabic label in the Arabic font */
.site-nav .tal-lang{
  font-size: var(--fs-small); font-weight: 500; letter-spacing: var(--track-nav);
  color: var(--tal-navy); text-decoration: none; transition: color .2s;
}
.site-nav .tal-lang:hover{ color: var(--tal-gold-ink); }
.site-nav .tal-lang:lang(ar){ letter-spacing: 0; }
/* the Arabic font for "عربي" once the page has loaded (inc/pages.php adds .tal-late-fonts on load; phase 08), or
   at once without JavaScript; until then the label shows in the system's Arabic font */
:is(.tal-late-fonts, .no-js) .site-nav .tal-lang:lang(ar){ font-family: var(--wp--preset--font-family--arabic); }
@media (max-width: 767.98px){
  .site-nav .tal-lang-switcher{ margin-top: .75rem; }
  .site-nav .tal-lang{ display: block; padding: .5rem 0; }
}

/* ---------------- footer ---------------- */
/* Explore menu: nav.foot-nav > ul > li.foot-link > a (static: a.foot-link, navy) */
.site-footer .foot-nav, .site-footer .foot-nav .wp-block-navigation__container{ gap: 0; align-items: stretch; }
.site-footer .foot-link{ color: var(--tal-navy); display: block; width: 100%; padding: 0; margin: 0; }
.site-footer .foot-link > a{ padding-block: .25rem; margin-bottom: .25rem; }   /* static a.foot-link spacing, on the link */
.site-footer .foot-link:hover{ color: var(--tal-gold-ink); }

/* contact rows: the static <span class="fc-ico"><svg></span> chip, drawn from each link's href
   so the list text stays editable (rule 6). Same 34px chip, 16px icon, navy/white on hover. */
.site-footer .fc-item::before{
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #fff center / 16px 16px no-repeat; border: 1px solid rgba(12,35,64,.14);
  transition: background-color .2s, border-color .2s;
}
.site-footer .fc-item:hover::before{ background-color: var(--tal-navy); border-color: var(--tal-navy); }
.site-footer .fc-item{ vertical-align: top; }   /* the empty chip has no text baseline; keep rows 44px as on the static site */
.fc-item[href^="mailto:"]::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2340' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.fc-item[href^="mailto:"]:hover::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.fc-item[href^="tel:"]::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2340' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.1 6.1l1.4-2.3L20 15.5V19a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.fc-item[href^="tel:"]:hover::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.1 6.1l1.4-2.3L20 15.5V19a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.fc-item[href*="wa.me/"]::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2340' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5z'/%3E%3Cpath d='M9 9.5c.3 2.3 2.2 4.2 4.5 4.5'/%3E%3C/svg%3E"); }
.fc-item[href*="wa.me/"]:hover::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.1A8 8 0 1 1 20 11.5z'/%3E%3Cpath d='M9 9.5c.3 2.3 2.2 4.2 4.5 4.5'/%3E%3C/svg%3E"); }
.fc-item[href*="linkedin.com/"]::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2340' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 10.5V17M8 7.5v.01M12 17v-6.5M12 13.5c0-1.7 1-3 2.5-3s2.5 1.1 2.5 3V17'/%3E%3C/svg%3E"); }
.fc-item[href*="linkedin.com/"]:hover::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 10.5V17M8 7.5v.01M12 17v-6.5M12 13.5c0-1.7 1-3 2.5-3s2.5 1.1 2.5 3V17'/%3E%3C/svg%3E"); }
/* region line: the static <span class="fc-pin"> (16px pin in --tal-gold-ink) */
.fc-region::before{
  content: ""; flex: none; width: 16px; height: 16px; margin-top: .2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23826C30' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
@media (prefers-reduced-motion: reduce){ .site-footer .fc-item::before{ transition: none; } }
/* copyright line: the static <span> is a paragraph block here */
.foot-base p{ margin: 0; }

/* ============================================================
   HOME (index.html) — adapters for the talanta/home-* patterns
   ============================================================ */
/* image figures the static markup did not have (it had a div or no wrapper) */
.hero-carousel .wp-block-image, .photo-card .wp-block-image, .cta-parallax .wp-block-image{ margin: 0; }

/* hero shade below 1200 px (phase 08, contrast): there the caption runs across most of the slide, beyond the dark
   third of home.css's shade, and its small text (gold eyebrow, 85 % white lede) measured 1.9–4.4:1 over the brighter
   parts of the photos. The light end of the shade is raised so every caption line of the three slides measures at
   least 4.8:1 (10th percentile of the pixels behind it); 1200 px and up keep the static shade. RTL twin in rtl.css.
   Phase 11: the shade is the photo figure's ::after (home.css). */
@media (max-width: 1199.98px){
  .hero-carousel .slide-media::after{ background: linear-gradient(100deg, rgba(8,23,41,.88) 15%, rgba(8,23,41,.82) 55%, rgba(8,23,41,.78)); }
}

/* focus rings Bootstrap removes (phase 08, visible focus): .btn:focus-visible and the carousel controls' :focus set
   outline:0, and the theme's outline buttons and the slider arrows have no ring of their own (the static site had
   none either). The ring's colour comes from talanta.css (navy, gold on dark sections and over the slider).
   Phase 11: the slider's controls are Splide's; the plugin's own light blue rings are dropped (inc/performance.php). */
.btn-tal-outline:focus-visible{ outline-style: solid; outline-width: 2px; }
.hero-carousel .splide .splide__arrows .splide__arrow:focus-visible{ outline: 2px solid var(--tal-gold); outline-offset: -8px; }
/* navy halo along the inner side of the slider rings (phase 09, 08 N9): the gold ring alone measured 1.3–1.5:1 beside
   the bright half of the photos at 1200 px and up; with navy next to it the ring keeps the gold/navy contrast over
   any photo. The button's halo fills the 3 px offset; the arrows' ring sits 6–8 px inside the control, the halo 8–10.
   Phase 11: the indicators and the pause button get the same gold ring with the halo in its 3 px offset.
   A white line on the halo's other side (outside the ring; inside the arrows' halo): gold and navy differ by 6.98:1,
   less than the 9:1 that keeps one of two ring colours at 3:1 over any background (WCAG technique C40), and over the
   mid-tones of the photos 3-31 % of the ring reached 3:1 in neither colour (11-review A11Y-3). White and navy differ by
   15.8:1, so over any photo part of the ring stands out by 3:1 or more. Focus only: nothing changes at rest. */
.hero-carousel .btn-tal-outline:focus-visible{ box-shadow: 0 0 0 3px var(--tal-navy), 0 0 0 7px #fff; }
.hero-carousel .splide .splide__arrows .splide__arrow:focus-visible::before{ content: ""; position: absolute; inset: 8px; box-shadow: inset 0 0 0 2px var(--tal-navy), inset 0 0 0 4px #fff; pointer-events: none; }
.hero-carousel .splide :is(.splide__pagination__page, .splide__toggle):focus-visible{ outline: 2px solid var(--tal-gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--tal-navy), 0 0 0 7px #fff; }
/* phones: below about 480 px the arrow control (8 %) is narrower than 37 px, and its ring 6–12 px in crossed both arms
   of the 13.4 px chevron, the white line in the glyph's own colour (11-review VIS-6). Below 576 px the ring runs along
   the control's edge (gold 0–2 px in, navy 2–4, white 4–6), clear of the chevron. */
@media (max-width: 575.98px){
  .hero-carousel .splide .splide__arrows .splide__arrow:focus-visible{ outline-offset: -2px; }
  .hero-carousel .splide .splide__arrows .splide__arrow:focus-visible::before{ inset: 2px; }
}

/* caption buttons take their own clicks (08 N10): the 8 %-wide prev/next controls run the full slide height and, on
   the static site too, covered the edge of the caption buttons (up to 49 px of "Schedule a Discovery Session" at 1440),
   so a click there changed the slide. The fade gives the slide that shows z-index:1, which traps the caption under
   the controls; at rest the slide and the caption drop their stacking context and only the button row rises above
   the arrows (z-index 2, home.css), so the look is unchanged and clicks beside a button still reach the arrow. A slide
   that is fading in (.is-fading, hero-carousel.js) keeps the plugin's stacking over the one fading out.
   Only the slide that shows has clickable buttons: the hidden slides lie on top of each other at opacity 0, and their
   invisible buttons took the clicks beside and between the shown ones (11-review RTL-1). */
.hero-carousel .wp-block-splide-carousel:not(.is-fading) .splide__track--fade > .splide__list > .splide__slide.is-active,
.hero-carousel .slide-caption{ z-index: auto; }
.hero-carousel .slide-caption > .wp-block-buttons{ position: relative; z-index: 3; pointer-events: none; }
.hero-carousel .splide__slide.is-active .slide-caption > .wp-block-buttons :is(a, button){ pointer-events: auto; }

/* the slide text under the title at 90 % white (index.html: 85 %): over the brightest pixels behind it on slides 2 and
   3 at 1200 px and up, where the shade is the static one, it measured 4.33:1, here 4.6:1 (11-review A11Y-4) */
.hero-carousel .slide-caption p:not(.eyebrow, .h1){ color: rgba(255,255,255,.9); }

/* eyebrows are paragraphs here (static: <span class="eyebrow">); a section's "p" rule must not resize them */
.slide-caption p.eyebrow{ font-size: var(--fs-eyebrow); max-width: none; }

/* outcomes: the static items carry style="--i:N" (staggered gold tabs) */
.tal-outcomes .o-list li:nth-child(2){ --i: 1; }  .tal-outcomes .o-list li:nth-child(3){ --i: 2; }
.tal-outcomes .o-list li:nth-child(4){ --i: 3; }  .tal-outcomes .o-list li:nth-child(5){ --i: 4; }
.tal-outcomes .o-list li:nth-child(6){ --i: 5; }  .tal-outcomes .o-list li:nth-child(7){ --i: 6; }
.tal-outcomes .o-list li:nth-child(8){ --i: 7; }  .tal-outcomes .o-list li:nth-child(9){ --i: 8; }
.tal-outcomes .o-list li:nth-child(10){ --i: 9; }
/* "10 / Benefits delivered" is one paragraph here (static: a div), so no paragraph margin */
.tal-outcomes p.o-count{ margin: 0; }

/* methodology and why: the static step numbers are divs/spans, here paragraphs */
.pillar p.step-num, .tal-defs p.d-num{ margin-top: 0; }
.tal-defs p.d-num{ margin-bottom: 0; }

/* service cards: the static card is one <a class="photo-card">; here a group whose "Explore the service"
   paragraph (static: <span class="pc-cta">) holds the link, stretched over the whole card */
.photo-card .pc-body p.pc-cta{
  font-size: 1rem; letter-spacing: normal; color: var(--tal-gold);   /* the span's 16px line box, as on the static card */
  margin: 0; max-height: none; opacity: 1; overflow: visible;
}
.photo-card .pc-body p.pc-cta a, .photo-card .pc-body p.pc-cta::after{ font-size: .72rem; letter-spacing: var(--track-label); }
.photo-card .pc-cta a{ color: inherit; text-decoration: none; }
.photo-card .pc-cta a::before{ content: ""; position: absolute; inset: -100vmax; }   /* clipped by the card */
.photo-card .pc-cta a:focus-visible{ outline: none; }
/* the static card's :focus-visible effects, now when its link has focus */
.photo-card:has(.pc-cta a:focus-visible){ outline: 2px solid var(--tal-navy); outline-offset: 3px; }
.photo-card:has(.pc-cta a:focus-visible) .pc-body p{ max-height: 8rem; opacity: 1; }
.photo-card:has(.pc-cta a:focus-visible) img{ filter: grayscale(.25) contrast(1.08) brightness(.95); }
.photo-card:has(.pc-cta a:focus-visible)::before{ opacity: .3; }
.photo-card:has(.pc-cta a:focus-visible)::after{ outline-color: var(--tal-gold); outline-offset: -10px; }
.photo-card:has(.pc-cta a:focus-visible) .pc-body h3::before{ width: 48px; }

/* logo walls: the static <li class="logo-tile"><img style="--h:NN%"></li>; here the image sits in a figure,
   which fills the tile so the image's percentage height works; --h comes from the class lm-hNN */
.logo-tile > .wp-block-image{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; }
.lm-h21{ --h: 21%; } .lm-h25{ --h: 25%; } .lm-h28{ --h: 28%; } .lm-h30{ --h: 30%; } .lm-h34{ --h: 34%; } .lm-h38{ --h: 38%; }
.lm-h39{ --h: 39%; } .lm-h42{ --h: 42%; } .lm-h43{ --h: 43%; } .lm-h46{ --h: 46%; } .lm-h47{ --h: 47%; } .lm-h48{ --h: 48%; }
.lm-h50{ --h: 50%; } .lm-h52{ --h: 52%; } .lm-h53{ --h: 53%; } .lm-h54{ --h: 54%; } .lm-h55{ --h: 55%; } .lm-h56{ --h: 56%; }
.lm-h57{ --h: 57%; } .lm-h58{ --h: 58%; } .lm-h59{ --h: 59%; } .lm-h64{ --h: 64%; } .lm-h65{ --h: 65%; } .lm-h66{ --h: 66%; }
.lm-h68{ --h: 68%; } .lm-h73{ --h: 73%; } .lm-h75{ --h: 75%; } .lm-h84{ --h: 84%; }

/* CTA: the static email link is an inline <a class="cta-mail reveal">, which fades but cannot move;
   here a paragraph holds it */
.cta-parallax p.cta-mail-line{ margin: 0; }
.cta-parallax p.cta-mail-line.reveal{ transform: none; }
/* the form's message box has the contact page's 5 rows (one form per language, inc/contact-form.php); here it keeps
   index.html's rows="4": 4 lines of the 1.5 line height, talanta.css's .75rem padding and 1px border each side */
.cta-parallax .tal-form textarea.form-control{ height: calc(4 * 1.5em + 1.5rem + 2px); }

/* ============================================================
   ABOUT (about.html) — adapters for the talanta/about-* patterns
   ============================================================ */
/* the static inline styles of the navy sections (plan rule 3):
   style="background:var(--tal-navy)", h2 style="color:#fff", p style="color:rgba(255,255,255,.8)" */
.bg-tal-navy{ background: var(--tal-navy); }
.tal-white{ color: #fff; }
.tal-white-80{ color: rgba(255,255,255,.8); }

/* tile numbers are paragraphs here (static: <span class="t-num">): .tal-tile p must not add its top margin */
.tal-tile p.t-num{ margin-top: 0; }

/* the name notes are paragraphs here (static: divs): no paragraph margin below them */
p.name-note{ margin-bottom: 0; }

/* the lockup beside the story: static <img style="width:min(400px,100%);height:auto"> directly in .story-mark */
.story-mark > .wp-block-image{ display: flex; justify-content: center; width: 100%; margin: 0; }
.story-mark > .wp-block-image img{ width: min(400px, 100%); height: auto; }

/* ============================================================
   SERVICES (services.html) — adapters for the talanta/services-* patterns
   ============================================================ */
/* practice eyebrows are paragraphs here; the static <span class="eyebrow"> sits inline in the text column,
   in a line box of the column's own size, right above the h2 */
.svc p.eyebrow{ display: inline; }

/* practice index: each link sits in a paragraph here (static: the links are the flex items) */
.svc-index p{ margin: 0; }
/* the index bar is navy-deep, so its links take the gold focus ring of dark sections (the navy one measured 1.14:1) */
.svc-index :focus-visible{ outline-color: var(--tal-gold); }

/* industry chips: the static inline <svg class="ind-ic"> icons are CSS mask images here (plan rule 6),
   drawn like .tal-chips .ind-ic in talanta.css (1.75rem, navy stroke 1.5, gold on dark) */
.tal-chips li::before{ content: ""; width: 1.75rem; height: 1.75rem; flex: none; background-color: var(--tal-navy); -webkit-mask: var(--ind-ic) center / contain no-repeat; mask: var(--ind-ic) center / contain no-repeat; }
.on-dark .tal-chips li::before{ background-color: var(--tal-gold); }
.tal-chips li:nth-child(1){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 13v16M12 29h8'/%3E%3Ccircle cx='16' cy='11' r='1.6'/%3E%3Cpath d='M16 9.4V2.5M14.6 11.8 8.6 15.3M17.4 11.8l6 3.5'/%3E%3C/svg%3E"); } /* 01 Energy, line 376 */
.tal-chips li:nth-child(2){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 28V12l7 4v-4l7 4v-4l7 4V6h5v22z'/%3E%3Cpath d='M24 6c0-2 2-3 3-2'/%3E%3Cpath d='M8 23h3M14 23h3M20 23h3'/%3E%3C/svg%3E"); } /* 02 Industrial Services, line 377 */
.tal-chips li:nth-child(3){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 28h26M5 28V16l6 4v-4l6 4v-4l6 4V5h4v23'/%3E%3Crect x='7' y='22' width='3' height='3'/%3E%3Crect x='13' y='22' width='3' height='3'/%3E%3Crect x='19' y='22' width='3' height='3'/%3E%3C/svg%3E"); } /* 03 Manufacturing, line 378 */
.tal-chips li:nth-child(4){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12a7 7 0 0 1 14 0M7 12h18M16 5v3'/%3E%3Cpath d='M11 14a5 5 0 0 0 10 0'/%3E%3Cpath d='M6 29v-3a6 6 0 0 1 6-6h8a6 6 0 0 1 6 6v3M13 20l3 5 3-5'/%3E%3C/svg%3E"); } /* 04 Construction, line 379 */
.tal-chips li:nth-child(5){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h17v14H2zM19 13h6l4 5v5h-10'/%3E%3Ccircle cx='8' cy='24' r='2.5'/%3E%3Ccircle cx='23' cy='24' r='2.5'/%3E%3C/svg%3E"); } /* 05 Logistics, line 380 */
.tal-chips li:nth-child(6){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 16 4l13 7zM5 11h22M5 25h22M3 28h26'/%3E%3Cpath d='M8 14v9M13 14v9M19 14v9M24 14v9'/%3E%3C/svg%3E"); } /* 06 Government, line 381 */
.tal-chips li:nth-child(7){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='9' r='2.5'/%3E%3Ccircle cx='15' cy='7' r='2.5'/%3E%3Ccircle cx='23' cy='9' r='2.2'/%3E%3Cpath d='M3 21v-4a4 4 0 0 1 8 0v4M11 21v-6a4 4 0 0 1 8 0v6M19.5 21v-4a3.5 3.5 0 0 1 7 0v4'/%3E%3Cpath d='M3 29l9-5 5 2 12-7M24 19h5v5'/%3E%3C/svg%3E"); } /* 07 Family Businesses, line 382 */
.tal-chips li:nth-child(8){ --ind-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='10' width='26' height='17' rx='1.5'/%3E%3Cpath d='M12 10V6h8v4M3 17h26'/%3E%3Crect x='14' y='15' width='4' height='4'/%3E%3C/svg%3E"); } /* 08 Professional Services, line 383 */

/* ============================================================
   APPROACH (approach.html) — adapters for the talanta/approach-* patterns
   ============================================================ */
/* 3A cards: the step number is a paragraph here (static: <span class="a3-num">), and approach.css colours
   every paragraph of a navy card white (.a3-card:not(.gold) p); keep the number navy on its gold disc.
   More specific than that rule, so it also wins in the editor, where approach.css loads after this file.
   The gold card keeps its white number (.a3-card.gold .a3-num). */
.a3-card:not(.gold) p.a3-num{ color: var(--tal-navy); }

/* journey, 768 px and up: six equal columns. With approach.css's repeat(6,1fr) a column cannot be narrower than its
   label's longest word, so at 768 the row grew past the list and the last label hung over the page edge (07-review
   N7: 11 px in English, 21 px in Arabic). From about 1030 px every column is already equal, so 1440 is unchanged;
   below 768 the track is vertical (approach.css). ol raises the rule above approach.css in the editor too. */
@media (min-width: 768px){ ol.j-steps{ grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* journey: the static items carry style="--i:N" (the pins land one after another) */
.j-steps li:nth-child(1){ --i: 0; }  .j-steps li:nth-child(2){ --i: 1; }  .j-steps li:nth-child(3){ --i: 2; }
.j-steps li:nth-child(4){ --i: 3; }  .j-steps li:nth-child(5){ --i: 4; }  .j-steps li:nth-child(6){ --i: 5; }

/* TALANTA ONE modules and ecosystem cards: paragraphs here (static: div.module, span.eco-name/.eco-what
   with display:block), so no paragraph margin below them */
p.module{ margin: 0; }
.eco p.eco-what{ margin: 0; }

/* the ecosystem section is hidden for now (static: the hidden attribute; plan Q8) */
.tal-is-hidden{ display: none; }

/* ============================================================
   TEAM (team.html) — adapters for the talanta/team-* patterns
   ============================================================ */
/* avatars: the static <svg class="avatar" viewBox="0 0 96 96"> is a navy-soft square (rx 6) with the T-badge mark
   drawn at x 20, y 26.5, 56 × 43.7 (preserveAspectRatio meet). Here the mark is a core/image on that tile, so a
   portrait can replace it; team.css sizes the figure (88px, margin below). A portrait fills the square. */
.member figure.avatar{ position: relative; background: var(--tal-navy-soft); border-radius: 5.5px; }
.member figure.avatar img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.member figure.avatar img[src$="/talanta-mark.svg"]{
  position: absolute; left: 20.8333%; top: 27.6042%; width: 58.3333%; height: 45.5208%; object-fit: contain;
}

/* ethos: the quote is core/quote, whose text is a paragraph (static: text directly in the blockquote) */
.ethos blockquote p{ margin: 0; }
/* the signature's static inline style (plan rule 3) */
.ethos-sig{ font-size: .78rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tal-gold-ink); }
/* the decorative quotation mark <span class="mark"> also matches Bootstrap's .mark highlight utility, which paints
   a #FFF3CD bar behind it on the static page: drop only that background (STATE.md decision 17). Bootstrap's
   padding stays, so the mark and the quote keep their static positions. */
.ethos span.mark{ background-color: transparent; }

/* ============================================================
   CONTACT (contact.html) — adapters for the talanta/contact-* patterns
   ============================================================ */
/* contact details: each value is a paragraph here; the static <span class="info-val"> is inline, so it shares
   an anonymous line box (the column's own font and line height) between the block labels; no paragraph margin */
.contact-wrap p.info-val{ display: inline; margin: 0; }

/* ============================================================
   CONTACT FORM 7 (phase 10) — the Discovery Session form on home and contact (inc/contact-form.php)
   CF7's own stylesheet is not loaded: these are the parts of it the form needs, in brand colours. The labels,
   fields and button are talanta.css's .tal-form and .btn-tal-gold rules, as before.
   ============================================================ */
/* the status line and error list CF7 writes for screen readers (role="status"): off screen, still read */
.wpcf7 .screen-reader-response{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wpcf7 .hidden-fields-container{ display: none; }
/* CF7 wraps each field in an inline span; as a block it holds the field and, below it, the field's error */
.tal-form .wpcf7-form-control-wrap{ display: block; position: relative; }

/* a field with an error gets a 2 px gold edge (inset, so nothing moves) … */
.tal-form .form-control.wpcf7-not-valid{ border-color: var(--tal-gold); box-shadow: inset 0 0 0 1px var(--tal-gold); }
.tal-form .form-control.wpcf7-not-valid:focus{ box-shadow: inset 0 0 0 1px var(--tal-gold), 0 0 0 .2rem rgba(200,169,91,.25); }
/* … and CF7's message under it in white, after a gold "!" badge: the error is told in words and by a sign, not by
   colour alone. The visible message is aria-hidden; screen readers get it through the field's aria-describedby. */
.tal-form .wpcf7-not-valid-tip{ display: flex; align-items: flex-start; gap: .5rem; margin-top: .5rem; color: #fff; font-size: .85rem; font-weight: 500; line-height: 1.45; }
.tal-form .wpcf7-not-valid-tip::before,
.tal-form .wpcf7-response-output::before{ content: "!"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--tal-gold); color: var(--tal-navy); font-size: .8rem; font-weight: 800; line-height: 1; }

/* the form's message after a submission ("sent", or what went wrong), under the button; none before */
.tal-form .wpcf7-response-output{ display: flex; align-items: flex-start; gap: .65rem; margin: 1.25rem 0 0; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.28); border-inline-start: 4px solid var(--tal-gold); border-radius: var(--bs-border-radius); background: rgba(255,255,255,.07); color: #fff; font-size: .9rem; line-height: 1.5; }
.tal-form:is(.init, .resetting, .submitting) .wpcf7-response-output, .tal-form .wpcf7-response-output:empty{ display: none; }
/* sent: a navy check mark in the gold badge instead of the "!" */
.tal-form.sent .wpcf7-response-output::before{ content: ""; background: var(--tal-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230C2340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
/* while it is being sent, the button rests (CF7's spinner is not used) */
.tal-form.submitting .btn-tal-gold{ opacity: .65; pointer-events: none; }