@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/tajawal/v12/Iurf6YBj_oCad4k1l5qjHrRpiYlJ.woff2') format('woff2');
  unicode-range: U+0600-06ff, U+0750-077f, U+0870-088e, U+0890-0891, U+0897-08ff, U+200c-200e, U+fb50-fdff, U+fe70-fefc;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/tajawal/v12/Iura6YBj_oCad4k1nzSBC45I.woff2') format('woff2');
  unicode-range: U+0600-06ff, U+0750-077f, U+0870-088e, U+0890-0891, U+0897-08ff, U+200c-200e, U+fb50-fdff, U+fe70-fefc;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/tajawal/v12/Iurf6YBj_oCad4k1l8KiHrRpiYlJ.woff2') format('woff2');
  unicode-range: U+0600-06ff, U+0750-077f, U+0870-088e, U+0890-0891, U+0897-08ff, U+200c-200e, U+fb50-fdff, U+fe70-fefc;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/tajawal/v12/Iurf6YBj_oCad4k1l4qkHrRpiYlJ.woff2') format('woff2');
  unicode-range: U+0600-06ff, U+0750-077f, U+0870-088e, U+0890-0891, U+0897-08ff, U+200c-200e, U+fb50-fdff, U+fe70-fefc;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2') format('woff2');
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+2000-206f, U+20ac, U+2122;
}

:root {
  /* Site typeface. The orlaya-ping CHILD theme redefines this to the client's
     licensed "Ping AR LT" family; this parent-level definition is only the
     fallback for when the child theme isn't active. Every font-family rule in
     this file goes through this variable rather than naming Tajawal directly —
     several rules used to hard-code Tajawal, which quietly overrode the
     client's font on exactly the headings that matter most (the hero H1, the
     sub-page banner titles). */
  --orlaya-font-main: 'Tajawal', Tahoma, Arial, sans-serif;
  --orlaya-ivory: #f6f1e7;
  --orlaya-cream: #ebe5d8;
  --orlaya-sage: #a8b293;
  --orlaya-green: #2d3b24;
  --orlaya-forest: #172416;
  /* Deep green rather than the near-neutral #282a24 it used to be. That old
     value read as plain black on screen (R40 G42 B36 — only 6 points of
     colour separation), which is what the client flagged: every heading, the
     body copy and the journey stage icons inherit this token, so a single
     neutral value was quietly making most of the site's text black instead of
     part of the green ramp. Sits between --orlaya-forest and --orlaya-green,
     so headings still outweigh body copy while staying on-palette. */
  --orlaya-charcoal: #22301c;
  --orlaya-white: #fffdf7;
  --orlaya-border: rgba(45, 59, 36, 0.18);
  --orlaya-shadow: 0 22px 60px rgba(23, 36, 22, 0.11);
  --orlaya-header-height: 88px;
  --orlaya-admin-offset: 0px;
  --orlaya-topo-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%232d3b24' stroke-opacity='0.09' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 50C150 10 250 90 400 45C550 0 650 80 750 40C820 10 870 50 900 45'/%3E%3Cpath d='M0 160C120 220 260 140 380 190C500 240 600 150 720 200C800 230 860 180 900 195'/%3E%3Cpath d='M0 300C140 260 220 340 360 290C500 240 580 320 700 280C790 250 850 300 900 285'/%3E%3Cpath d='M0 430C160 470 240 390 400 440C540 480 620 400 760 450C830 470 870 430 900 445'/%3E%3Cpath d='M0 570C130 530 250 610 380 560C520 510 600 590 740 545C820 520 860 565 900 555'/%3E%3Cpath d='M0 700C150 740 260 660 400 710C540 750 630 670 770 720C840 740 870 705 900 715'/%3E%3Cpath d='M0 830C140 790 240 860 380 820C520 780 600 850 740 810C820 790 860 825 900 815'/%3E%3C/g%3E%3C/svg%3E");
  /* Same geometry as --orlaya-plant-stem-bold, recolored cream/ivory (instead
     of dark green) so it stays visible once used against the green sub-page
     banner (see .orlaya-elementor-service-hero::before below) — the plain
     dark-green version would nearly disappear against the new dark-green
     banner background. Flower stays sage, which already reads fine on dark
     green. */
  --orlaya-plant-stem-bold-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 260'%3E%3Cg fill='none' stroke='%23f6f1e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 258C58 211 61 169 57 126C54 91 56 56 67 17'/%3E%3Cpath d='M58 210C40 190 27 168 20 142M59 181C79 161 89 142 92 117M57 151C38 135 31 117 29 98M58 124C76 108 85 89 88 68M60 95C48 82 43 68 42 52M63 62C76 51 82 39 84 25'/%3E%3C/g%3E%3Cg fill='%23f6f1e7' stroke='none'%3E%3Cpath d='M20 142c19 1 29 13 36 31-19-2-31-12-36-31ZM92 117c-18 2-29 13-34 31 18-2 29-13 34-31ZM29 98c17 1 26 11 29 27-16-2-25-11-29-27ZM88 68c-15 2-23 11-27 25 15-2 23-11 27-25ZM42 52c13 2 19 10 21 22-12-2-19-9-21-22ZM84 25c-12 2-18 9-20 20 12-2 18-9 20-20Z'/%3E%3C/g%3E%3Cg fill='%23a8b293' stroke='none'%3E%3Ccircle cx='67' cy='15' r='4'/%3E%3Cpath d='M67 11c-7-7-13-2-8 5-7-1-8 7-1 8 1 7 9 6 9-1 5 5 11-1 6-6 7-3 2-10-6-6Z'/%3E%3C/g%3E%3C/svg%3E");
}

html { overflow-x: clip; }
body {
  overflow-x: clip;
  padding-inline: 0 !important;
  background-color: var(--orlaya-ivory);
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
}
body.admin-bar { --orlaya-admin-offset: 32px; }
/* The mobile counterpart of this lives in the (max-width: 782px) query near
   the end of the file — see the note there. */
.wp-site-blocks { padding-inline: 0; }
.wp-site-blocks > header + main,
.wp-site-blocks > main { margin-block-start: 0 !important; }
.wp-site-blocks > main { padding-inline: clamp(1rem,4vw,3rem); }
.wp-site-blocks > main.orlaya-main-bleed { padding-inline: 0; }
.wp-site-blocks .orlaya-hero,
.wp-site-blocks .orlaya-journey,
.wp-site-blocks .orlaya-services,
.wp-site-blocks .orlaya-methodology,
.wp-site-blocks .orlaya-packages,
.wp-site-blocks .orlaya-clients,
.wp-site-blocks .orlaya-cta { margin-block-start: 0 !important; }
main:has(> .entry-content > .orlaya-cta:last-child) { padding-bottom: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }
img, picture, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
iframe, embed, object { max-width: 100%; }
.wp-block-image img,
.wp-block-post-featured-image img { width: auto; max-width: 100%; height: auto; }
.wp-block-table { max-width: 100%; overflow-x: auto; }
pre { max-width: 100%; overflow-x: auto; }
:where(p, li, h1, h2, h3, h4, h5, h6, figcaption, label) { overflow-wrap: break-word; }
:where(input, select, textarea, button) { max-width: 100%; font: inherit; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: .7rem .85rem;
}
textarea { min-height: 8rem; resize: vertical; }
.wp-block-button__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.35;
  text-align: center;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #b7c59a;
  outline-offset: 3px;
}
/* Two things draw a rectangle around a tapped link on phones but never on a
   desktop, which is why this only ever showed up on the client's device:
   1. Android Chrome paints a translucent grey tap-highlight box over the whole
      link box on touch. On the header logo — a link wrapping the wordmark —
      that reads as a box appearing around the logo.
   2. Several mobile browsers leave a link matching :focus-visible after it has
      been tapped and navigated (tap the logo, go home, come back and the ring
      is still drawn), so the focus outline above sticks around as a visible
      frame.
   The tap highlight is removed outright; the focus ring is kept for keyboard
   users on pointer devices and suppressed only on touch-only screens, where
   there is no keyboard focus to communicate. */
a, button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) and (pointer: coarse) {
  :where(a, button, input, select, textarea, summary):focus-visible { outline: none; }
  .orlaya-brand-wordmark:focus,
  .orlaya-brand-wordmark:focus-visible { outline: none; box-shadow: none; }
}

html { scroll-padding-top: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + 1rem); }
section[id] { scroll-margin-top: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + 1rem); }

.orlaya-header {
  position: fixed;
  z-index: 100;
  inset: var(--orlaya-admin-offset) 0 auto;
  width: 100%;
  min-height: var(--orlaya-header-height);
  display: grid !important;
  grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 5rem);
  padding-block: .9rem;
  padding-right: max(clamp(1.5rem, 5vw, 5.5rem), env(safe-area-inset-right));
  padding-left: max(clamp(1.5rem, 5vw, 5.5rem), env(safe-area-inset-left));
  color: var(--orlaya-charcoal);
  background: rgba(246,241,231,.84);
  border-bottom: 1px solid rgba(45,59,36,.06);
  backdrop-filter: blur(12px);
  transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
  direction: ltr;
}
/* The header's backdrop-filter establishes a containing block, which makes
   the fixed-position mobile menu overlay (.orlaya-primary-nav, inset:0)
   size itself to the header box instead of the viewport — so the open menu
   appears as a narrow centred column instead of full screen. The mobile
   media query already sets backdrop-filter:none, but tie it to the
   menu-open state as well so it is bulletproof at any width, scroll state,
   or template (block vs Elementor). Whenever the menu is open the header
   must not be a containing block. */
body.orlaya-menu-open .orlaya-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.orlaya-header > * { direction: rtl; margin-block-start: 0; }
.orlaya-header > .wp-block-group { justify-self: start; }
.orlaya-header .wp-block-navigation { justify-self: center; }
.orlaya-header .wp-block-navigation__container { gap: clamp(1.35rem, 2.4vw, 2.75rem); }
.orlaya-header .wp-block-navigation-item { font-weight: 500; }
.orlaya-header-cta { justify-self: end; }

.orlaya-header.is-scrolled {
  min-height: 72px;
  padding-block: .55rem;
  background: rgba(246,241,231,.96);
  box-shadow: 0 1px 24px rgba(23,36,22,.08);
}

.orlaya-header .wp-block-site-logo img { max-height: 52px; width: auto; }
.orlaya-header .wp-block-navigation-item__content {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: .45rem .65rem;
  text-decoration: none;
}
.orlaya-header .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  inset: auto 50% 0 auto;
  width: 0;
  height: 1px;
  transform: translateX(50%);
  background: currentColor;
  transition: width .25s ease;
}
.orlaya-header .wp-block-navigation-item__content:hover::after,
.orlaya-header .current-menu-item .wp-block-navigation-item__content::after,
.orlaya-header .wp-block-navigation-item__content[aria-current="page"]::after { width: 1.75rem; }
.orlaya-brand-wordmark {
  min-height: 44px;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0;
  color: var(--orlaya-forest);
  text-decoration: none;
  line-height: 1;
}
.orlaya-brand-wordmark::before { content: none; }
.orlaya-brand-emblem { display: block; width: 1.55rem; height: .95rem; margin-bottom: -.05rem; }
.orlaya-brand-emblem svg { display: block; width: 100%; height: 100%; }
.orlaya-brand-name {
  font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -.035em;
}
.orlaya-brand-wordmark::before { content: none !important; }
.orlaya-header-cta { white-space: nowrap; }

.orlaya-header-brand { justify-self: start; direction: rtl; }
.orlaya-primary-nav { justify-self: center; direction: rtl; }
.orlaya-menu-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.35rem, 2.4vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.orlaya-menu-list a {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: .45rem .65rem;
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}
.orlaya-menu-list a::after {
  content: '';
  position: absolute;
  inset: auto 50% 0 auto;
  width: 0;
  height: 1px;
  transform: translateX(50%);
  background: currentColor;
  transition: width .25s ease;
}
.orlaya-menu-list li.menu-item-has-children { position: relative; }
.orlaya-menu-list .sub-menu {
  display: none;
  position: absolute;
  z-index: 110;
  inset: 100% auto auto 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .6rem 0;
  min-width: 13rem;
  list-style: none;
  text-align: center;
  background: var(--orlaya-white);
  border: 1px solid var(--orlaya-border);
  border-radius: 4px;
  box-shadow: var(--orlaya-shadow);
}
.orlaya-menu-list li.menu-item-has-children:hover > .sub-menu,
.orlaya-menu-list li.menu-item-has-children:focus-within > .sub-menu { display: block; }
.orlaya-menu-list .sub-menu li { display: block; }
.orlaya-menu-list .sub-menu a {
  display: flex;
  width: 100%;
  min-height: 40px;
  padding: .4rem 1.25rem;
  font-weight: 400;
  white-space: nowrap;
}
.orlaya-menu-list .sub-menu a::after { display: none; }
.orlaya-menu-list .sub-menu a:hover {
  background: var(--orlaya-green);
  color: var(--orlaya-ivory);
}
/* Only the current page keeps a permanent underline. Two things used to
   cause a second underline to appear alongside it:
   1) :hover also drew the underline — fixed below with a plain opacity shift.
   2) On the homepage, theme.js moves aria-current="page" to whichever
      section (خدماتنا, etc.) is scrolled into view, but PHP's static
      .current-menu-item class stays on "الرئيسية" the whole time since JS
      never touches li classnames — so once JS moved aria-current to
      "خدماتنا", BOTH selectors matched at once (the home link via its
      untouched class, the scrolled-to section via its new attribute).
      theme.js already keeps aria-current in sync as the single source of
      truth for every page (falling back to WordPress's own server-rendered
      aria-current when a page has no in-page anchor sections at all), so
      the class-based selector was always redundant — dropped it. */
