/* SAMT v2 design layer — loaded after the Webflow stylesheets and
   samt-custom.css. One motif (the teal "protocol line") and one easing
   family carried through the whole site; everything else stays the brand's
   own dark-luxury theme. The preloader's own critical CSS lives inline in
   index.html so it renders before any stylesheet arrives. */

:root {
  --v2-ink: #050807;
  --v2-teal: #57b6b2;
  --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Ground ------------------------------------------------------------ */

html {
  scrollbar-width: thin;
  scrollbar-color: #24403e #060909;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #060909;
}
::-webkit-scrollbar-thumb {
  background: #24403e;
  border-radius: 8px;
  border: 2px solid #060909;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--v2-teal);
}

::selection {
  background: var(--v2-teal);
  color: #04100f;
}

:focus-visible {
  outline: 2px solid var(--v2-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  text-rendering: optimizeLegibility;
}

/* ---- The protocol line, echoed in the navigation ----------------------- */

.navbar-2 .nav-link-2 {
  position: relative;
}

.navbar-2 .nav-link-2::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4px;
  height: 1px;
  background: var(--v2-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.38s var(--v2-ease);
}

.navbar-2 .nav-link-2:hover::after,
.navbar-2 .nav-link-2.w--current::after {
  transform: scaleX(1);
}

/* ---- The protocol line, drawn through the page ------------------------- */

/* Reading progress: the same teal hairline the preloader draws, kept alive
   for the whole visit along the top edge. Direction-aware — v2-motion sets
   the transform-origin from the page's writing direction, so it grows from
   the right on Arabic pages. */
#samt-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 9500;
  pointer-events: none;
  background: var(--v2-teal);
  box-shadow: 0 0 10px rgba(87, 182, 178, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#samt-progress.v2-vis {
  opacity: 1;
}

/* On SamtLife the line keeps the sub-brand's orange. */
body[data-samt-page$="samtlife"] #samt-progress {
  background: #f9a11b;
  box-shadow: 0 0 10px rgba(249, 161, 27, 0.45);
}

/* Every section title re-enacts the preloader in miniature: as the heading
   slides up out of its clip (IX2), a short teal line draws in beneath it.
   The line is a block pseudo with fixed width and zero side margins, which
   the CSS box model start-aligns in both LTR and RTL automatically. */
.heading-top::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0.85rem 0 0;
  background: var(--v2-teal);
  box-shadow: 0 0 8px rgba(87, 182, 178, 0.35);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.9s var(--v2-ease) 0.35s;
}

.heading-top.v2-inview::after {
  transform: scaleX(1);
}

/* SamtLife pages keep the export's own light design — no drawn title lines
   there (user decision: SamtLife stays exactly the sub-brand's look). */
body[data-samt-page$="samtlife"] .heading-top::after {
  display: none;
}

/* …and each services-grid card answers on hover with its own hairline. */
.grid-3-columns .title-flex::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 10px auto 0;
  background: var(--v2-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--v2-ease);
}

.grid-3-columns .text-wrapper:hover .title-flex::after {
  transform: scaleX(1);
}

/* The footer opens on the same line, fading out at both ends.
   (SamtLife keeps its own navy rule — no teal line there.) */
.section-footer {
  position: relative;
}

body[data-samt-page$="samtlife"] .section-footer::before {
  content: none;
}

.section-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 78vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(87, 182, 178, 0.55),
    transparent
  );
}

/* ---- V2.3 — the menu --------------------------------------------------- */

/* Desktop: links answer in teal ink, not just the hairline. */
.navbar-2 .nav-text {
  transition: color 0.3s ease;
}

/* (SamtLife pages are excluded — that nav speaks the sub-brand's
   orange/blue, and recoloring it teal clashed. There, links keep their
   own color and only the hairline answers, in orange — below.) */
body:not([data-samt-page$="samtlife"]) .navbar-2 .nav-link-2:hover .nav-text,
body:not([data-samt-page$="samtlife"]) .navbar-2 .nav-link-2.w--current .nav-text {
  color: var(--v2-teal);
}

body[data-samt-page$="samtlife"] .navbar-2 .nav-link-2::after {
  background: #f9a11b; /* the sub-brand orange (--border) */
  box-shadow: none;
}

/* The hamburger: no plate at all — the export's round gray blur button
   goes fully transparent and only the two drawn lines remain, folding into
   an X when open (.w--open is Webflow's own state class). A soft dark halo
   keeps the bars readable on bright hero imagery. */
