/* V03-G site-wide consistency (owner, 9 Nov 2026). Source: tools/publishing/visual/r049/consistency.css, served as /r049/consistency.css,
   linked on every page by tools/publishing/visibility/consistency_v03.mjs. CSS only.

   ALIGNMENT RULE (owner: "choose whether things are centred or off to the side; clashes are bad"; prefers centred titles):
   - A section title and its eyebrow pill are centred. A short intro under it (up to about three lines) is centred too;
     longer text is aligned to the reading edge (left in English, right in Arabic) and kept to a readable measure.
   - On desktop, a block that sits beside a photograph (split layout) keeps its title, text and list on the reading edge, aligned
     with the photo; full-width section heads are centred. On phones every block stacks, so its title is centred like the rest.
   - Catalogue entries (stone and material boxes) and cards keep their own, already consistent, reading-edge alignment.
   - Reading pages (guides, articles, data) are reading-edge throughout.
   Elementor ids are the same in every edition (EN/AR/EL/FR), so each rule below covers all four. `start` keeps Arabic right-aligned. */

/* ---- 1. Phone: stacked blocks share one axis ------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* eyebrow pills above a centred title: the pill itself moves to the centre */
  .elementor-129 .elementor-element.elementor-element-19a75936,   /* About: "About us" over "Rooted in stone" */
  .elementor-149 .elementor-element.elementor-element-3b8a4141,   /* Careers: "Distributors" */
  .elementor-149 .elementor-element.elementor-element-410fff3,    /* Careers: "Industry professionals" */
  .elementor-144 .elementor-element.elementor-element-7f1b8ea6,   /* Sustainability: "Core commitments" */
  .elementor-154 .elementor-element.elementor-element-7cb35491 {  /* Contact: "Get involved" */
    align-self: center !important; margin-inline: auto !important;
  }
  /* titles */
  .elementor-129 .elementor-element-13a3d2d0 .elementskit-section-title-wraper,
  .elementor-149 .elementor-element-73943a34 .elementskit-section-title-wraper,
  .elementor-149 .elementor-element-72c0714 .elementskit-section-title-wraper,
  .elementor-144 .elementor-element-154a263e .elementskit-section-title-wraper,
  .elementor-154 .elementor-element-18bff024 .elementskit-section-title-wraper,
  .elementor-139 .elementor-element-40634b38 .elementor-heading-title {
    text-align: center !important; text-wrap: balance;
  }
  /* short intros under those titles (one to three lines on a phone) */
  .elementor-129 .elementor-element.elementor-element-678bef68,   /* About: "Est. 2004" */
  .elementor-144 .elementor-element.elementor-element-77f62f4d,   /* Sustainability: one-line plan */
  .elementor-154 .elementor-element.elementor-element-6d543321 {  /* Contact: "reach the relevant department below" */
    text-align: center !important; text-wrap: balance;
  }
  .elementor-129 .elementor-element.elementor-element-678bef68 { align-self: stretch !important; }
  /* long text under a centred title reads from the edge (it was centred: about 1,000 characters on Sustainability, B16) */
  .elementor-144 .elementor-element.elementor-element-12a90408,
  .elementor-144 .elementor-element.elementor-element-12a90408 p { text-align: start !important; }
  /* Stones intro: had no side margin (text ran 0-390 px, B2), was centred over five lines and set in 12 px */
  .elementor-614 .elementor-element.elementor-element-fee3a2c,
  .elementor-614 .elementor-element.elementor-element-b625791 { padding-inline: 24px !important; box-sizing: border-box; }
  .elementor-614 .elementor-element.elementor-element-b625791,
  .elementor-614 .elementor-element.elementor-element-b625791 p { text-align: start !important; }
  .elementor-614 .elementor-element.elementor-element-b625791 { font-size: 15px !important; line-height: 24px !important; } /* was 12 px */
}

/* ---- 2. Desktop and tablet: the Stones intro is two 180-character lines across the full width: give it a reading measure ---------- */
@media (min-width: 768px) {
  .elementor-614 .elementor-element.elementor-element-b625791 { max-inline-size: 760px !important; margin-inline: auto !important; }
  .elementor-614 .elementor-element.elementor-element-b625791,
  .elementor-614 .elementor-element.elementor-element-b625791 p { text-align: start !important; }
}

/* ---- 3. Arabic: ElementsKit's "text_left" headings stayed LEFT while their text runs right-to-left (Careers, stone cards).
           The heading follows the reading edge, at each breakpoint only where that breakpoint did not choose its own alignment. ---- */