.orlaya-menu-list a[aria-current="page"]::after { width: 1.75rem; }
/* Hover used to be a bare opacity fade, which read as nothing happening.
   Now a soft sage pill (the site's own green, at low alpha) plus a shift to
   full brand green on the label. Note this only touches background/colour —
   deliberately NOT the ::after underline, which stays reserved for the
   current page so the two states never look alike. The inline padding is
   what gives the pill its shape; the desktop gap between items is large
   enough (1.35rem minimum) that adding it doesn't crowd the row. */
.orlaya-menu-list a {
  border-radius: 6px;
  padding-inline: .7rem;
  transition: background-color .18s ease, color .18s ease;
}
.orlaya-menu-list a:hover,
.orlaya-menu-list a:focus-visible {
  opacity: 1;
  color: var(--orlaya-green);
  background: rgba(168,178,147,.45);
}
/* theme.js strips the href off menu items that have a submenu, so they stop
   navigating and only open their children. An <a> with no href loses the
   pointer cursor, so put it back — it's still something you click. */
.orlaya-menu-parent { cursor: pointer; }
.orlaya-header-cta-link {
  justify-self: end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.15rem;
  border-radius: 3px;
  color: var(--orlaya-white);
  background: var(--orlaya-green);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
/* Mobile-only control (theme.js injects one per parent menu item). Desktop
   opens submenus on hover, so it has no use for it. */
.orlaya-submenu-toggle { display: none; }
.orlaya-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--orlaya-green);
  background: transparent;
  cursor: pointer;
}
.orlaya-menu-toggle > span[aria-hidden="true"],
.orlaya-menu-toggle > span[aria-hidden="true"]::before,
.orlaya-menu-toggle > span[aria-hidden="true"]::after {
  display: block;
  width: 24px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.orlaya-menu-toggle > span[aria-hidden="true"] { position: relative; }
.orlaya-menu-toggle > span[aria-hidden="true"]::before,
.orlaya-menu-toggle > span[aria-hidden="true"]::after { content: ''; position: absolute; inset-inline-start: 0; }
.orlaya-menu-toggle > span[aria-hidden="true"]::before { transform: translateY(-7px); }
.orlaya-menu-toggle > span[aria-hidden="true"]::after { transform: translateY(7px); }
.orlaya-menu-toggle[aria-expanded="true"] > span[aria-hidden="true"] { background: transparent; }
.orlaya-menu-toggle[aria-expanded="true"] > span[aria-hidden="true"]::before { transform: rotate(45deg); }
.orlaya-menu-toggle[aria-expanded="true"] > span[aria-hidden="true"]::after { transform: rotate(-45deg); }
.orlaya-custom-logo { display: block; width: auto; max-width: 150px; max-height: 58px; object-fit: contain; }

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  min-height: 100%;
}
html:has(.wp-block-navigation__responsive-container.is-menu-open),
body:has(.wp-block-navigation__responsive-container.is-menu-open) { overflow: hidden; }

.orlaya-hero {
  position: relative;
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
  min-height: clamp(42rem, 100svh, 64rem);
  isolation: isolate;
  overflow: visible;
  background: var(--orlaya-ivory);
}
.orlaya-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  z-index: -1;
  background: linear-gradient(transparent, rgba(246,241,231,.92));
}
.orlaya-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.orlaya-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Preserve the flower head on short, wide desktop viewports such as 1920x911. */
@media (min-width: 1024px) and (min-aspect-ratio: 16 / 9) {
  .orlaya-hero-media img {
    object-position: center top;
  }

  .orlaya-elementor-hero {
    background-position: center top !important;
  }
}
.orlaya-hero-copy {
  width: min(38rem, 42vw);
  margin-right: clamp(1rem, 8vw, 9rem);
  margin-left: auto;
  padding-top: clamp(8.5rem, 18svh, 12rem);
  text-align: right;
}
.orlaya-hero h1 {
  max-width: 7.5em;
  margin-inline: 0;
  margin-bottom: 1.25rem;
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(3rem, 4.4vw, 4.75rem) !important;
  font-weight: 400;
  line-height: 1.35;
  /* Brand green rather than the body charcoal it inherited — this headline is
     the first thing on the site and should carry the brand colour. */
  color: var(--orlaya-green) !important;
}
.orlaya-hero-copy .has-large-font-size { font-size: clamp(1rem, 1.25vw, 1.2rem) !important; }
/* #4F5A45 was a bespoke near-black hex predating the --orlaya-charcoal fix
   (see the token's own comment: a neutral/near-black value here was exactly
   what the client flagged site-wide as "reads as black"). Switched to the
   token so hero copy stays on the same dark-green ramp as every other body
   text on the site. */
.orlaya-hero-copy p { max-width: 38rem; margin-inline: 0; color: var(--orlaya-charcoal); }
/* 2026-08-05: client wants the second hero line ("في أورلايا نزرع المعنى...")
   on a single line instead of wrapping to two. It's ~87 characters, right at
   the edge of the 38rem copy column at this font size — dropping max-width
   and going nowrap lets it size to its content instead of wrapping; verified
   live it only overflows the column by a few px up to ~44px depending on
   viewport width, spilling harmlessly into the open hero photo area (also
   guarded by html{overflow-x:clip} against any layout break). Only above the
   mobile breakpoint; small screens keep the normal wrap so the line doesn't
   run off-screen. */
.orlaya-hero-lede { max-width: none; }
@media (min-width: 641px) {
  .orlaya-hero-lede { white-space: nowrap; }
}
/* The hero scroll cue ("ابدأ رحلة النمو" plus the bobbing chevron) was
   removed from the hero pattern, so its styles go with it. */
.orlaya-petal {
  position: absolute;
  z-index: -1;
  width: .7rem;
  height: 1.2rem;
  border-radius: 80% 20% 70% 30%;
  background: rgba(255,253,247,.9);
  box-shadow: 0 2px 6px rgba(45,59,36,.12);
  animation: orlaya-drift 8s ease-in-out infinite alternate;
}
.orlaya-petal--1 { inset: 28% 53% auto auto; transform: rotate(22deg); }
.orlaya-petal--2 { inset: 44% 12% auto auto; animation-delay: -3s; transform: rotate(-32deg) scale(.75); }
.orlaya-petal--3 { inset: 66% 38% auto auto; animation-delay: -5s; }

.orlaya-section-intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.orlaya-kicker { color: #778066; font-size: .8rem; }
.orlaya-floret { display: inline-block; color: #839071; font-size: 1.1rem; }

.wp-block-post-title {
  max-width: 46rem;
  margin: clamp(2.5rem,5vw,4rem) auto 0 !important;
  padding-inline: clamp(1rem,4vw,4rem);
  color: var(--orlaya-green) !important;
  text-align: center;
  font-size: clamp(2.2rem,4vw,3.1rem);
  line-height: 1.25;
}
.wp-block-post-title::before {
  content: '✣';
  display: block;
  margin-bottom: .5rem;
  color: #839071;
  font-size: 1.1rem;
  font-weight: 400;
}

.orlaya-journey {
  position: relative;
  padding: clamp(3rem, 5vw, 4.5rem) 0 0;
  background: var(--orlaya-ivory);
  isolation: isolate;
  overflow: visible;
}
.orlaya-journey::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--orlaya-ivory);
}
/* 2026-08-05, 4th pass: client rejected the abstract topo-line texture too
   ("الخلفية الترابية... سوي شي مبهر") and asked specifically for a real
   botanical photo at light transparency instead of a drawn pattern. Reuses
   the site's own hero photo (assets/images/orlaya-hero.webp) rather than
   sourcing a new stock image — same asset already established as "the"
   Orlaya flower photo. The ivory gradient on top of it is what keeps it at
   "light transparency": only a faint wash of the photo shows through, kept
   deliberately subtle so the timeline text on top stays fully readable. */
.orlaya-journey::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(246,241,231,.88), rgba(246,241,231,.88)),
    url('../images/orlaya-hero.webp') center 22% / cover no-repeat;
}
.orlaya-journey-intro {
  position: relative;
  z-index: 5;
  padding-inline: 1rem;
  text-align: center;
}

/* 2026-08-05: the "growing flower" scrollytelling below (.orlaya-journey-visual,
   .journey-*, .orlaya-journey[data-stage], .orlaya-stage*) was scrapped per
   client request ("الغي فكرة الزهرة، استبدلها بكروت أفقية تتفتح") and
   replaced with horizontal step cards, then — same day, 4th pass — those
   cards were rejected outright too ("زبالة... سوي شي مبهر") in favour of a
   plain vertical timeline (client's explicit choice over photo-cards or a
   big-number layout when asked directly). The step-card rules that used to
   be here (.orlaya-journey-scroller / .orlaya-journey-steps /
   .orlaya-step-card and its states) have been removed rather than left
   orphaned, since — unlike the flower CSS below, which is scattered across
   four breakpoints — it was one self-contained block, safe to delete
   outright. See project_journey_flower_redesign memory for the full history.
   The .orlaya-journey-visual, .journey- prefixed, and .orlaya-stage rules
   directly below are still the ORIGINAL flower leftovers (untouched by this
   pass) and remain orphaned/inert as previously documented. */
.orlaya-timeline {
  position: relative;
  z-index: 5;
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: 1rem clamp(1rem,4vw,4rem) 0;
  padding-inline-end: calc(clamp(1rem,4vw,4rem) + 3rem);
}
.orlaya-timeline-track {
  position: absolute;
  inset-inline-end: clamp(1.65rem,4.65vw,4.65rem);
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2px;
  background: var(--orlaya-border);
}
.orlaya-timeline-progress {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 0%;
  background: var(--orlaya-green);
  transition: height .2s linear;
}
.orlaya-timeline-item {
  position: relative;
  padding-inline-end: 2.75rem;
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.orlaya-timeline-item:last-child { padding-bottom: 0; }
.orlaya-timeline-dot {
  position: absolute;
  inset-inline-end: 0;
  top: .1rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--orlaya-sage);
  background: var(--orlaya-ivory);
  color: var(--orlaya-charcoal);
  font-family: Georgia, serif;
  font-size: .78rem;
  transition: background .4s ease, border-color .4s ease, color .4s ease, transform .4s ease;
}
/* Filled state as the scroll position passes each dot — the one "impressive"
   flourish, kept deliberately small in scope (a colour flip + slight scale,
   not a layout change) after the last two attempts at something bigger were
   both rejected. */
.orlaya-timeline-item.is-passed .orlaya-timeline-dot {
  background: var(--orlaya-green);
  border-color: var(--orlaya-green);
  color: var(--orlaya-white);
  transform: scale(1.08);
}
.orlaya-timeline-title { margin: 0 0 .4rem; font-size: clamp(1.05rem,1.6vw,1.25rem); color: var(--orlaya-green); }
.orlaya-timeline-desc { margin: 0; max-width: 32rem; font-size: .95rem; line-height: 1.75; color: var(--orlaya-charcoal); }