.menu-button-2,
.menu-button-2.at,
.menu-button-2.w--open {
  background-color: transparent !important;
  border: none !important;
  border-radius: 2px !important; /* shapes the :focus-visible ring */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
}

.menu-button-2 .menu-icon {
  font-size: 0 !important; /* silences the webflow icon-font glyph */
  width: 24px;
  height: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.menu-button-2 .menu-icon::before,
.menu-button-2 .menu-icon::after {
  content: "";
  display: block;
  width: 24px;
  height: 1.5px;
  background: #f5f2ec;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6));
  transition: transform 0.35s var(--v2-ease), background-color 0.3s ease;
}

/* SamtLife's hero is light — the bars go navy there until the bar itself
   turns ink (scrolled) or the curtain opens. */
body[data-samt-page$="samtlife"] .navbar-2:not(.nav-scrolled) .menu-button-2:not(.w--open) .menu-icon::before,
body[data-samt-page$="samtlife"] .navbar-2:not(.nav-scrolled) .menu-button-2:not(.w--open) .menu-icon::after {
  background: #004467;
  filter: none;
}

.menu-button-2.w--open .menu-icon::before {
  transform: translateY(4.25px) rotate(45deg);
  background: var(--v2-teal);
}

.menu-button-2.w--open .menu-icon::after {
  transform: translateY(-4.25px) rotate(-45deg);
  background: var(--v2-teal);
}

/* While the curtain is open, the bar itself goes full ink so bar and menu
   read as one surface. */
.navbar-2:has(.menu-button-2.w--open) {
  background-color: rgba(5, 8, 7, 0.96) !important;
}

/* The collapsed menu (Webflow moves .nav-menu-2 into .w-nav-overlay below
   992px, so everything scoped to the overlay is mobile/tablet-only): the
   export's gray pill becomes a full-height ink curtain. Webflow's own
   400ms height animation now reads as the curtain dropping. */
.w-nav-overlay {
  background: rgba(4, 7, 7, 0.45);
}

.w-nav-overlay .nav-menu-2 {
  width: 100%;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  margin: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(5, 8, 7, 0.98), rgba(4, 10, 10, 0.96));
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  padding: clamp(2.6rem, 9vh, 5.5rem) 8vw 3.5rem;
}

/* Links become a stacked order of business: generous serif rows divided by
   hairlines. (Arabic pages keep Swissra — the serif is gated to Latin.) */
.w-nav-overlay .nav-link-2 {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}

.w-nav-overlay .nav-2:last-child .nav-link-2:last-child {
  border-bottom: none;
}

.w-nav-overlay .nav-text {
  font-size: clamp(1.55rem, 6vw, 2.1rem);
  line-height: 1.25;
}

body:not([data-samt-page^="ar:"]) .w-nav-overlay .nav-text {
  font-family: "Bodoni 72 Book", "Playfair Display", Didot, Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* The export tracks nav labels ~1.7px — right for Latin caps, wrong for
   Arabic script, which must never be letter-spaced. */
body[data-samt-page^="ar:"] .w-nav-overlay .nav-text {
  letter-spacing: 0;
}

/* The desktop hover furniture has no job inside the curtain. */
.w-nav-overlay .block-underline,
.w-nav-overlay .nav-link-2::after {
  display: none;
}

/* The export's own sliding underline is replaced by the V2 hairline
   everywhere — running both doubled the effect (a white smudge mid-slide,
   most visible on SamtLife's bright hero). */
.navbar-2 .block-underline {
  display: none;
}

/* The curtain closes on the protocol line. */
.w-nav-overlay .nav-menu-2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 2.2rem auto 0;
  background: var(--v2-teal);
  box-shadow: 0 0 8px rgba(87, 182, 178, 0.35);
}

/* Entrance: rows arrive in order once Webflow marks the menu open. If the
   attribute never lands, links simply show — the stagger is progressive. */
.nav-menu-2[data-nav-menu-open] .nav-link-2 {
  opacity: 0;
  animation: v2MenuIn 0.5s var(--v2-ease) forwards;
}