@media (min-width: 1025px) {
  html[dir="rtl"] .ekit-wid-con .elementskit-section-title-wraper:is(.left, .text_left) { text-align: right; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html[dir="rtl"] .ekit-wid-con .elementskit-section-title-wraper.ekit_heading_tablet-text_left,
  html[dir="rtl"] .ekit-wid-con .elementskit-section-title-wraper:is(.left, .text_left):not([class*="ekit_heading_tablet-text_"]) { text-align: right; }
}
@media (max-width: 767px) {
  html[dir="rtl"] .ekit-wid-con .elementskit-section-title-wraper.ekit_heading_mobile-text_left,
  html[dir="rtl"] .ekit-wid-con .elementskit-section-title-wraper.ekit_heading_tablet-text_left:not([class*="ekit_heading_mobile-text_"]),
  html[dir="rtl"] .ekit-wid-con .elementskit-section-title-wraper:is(.left, .text_left):not([class*="ekit_heading_tablet-text_"]):not([class*="ekit_heading_mobile-text_"]) { text-align: right; }
}

/* ---- 4. Guides index: the cards were indented 24 px from the heading column, and each description sat outside its card -------- */
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] { padding: 0; margin: 8px 0 0; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li {
  position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 22px 22px;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: linear-gradient(160deg, rgba(10, 28, 46, .55), rgba(8, 3, 0, .2));
  transition: border-color .3s, transform .3s;
}
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li > a { padding: 0; border: 0; border-radius: 0; background: none; transform: none; font-size: 17px; line-height: 24px; }
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li > a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; } /* the whole card is the link's target */
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li > p { margin: 0; color: var(--j-read, #b9b0a4); font-size: 15.5px; line-height: 25px; }
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li:hover { border-color: rgba(196, 165, 122, .5); transform: translateY(-2px); }
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li:has(a:focus-visible) { outline: 2px solid #c4a57a; outline-offset: 3px; }
.psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li > a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li { transition: none; }
  .psg-j-body > ul.psg-j-stones[data-psg-v03-guides] > li:hover { transform: none; }
}

/* ---- 5. Footer --------------------------------------------------------------------------------------------------------------------- */
/* desktop: brand on the left, three link columns on the right (the middle no longer stands empty); © left, LinkedIn at the right edge */
@media (min-width: 1025px) {
  #colophon .psg-ff-cols[data-psg-v03-footer] { width: auto; flex: 0 1 auto; gap: clamp(40px, 5vw, 88px); }
  #colophon .psg-ff-cols[data-psg-v03-footer] .psg-ff-col,
  #colophon .psg-ff-cols[data-psg-v03-footer] .psg-ff-col:first-child { width: auto; flex: 0 0 auto; }
  #colophon .psg-ff-social { width: auto; }
  #colophon .psg-ff-social .psg-ff-icon { margin-inline-start: 0; }
  /* the footer's two vertical hairlines sat at fixed 568 px and 872 px (drawn for the old two-column layout): the second now ran
     through the link columns (audit P1). One hairline stays, always in the gap between the brand and the columns. */
  #colophon.psg-ff { background-size: 1px 100%, 0 0, auto, auto; background-position: max(568px, calc((100vw - 1328px) / 2 + 500px)) 0, 0 0, 0 0, 0 0; }
  [dir="rtl"] #colophon.psg-ff { background-position: right max(568px, calc((100vw - 1328px) / 2 + 500px)) top 0, 0 0, 0 0, 0 0; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  #colophon.psg-ff { background-position: calc(63vw - 243px) 0, 0 0, 0 0, 0 0; }
  [dir="rtl"] #colophon.psg-ff { background-position: right calc(63vw - 243px) top 0, 0 0, 0 0, 0 0; }
}
/* tablet and phone: everything is centred, so the logo is too (it sat on the left above centred columns) */
@media (max-width: 1024px) {
  #colophon .psg-ff-logo { text-align: center; }
  #colophon .psg-ff-cols[data-psg-v03-footer] { flex-wrap: wrap; row-gap: 40px; align-items: flex-start; }
  #colophon .psg-ff-cols[data-psg-v03-footer] .psg-ff-col { justify-content: flex-start; } /* headings share one line on tablets */
  #colophon .psg-ff-social .psg-ff-icon { margin-inline-start: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  #colophon .psg-ff-cols[data-psg-v03-footer] .psg-ff-col,
  #colophon .psg-ff-cols[data-psg-v03-footer] .psg-ff-col:first-child { width: auto; flex: 0 1 200px; }
}
#colophon .psg-ff-copy bdi { unicode-bidi: isolate; }

/* ---- 6. Phone and tablet menu: a full-height drawer, wide, over a dimmed page ----------------------------------------------------- */
/* (open/close, backdrop tap, Escape, focus trap and return are /r024/fp-shell.js; the plain white X is layout.css) */
@media (max-width: 1024px) {
  #masthead .psg-fp-nav {
    left: 0; width: min(86vw, 420px) !important; height: 100vh; height: 100dvh; padding: 0 0 24px;
    transform: translateX(-102%); border-inline-end: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 0 60px rgba(0, 0, 0, .55);
    transition: transform .45s cubic-bezier(.22, .61, .24, 1), visibility 0s linear .45s;
  }
  #masthead.psg-fp[data-menu-open] .psg-fp-nav, #masthead .psg-fp-nav:target {
    left: 0; transform: none; transition: transform .45s cubic-bezier(.22, .61, .24, 1), visibility 0s;
  }
  [dir="rtl"] #masthead .psg-fp-nav { left: auto; right: 0; transform: translateX(102%); }
  [dir="rtl"] #masthead.psg-fp[data-menu-open] .psg-fp-nav, [dir="rtl"] #masthead .psg-fp-nav:target { left: auto; right: 0; transform: none; }
  /* logo and close on one row */
  #masthead .psg-fp-id { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px 12px; padding-inline: 28px 16px; }
  #masthead .psg-fp-id-logo { margin: 0; }
  #masthead .psg-fp-close { float: none; flex: 0 0 auto; margin: 0; padding: 0; text-align: center; }
  /* the dimmed page: fades in (it used to slide in as a light grey wash) */
  #masthead .psg-fp-backdrop {
    left: 0; right: 0; width: auto; z-index: 999; background: rgba(6, 3, 1, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; cursor: pointer;
  }
  #masthead.psg-fp[data-menu-open] .psg-fp-backdrop { left: 0; opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  #masthead .psg-fp-nav, #masthead .psg-fp-backdrop { transition: none !important; }
}