.orlaya-journey-visual {
  position: absolute;
  z-index: 3;
  inset: clamp(10rem,16vw,14rem) 50% 0 auto;
  width: clamp(17rem, 32vw, 26.25rem);
  transform: translateX(50%);
  pointer-events: none;
}
.orlaya-journey-visual-sticky {
  position: sticky;
  top: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + 3vh);
  height: clamp(25rem, 56svh, 35rem);
  display: grid;
  place-items: center;
}
.orlaya-journey-layers { position: relative; width: 100%; height: 100%; }
.orlaya-journey-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), clip-path 1s cubic-bezier(.2,.7,.2,1);
}
.journey-soil,
.journey-seed,
.journey-roots-initial { opacity: 1; }
.journey-roots-expanded { clip-path: inset(0 0 100% 0); }
.journey-shoot { transform: translateY(10px) scale(.88); transform-origin: 50% 48%; }
.journey-stem { clip-path: inset(100% 0 0 0); }
.journey-leaves { transform: scale(.72); transform-origin: 50% 38%; }
.journey-flower { transform: translateY(14px) scale(.68); transform-origin: 50% 10%; }
.journey-petals { transform: translateY(-10px); }
.orlaya-journey[data-stage="2"] .journey-roots-expanded,
.orlaya-journey[data-stage="3"] .journey-roots-expanded,
.orlaya-journey[data-stage="4"] .journey-roots-expanded { opacity: 1; clip-path: inset(0); }
.orlaya-journey[data-stage="2"] .journey-shoot,
.orlaya-journey[data-stage="3"] .journey-shoot,
.orlaya-journey[data-stage="4"] .journey-shoot { opacity: 1; transform: none; }
.orlaya-journey[data-stage="3"] .journey-stem,
.orlaya-journey[data-stage="4"] .journey-stem { opacity: 1; clip-path: inset(0); }
.orlaya-journey[data-stage="3"] .journey-leaves,
.orlaya-journey[data-stage="4"] .journey-leaves { opacity: 1; transform: none; }
.orlaya-journey[data-stage="4"] .journey-flower,
.orlaya-journey[data-stage="4"] .journey-petals { opacity: 1; transform: none; }
.orlaya-journey[data-stage="4"] .journey-petals { animation: orlaya-petal-float 3.8s ease-in-out infinite; }
.orlaya-stage {
  position: relative;
  min-height: clamp(15rem,24vw,23rem);
  width: 100%;
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-inline: 0 !important;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,32vw) minmax(0,1fr);
  align-items: center;
  gap: clamp(1rem,3vw,3.5rem);
  padding: clamp(2rem,4vw,3.75rem) clamp(1rem,6vw,7rem);
  color: var(--orlaya-charcoal);
  direction: ltr;
}
.orlaya-stage > * { position: relative; z-index: 4; direction: rtl; }
.orlaya-stage[data-stage="1"] { background: #f8f4ec; }
.orlaya-stage[data-stage="2"] { background: #e9e4d7; }
.orlaya-stage[data-stage="3"] { background: #aeb79a; }
.orlaya-stage[data-stage="4"] { background: #3b522f; }
.orlaya-stage[data-stage="4"] { color: var(--orlaya-white); }
.orlaya-stage-meta {
  grid-column: 1;
  width: min(100%,19rem);
  max-width: 19rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .8rem;
  justify-self: start;
  direction: ltr !important;
  text-align: right;
}
.orlaya-stage-meta::before {
  grid-column: 2;
  grid-row: 1;
  color: currentColor;
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.15rem,1.7vw,1.55rem);
  font-weight: 500;
  direction: rtl;
}
.orlaya-stage[data-stage="1"] .orlaya-stage-meta::before { content: 'البذرة'; }
.orlaya-stage[data-stage="2"] .orlaya-stage-meta::before { content: 'الجذور'; }
.orlaya-stage[data-stage="3"] .orlaya-stage-meta::before { content: 'النمو'; }
.orlaya-stage[data-stage="4"] .orlaya-stage-meta::before { content: 'الازدهار'; }
.orlaya-stage-meta p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: .7rem 0 0 !important;
  font-size: clamp(.8rem,1vw,.94rem);
  line-height: 1.75;
  direction: rtl;
}
.orlaya-stage-label { grid-column: 3; text-align: right; justify-self: end; }
.orlaya-stage-number {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem,4vw,4.5rem);
  font-weight: 400;
  line-height: 1;
  opacity: .75;
}
.orlaya-stage-label h3 { margin: .25rem 0 0; font-size: clamp(1.15rem,1.6vw,1.5rem); }
.orlaya-stage-label::after { display: block; margin-top: .1rem; font-family: Georgia, serif; font-size: clamp(.75rem,.9vw,.9rem); direction: ltr; opacity: .78; }
.orlaya-stage[data-stage="1"] .orlaya-stage-label::after { content: 'The Seed'; }
.orlaya-stage[data-stage="2"] .orlaya-stage-label::after { content: 'The Roots'; }
.orlaya-stage[data-stage="3"] .orlaya-stage-label::after { content: 'The Growth'; }
.orlaya-stage[data-stage="4"] .orlaya-stage-label::after { content: 'The Bloom'; }
.orlaya-stage-icon {
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .7;
}
.orlaya-stage-icon svg { width: 1.35rem; height: 1.35rem; }
.orlaya-stage-meta,
.orlaya-stage-label { opacity: .48; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.orlaya-stage.is-complete .orlaya-stage-meta,
.orlaya-stage.is-complete .orlaya-stage-label { opacity: .76; transform: none; }
.orlaya-stage.is-active .orlaya-stage-meta,
.orlaya-stage.is-active .orlaya-stage-label { opacity: 1; transform: none; }

.orlaya-methodology { display: flex; flex-direction: column; align-items: center; padding: clamp(4rem,8vw,7rem) clamp(1rem,4vw,4rem); }
.orlaya-method-grid {
  width: min(100%, 1580px);
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr));
  align-items: start;
  gap: clamp(.75rem, 2vw, 2rem);
  margin: 3.5rem auto 0 !important;
}
.orlaya-method-grid > .orlaya-method-item { margin-block-start: 0 !important; }
@media (min-width: 1101px) {
  .orlaya-about-methodology .orlaya-method-grid,
  .orlaya-about-why .orlaya-method-grid,
  .orlaya-service-why .orlaya-method-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.orlaya-about-vision { padding: clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,4rem) 0; }