.nav-menu-2[data-nav-menu-open] .nav-2:first-child .nav-link-2:nth-child(1) { animation-delay: 0.08s; }
.nav-menu-2[data-nav-menu-open] .nav-2:first-child .nav-link-2:nth-child(2) { animation-delay: 0.14s; }
.nav-menu-2[data-nav-menu-open] .nav-2:first-child .nav-link-2:nth-child(3) { animation-delay: 0.2s; }
.nav-menu-2[data-nav-menu-open] .nav-2:last-child .nav-link-2:nth-child(1) { animation-delay: 0.26s; }
.nav-menu-2[data-nav-menu-open] .nav-2:last-child .nav-link-2:nth-child(2) { animation-delay: 0.32s; }
.nav-menu-2[data-nav-menu-open] .nav-2:last-child .nav-link-2:nth-child(3) { animation-delay: 0.38s; }
.nav-menu-2[data-nav-menu-open] .nav-2:last-child .nav-link-2:nth-child(4) { animation-delay: 0.44s; }
.nav-menu-2[data-nav-menu-open] .nav-2:last-child .nav-link-2:nth-child(5) { animation-delay: 0.5s; }

.nav-menu-2[data-nav-menu-open]::after {
  transform: scaleX(0);
  animation: v2MenuLine 0.7s var(--v2-ease) 0.55s forwards;
}

@keyframes v2MenuIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes v2MenuLine {
  to {
    transform: scaleX(1);
  }
}

/* ---- V2.4 — the team dossiers (about pages only) ------------------------ */
/* The export gave each founder/trainer a soft teal glow-box beside a small
   portrait floating in a washed panel. Each person now reads as one
   "dossier plate" in the card language: hairline frame, mounted portrait,
   name over a small tracked role, a drawn line, and a readable measure.
   Scoped hard to the two about pages — .grid-2-columns-3 exists elsewhere. */

body[data-samt-page="about-us"] .grid-2-columns-3,
body[data-samt-page="ar:aboutus"] .grid-2-columns-3 {
  border: 1px solid rgba(245, 242, 236, 0.09);
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    rgba(245, 242, 236, 0.035),
    rgba(245, 242, 236, 0.012)
  );
  padding: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  transition: border-color 0.4s ease;
}

body[data-samt-page="about-us"] .grid-2-columns-3:hover,
body[data-samt-page="ar:aboutus"] .grid-2-columns-3:hover {
  border-color: rgba(87, 182, 178, 0.35);
}

/* The glow-box and the washed photo panel go away. */
body[data-samt-page="about-us"] .col1,
body[data-samt-page="ar:aboutus"] .col1 {
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
}

body[data-samt-page="about-us"] .col2-2,
body[data-samt-page="ar:aboutus"] .col2-2,
body[data-samt-page="about-us"] .text-wrapper-1,
body[data-samt-page="ar:aboutus"] .text-wrapper-1 {
  background: none !important;
  box-shadow: none !important;
}

/* Portraits become mounted prints: uniform 4:5 crop inside a hairline mat. */
body[data-samt-page="about-us"] .photo-line-animation,
body[data-samt-page="ar:aboutus"] .photo-line-animation {
  width: fit-content;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(245, 242, 236, 0.14);
  border-radius: 3px;
  background: rgba(245, 242, 236, 0.03);
}

body[data-samt-page="about-us"] .photonew.full,
body[data-samt-page="ar:aboutus"] .photonew.full {
  display: block;
  width: min(320px, 72vw);
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: 2px;
}

/* Name above a small teal role line, closed by the protocol line. */
body[data-samt-page="about-us"] .heading-2.newone span,
body[data-samt-page="ar:aboutus"] .heading-2.newone span {
  display: block;
  margin-top: 0.6rem;
  color: var(--v2-teal);
}

body[data-samt-page="about-us"] .heading-2.newone span {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body[data-samt-page="ar:aboutus"] .heading-2.newone span {
  font-size: 1.05rem;
  letter-spacing: 0;
}

body[data-samt-page="about-us"] .heading-2.newone::after,
body[data-samt-page="ar:aboutus"] .heading-2.newone::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 1.05rem;
  background: var(--v2-teal);
  opacity: 0.85;
}

/* Bios read as text, not as a wall. (The ch-measure cap is Latin-only —
   it squeezed the Arabic column, whose export grid already sizes it.) */
body[data-samt-page="about-us"] .text-block-6,
body[data-samt-page="ar:aboutus"] .text-block-6 {
  line-height: 1.85;
  color: rgba(218, 215, 212, 0.82);
}

body[data-samt-page="about-us"] .text-block-6 {
  max-width: 64ch;
}