.orlaya-service-hero { padding: clamp(1.5rem,3vw,2.25rem) clamp(1rem,4vw,4rem) 0; }
.orlaya-about-vision .orlaya-section-intro,
.orlaya-service-hero .orlaya-section-intro { max-width: 42rem; }
.orlaya-service-includes { padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,4rem); }
.orlaya-blog-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.orlaya-blog-categories a {
  padding: .4rem 1rem;
  border: 1px solid var(--orlaya-border);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--orlaya-green);
  text-decoration: none;
  transition: background-color .2s ease;
}
.orlaya-blog-categories a:hover { background: rgba(168,178,147,.18); }
.orlaya-blog-list { padding: clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,4rem); }
.orlaya-blog-item .wp-block-post-title { max-width: none; margin: 0 0 .3rem !important; padding-inline: 0; color: var(--orlaya-charcoal) !important; text-align: right; font-size: clamp(1.3rem,2vw,1.6rem); }
.orlaya-blog-item .wp-block-post-title::before { display: none; }
.orlaya-blog-item .wp-block-post-date { display: block; margin-bottom: .5rem; color: #778066; font-size: .82rem; }
.orlaya-blog-item .wp-block-post-excerpt p { margin: 0; color: #525E47; line-height: 1.75; }

/* Blog page after the Elementor conversion. The old Gutenberg version styled
   post titles/dates/excerpts through core block classes (.wp-block-post-title
   etc., above); the shortcode loop that replaced it emits plain semantic
   markup, so the same three pieces are restyled here to match exactly. */
.orlaya-elementor-blog { padding: clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,4rem) !important; }
.orlaya-blog-intro { text-align: center; }
.orlaya-blog-intro h2 {
  margin: 0 !important;
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.35rem,2.1vw,1.8rem);
  color: var(--orlaya-charcoal);
}
.orlaya-blog-list { padding: clamp(2rem,4vw,3rem) 0 0; }
.orlaya-blog-item {
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--orlaya-cream);
}
.orlaya-blog-item:last-of-type { border-bottom: 0; }
.orlaya-blog-item h3 { margin: 0 0 .3rem !important; font-size: clamp(1.3rem,2vw,1.6rem); font-weight: 500; }
.orlaya-blog-item h3 a { color: var(--orlaya-charcoal); text-decoration: none; }
.orlaya-blog-item h3 a:hover { color: var(--orlaya-green); }
.orlaya-blog-date { margin: 0 0 .5rem !important; color: #778066; font-size: .82rem; }
.orlaya-blog-excerpt { margin: 0 !important; color: #525E47; line-height: 1.75; }
.orlaya-blog-empty { color: #616E56; text-align: center; }
.orlaya-blog-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.orlaya-blog-pagination a,
.orlaya-blog-pagination span {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: .35rem .85rem;
  border: 1px solid var(--orlaya-border);
  border-radius: 999px;
  color: var(--orlaya-green);
  font-size: .85rem;
  text-decoration: none;
}
.orlaya-blog-pagination .current { background: var(--orlaya-green); border-color: var(--orlaya-green); color: var(--orlaya-white); }

.orlaya-newsletter { padding: clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,4rem); background: #f7f3eb; }
.orlaya-newsletter-copy { max-width: 34rem; margin-inline: auto; text-align: center; }
.orlaya-newsletter-copy > * { margin-block-start: 0; }
.orlaya-newsletter-form { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.orlaya-newsletter-form input[type="email"] {
  flex: 1 1 16rem;
  min-height: 46px;
  padding: .7rem .95rem;
  border: 1px solid var(--orlaya-border);
  border-radius: 4px;
  background: var(--orlaya-white);
  font: inherit;
}
.orlaya-newsletter-form button {
  min-height: 46px;
  padding: .7rem 1.5rem;
  border: 0;
  border-radius: 4px;
  background: var(--orlaya-green);
  color: var(--orlaya-white);
  font-size: .9rem;
  cursor: pointer;
}
.orlaya-newsletter-form button:hover { background: var(--orlaya-forest); }
.orlaya-newsletter-form button:disabled { opacity: .6; cursor: not-allowed; }
.orlaya-newsletter-form .orlaya-hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.orlaya-newsletter-message { width: 100%; margin: 0 !important; font-size: .85rem; }
.orlaya-newsletter-message.is-success { color: var(--orlaya-green); }
.orlaya-newsletter-message.is-error { color: #a3402f; }

.orlaya-portfolio { padding: clamp(1rem,3vw,2rem) clamp(1rem,4vw,4rem) clamp(4rem,7vw,6rem); }
.orlaya-portfolio-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2.5rem; }
.orlaya-portfolio-tab {
  min-height: 44px;
  padding: .55rem 1.15rem;
  border: 1px solid var(--orlaya-border);
  border-radius: 999px;
  background: transparent;
  color: var(--orlaya-charcoal);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.orlaya-portfolio-tab.is-active,
.orlaya-portfolio-tab:hover { background: var(--orlaya-green); border-color: var(--orlaya-green); color: var(--orlaya-white); }
.orlaya-portfolio-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.5rem;
}
.orlaya-portfolio-item { display: flex; flex-direction: column; gap: .6rem; }
.orlaya-portfolio-placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  gap: .35rem;
  border: 1.5px dashed var(--orlaya-border);
  border-radius: 16px;
  background: #f9f6ee;
  color: #9aa088;
  text-align: center;
}
.orlaya-portfolio-placeholder span { font-size: 1.8rem; line-height: 1; }
.orlaya-portfolio-placeholder p { margin: 0 !important; font-size: .82rem; }
.orlaya-portfolio-tag { align-self: flex-start; padding: .2rem .7rem; border-radius: 999px; background: rgba(168,178,147,.18); color: var(--orlaya-green); font-size: .76rem; }
@media (max-width: 820px) { .orlaya-portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .orlaya-portfolio-grid { grid-template-columns: 1fr; } }
.orlaya-includes-list {
  width: min(100%, 54rem);
  margin: 2.25rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem 2.5rem;
  list-style: none;
  padding: 0;
}
.orlaya-includes-list li {
  display: flex;
  align-items: flex-start;
  /* 2026-08-05: center the checkmark+text pair within its column instead of
     hugging the column's start edge — items of different lengths were
     leaving uneven empty space and reading as pushed to one side. */
  justify-content: center;
  gap: .75rem;
  margin: 0 !important;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--orlaya-charcoal);
}
.orlaya-includes-list svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .2rem; color: var(--orlaya-green); }
@media (max-width: 700px) { .orlaya-includes-list { grid-template-columns: 1fr; } }
.orlaya-about-why .orlaya-section-intro,
.orlaya-service-why .orlaya-section-intro { margin-bottom: 1rem; }
.orlaya-about-methodology .orlaya-method-item h3,
.orlaya-about-why .orlaya-method-item h3,
.orlaya-service-steps .orlaya-method-item h3,
.orlaya-service-why .orlaya-method-item h3 { white-space: normal; }
.orlaya-about-methodology .orlaya-method-item,
.orlaya-about-why .orlaya-method-item,
.orlaya-service-steps .orlaya-method-item,
.orlaya-service-why .orlaya-method-item { grid-template-rows: 3.75rem auto auto; }
.orlaya-method-item {
  min-width: 0;
  display: grid;
  grid-template-rows: 3.75rem minmax(3.3rem, auto) auto;
  align-content: start;
  text-align: center;
}
.orlaya-method-item > * { margin-block-start: 0; }
.orlaya-method-item h3 {
  align-self: center;
  margin: 0 !important;
  font-size: clamp(1rem, 1.4vw, 1.5rem) !important;
  line-height: 1.45;
  white-space: nowrap;
}
.orlaya-method-item p { margin: .45rem auto 0 !important; line-height: 1.75; }
.orlaya-method-icon {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border: 1px solid var(--orlaya-border);
  border-radius: 50% 50% 45% 55%;
  color: var(--orlaya-green);
  font-size: 1.4rem;
  transition: transform .25s ease, background-color .25s ease;
}
.orlaya-method-item:hover .orlaya-method-icon { transform: translateY(-5px) rotate(4deg); background: rgba(168,178,147,.22); }

.orlaya-services {
  padding: clamp(5rem, 8vw, 7.5rem) clamp(1rem,6vw,6rem);
  background-image: var(--orlaya-topo-pattern);
  background-repeat: repeat;
  background-size: 900px 900px;
}
.orlaya-service-grid {
  width: min(100%, 1320px);
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: stretch;
  gap: clamp(1.25rem,2.2vw,2rem);
  margin: 3rem auto 0;
}
.orlaya-service-grid > .orlaya-service-card-link { display: contents; }
.orlaya-service-grid > .orlaya-service-card { margin-block-start: 0 !important; }
.orlaya-service-card {
  position: relative;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  text-align: right;
  color: inherit;
  text-decoration: none;
  padding: clamp(1.5rem,2.2vw,1.85rem) !important;
  border: 1px solid rgba(45,59,36,.08);
  border-radius: 20px;
  background: #f9f6ee;
  box-shadow: 0 4px 16px rgba(45,59,36,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.orlaya-service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(45,59,36,.09); border-color: rgba(45,59,36,.16); }
.orlaya-service-card:hover .orlaya-service-icon { background: rgba(168,178,147,.28); }
.orlaya-service-card-head {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 .6rem !important;
}
.orlaya-service-card-head > * { margin-block-start: 0 !important; }
.orlaya-service-card-head h3 { flex: 1; min-width: 0; }
.orlaya-service-icon {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  border: 1px solid rgba(45,59,36,.1);
  border-radius: 50%;
  background: #f1ece0;
  color: var(--orlaya-green);
  transition: background-color .25s ease;
}
.orlaya-service-icon svg { width: 1.5rem; height: 1.5rem; flex: none; }
.orlaya-service-icon.is-single svg { width: 2.1rem; height: 2.1rem; }
.orlaya-service-card h3 { margin: 0 0 .35rem !important; font-size: clamp(1.1rem,1.4vw,1.25rem); font-weight: 500; line-height: 1.4; }
.orlaya-service-card p { margin: 0 !important; color: #6b6f60; font-size: .88rem; line-height: 1.7; }

.orlaya-packages {
  padding: clamp(5rem, 8vw, 7.5rem) clamp(1rem,6vw,6rem);
  background: #f7f3eb !important;
}
.orlaya-packages .orlaya-section-intro { max-width: 38rem; }
.orlaya-packages .orlaya-section-intro h2 { margin-bottom: .45rem; font-size: clamp(2rem,3.2vw,3rem); }
.orlaya-packages .orlaya-section-intro p { margin-top: 0; color: #636F58; }
.orlaya-packages-browse { justify-content: center; margin-top: 1.25rem !important; }
.orlaya-packages-browse .wp-block-button__link { padding: .6rem 1.4rem; border-radius: 3px; font-size: .82rem; }
/* Four tiers now, not three — and each is a long detailed column, so the
   grid is wider and the gap tighter than the old three-card row. */
.orlaya-package-grid {
  width: min(100%, 1360px);
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: stretch;
  gap: clamp(.9rem,1.6vw,1.35rem);
  margin: 3rem auto 0;
}
@media (max-width: 1200px) {
  .orlaya-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .orlaya-package-grid { grid-template-columns: minmax(0,1fr); }
}
.orlaya-package-grid > .orlaya-package-card { margin-block-start: 0 !important; }
.orlaya-package-card {
  position: relative;
  min-width: 0;
  /* Was 34rem, sized for the old short bullet list. The detailed sections
     set their own height now, and forcing a floor just padded the shortest
     tier with empty space. */
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  padding: clamp(1.15rem,1.8vw,1.5rem) !important;
  overflow: hidden;
  border: 1px solid rgba(45,59,36,.11);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,253,247,.88), rgba(235,231,220,.82));
  box-shadow: 0 12px 28px rgba(45,59,36,.08), 0 2px 5px rgba(45,59,36,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.orlaya-package-card:hover { transform: translateY(-7px); box-shadow: var(--orlaya-shadow); }
.orlaya-package-card.is-featured {
  border-color: rgba(83,99,63,.22);
  background: linear-gradient(145deg, #edece2, #dedfcf);
  box-shadow: 0 16px 38px rgba(45,59,36,.11);
}
.orlaya-package-card.is-featured:hover { transform: translateY(-7px); }
.orlaya-package-card > * { position: relative; z-index: 1; }
.orlaya-package-card h3 {
  margin: 0 0 .35rem !important;
  font-size: clamp(1.45rem,2vw,1.9rem);
  line-height: 1.4;
}
.orlaya-package-card > p:not(.orlaya-price):not(.orlaya-kicker) {
  min-height: 4.5rem;
  margin: 0 0 .75rem !important;
  color: #525E47;
  line-height: 1.75;
}
.orlaya-package-card .orlaya-kicker {
  position: absolute;
  inset: 1.25rem auto auto 1.25rem;
  z-index: 3;
  margin: 0 !important;
  padding: .28rem .65rem;
  border: 1px solid rgba(45,59,36,.12);
  border-radius: 999px;
  color: var(--orlaya-green);
  background: rgba(255,253,247,.62);
  font-size: .72rem;
  font-weight: 500;
}
/* The green plant accent that used to sit in the corner of each package card
   was removed along with the rest of the green vine, at the client's request
   ("ازلها من كامل الموقع النبتة الخضراء"). It was the same illustration in a
   thinner outline weight, so leaving it would have contradicted the removal. */
.orlaya-package-card ul {
  margin: .6rem 0 1.25rem !important;
  padding-inline-start: 1.15rem;
  font-size: .9rem;
  line-height: 1.8;
}
.orlaya-package-card li { margin-bottom: .3rem; }
.orlaya-package-card li::marker { color: #667451; }
.orlaya-package-card .wp-block-buttons { margin-top: auto; }
.orlaya-package-card .wp-block-button__link {
  min-width: 9rem;
  padding: .68rem 1.15rem;
  border-radius: 3px;
  font-size: .82rem;
}

/* 2026-08-05: packages rebuilt from three loose bullet lists into four tiers
   broken up by numbered service sections, following the layout of the
   client's own packages sheet. The sheet is charcoal/near-black; these use
   the site's green ramp instead, per "نفس الستايل ولكن بالوان الموقع". */
.orlaya-pkg-icon {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0 auto .85rem;
  border-radius: 12px;
  color: var(--orlaya-white);
  background: var(--orlaya-green);
}
.orlaya-pkg-icon svg { width: 1.6rem; height: 1.6rem; }
.orlaya-pkg-name {
  margin: 0 0 1.1rem !important;
  color: var(--orlaya-green);
  font-size: clamp(1.3rem,1.8vw,1.6rem);
  line-height: 1.4;
  text-align: center;
}
.orlaya-pkg-sections { flex: 1; }
.orlaya-pkg-section + .orlaya-pkg-section { margin-top: 1.1rem; }
/* The numbered bar. The number sits in its own tinted chip at the inline-end
   (left in this RTL layout), mirroring the sheet. */
.orlaya-pkg-section-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .55rem !important;
  padding: .42rem .75rem;
  border-radius: 6px;
  color: var(--orlaya-white);
  background: var(--orlaya-green);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.45;
}
/* The number sits at the START of the bar — the right, in this RTL layout —
   right next to the section title. It used to be pushed to the far end with
   order:2 + margin-inline-start:auto to mirror the client's printed packages
   sheet, but that stranded it on the left away from the text it numbers. */
.orlaya-pkg-num {
  min-width: 1.4rem;
  padding: .05rem .3rem;
  border-radius: 4px;
  background: rgba(255,253,247,.2);
  font-family: Georgia, serif;
  font-size: .76rem;
  text-align: center;
}
.orlaya-pkg-subhead {
  margin: .7rem 0 .35rem !important;
  color: var(--orlaya-green);
  font-size: .84rem;
  font-weight: 600;
  /* Was centred, which left it floating out of line with the checklist items
     underneath it. "start" resolves to the right in this RTL layout, so the
     sub-heading now lines up with the text of the items it introduces. */
  text-align: start;
  padding-inline-end: .45rem;
}
.orlaya-pkg-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.orlaya-pkg-list li {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: 0 0 .3rem;
  color: var(--orlaya-charcoal);
  font-size: .8rem;
  line-height: 1.65;
}
.orlaya-pkg-list li::marker { content: none; }
.orlaya-pkg-list li::before {
  content: '\2713';
  flex: none;
  margin-top: .1rem;
  color: var(--orlaya-sage);
  font-size: .78rem;
  font-weight: 700;
}
.orlaya-pkg-cta {
  display: block;
  margin-top: .9rem;
  padding: .7rem 1rem;
  border-radius: 6px;
  color: var(--orlaya-white);
  background: var(--orlaya-green);
  font-size: .85rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
}
.orlaya-pkg-cta:hover { background: var(--orlaya-forest); color: var(--orlaya-white); }

.orlaya-price {
  align-self: stretch;
  min-height: 0 !important;
  margin: 1.1rem 0 0 !important;
  padding: .6rem .75rem;
  border-radius: 6px;
  color: var(--orlaya-white) !important;
  background: var(--orlaya-charcoal);
  font-size: 1.15rem !important;
  font-weight: 600;
  line-height: 1.4 !important;
  text-align: center;
}
.orlaya-price span { margin-inline-start: .35rem; font-size: .72rem; font-weight: 400; opacity: .8; }

.orlaya-clients {
  width: 100%;
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-inline: 0 !important;
  padding: clamp(3.25rem,5vw,4.5rem) clamp(1rem,6vw,6rem) clamp(2.6rem,4vw,3.5rem);
  background: #fbf8f1;
}
/* Was margin:0, which pinned the heading directly against the logo row
   below it with no breathing room ("العنوان ملتصق بالشعارات"). */
.orlaya-clients h2 { margin: 0 0 clamp(1.5rem,3vw,2.25rem); font-size: clamp(1.55rem,2.5vw,2.15rem); }
.orlaya-logo-strip {
  width: min(100%,900px);
  display: grid !important;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: clamp(1rem,3vw,3rem);
  align-items: center;
  margin: 1.8rem auto 0;
}
.orlaya-logo-strip > .orlaya-client-mark { margin-block-start: 0 !important; }
/* The logo row is rendered twice (see patterns/clients-ar.php). Desktop shows
   one static row, so the duplicate stays hidden here and only comes into play
   for the mobile marquee further down. */
.orlaya-logo-strip-clone { display: none !important; }
/* 2026-08-05: client wants each placeholder to read as a proper "logo slot"
   now (a light sage/herbal green box, --orlaya-sage — same green used
   elsewhere on the site) rather than plain dimmed grey text, since real
   client logos will get swapped in later via the editor. Dropped the
   grayscale/opacity dimming that used to fake a "faded logo" look — that
   fought against a colored box; a solid tinted card reads as an actual slot
   instead. */
.orlaya-client-mark {
  min-height: 4.25rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .15rem;
  padding: .75rem 1rem;
  border-radius: .85rem;
  background: rgba(168,178,147,.22);
  border: 1px solid rgba(168,178,147,.55);
  color: var(--orlaya-charcoal);
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.05rem,1.6vw,1.4rem);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.orlaya-client-mark::after { content: '\2723'; font-size: .45rem; opacity: .55; color: var(--orlaya-sage); }
.orlaya-client-mark:hover { background: rgba(168,178,147,.36); border-color: var(--orlaya-sage); transform: translateY(-2px); }
.orlaya-client-mark img { width: auto; max-width: 100%; max-height: 3.4rem; height: auto; object-fit: contain; }

.orlaya-cta.alignfull {
  width: 100vw !important;
  margin-inline-start: calc(50% - 50vw) !important;
}
.orlaya-cta {
  width: 100%;
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-inline: 0 !important;
  position: relative;
  min-height: 12rem;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--orlaya-white);
  background: var(--orlaya-forest);
}
.orlaya-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
}
.orlaya-cta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.orlaya-cta-copy { width: min(30rem,40vw); margin: 0 clamp(2rem,10vw,12rem) 0 auto; padding: 1.15rem 0; }
.orlaya-cta-copy > * { margin-block-start: 0; }
.orlaya-cta h2 { margin: 0 0 .25rem !important; font-size: clamp(1.4rem,2vw,1.85rem); }
.orlaya-cta-copy p { margin: 0 0 .6rem !important; font-size: clamp(.78rem,1vw,.9rem) !important; line-height: 1.6; }
.orlaya-cta .wp-block-buttons { margin-top: 0; }
.orlaya-cta .wp-block-button.is-style-outline .wp-block-button__link { padding: .54rem .95rem; color: var(--orlaya-green); border: 0; background: #f7f3eb; font-size: .72rem; }
.orlaya-cta-plain { min-height: 0; padding: clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,4rem); }
.orlaya-cta-copy-centered {
  width: min(34rem, 100%);
  margin: 0 auto !important;
  text-align: center;
  padding: 0;
}
.orlaya-cta-copy-centered h2 { font-size: clamp(1.7rem,2.6vw,2.2rem); }
.orlaya-cta-copy-centered p { font-size: clamp(.95rem,1.2vw,1.05rem) !important; }
.orlaya-cta-copy-centered .wp-block-buttons { justify-content: center; }

.orlaya-pricing-table-section { padding: clamp(2rem,4vw,3rem) clamp(1rem,4vw,4rem) clamp(3rem,5vw,4rem); }
.orlaya-pricing-table { width: 100%; overflow-x: auto; margin: 0 auto; }
.orlaya-pricing-table table { width: 100%; min-width: 42rem; border-collapse: collapse; text-align: center; }
.orlaya-pricing-table thead th { padding: 1rem .75rem; font-size: 1.05rem; font-weight: 500; border-bottom: 2px solid var(--orlaya-border); }
.orlaya-pricing-table thead th:first-child { border-bottom: none; }
.orlaya-pricing-table th[scope="row"] { padding: .85rem .75rem; text-align: right; font-weight: 500; color: var(--orlaya-charcoal); border-bottom: 1px solid rgba(45,59,36,.08); }
.orlaya-pricing-table td { padding: .85rem .75rem; border-bottom: 1px solid rgba(45,59,36,.08); color: #525E47; }
.orlaya-pricing-table .is-featured-col { background: rgba(168,178,147,.14); }
.orlaya-pricing-table thead th.is-featured-col { border-radius: 12px 12px 0 0; }
.orlaya-pricing-table tbody tr:last-child .is-featured-col { border-radius: 0 0 12px 12px; }
.orlaya-pricing-table .orlaya-kicker { display: block; margin-bottom: .3rem; }
.orlaya-pricing-table svg { width: 1.25rem; height: 1.25rem; }
.orlaya-pricing-table svg.is-yes { color: var(--orlaya-green); }
.orlaya-pricing-table svg.is-no { color: rgba(45,59,36,.28); }
.orlaya-pricing-note { max-width: 46rem; margin: 1.5rem auto 0 !important; text-align: center; font-size: .85rem !important; color: #778066; }
@media (max-width: 700px) { .orlaya-pricing-table table { min-width: 34rem; } }

.wp-site-blocks > footer { margin-block-start: 0 !important; }
.orlaya-footer {
  width: 100%;
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-inline: 0 !important;
  padding: 1.6rem clamp(1rem,4.5vw,4.5rem) .65rem;
  color: #f1ecdf;
  background: #152014;
}
/* The standalone "جاهز لزراعة فكرتك؟" banner is retired site-wide: it and the
   footer were two stacked full-width blocks that together made the bottom of
   every page very tall. The block-theme version is gone from the homepage
   template; the Elementor version still exists in each sub-page's saved
   content, so it's hidden here rather than deleted from the database — that
   keeps the change reversible (and re-editable in Elementor) instead of
   destroying content that took several passes to word correctly. */
.orlaya-cta,
body.orlaya-elementor-full-width .orlaya-elementor-cta { display: none !important; }

/* The flower photo the banner used to carry, now part of the footer itself so
   the brand image survives without its own full-height section. It sits as a
   band across the top of the footer, behind the content, fading into the
   footer's dark green so there's no hard edge. */
.orlaya-footer { position: relative; }
.orlaya-footer-flower {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  width: 100%;
  height: clamp(7rem, 14vw, 11rem);
  object-fit: cover;
  object-position: 15% center;
  /* Fades to nothing before the link columns start, so the text below always
     sits on flat green and stays legible without a separate overlay. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, transparent 100%);
  pointer-events: none;
}
.orlaya-footer-tagline,
.orlaya-footer-grid,
.orlaya-footer-bottom { position: relative; z-index: 1; }

/* Footer lead-in from the client's content document, above the link columns.
   Text only — the footer's layout, colours and the plant decoration anchored
   to it are untouched. */
.orlaya-footer-tagline {
  width: min(100%,1350px);
  margin: 0 auto 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(241,236,223,.14);
  text-align: center;
}
.orlaya-footer-tagline p { margin: 0 !important; color: rgba(241,236,223,.72); font-size: .9rem; line-height: 1.7; }
.orlaya-footer-tagline-lead {
  margin-bottom: .35rem !important;
  color: #f7f1e5 !important;
  font-size: clamp(1.05rem,1.5vw,1.3rem) !important;
  font-weight: 500;
}
.orlaya-footer a { color: #f1ecdf; }
.orlaya-footer h2,
.orlaya-footer h3 { color: #f7f1e5; }
.orlaya-footer-grid {
  width: min(100%,1350px);
  display: grid !important;
  grid-template-columns: 1.2fr repeat(3,minmax(0,1fr)) 1.35fr;
  direction: ltr;
  gap: clamp(1.25rem,2.8vw,3rem);
  align-items: start;
  margin: 0 auto;
}
.orlaya-footer-grid > * { direction: rtl; margin-block-start: 0 !important; }
.orlaya-footer-brand { direction: ltr !important; justify-items: start; text-align: left; }
/* `justify-items: center` matches the header, where the base
   .orlaya-brand-wordmark rule centres the flower emblem over the middle of the
   word (above the "l"). The footer used to override this to `start`, which
   pushed the emblem to the left edge of the wordmark — above the "O" — so the
   same logo sat differently in the header and the footer. Only the emblem's
   position inside the wordmark changes; the logo block itself stays
   left-aligned in the footer via .orlaya-footer-brand above. */
.orlaya-footer-brand .orlaya-brand-wordmark { justify-items: center; color: #f7f1e5; }
.orlaya-footer-brand .orlaya-brand-name { font-size: 2.1rem; }
.orlaya-socials { display: flex; gap: .8rem; align-items: center; margin-top: .8rem; }
.orlaya-socials a {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: #f1ecdf;
  opacity: .82;
  text-decoration: none;
  border: 1px solid rgba(241,236,223,.25);
  border-radius: 50%;
  transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
}
.orlaya-socials a svg { width: 1.25rem; height: 1.25rem; }
.orlaya-socials a:hover,
.orlaya-socials a:focus-visible { opacity: 1; background-color: rgba(241,236,223,.1); transform: translateY(-2px); }
.orlaya-footer h3 { margin: 0 0 .55rem !important; font-size: 1.05rem !important; font-weight: 500; }
.orlaya-footer-links { margin: 0 !important; padding: 0; list-style: none; font-size: .9rem; line-height: 1.55; }
.orlaya-footer-links li { margin-bottom: .2rem; }
.orlaya-footer-grid p { margin: 0; font-size: .9rem; line-height: 1.65; }
.orlaya-footer a,
.orlaya-footer a:hover,
.orlaya-footer a:focus { text-decoration: none; }
.orlaya-footer a { overflow-wrap: anywhere; }
.orlaya-footer .orlaya-phone { direction: ltr; unicode-bidi: isolate; }
.orlaya-footer-bottom {
  width: min(100%,1350px);
  direction: rtl;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center !important;
  gap: .3rem;
  margin: 1.4rem auto 0;
  padding-top: .75rem;
  border-top: 1px solid rgba(247,241,229,.2);
  color: #f1ecdf;
  font-size: .82rem;
  text-align: center;
}
.orlaya-footer-bottom > * { direction: rtl; margin: 0; text-align: center; }

.orlaya-elementor-full-width .wp-site-blocks { padding: 0; }
.orlaya-elementor-canvas {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  overflow: clip;
  direction: rtl;
  background: var(--orlaya-ivory) !important;
}
.orlaya-elementor-canvas > .elementor { width: 100%; }
.orlaya-elementor-hero {
  position: relative;
  width: 100%;
  min-height: clamp(42rem,100svh,64rem) !important;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--orlaya-ivory);
  background-position: center;
  background-size: cover;
  padding: 0 !important;
}
.orlaya-elementor-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 20%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(transparent,rgba(246,241,231,.92));
}
.orlaya-elementor-hero-copy {
  position: relative;
  z-index: 2;
  width: min(38rem,42vw) !important;
  margin-right: clamp(1rem,8vw,9rem) !important;
  margin-left: auto !important;
  padding: clamp(8.5rem,18svh,12rem) 0 0 !important;
  align-items: flex-start !important;
  text-align: right;
}
.orlaya-elementor-hero-copy .elementor-heading-title {
  max-width: 7.5em;
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(3rem,4.4vw,4.75rem);
  font-weight: 400;
  line-height: 1.35;
  /* Same brand green as the block-theme hero H1 above, so the Elementor and
     block versions of the homepage headline match. */
  color: var(--orlaya-green) !important;
}
.orlaya-elementor-hero-copy .elementor-widget-text-editor { max-width: 38rem; color: #4F5A45; font-size: clamp(1rem,1.25vw,1.2rem); line-height: 1.8; }
.orlaya-elementor-hero-copy .elementor-button { min-height: 44px; padding: .75rem 1.25rem; border-radius: 3px; color: var(--orlaya-white) !important; background: var(--orlaya-green) !important; }
.orlaya-elementor-hero-petals { position: absolute !important; z-index: 1; inset: 24% 48% auto auto; width: min(18vw,250px) !important; opacity: .62; pointer-events: none; animation: orlaya-drift 9s ease-in-out infinite alternate; }
.orlaya-elementor-cta {
  position: relative;
  width: 100%;
  min-height: 14rem !important;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--orlaya-white);
  background-color: var(--orlaya-forest);
  background-position: center;
  background-size: cover;
  padding: 0 !important;
}
.orlaya-elementor-cta-copy {
  position: relative;
  z-index: 3;
  width: min(32rem,42vw) !important;
  margin: 0 clamp(2rem,10vw,12rem) 0 auto !important;
  padding-block: 1.5rem !important;
  align-items: flex-start !important;
}
.orlaya-elementor-cta-copy .elementor-heading-title { color: var(--orlaya-white) !important; font-size: clamp(1.4rem,2vw,1.9rem); }
.orlaya-elementor-cta-copy .elementor-widget-text-editor { color: var(--orlaya-white) !important; font-size: clamp(.85rem,1vw,1rem); }
.orlaya-elementor-cta-copy .elementor-button { color: var(--orlaya-green) !important; background: var(--orlaya-white) !important; border-radius: 3px; }
.orlaya-elementor-cta-decoration { display: none !important; }
.orlaya-elementor-cta-plain { min-height: 0 !important; padding: clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,4rem) !important; }
.orlaya-elementor-cta-plain .orlaya-elementor-cta-copy { width: min(34rem,100%) !important; margin: 0 auto !important; align-items: center !important; text-align: center; }
.orlaya-elementor-cta-plain .orlaya-elementor-cta-copy .elementor-heading-title { font-size: clamp(1.7rem,2.6vw,2.2rem); }
.orlaya-elementor-cta-plain .orlaya-elementor-cta-copy .elementor-widget-text-editor { font-size: clamp(.95rem,1.2vw,1.05rem) !important; }
.orlaya-elementor-cta-petals { position: absolute !important; z-index: 2; inset: 0 36% auto auto; width: min(28vw,420px) !important; opacity: .8; pointer-events: none; }

.orlaya-elementor-page-title.elementor-widget-heading .elementor-heading-title {
  max-width: 46rem;
  /* This margin-top used to be clamp(2.5rem,5vw,4rem) — sized back when the
     H1 was the hero's first child and needed its own big margin to clear the
     fixed header. Now that .orlaya-breadcrumb is the first child and handles
     header clearance itself, that same large margin just became dead space
     between the breadcrumb and the title, which read as "too much space" —
     a small fixed gap is enough here. */
  margin: .5rem auto 0;
  padding-inline: clamp(1rem,4vw,4rem);
  color: var(--orlaya-white) !important;
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(2.2rem,4vw,3.1rem);
  line-height: 1.25;
  text-align: center;
}
/* The decorative "✣" mark above the title was removed per user feedback —
   it read as an unexplained stray symbol, not an intentional design element. */
.orlaya-elementor-page-title.elementor-widget-heading .elementor-heading-title::before {
  content: none;
}
/* Sub-page title banner: dark green (same shade as the header wordmark/CTA
   sections, --orlaya-forest), white text — a deliberate color inversion of
   the page's default cream/dark-green palette (cream bg -> green bg, green
   text -> white text, and the feature-strip chip below flips the same way:
   white chip on cream -> green chip on green, green mark circle -> white
   mark circle). Requested explicitly so the banner reads as a distinct,
   branded block rather than blending into the page background. */
.orlaya-elementor-service-hero {
  padding: clamp(1.5rem,3vw,2.25rem) clamp(1rem,4vw,4rem) clamp(1.5rem,3vw,2.25rem);
  background-color: var(--orlaya-forest);
  color: var(--orlaya-white);
  position: relative;
}
.orlaya-elementor-service-hero > * {
  position: relative;
  z-index: 1;
}
.orlaya-elementor-service-hero .elementor-widget-text-editor { max-width: 42rem; margin-inline: auto; text-align: center; color: rgba(255,253,247,.82); }
/* Lead line of the banner paragraph — the client's headline for the page,
   set brighter and slightly larger than the supporting sentence beneath it so
   the two read as headline + subtext rather than one flat block. */
.orlaya-hero-tagline {
  margin-bottom: .5rem !important;
  color: var(--orlaya-white);
  font-size: clamp(1.02rem,1.35vw,1.2rem);
  font-weight: 500;
  line-height: 1.6;
}
/* About page's secondary heading ("الرؤية والفلسفة") was falling back to
   Elementor's default accent blue, unrelated to the site palette. Use a
   light sage tint instead, which reads clearly against the dark green
   banner. Scoped to exclude the main page-title heading
   (.orlaya-elementor-page-title), which is now white. */
.orlaya-elementor-service-hero .elementor-widget-heading:not(.orlaya-elementor-page-title) .elementor-heading-title {
  color: var(--orlaya-sage) !important;
}
/* Heading for the checklist block, which used to render with no title at all —
   a beige section that just started with a list of ticks and no indication of
   what it was listing. The list keeps its own generous padding, so the heading
   only needs the top of it. */
.orlaya-elementor-includes-heading {
  padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,4rem) 0 !important;
}
.orlaya-elementor-includes-heading .elementor-heading-title {
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.5rem,2.6vw,2.1rem);
  color: var(--orlaya-charcoal) !important;
  text-align: center;
}
/* With the heading above it, the list no longer needs the full top padding. */
.orlaya-elementor-includes { padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,4rem); }
.orlaya-elementor-includes-heading + .orlaya-elementor-includes,
.orlaya-elementor-includes-heading ~ .elementor-widget .orlaya-includes-list { padding-top: 0; }
.orlaya-elementor-includes .orlaya-check-mark { color: var(--orlaya-green); font-weight: 700; margin-inline-end: .5rem; }
.orlaya-elementor-contact-hero {
  /* Was calc(header + admin + 3rem) — but the breadcrumb (this hero's own
     first child, shared with .orlaya-elementor-service-hero) ALSO adds its
     own header-clearing margin-top, so this used to double-count the header
     height, making the contact banner noticeably taller than the other 7
     sub-pages for no reason. A small fixed top padding here, same idea as
     .orlaya-elementor-service-hero, avoids the double count. */
  padding-top: clamp(1.5rem,3vw,2.25rem) !important;
  padding-bottom: clamp(1.5rem,3vw,2.25rem);
  background-color: var(--orlaya-forest);
  color: var(--orlaya-white);
  position: relative;
}
.orlaya-elementor-contact-hero > * {
  position: relative;
  z-index: 1;
}
/* Page-framing plant decoration: one bold, solid-green illustration rooted at
   the footer that climbs up the page, mirrored at the top corner too, on the
   8 sub-pages (About / Pricing / the 6 service pages / Contact).
   The top instance lives INSIDE each hero section (not as a canvas-level
   sibling) specifically because .orlaya-elementor-contact-hero has its own
   opaque background-color — a decoration anchored to the canvas would sit
   in a lower stacking layer than that section and be almost entirely
   covered by it. As the hero's own child, it always paints above the
   hero's own background regardless of z-index. */
/* Specificity note: Elementor's own container CSS defines a competing
   `.e-con::before` rule (its background-overlay feature) at the same
   specificity as a plain `.orlaya-elementor-service-hero::before` selector —
   whichever loads later would win, which isn't reliable. Prefixing with the
   body class guarantees ours wins regardless of stylesheet order. */
body.orlaya-elementor-full-width .orlaya-elementor-service-hero::before,
body.orlaya-elementor-full-width .orlaya-elementor-contact-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: clamp(9rem, 16vw, 15rem);
  height: clamp(20rem, 46vh, 38rem);
  background: center bottom / contain no-repeat var(--orlaya-plant-stem-bold-invert);
  opacity: .9;
  pointer-events: none;
  inset: -1.5rem -1.5rem auto auto;
  transform: scaleY(-1) scaleX(-1);
}
/* The dark-green corner vine that used to be anchored to the footer and climb
   up the page has been removed site-wide at the client's request. Only the
   CREAM version in the sub-page banner (.orlaya-elementor-service-hero::before
   above) remains — that one is a different asset colour and was not part of
   the removal. */


/* Homepage "آخر المقالات" teaser (document section 7) and the secondary hero
   button next to the primary one (section 1). Text/link additions only — no
   change to the hero photo, the petals or any decoration. */
.orlaya-elementor-latest {
  padding: clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,4rem) !important;
  background: var(--orlaya-ivory);
  text-align: center;
}
.orlaya-elementor-latest .elementor-heading-title {
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.5rem,2.4vw,2rem);
  color: var(--orlaya-charcoal) !important;
}
.orlaya-elementor-latest .elementor-widget-text-editor {
  max-width: 40rem;
  margin-inline: auto;
  color: #616E56;
  line-height: 1.85;
}
.orlaya-elementor-latest .orlaya-hero-tagline { color: var(--orlaya-green); }
.orlaya-elementor-latest .elementor-button {
  min-height: 44px;
  padding: .75rem 1.5rem;
  border-radius: 3px;
  color: var(--orlaya-white) !important;
  background: var(--orlaya-green) !important;
}
/* Second hero button reads as the quieter of the two: same size, outlined
   instead of filled, so it doesn't compete with the primary call to action. */