/* ---- Hero settle (echo of the preloader wordmark) ----------------------- */

/* When the ink curtain parts (html.v2-open, set by v2-motion), the Latin
   hero titles settle out of wide tracking exactly like the loader's SAMT
   word did. Letter-spacing only — IX2 owns transform/opacity on these
   elements, and Arabic script (.ar/.arp variants) must never be tracked. */
html.v2-open body:not([data-samt-page^="ar:"]) .heading-h1:not(.ar):not(.arp),
html.v2-open body:not([data-samt-page^="ar:"]) .heading-h1-2.life:not(.ar),
html.v2-open body:not([data-samt-page^="ar:"]) .heading-hero-c:not(.ar),
html.v2-open body:not([data-samt-page^="ar:"]) .heading-hero-b-3.en:not(.ar) {
  animation: v2-track 1.9s var(--v2-ease) 0.15s both;
}

@keyframes v2-track {
  from {
    letter-spacing: 0.12em;
  }
  to {
    letter-spacing: normal;
  }
}

/* ---- V2.2 — the visible restyle: "diplomatic editorial" ----------------- */
/* The brand's own serif (the wordmark's Bodoni 72) takes over the display
   layer, corners sharpen to 2-3px like engraved stationery, and cards,
   buttons, nav, and footer get real chrome. Arabic pages keep Swissra and
   never receive Latin tracking — everything latin-specific is gated on
   body[data-samt-page] (set per-route by useWebflowPage). */

/* Section display titles: the voice of the wordmark carried into the page.
   Sizes are clamped; the .overflow clips are auto-height so nothing crops. */
body:not([data-samt-page^="ar:"]):not([data-samt-page$="samtlife"]) .heading-top {
  font-family: "Bodoni 72 Book", "Playfair Display", Didot, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.7rem, 4.4vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: 0.015em;
}

body:not([data-samt-page^="ar:"]):not([data-samt-page$="samtlife"]) .heading,
body:not([data-samt-page^="ar:"]):not([data-samt-page$="samtlife"]) .heading-2.newone {
  font-family: "Bodoni 72 Book", "Playfair Display", Didot, Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.015em;
}

/* Arabic section titles simply gain presence in their own face. */
body[data-samt-page^="ar:"]:not([data-samt-page$="samtlife"]) .heading-top {
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
}

/* The fixed navbar reads as ink glass once the page scrolls — darker, more
   confident than the export's white frost, closed by a teal hairline.
   (Same selector + !important as samt-custom.css; this sheet loads later,
   so it wins the cascade and still out-ranks IX2 inline writes.) */
.navbar-2 {
  border-bottom: 1px solid transparent;
}