.orlaya-hero-button-secondary .elementor-button {
  color: var(--orlaya-green) !important;
  background: transparent !important;
  border: 1px solid var(--orlaya-green);
}
.orlaya-hero-button-secondary .elementor-button:hover {
  color: var(--orlaya-white) !important;
  background: var(--orlaya-green) !important;
}

/* "المزيد من الخدمات" — cross-links to the other five services, closing every
   service page per the client's content document. Chips rather than a plain
   list so five links read as a scannable row instead of a stack of loose
   text, and so they keep the same pill language as .orlaya-hero-features. */
.orlaya-elementor-more {
  padding: clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,4rem) !important;
  /* 2026-08-05: was var(--orlaya-ivory), identical to the page's own
     background — this section and "ماذا تتضمن الخدمة" above it (which has
     no background of its own) rendered as one indistinguishable block.
     --orlaya-white is a hair lighter, enough to read as a separate band
     without introducing a new color to the palette. */
  background: var(--orlaya-white);
  text-align: center;
}
.orlaya-elementor-more .elementor-heading-title {
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.35rem,2.1vw,1.8rem);
  color: var(--orlaya-charcoal) !important;
}
.orlaya-elementor-more .elementor-widget-text-editor {
  max-width: 46rem;
  margin-inline: auto;
  color: #616E56;
  font-size: clamp(.92rem,1.1vw,1.02rem);
  line-height: 1.85;
}
.orlaya-more-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 1.5rem 0 0 !important;
  padding: 0;
  list-style: none;
}
.orlaya-more-services li { margin: 0; }
.orlaya-more-services a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1.15rem;
  border: 1px solid var(--orlaya-border);
  border-radius: 999px;
  color: var(--orlaya-green);
  font-size: .88rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.orlaya-more-services a:hover,
.orlaya-more-services a:focus-visible {
  background: var(--orlaya-green);
  border-color: var(--orlaya-green);
  color: var(--orlaya-ivory);
}

/* "هل تحتاج إلى مساعدة في اختيار الباقة؟" — a light helper section from the
   client's content document, sitting between the package cards and the
   closing CTA on the Pricing page. Cream background so it reads as a calm
   aside rather than competing with the dark CTA right below it. */
.orlaya-elementor-help {
  padding: clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,4rem) !important;
  background: var(--orlaya-ivory);
  text-align: center;
}
.orlaya-elementor-help .elementor-heading-title {
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.4rem,2.2vw,1.85rem);
  color: var(--orlaya-charcoal) !important;
}
.orlaya-elementor-help .elementor-widget-text-editor {
  max-width: 44rem;
  margin-inline: auto;
  color: #616E56;
  font-size: clamp(.92rem,1.1vw,1.02rem);
  line-height: 1.85;
}
.orlaya-elementor-help .elementor-button {
  min-height: 44px;
  padding: .75rem 1.5rem;
  border-radius: 3px;
  color: var(--orlaya-white) !important;
  background: var(--orlaya-green) !important;
}
.orlaya-elementor-contact-intro .elementor-heading-title {
  color: var(--orlaya-white) !important;
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
}
.orlaya-elementor-contact-intro .elementor-widget-text-editor { color: rgba(255,253,247,.82) !important; }

/* Sub-page hero banner: breadcrumb above the title, feature strip below the
   description. Injected server-side (see orlaya_elementor_subpage_banner in
   inc/elementor-compat.php) so no per-page Elementor content needs editing. */
.orlaya-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  /* .orlaya-elementor-service-hero's own top padding only guarantees a
     minimum of 1.5rem of clearance below the fixed header (--orlaya-header-height),
     which isn't enough on its own now that the breadcrumb is the hero's first
     child — without this, the breadcrumb renders directly underneath the
     opaque fixed header and is invisible even though it's correctly in the DOM.
     +.1rem read as still too close to the header line per feedback ("الفئة
     قريبة جدا من خط الهيدر"), so this is a full +1rem now — clearly clear of
     the header without adding much overall height, since the H1's own
     margin-top (right below) was cut from ~3rem down to .5rem at the same
     time, keeping the banner's total height roughly the same as before. */
  margin: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + 1rem) 0 .85rem;
  font-size: .82rem;
  color: rgba(255,253,247,.6);
}
.orlaya-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s ease; }
.orlaya-breadcrumb a:hover { color: var(--orlaya-sage); }
.orlaya-breadcrumb-sep { opacity: .55; }
.orlaya-breadcrumb-current { color: var(--orlaya-white); font-weight: 500; }
/* Feature strip chip: a deliberate color inversion to match the green
   banner — it used to be a near-white pill (rgba(255,253,247,.65)) with a
   solid-green check-mark circle (green bg, white icon) on the page's cream
   background. Now that the banner itself is dark green, the same swap is
   applied here: the pill becomes green-tinted and the mark circle becomes
   white-bg/green-icon (i.e. what was white is now green, and what was green
   is now white). */
.orlaya-hero-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem 1.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem auto 0;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  background: rgba(45,59,36,.55);
  border: 1px solid rgba(255,253,247,.25);
}
.orlaya-hero-feature {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--orlaya-white);
  white-space: nowrap;
}
.orlaya-hero-feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bumped from a 1.05rem circle holding a .6rem glyph. At that size the tick
     was only a few pixels of hairline stroke inside an already small disc, so
     it read as a blur rather than a check mark — the circle was visible but
     the mark inside it wasn't. Larger disc, noticeably larger and bolder
     glyph, and line-height:1 so the glyph sits centred instead of being
     pushed off-centre by the inherited line box. */
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orlaya-white);
  color: var(--orlaya-forest);
  line-height: 1;
}
/* The tick is an inline SVG (see orlaya_elementor_subpage_banner). Sizing it
   generously inside the disc is what makes it read as a check mark rather
   than a dot; `stroke: currentColor` means it follows the disc's colour. */
.orlaya-hero-feature-mark svg {
  width: .8rem;
  height: .8rem;
  display: block;
}
@media (max-width: 640px) {
  .orlaya-hero-features { gap: .4rem .9rem; padding: .7rem 1.1rem; }
  .orlaya-hero-feature { font-size: .78rem; white-space: normal; }
}

.orlaya-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.orlaya-reveal.is-visible { opacity: 1; transform: none; }

@keyframes orlaya-drift { to { transform: translate(18px,35px) rotate(125deg); } }
@keyframes orlaya-petal-float { 50% { transform: translate(6px,10px) rotate(1deg); } }