.navbar-2.nav-scrolled {
  background-color: rgba(5, 8, 7, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(87, 182, 178, 0.18);
}

/* Buttons become what an invitation from a protocol house would carry:
   a hairline frame that fills teal on hover. Covers the hero Contact,
   every form submit, 404, and samtlife buttons (.w-button family). */
body:not([data-samt-page$="samtlife"]) .w-button {
  background-color: transparent !important;
  border: 1px solid rgba(87, 182, 178, 0.62) !important;
  color: #f5f2ec !important;
  border-radius: 2px !important;
  transition: background-color 0.35s var(--v2-ease), color 0.35s var(--v2-ease),
    border-color 0.35s var(--v2-ease), transform 0.3s var(--v2-ease),
    box-shadow 0.3s var(--v2-ease);
}

body:not([data-samt-page$="samtlife"]) .w-button:hover {
  background-color: var(--v2-teal) !important;
  border-color: var(--v2-teal) !important;
  color: #04100f !important;
}

/* Latin buttons speak in small tracked caps; Arabic buttons keep their
   letterforms untouched, and SamtLife keeps its own navy pills. */
body:not([data-samt-page^="ar:"]):not([data-samt-page$="samtlife"]) .w-button:not(.ar) {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 15px 34px;
}

/* Services-grid cards become mounted pieces: a quiet plate, hairline frame,
   sharp corners, and a lift when addressed. */
.grid-3-columns .text-wrapper {
  background: linear-gradient(
    180deg,
    rgba(245, 242, 236, 0.04),
    rgba(245, 242, 236, 0.012)
  );
  border: 1px solid rgba(245, 242, 236, 0.09);
  border-radius: 3px;
  padding: 10px 10px 22px;
  transition: transform 0.5s var(--v2-ease), border-color 0.4s ease,
    box-shadow 0.5s var(--v2-ease);
}

.grid-3-columns .text-wrapper:hover {
  border-color: rgba(87, 182, 178, 0.45);
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.grid-3-columns .photo,
.grid-3-columns .photo-line-animation {
  border-radius: 2px;
}

/* The believe/values cards: top-center protocol line, engraved frame. */
.s1 {
  position: relative;
  border: 1px solid rgba(245, 242, 236, 0.09);
  border-radius: 3px;
  box-shadow: none;
  background: linear-gradient(
    180deg,
    rgba(87, 182, 178, 0.07),
    rgba(87, 182, 178, 0) 55%
  );
}

.s1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 2px;
  background: var(--v2-teal);
}

body:not([data-samt-page^="ar:"]):not([data-samt-page$="samtlife"]) .serviceheading {
  font-family: "Bodoni 72 Book", "Playfair Display", Didot, Georgia, serif;
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
}

/* The footer settles onto its own darker ground beneath the opening line,
   and its main title joins the serif display layer. */
body:not([data-samt-page$="samtlife"]) .section-footer {
  background-color: transparent;
  background-image: linear-gradient(180deg, #081211 0%, #040807 100%);
}

/* (.new variants are the small "View all …" utility links — they keep the
   export's 22px sans treatment.) */
body:not([data-samt-page^="ar:"]):not([data-samt-page$="samtlife"]) .footer-title:not(.new) {
  font-family: "Bodoni 72 Book", "Playfair Display", Didot, Georgia, serif;
  font-weight: 400;
  font-size: 34px;
}

/* Form fields sit on a faint plate so the writing area reads at a glance. */
body:not([data-samt-page$="samtlife"]) .w-input,
body:not([data-samt-page$="samtlife"]) .w-select {
  background-color: rgba(245, 242, 236, 0.04);
  border-radius: 2px;
}

/* ---- Micro-interactions ------------------------------------------------ */

/* Every reveal-framed photo gets the same calm zoom the services grid has. */
.photo-line-animation .photo {
  transition: transform 0.6s var(--v2-ease);
}

.photo-line-animation:hover .photo {
  transform: scale(1.035);
}

/* Buttons (Register Now, Send Message, Contact us…) lift gently. */
.w-button {
  transition: transform 0.3s var(--v2-ease), box-shadow 0.3s var(--v2-ease);
}

.w-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(87, 182, 178, 0.28);
}

/* The email pill in the footer. */
.contact-email-link {
  transition: transform 0.3s var(--v2-ease), box-shadow 0.3s var(--v2-ease);
}

.contact-email-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(87, 182, 178, 0.3);
}

/* SamtLife's navy email pill lifts without the teal glow. */
body[data-samt-page$="samtlife"] .contact-email-link:hover {
  box-shadow: 0 6px 20px rgba(0, 68, 103, 0.28);
}

/* Form fields answer focus in the brand's own teal — border, caret, and a
   quieting placeholder — instead of the browser defaults. (SamtLife keeps
   its navy/orange form styling untouched.) */
body:not([data-samt-page$="samtlife"]) .w-input,
body:not([data-samt-page$="samtlife"]) .w-select {
  caret-color: var(--v2-teal);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body:not([data-samt-page$="samtlife"]) .w-input:focus,
body:not([data-samt-page$="samtlife"]) .w-select:focus {
  border-color: rgba(87, 182, 178, 0.7) !important;
  box-shadow: 0 1px 0 0 rgba(87, 182, 178, 0.45);
}

.w-input::placeholder {
  transition: opacity 0.3s ease;
}

.w-input:focus::placeholder {
  opacity: 0.35;
}

/* Curriculum and service bullet lists carry the accent in their markers. */
body:not([data-samt-page$="samtlife"]) li::marker {
  color: var(--v2-teal);
}

/* ---- Route-change veil (soft cross-cut between pages) ------------------ */

#samt-veil {
  position: fixed;
  inset: 0;
  background: var(--v2-ink);
  opacity: 0;
  pointer-events: none;
  z-index: 8000;
}

#samt-veil.on {
  opacity: 1;
}

#samt-veil.fade {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* ---- Quiet hands for people who ask for less motion -------------------- */