@media (max-width: 1100px) {
  .orlaya-header { column-gap: clamp(1rem,2.5vw,2rem); }
  .orlaya-stage {
    grid-template-columns: minmax(0,1fr) minmax(230px,34vw) minmax(0,1fr);
    gap: clamp(.75rem,2vw,1.5rem);
    padding-inline: clamp(1.5rem,4vw,3rem);
  }
  .orlaya-stage-meta { max-width: 16rem; }
  .orlaya-method-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1rem; }
  .orlaya-about-methodology .orlaya-method-grid,
  .orlaya-about-why .orlaya-method-grid,
  .orlaya-service-why .orlaya-method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .orlaya-method-item h3 { white-space: normal; }
  .orlaya-package-grid { max-width: 56rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .orlaya-package-grid > .orlaya-package-card:last-child:nth-child(odd) { width: min(100%,27rem); grid-column: 1 / -1; justify-self: center; }
  .orlaya-service-grid { max-width: 56rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .orlaya-logo-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .orlaya-footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 960px) {
  /* backdrop-filter on .orlaya-header creates a new containing block for
     position:fixed descendants (per spec), which trapped the fullscreen
     mobile nav overlay inside the header's small bounding box instead of
     covering the viewport. Disable it here so .orlaya-primary-nav's
     position:fixed is relative to the viewport again. */
  .orlaya-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .orlaya-header.is-scrolled { background: rgba(246,241,231,.98); }
  .orlaya-header { grid-template-columns: 1fr auto; }
  .orlaya-header .wp-block-navigation { justify-self: end; }
  .orlaya-header-cta { display: none !important; }
  .orlaya-hero { min-height: clamp(40rem,82svh,52rem); }
  .orlaya-hero-copy { width: min(36rem,48vw); margin-right: 2rem; margin-left: auto; }
  .orlaya-header-brand { justify-self: start; }
  .orlaya-menu-toggle { display: block; position: relative; z-index: 103; justify-self: end; }
  .orlaya-header-cta-link { display: none; }
  /* 2026-08-05: reworked from a full-screen dark-forest overlay into a light
     dropdown sheet that hangs off the bottom of the header, matching the
     reference site the client supplied (almunqeth.net): full-width rows,
     hairline dividers between them, the current page marked by a solid
     colour bar rather than a small underline, and the header itself staying
     visible above it with its X close button. Anchored to the header height
     token (plus the admin-bar offset) instead of inset:0 so the header is
     never covered. */
  .orlaya-primary-nav {
    position: fixed;
    z-index: 102;
    inset: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset)) 0 auto 0;
    /* The desktop base rule sets justify-self:center on this nav. Per CSS Box
       Alignment, justify-self ALSO applies to fixed/absolutely-positioned
       boxes — so it made the nav shrink-wrap to its content width instead of
       spanning the viewport. Reset it to stretch and pin the width. */
    justify-self: stretch;
    width: 100%;
    max-height: calc(100svh - var(--orlaya-header-height) - var(--orlaya-admin-offset));
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 max(0px,env(safe-area-inset-bottom));
    color: var(--orlaya-charcoal);
    background: var(--orlaya-white);
    border-top: 1px solid var(--orlaya-border);
    box-shadow: 0 20px 44px rgba(23,36,22,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .orlaya-primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .orlaya-menu-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .orlaya-menu-list > li { width: 100%; border-bottom: 1px solid rgba(45,59,36,.10); }
  .orlaya-menu-list > li:last-child { border-bottom: 0; }
  .orlaya-menu-list a {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .85rem clamp(1.25rem,5vw,1.75rem);
    font-size: 1.02rem;
    font-weight: 500;
    /* The base rule rounds each link into a hover pill. Rows here are
       full-bleed bars, so square them off again. */
    border-radius: 0;
  }
  /* The base rule draws a small centred underline under the active item.
     That's the desktop treatment; here the active row is a full colour bar
     instead, so the underline is switched off to avoid both at once. */
  .orlaya-menu-list a::after { display: none; }
  .orlaya-menu-list a[aria-current="page"] {
    background: var(--orlaya-green);
    color: var(--orlaya-white);
  }
  /* Same sage tint as the desktop hover pill. :active is included because on
     a touch screen there is no hover — this is what gives a tapped row a
     visible press state. */
  .orlaya-menu-list a:hover,
  .orlaya-menu-list a:focus-visible,
  .orlaya-menu-list a:active { opacity: 1; color: var(--orlaya-green); background: rgba(168,178,147,.45); }
  .orlaya-menu-list a[aria-current="page"]:hover,
  .orlaya-menu-list a[aria-current="page"]:focus-visible,
  .orlaya-menu-list a[aria-current="page"]:active { background: var(--orlaya-forest); color: var(--orlaya-white); }
  /* Chevron button opening/closing a row's submenu. It sits absolutely on
     the row's inline-start edge (the left in this RTL layout) and above the
     link in the stacking order, so tapping the label still navigates to that
     parent page while tapping the chevron only expands the children — the
     behaviour of the reference site. The button element itself is injected
     by theme.js, not present in WordPress's menu markup. */
  .orlaya-menu-list li.menu-item-has-children { position: relative; }
  .orlaya-submenu-toggle {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    /* inline-END, not start: the row's label is right-aligned in this RTL
       layout, so anchoring to the start would drop the chevron on top of the
       text. The end edge is the empty left side of the row. */
    inset-inline-end: 0;
    width: 3.5rem;
    height: 54px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
  }
  /* The toggle is a sibling of the link, so it inherits the row's default
     dark text colour rather than the white the active row's link uses —
     which would leave a dark chevron on the dark green bar. */
  .orlaya-menu-list a[aria-current="page"] + .orlaya-submenu-toggle { color: var(--orlaya-white); }
  .orlaya-submenu-toggle > span[aria-hidden="true"] {
    width: .45rem;
    height: .45rem;
    /* Physical borders, not logical ones: border-inline-end flips sides in
       this RTL layout, which rotated the arrowhead to point sideways instead
       of down. right+bottom with a 45deg turn always points down. */
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .2s ease;
  }
  /* Keyed off the button's own aria-expanded rather than the li's
     .is-expanded class — same pattern the hamburger-to-X toggle above uses,
     and it keeps the arrow direction tied directly to the state screen
     readers are told about. */
  .orlaya-submenu-toggle[aria-expanded="true"] > span[aria-hidden="true"] {
    transform: translateY(2px) rotate(-135deg);
  }
  /* Collapsed by default. The desktop rules open a submenu on hover and on
     focus-within; both are re-suppressed here because touch browsers can
     still fire hover, which would pop a submenu open on a stray tap. Only
     the explicit .is-expanded class opens one on mobile. */
  .orlaya-menu-list li.menu-item-has-children:hover > .sub-menu,
  .orlaya-menu-list li.menu-item-has-children:focus-within > .sub-menu { display: none; }
  .orlaya-menu-list li.menu-item-has-children.is-expanded > .sub-menu { display: block; }
  .orlaya-menu-list .sub-menu {
    display: none;
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 0;
    border-top: 1px solid rgba(45,59,36,.08);
    box-shadow: none;
    background: rgba(168,178,147,.09);
    text-align: start;
  }
  .orlaya-menu-list .sub-menu li + li { border-top: 1px solid rgba(45,59,36,.07); }
  .orlaya-menu-list .sub-menu a {
    min-height: 46px;
    padding: .6rem clamp(2.25rem,8vw,3rem);
    font-size: .92rem;
    font-weight: 400;
    opacity: .85;
  }
  .orlaya-menu-list .sub-menu a:hover { background: rgba(168,178,147,.2); }
  body.orlaya-menu-open { overflow: hidden; }
}

@media (max-width: 820px) {
  .orlaya-stage {
    grid-template-columns: minmax(0,1fr) minmax(220px,36vw) minmax(0,1fr);
    padding-inline: clamp(1.25rem,3.5vw,2rem);
  }
  .orlaya-stage-meta { max-width: 14rem; }
  .orlaya-method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .orlaya-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .orlaya-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  :root { --orlaya-header-height: 76px; }
  .orlaya-header {
    padding-right: max(1rem,env(safe-area-inset-right));
    padding-left: max(1rem,env(safe-area-inset-left));
  }
  .orlaya-brand-name { font-size: 1.75rem; }
  .wp-block-navigation__responsive-container.is-menu-open {
    color: var(--orlaya-white);
    background: var(--orlaya-forest);
    padding-top: max(1.25rem,env(safe-area-inset-top));
    padding-right: max(1.25rem,env(safe-area-inset-right));
    padding-bottom: max(1.25rem,env(safe-area-inset-bottom));
    padding-left: max(1.25rem,env(safe-area-inset-left));
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: center;
    justify-content: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: center !important;
    gap: .5rem !important;
    text-align: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    min-height: 48px;
    padding: .65rem 1rem;
    font-size: clamp(1.15rem,5vw,1.4rem);
  }
  .orlaya-hero { min-height: clamp(38rem,88svh,48rem); display: flex; align-items: flex-end; transform: translateZ(0); }
  .orlaya-hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(246,241,231,.08) 20%,rgba(246,241,231,.93) 72%); }
  .orlaya-hero-media img { object-position: 32% center; }
  .orlaya-hero-copy {
    width: min(100%,36rem);
    margin: 0;
    padding: clamp(7rem,19svh,10rem) 1.25rem clamp(4.5rem,11svh,6.5rem);
  }
  .orlaya-hero h1 { font-size: clamp(2.75rem,12.5vw,3.85rem) !important; line-height: 1.3; }
  /* The "ابدأ رحلة النمو" scroll hint sits absolutely positioned near the
     hero's bottom edge, reserved for by .orlaya-hero-copy's padding-bottom.
     That padding was tuned assuming a specific cue height that real mobile
     Safari doesn't match once its dynamic toolbar changes the visible
     viewport height, so the cue ends up touching/overlapping the CTA
     button (reported on iPhone 14). Simplest reliable fix: drop the cue on
     mobile — it's a decorative hint, not needed once there's already a
     visible CTA button. */
  .orlaya-journey {
    padding-top: clamp(2.5rem,10vw,4rem);
    position: relative;
    z-index: 1;
    background: var(--orlaya-ivory);
    transform: translateZ(0);
  }
  .orlaya-journey-visual { inset: 8.5rem 50% 0 auto; width: min(72vw,320px); }
  /* Sizing is back to its original values. Shrinking the plant and stretching
     the stage was tried first, to keep the plant clear of the cards by
     geometry alone; it measured clean at one scroll offset but still
     overlapped at others, because the plant is sticky and the cards scroll
     past it — the crossing is inherent, not a sizing error. The opaque cards
     further down handle it properly, so the plant keeps its full size and
     simply tucks behind the card's top edge. */
  .orlaya-journey-visual-sticky {
    top: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + 1rem);
    height: clamp(18rem,44svh,22rem);
  }
  .orlaya-stage {
    min-height: clamp(34rem,68svh,42rem);
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    gap: .75rem;
    padding: 3.75rem 1.25rem 2.5rem;
    position: relative;
    /* Keeps the plant painting IN FRONT of the stage cards, which is the
       intended look. Dropping the isolation was tried so the cards would
       cover the roots — it worked technically but put the plant behind the
       cards, which was rejected. Leave as is. */
    z-index: 1;
    isolation: isolate;
  }
  /* Translucent with a blur, as originally designed: the plant passes in
     front of these cards and is meant to stay visible through them. Solid
     backgrounds were tried to hide the roots behind the cards and were
     rejected — the plant belongs in front. */
  .orlaya-stage-label { grid-column: 1; grid-row: 2; justify-self: stretch; min-width: 0; padding: .9rem 1rem; background: rgba(246,241,231,.78); backdrop-filter: blur(8px); }
  .orlaya-stage-meta { grid-column: 1; grid-row: 3; justify-self: stretch; width: 100%; max-width: none; min-width: 0; padding: .8rem 1rem; background: rgba(246,241,231,.78); backdrop-filter: blur(8px); }
  .orlaya-stage[data-stage="4"] .orlaya-stage-label,
  .orlaya-stage[data-stage="4"] .orlaya-stage-meta { background: rgba(23,36,22,.76); }
  .orlaya-stage-number { display: inline-block; margin-inline-end: .6rem; font-size: clamp(2.5rem,12vw,3rem); }
  .orlaya-stage-label h3 { display: inline-block; margin: 0; }
  .orlaya-stage-label::after { font-size: .82rem; }
  .orlaya-stage-meta p { font-size: .9rem; line-height: 1.7; }
  .orlaya-stage-icon { float: right; width: 2.75rem; height: 2.75rem; margin: 0 0 0 .75rem; }
  .orlaya-method-grid,
  /* .orlaya-footer-grid used to be in this single-column list too; it now gets
     its own 2-column mobile layout further down in this same block. */
  .orlaya-package-grid,
  .orlaya-service-grid { grid-template-columns: 1fr; }
  .orlaya-package-grid { max-width: 30rem; }
  .orlaya-package-grid > .orlaya-package-card:last-child:nth-child(odd) { width: 100%; grid-column: auto; }
  .orlaya-package-card { min-height: 0; }
  .orlaya-package-card > p:not(.orlaya-price):not(.orlaya-kicker) { min-height: 0; }
  .orlaya-package-card.is-featured { transform: none; }
  .orlaya-package-card.is-featured:hover { transform: translateY(-7px); }
  /* Logos: a 2-column grid left five brands in a ragged block with an empty
     cell; the client asked for a moving strip instead. Both rendered copies of
     the row are shown here and the track travels exactly one row-width, so the
     loop restarts on an identical frame and reads as continuous. `width:
     max-content` stops the flex track from being squeezed to the viewport,
     which would compress the logos instead of letting them overflow. */
  .orlaya-clients { overflow: hidden; }
  .orlaya-logo-track {
    width: max-content;
    display: flex !important;
    animation: orlaya-logo-marquee 22s linear infinite;
  }
  .orlaya-logo-strip,
  .orlaya-logo-strip-clone {
    display: flex !important;
    width: auto;
    grid-template-columns: none;
    gap: 2.5rem;
    margin-inline: 0;
    padding-inline: 1.25rem;
  }
  .orlaya-logo-strip .orlaya-client-mark { min-width: 7rem; }
  @keyframes orlaya-logo-marquee {
    from { transform: translateX(0); }
    /* RTL: the track starts flush with the right edge and extends off-screen
       to the left, so it must travel RIGHT to pull that content into view. */
    to { transform: translateX(50%); }
  }
  /* Previously this gradient climbed to .97 opacity by 75% down, which on
     the short mobile CTA box (min-height ~19-22rem, mostly filled by the
     text block) all but erased the flower photo behind it — reported as
     "the footer doesn't show the flower" (compared correctly-visible
     desktop, where the photo and text don't overlap so no overlay is
     needed at all). Lowered so the photo stays visible while the text at
     the bottom still gets enough darkening to stay legible. */
  .orlaya-cta::before { background: linear-gradient(180deg,rgba(23,36,22,.1),rgba(23,36,22,.5) 55%,rgba(23,36,22,.86) 100%); }
  .orlaya-cta { min-height: clamp(22rem,66svh,26rem); }
  /* The banner is a very wide, short panorama with the flower in its left
     ~25%. object-position:28% cropped the mobile (tall, narrow) view to the
     dark-green area just RIGHT of the flower, so the flower vanished on
     phones. 15% centres the crop on the flower head (verified: max white
     flower pixels in the visible slice). */
  .orlaya-cta img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 15% center; }
  .orlaya-cta-copy { width: 100%; align-self: end; margin: 0; padding: 3rem 1.25rem 2rem; }
  .orlaya-footer { padding-inline: 1.25rem; }
  .orlaya-footer-brand { grid-column: 1 / -1; justify-items: center; text-align: center; }
  .orlaya-footer-brand .orlaya-brand-wordmark { justify-items: center; }
  .orlaya-socials { justify-content: center; }
  .orlaya-footer-grid > * { min-width: 0; }
  /* Mobile footer: was a single 1fr column, which stacked brand + 3 link
     groups + contact into one very long strip the client objected to ("القائمة
     طويلة"). The 4 non-brand blocks pack into a 2x2 grid instead — services |
     company on one row, resources | contact on the next — so nothing is left
     dangling in a half-empty row and total height drops by roughly half. The
     brand (logo + socials) still spans the full width above them, matching the
     reference layout the client supplied. */
  .orlaya-footer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1.75rem 1.25rem;
    text-align: right;
  }
  .orlaya-footer-grid h3 { font-size: .95rem !important; }
  .orlaya-footer-links { font-size: .85rem; line-height: 1.5; }
  /* The 44px tap-target minimum below is applied as min-height on the links;
     without trimming the list spacing too, that alone re-inflates the column
     height it was just halved from. */
  .orlaya-footer-links li { margin-bottom: 0; }
  .orlaya-footer-grid p { font-size: .85rem; line-height: 1.55; }
  .orlaya-footer-links a,
  .orlaya-footer-grid p a,
  .orlaya-footer-bottom a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  /* Banner corner plant. At the desktop size (144x368px at this width) it
     covered the right ~30% of the banner from the very top down past the
     tagline, so the breadcrumb, the title and the intro line all ran underneath
     the leaves — measured overlap on the Pricing banner: the decoration box
     spanned x280-400 / y0-344 while the tagline sat at x25-390 / y249-275.
     A phone banner is full-width text with nowhere to move that text to, so
     the decoration steps back instead: about a third the width and faded to a
     watermark, keeping the motif without competing with the words. */
  body.orlaya-elementor-full-width .orlaya-elementor-service-hero::before,
  body.orlaya-elementor-full-width .orlaya-elementor-contact-hero::before {
    width: 5.5rem;
    height: 13rem;
    opacity: .3;
    inset: -1rem -1rem auto auto;
  }
  .orlaya-elementor-hero { min-height: clamp(38rem,88svh,48rem) !important; align-items: flex-end; background-position: 32% center; }
  .orlaya-elementor-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(246,241,231,.08) 20%,rgba(246,241,231,.93) 72%); }
  .orlaya-elementor-hero-copy { width: 100% !important; margin: 0 !important; padding: clamp(7rem,19svh,10rem) 1.25rem clamp(4.5rem,11svh,6.5rem) !important; }
  .orlaya-elementor-hero-copy .elementor-heading-title { font-size: clamp(2.75rem,12.5vw,3.85rem); line-height: 1.3; }
  /* Same crop problem the block-theme CTA above already solves via
     `object-position: 15% center`: the banner is a wide panorama with the
     white Orlaya flower in its left ~25%, so a centred crop on a narrow phone
     box frames the empty dark-green area to the right of the flower and the
     banner reads as a flat green block. 15% puts the flower head in frame.
     `!important` is required, not cosmetic: Elementor writes
     `background-position:center center` from the widget's own settings under
     `.elementor-NN .elementor-element.elementor-element-XXX` (0-3-0), which
     outranks any plain `.orlaya-elementor-cta` rule here — the previous 28%
     value was silently losing that fight and never applied at all. */
  /* "المزيد من الخدمات التي تلبي احتياجاتك المتنوعة" is a 44-character
     heading; at the shared clamp's mobile floor (1.35rem) it needs ~475px and
     wraps onto a second line on a phone. Scale it with the viewport instead so
     it settles on one line at typical phone widths, with a floor that keeps it
     legible on the narrowest screens. */
  .orlaya-elementor-more .elementor-heading-title { font-size: clamp(.9rem, 3.9vw, 1.35rem); }
  .orlaya-elementor-cta { min-height: clamp(19rem,62svh,23rem) !important; }
  body.orlaya-elementor-full-width .orlaya-elementor-cta:not(.orlaya-elementor-cta-plain) {
    background-position: 15% center !important;
  }
  /* The copy block used to carry its own darkening gradient
     (transparent -> rgba(23,36,22,.92) top to bottom). That gradient ends at
     its DARKEST point exactly where the block ends, so its bottom edge met the
     untinted photo below as a hard horizontal line straight under the button —
     the seam visible on every sub-page banner on mobile. (It never showed on
     desktop, where the copy sits beside the photo rather than over it, and
     never on the homepage, which tints the whole section instead.)
     The gradient moves to the section overlay below, spanning the full height,
     so there is no edge to see. */
  .orlaya-elementor-cta-copy { width: 100% !important; align-self: flex-end; margin: 0 !important; padding: 3rem 1.25rem 2rem !important; background: none !important; }
  /* Elementor renders the section's colour overlay as ::before and drives it
     with --overlay-opacity (0.16 from the widget settings). Replacing that
     flat colour with a full-height gradient — and taking opacity back to 1,
     since the alpha now lives inside the gradient stops — darkens the top,
     where the text sits, and fades out towards the bottom of the photo. */
  body.orlaya-elementor-full-width .orlaya-elementor-cta:not(.orlaya-elementor-cta-plain)::before {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(23,36,22,.88) 0%, rgba(23,36,22,.72) 38%, rgba(23,36,22,.32) 72%, rgba(23,36,22,.12) 100%) !important;
    opacity: 1 !important;
  }
  .orlaya-elementor-hero-petals { inset: 18% auto auto 8%; width: min(40vw,180px) !important; opacity: .45; }
  .orlaya-elementor-cta-petals { inset: 0 auto auto 20%; width: min(52vw,280px) !important; opacity: .55; }
}