@media (prefers-reduced-motion: reduce) {
  .navbar-2 .nav-link-2::after,
  .photo-line-animation .photo,
  .w-button,
  .contact-email-link,
  .heading-top::after,
  .grid-3-columns .title-flex::after,
  #samt-veil.fade,
  #samt-progress {
    transition: none !important;
  }
  .photo-line-animation:hover .photo,
  .w-button:hover,
  .contact-email-link:hover,
  .grid-3-columns .text-wrapper:hover {
    transform: none;
  }
  .grid-3-columns .text-wrapper {
    transition: none !important;
  }
  .menu-button-2 .menu-icon::before,
  .menu-button-2 .menu-icon::after {
    transition: none !important;
  }
  .nav-menu-2[data-nav-menu-open] .nav-link-2,
  .nav-menu-2[data-nav-menu-open]::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  /* Lines stand already drawn; nothing settles or slides. */
  .heading-top::after {
    transform: scaleX(1);
  }
  html.v2-open .heading-h1:not(.ar):not(.arp),
  html.v2-open .heading-h1-2.life:not(.ar),
  html.v2-open .heading-hero-c:not(.ar),
  html.v2-open .heading-hero-b-3.en:not(.ar) {
    animation: none;
  }
}

/* ---- V2.5 — the course detail "at a glance" panel ----------------------- */
/* The export left this panel as loose 50/50 flex halves: labels and values
   wrapped onto two lines, the rules were 90% wide and inherited stray colours,
   and the icons were sized in vh so they grew with the window. Scoped to the
   collection detail page (.new.coureses) so services/about keep their own. */

.new.coureses .grid-2-columns-3.newone.coureses {
  align-items: stretch;
}

.new.coureses .col1,
.new.coureses .col2-2.new.courses {
  height: 100%;
}

/* The panel answers the "About" card: same radius, same teal glow, its own
   hairline frame and real inner padding. */
.new.coureses .col2-2.new.courses {
  border: 1px solid rgba(245, 242, 236, 0.1);
  border-radius: 10px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  gap: 0;
  box-shadow: 3px 5px 6px 3px #57b6b21f;
}

/* Each row: label left, value + icon right, on one baseline. */
.new.coureses .col2-2.new.courses .div-block-14.inside {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.25rem;
  width: 100%;
  padding: 0.95rem 0;
}

.new.coureses .col2-2.new.courses .div-block-13.infocouress {
  width: auto;
  padding-left: 0;
  justify-content: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.new.coureses .col2-2.new.courses .div-block-14.inside
  > .div-block-13.infocouress:last-child:not(.tab) {
  justify-content: flex-end;
  text-align: right;
}

.new.coureses .col2-2.new.courses .readmore-text.time {
  font-size: 0.82rem;
  line-height: 1.35;
  white-space: normal;
}

.new.coureses .col2-2.new.courses .readmore-text.time.title {
  letter-spacing: 0.02em;
}

/* One icon size, always, whatever the viewport. */
.new.coureses .col2-2.new.courses .image-9 {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

/* One rule, one colour, full width — and none after the final row. */
.new.coureses .col2-2.new.courses .div-block-14.inside.line {
  width: 100%;
  height: 1px;
  background-color: rgba(245, 242, 236, 0.14);
  padding: 0;
}

.new.coureses .col2-2.new.courses > div:last-child .div-block-14.inside.line,
.new.coureses
  .col2-2.new.courses
  > div:has(+ .div-block-14.inside.tablet)
  .div-block-14.inside.line {
  display: none;
}

/* The call to action sits flush with the rows, pinned to the panel foot. */
.new.coureses .col2-2.new.courses .div-block-14.inside.tablet {
  display: flex;
  width: 100%;
  padding-top: 1.4rem;
}

.new.coureses .col2-2.new.courses .div-block-13.infocouress.tab {
  width: 100%;
  padding-left: 0;
  justify-content: flex-start;
}

/* Rows breathe evenly down the panel and stretch its full width. */
.new.coureses .col2-2.new.courses {
  justify-content: space-evenly;
  align-items: stretch;
}

.new.coureses .col2-2.new.courses > div {
  width: 100%;
}

/* Arabic keeps the same grid, mirrored. */
.new.coureses .col2-2.new.courses .readmore-text.time:lang(ar) {
  font-size: 0.8rem;
}

@media screen and (max-width: 767px) {
  .new.coureses .col2-2.new.courses {
    padding: 1.3rem;
  }
  .new.coureses .col2-2.new.courses .div-block-14.inside {
    column-gap: 0.9rem;
    padding: 0.8rem 0;
  }
}