@media (max-width: 420px) {
  .orlaya-hero-copy { padding-inline: 1rem; }
  .orlaya-stage { padding-inline: .875rem; }
  .orlaya-stage-label,
  .orlaya-stage-meta { padding-inline: .875rem; }
  .orlaya-package-card { padding: 1.4rem !important; }
  .orlaya-package-card::after { width: 7rem; opacity: .3; }
}

@media (max-height: 520px) and (min-width: 601px) and (max-width: 1100px) {
  :root { --orlaya-header-height: 64px; }
  .orlaya-header { min-height: var(--orlaya-header-height); padding-block: .35rem; }
  .orlaya-header.is-scrolled { min-height: 60px; padding-block: .25rem; }
  .orlaya-brand-name { font-size: 1.75rem; }
  .orlaya-header .wp-block-navigation__container { gap: clamp(.7rem,2vw,1.25rem); }
  .orlaya-hero { min-height: max(24rem,100svh); }
  .orlaya-hero-copy {
    width: min(28rem,48vw);
    margin-right: clamp(1.25rem,5vw,3rem);
    padding-top: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + 1rem);
    padding-bottom: 1.5rem;
  }
  .orlaya-hero h1 { margin-bottom: .5rem; font-size: clamp(2.4rem,5.5vw,3.25rem) !important; line-height: 1.22; }
  .orlaya-hero-copy .has-large-font-size { font-size: .9rem !important; line-height: 1.55; }
  .orlaya-hero-copy .wp-block-buttons { margin-top: .65rem; }
  .orlaya-journey-visual { inset-block-start: 7.5rem; width: min(30vw,270px); }
  .orlaya-journey-visual-sticky { top: calc(var(--orlaya-header-height) + var(--orlaya-admin-offset) + .5rem); height: min(58svh,17rem); }
  .orlaya-stage { min-height: max(15rem,70svh); padding-block: 1.25rem; }
  .orlaya-stage-meta p { margin-top: .35rem !important; line-height: 1.55; }
}

@media (pointer: coarse) {
  .orlaya-header .wp-block-navigation-item__content,
  .orlaya-footer-links a,
  .orlaya-footer-grid p a,
  .orlaya-footer-bottom a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* 2026-08-05: this used to be 46px — the real height of WordPress's mobile
   admin bar — which looks right but isn't. Below 782px WP switches
   #wpadminbar from position:fixed to position:absolute, so the bar scrolls
   away with the page while the header stays fixed. Reserving 46px for a bar
   that is no longer there left a growing empty strip above the header as
   soon as you scrolled ("الهيدر ينزل لما تنزل بالscroll"). The offset has to
   be 0 here so the fixed header sits flush against the viewport edge.
   Admin-only symptom: logged-out visitors have no admin bar, so
   --orlaya-admin-offset stays 0 for them and they never saw the gap. */
@media (max-width: 782px) {
  body.admin-bar { --orlaya-admin-offset: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .orlaya-reveal,
  .orlaya-stage-meta,
  .orlaya-stage-label { opacity: 1; transform: none; }
  .orlaya-journey-layer { animation: none !important; }
}

@media print {
  .orlaya-header { position: static; }
  .orlaya-petal,
  .orlaya-stage { min-height: auto; break-inside: avoid; }
  .orlaya-back-to-top { display: none; }
}

/* Back-to-top button: fixed, hidden until the page is scrolled, appears on
   every page (printed via wp_footer in functions.php). */
.orlaya-back-to-top {
  position: fixed;
  z-index: 40;
  inset-inline-end: 1.75rem;
  bottom: 1.75rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(45,59,36,.16);
  border-radius: 50%;
  background: var(--orlaya-green);
  color: var(--orlaya-ivory);
  box-shadow: 0 10px 26px rgba(23,36,22,.22);
  opacity: 0;
  transform: translateY(.5rem);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.orlaya-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.orlaya-back-to-top:hover,
.orlaya-back-to-top:focus-visible { background: var(--orlaya-charcoal); }
.orlaya-back-to-top svg { width: 1.4rem; height: 1.4rem; }
@media (max-width: 700px) {
  .orlaya-back-to-top { inset-inline-end: 1.1rem; bottom: 1.1rem; width: 2.6rem; height: 2.6rem; }
  .orlaya-back-to-top svg { width: 1.2rem; height: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .orlaya-back-to-top { transition: opacity .01ms; }
}


/* ==========================================================================
   Photography service page — "أنواع التصوير التي نقدمها" gallery
   Used by the service-photography page (orlaya-elementor-full-width template).
   Scoped under body.orlaya-elementor-full-width so these ::before/::after and
   container rules always out-specify Elementor's own .e-con defaults.
   ========================================================================== */
body.orlaya-elementor-full-width .orlaya-photo-gallery-section {
  padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,4rem);
  background-color: var(--orlaya-ivory, #faf8f3);
  text-align: center;
}
body.orlaya-elementor-full-width .orlaya-photo-gallery-section > .elementor-widget-heading .elementor-heading-title {
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: clamp(1.5rem,2.6vw,2.1rem);
  color: var(--orlaya-charcoal);
}
body.orlaya-elementor-full-width .orlaya-photo-gallery-section > .elementor-widget-text-editor {
  max-width: 42rem;
  margin-inline: auto;
}

/* 4-up grid; collapses to 2-up then 1-up. Uses grid (not Elementor's flex row)
   so the cards stay equal-width regardless of caption length. */
body.orlaya-elementor-full-width .orlaya-photo-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  body.orlaya-elementor-full-width .orlaya-photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body.orlaya-elementor-full-width .orlaya-photo-gallery { grid-template-columns: 1fr; }
}

body.orlaya-elementor-full-width .orlaya-photo-card {
  background: var(--orlaya-white, #fff);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(23, 36, 22, .07);
  transition: transform .35s ease, box-shadow .35s ease;
  padding: 0 0 1.5rem;
  width: 100%;
}
body.orlaya-elementor-full-width .orlaya-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(23, 36, 22, .14);
}

/* Fixed 4:5 portrait crop keeps the row visually even even though the source
   photos have different native aspect ratios. */
body.orlaya-elementor-full-width .orlaya-photo-card .orlaya-photo-card__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  transition: transform .5s ease;
}
body.orlaya-elementor-full-width .orlaya-photo-card:hover .orlaya-photo-card__img img {
  transform: scale(1.04);
}
body.orlaya-elementor-full-width .orlaya-photo-card .orlaya-photo-card__img {
  overflow: hidden;
  line-height: 0;
  margin-bottom: 1.25rem;
}
body.orlaya-elementor-full-width .orlaya-photo-card .elementor-widget-heading .elementor-heading-title {
  font-family: var(--orlaya-font-main, 'Tajawal', Tahoma, Arial, sans-serif);
  font-size: 1.15rem;
  color: var(--orlaya-forest, #172416);
  margin: 0 0 .5rem;
  padding-inline: 1rem;
}
body.orlaya-elementor-full-width .orlaya-photo-card .elementor-widget-text-editor {
  padding-inline: 1rem;
}
body.orlaya-elementor-full-width .orlaya-photo-card .elementor-widget-text-editor p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--orlaya-charcoal, #2c332b);
  margin: 0;
}


/* ==========================================================================
   Services grid — 7 cards (2026-08-05)
   The section now holds EIGHT cards (the six originals + "التصوير" + the
   "خدمة أخرى" catch-all that routes to the contact form), which divides cleanly:
     4 cols: 8 / 4 = 2 full rows
     2 cols: 8 / 2 = 4 full rows
     1 col : 8 full-width cards
   No spanning or orphan-centring tricks needed — an earlier 7-card attempt used
   a 2-column-wide featured card and was rejected for looking ragged.

   NOTE: this rule was silently dead for a while. mu-plugins/orlaya-services-
   redesign.php shipped `.orlaya-service-grid { grid-template-columns: repeat(3,
   1fr) !important }` for its own (now dead-coded) card markup, and !important
   beat everything here. That block is commented out now. If the grid ever
   ignores this file again, check that mu-plugin first. */
.orlaya-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The old `.is-single` size bump existed only because two icons (SEO, call
   centre) were drawn much thinner than the rest. The rewritten icon set has a
   consistent optical weight, so every icon renders at one size now. 1.75rem
   sits between the old 1.5rem default and the 2.1rem `is-single` value, which
   keeps the new full-frame 24x24 drawings legible inside the 4.5rem circle. */
.orlaya-service-icon svg,
.orlaya-service-icon.is-single svg { width: 1.75rem; height: 1.75rem; }

/* Four narrower columns need a smaller icon well, tighter gap and less padding
   than the old three-column layout, or the head row (icon + title) crowds the
   ~290px column. */
.orlaya-service-grid .orlaya-service-icon { width: 3.25rem; height: 3.25rem; }
.orlaya-service-grid .orlaya-service-icon svg { width: 1.5rem; height: 1.5rem; }
.orlaya-service-grid .orlaya-service-card-head { gap: .8rem; }
.orlaya-service-grid .orlaya-service-card { padding: 1.5rem 1.35rem; }
.orlaya-service-grid .orlaya-service-card h3 { font-size: 1rem; }
.orlaya-service-grid .orlaya-service-card p { font-size: .84rem; line-height: 1.65; }

/* The 2-column (1100px) and 1-column (700px) rules live further UP this file, and
   media queries add no specificity — so the unconditional `repeat(4, ...)` above
   would beat them and the grid would stay 4-wide on mobile. The column counts are
   therefore restated here, after it. 8 cards divide evenly at every width: 4x2,
   2x4, 1x8 — no spanning or centring tricks needed (an earlier 7-card design used
   a 2-column-wide "featured" first card; dropped once an 8th card was added). */
@media (max-width: 1100px) {
  .orlaya-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two wider columns can afford the original roomy icon well and type sizes. */
  .orlaya-service-grid .orlaya-service-icon { width: 4.5rem; height: 4.5rem; }
  .orlaya-service-grid .orlaya-service-icon svg { width: 1.75rem; height: 1.75rem; }
  .orlaya-service-grid .orlaya-service-card { padding: 1.75rem 1.6rem; }
  .orlaya-service-grid .orlaya-service-card h3 { font-size: 1.1rem; }
  .orlaya-service-grid .orlaya-service-card p { font-size: .88rem; }
}
@media (max-width: 700px) {
  .orlaya-service-grid { grid-template-columns: 1fr; }
}

/* .orlaya-service-card-head is a flex row, so the <h3> is only as wide as its own
   text and packs up against the icon — fine while every card is the same width,
   but worth pinning explicitly since RTL start-alignment isn't the flex default. */
.orlaya-service-grid .orlaya-service-card-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
}