/* ============================================================================
   SDEIRA LIWA OVERRIDES - the a-liwa direction, promoted to the live site
   ----------------------------------------------------------------------------
   This is the live-shipping port of the prototype correction layer
   docs/prototypes/shared/brand-fixes.css (and the Liwa reading from
   docs/prototypes/a-liwa/theme.css), moved from the prototype onto the two
   homepages. It loads LAST in <head> on index.html and en/index.html (after
   sdeira-v2.css / sdeira-v2-en.css, sdeira-sections.css, sdeira-nav-controls.css
   and sdeira-assistant.css), so it wins on source order with no !important
   except where a rule it must beat is itself !important.

   WHY A SHARED FILE INSTEAD OF EDITS IN THE TWO PAGE SHEETS: the two homepage
   stylesheets are deliberately not shared, and CLAUDE.md's "one component, one
   implementation" rule says a deliberate difference is a named variant, never
   a second implementation. The Liwa corrections are the same set on both
   homepages, so a single shared layer is the variant; editing them into two
   14k-line files would fork the variant in half. Both languages must render
   the same Liwa system, which is also the point of "one file, both languages".

   WARNING - the sdeira-v2*.css files keep their own cascade intact. This file
   is a corrections layer on top, not a rewrite. If a page rule is later
   changed, compare the winning declaration here before trusting either.

   EVERY RULE traces to a GLMA finding (20 Aug 2026), a V9 page, or a dated
   site-owner instruction - the same provenance the prototype recorded. Nothing
   in this file is invented; each block names its source.
   ========================================================================== */

/* ============================================================ FINDING p2-02
   COLOUR HIERARCHY - "Apply approved brand colour proportions."
   The token file is already Liwa-led (verified: --surface-brand, --accent,
   --accent-fill all var(--brand-liwa)), so the :root remap the prototype
   carried is not repeated here - that would redeclare tokens, which CLAUDE.md
   forbids. What the prototype added ON TOP of the tokens - the page-level
   ink, grounds, marks, scrims and the fixed header - is what this file carries.
   ========================================================================== */

/* ============================================================ FINDING p2-04
   THE SCREENS THE TOKEN CANNOT REACH. Pure black rgba(0,0,0,...) is not one
   of the eight palette colours; Sdeira's Black is #414042 (V9 p28). The token
   --image-overlay-rgb (65,64,66) is already brand Black, so every re-pointed
   literal here uses it instead of typing the numbers again. Each keeps its
   stops, alphas and direction exactly - only the three numbers that made it
   black change. */

/* sdeira-v2-en.css:7906 - the business card's hover panel. */
.sector-card-panel { background: rgba(var(--image-overlay-rgb), .92); }

/* sdeira-v2-en.css:8791 - the dim that lands on a card's photograph on hover. */
.sector-card .sector-card-media::after { background: rgba(var(--image-overlay-rgb), .16); }

/* The "ابدأ من حاجتك / start from your need" route band, and any other
   decorative slat work drawn at 108deg with warm literals, move to the one
   45deg brand angle (finding p2-03, V9 p10/p11/p43) with palette tokens.
   The composition (stops, widths) is kept; only angle and hue change. */
.needs-prototype-row-media::before {
  background: linear-gradient(45deg,
    transparent 0 19%, color-mix(in srgb, var(--brand-light-grey, #d4d4d4) 60%, transparent) 19% 23%,
    transparent 23% 43%, color-mix(in srgb, var(--accent) 16%, transparent) 43% 49%,
    transparent 49% 69%, color-mix(in srgb, var(--accent) 12%, transparent) 69% 76%, transparent 76%);
}

.needs-prototype-row:nth-child(1) .needs-prototype-row-media::before {
  background: linear-gradient(45deg, transparent 0 42%,
    color-mix(in srgb, var(--brand-light-grey, #d4d4d4) 62%, transparent) 42% 49%, transparent 49%);
}

.needs-prototype-row:nth-child(2) .needs-prototype-row-media::before {
  background: linear-gradient(45deg, transparent 0 25%,
    color-mix(in srgb, var(--brand-light-grey, #d4d4d4) 58%, transparent) 25% 32%,
    transparent 32% 57%, color-mix(in srgb, var(--accent) 14%, transparent) 57% 64%, transparent 64%);
}

.needs-prototype-row:nth-child(4) .needs-prototype-row-media::before {
  background: linear-gradient(45deg, transparent 0 25%,
    color-mix(in srgb, var(--brand-light-grey, #d4d4d4) 62%, transparent) 25% 33%,
    transparent 33% 58%, color-mix(in srgb, var(--accent) 12%, transparent) 58% 65%, transparent 65%);
}

/* ---- body copy ----------------------------------------------------------- */
/* V9 p71, Contrast Rule: "On White Canvas: Body copy must be Jais; titles can
   use Liwa for emphasis." The live page sets body text to brand Black. Jais
   measures 7.01 on white, so this costs nothing in legibility. Headings stay
   on Black deliberately (p71 governs body copy). */
body { color: var(--brand-jais); }

/* FINDING p3-01/p3-02 moved to sdeira-assistant.css, 31 Aug 2026: the fix
   applied only to these two pages (the sparks and the glow were still live
   on every other page), so it is promoted into the shared stylesheet every
   page loads instead of overridden here a second time. One component, one
   implementation. */

/* ============================================================ FINDING p4-01
   DECORATIVE / BLURRED - remove the blown-out blurred copy of a card's photo
   behind its sharp one (the "decorative and blurred element" in the finding).
   The sharp image is unaffected. */
.sector-hover-visual::before { display: none !important; }
.sector-hover-visual,
.needs-prototype-media { filter: none !important; }

/* ============================================================ FINDING p4-02
   PATTERN APPLICATION - V9 p43 draws the pattern as thin 45deg outlines, and
   p63 applies it along outer edges "to frame the composition without
   competing". The live --ground-sand fills a whole section with wide bands,
   which is the opposite. Reduce band geometry to the line weight the guide
   draws and remove the bands; the token keeps its name and shape. */
:root {
  --ground-sand-line: 1px;
  --ground-sand-line-gap: 14px;
  --ground-sand-band: 0px;
  --ground-sand-band-gap: 0px;
  --identity-band-line-ambient: 5%;
  --identity-band-fill-ambient: 0%;
}

/* ============================================================ CALL 00:20:00
   "The slats on the right should go" - Karim, pointing at the skewed
   identity-band ribbons over the hero photograph. The ribbons (the r1/r2/r3
   children) stay hidden; the element itself is un-hidden below, 26 Aug 2026,
   to carry the same p.43 line mark the Contact band and About photo carry -
   see "HERO / CTA CORNER MARK" further down. */
.hero-glass span { display: none !important; }

/* ============================================================ FINDING p5-02
   LOGO POSITIONING & HOVER - a brand mark is not a hover effect. Nothing about
   any company logo changes on hover now. */
.company-nav-link:hover .company-nav-mark img,
.company-nav-link:focus-visible .company-nav-mark img {
  opacity: 1 !important;
  transform: none !important;
}

/* ===================================== FINDING p4-01 + the repo's own rule
   NO BOX-SHADOW, ANYWHERE. The three shadows the prototype found on the
   rendered page are removed rather than softened: .sector-card-panel (pure
   black, 70px blur - it is already a .92 brand-Black fill on a photo), and
   .ai-chat-panel / .ai-welcome-nudge (--shadow-floating; they take --line as
   the tonal step instead). */
.sector-card-panel { box-shadow: none; }
.ai-chat-panel,
.ai-welcome-nudge {
  box-shadow: none;
  border: 1px solid var(--line);
}

/* ============================================= RESERVE, DO NOT CLAMP
   The token file forbids -webkit-line-clamp. News cards reserve the two-line
   room the clamp used to take, then are allowed to use it. */
.news-card p,
.news-item p {
  -webkit-line-clamp: none;
  display: block;
  min-block-size: calc(2 * 1lh);
}

/* ==================================================== FINDING p4-03 + p2-03
   THE LITERALS THE TOKEN FILE CANNOT REACH (page-side, Arabic).
   Arabic homepage: the "ابدأ من حاجتك" band is a hardcoded warm floor and a
   Razeen hairline, plus 108deg decorative bands handled above. */
.needs { background: var(--surface-sunken); }
.partner-card:hover { border-color: color-mix(in srgb, var(--accent) 26%, transparent); }

/* ==================================================== THE HERO OVERLAY
   Owner, 21 Aug: the hero must read exactly like the current live site's
   pattern ("خليها مثل الموقع الرسمي الحالي ... اتجاه انكليزي ومتوافق مع
   النمط الحالي"). So the hero accents only: eyebrow on Liwa, H1/lead/scroll
   white, .em on Liwa, buttons Liwa. The scrim is left to the live CSS.
   .em itself is declared once, further down (search "phrase itself") - this
   used to redeclare it a second time as a filled badge, which the later
   rule always overrode anyway (both same file, later wins); kept as one
   definition instead of two that disagree. */
.hero .eyebrow { color: var(--accent); }
.hero h1 { color: var(--brand-white); }
.hero-content p { color: var(--brand-white); }
.hero .scroll-hint { color: var(--brand-white); }
.hero .btn-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-action);
}
.hero .btn-primary:is(:hover, :focus-visible) {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-action);
}
/* .hero .btn-primary::before {
  background: color-mix(in srgb, var(--brand-black) 30%, var(--accent-fill));
} */
.hero .btn-ghost {
  color: var(--brand-white);
  border-color: var(--brand-white);
  background: transparent;
}
.hero .scroll-hint .dot {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .95);
}
.hero .scroll-hint .dot::after { background: var(--brand-white); }
.hero-slide-line {
  background-image: linear-gradient(
    rgba(0, 0, 0, 0) calc(50% - 1.5px),
    rgba(255, 255, 255, .38) calc(50% - 1.5px),
    rgba(255, 255, 255, .38) calc(50% + 1.5px),
    rgba(0, 0, 0, 0) calc(50% + 1.5px));
}
.hero-slide-line.active::after,
.hero-slide-line.done::after { background: var(--accent); }

/* ==================================================== THE FIXED WHITE HEADER
   Owner, 21 Aug: the bar at rest is one full-width white strip from first
   paint; on scroll the one box (.nav::before, the live pill) visibly shrinks
   into the floating glass pill. Full breakout math is in
   khadamat-theme.css (the same model, already shipped and verified there).
   Only the pattern path comment is shorter here; the technique is identical:
   .nav is .wrap, centred, so left:50%/right:50% (with margin -50vw) lands the
   strip exactly on header's outer edge at any width. */
.nav::before {
  transition:
    left var(--dur-base) var(--ease-out),
    right var(--dur-base) var(--ease-out),
    margin-inline var(--dur-base) var(--ease-out),
    top var(--dur-base) var(--ease-out),
    bottom var(--dur-base) var(--ease-out),
    border-radius var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out);
}
header:not(.scrolled) .nav::before {
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  top: calc(-1 * var(--hd-gap));
  bottom: calc(-1 * var(--hd-gap));
  border-radius: 0;
  background: var(--brand-white);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Header geometry is shared with subpages in sdeira-nav-controls.css. */

/* The bar's ink, held dark at every scroll position, because the bar's
   background is always white now. These state the same values the live
   header.scrolled rules give, unconditionally. */
.logo { color: var(--charcoal); }
.menu a { color: var(--ink); }
/* The active item rests on ink (the accent underline marks it), exactly as the
   sub-page component resolves it; the scrolled state flips to --accent-text via
   the shared header rules. */
.menu a.active { color: var(--ink); }
.nav-disclosure > summary { color: var(--ink); }
/* :is(.nav-search, .nav-icon--search, .nav-icon--accessibility, .burger)
   PROMOTED to assets/css/sdeira-nav-controls.css (26 Aug 2026 sub-page
   rollout) - that file already owned this control sitewide, so the fix
   belongs there rather than duplicated here. */
.lang { color: var(--muted); }

/* -- SEARCH ICON + DROPDOWN FOCUS RING (finding p2-02, WCAG 1.4.11). Razeen
   measures 1.83 on white; Liwa 8.63. Same width/style/offset, new colour. */
:is(.nav-search, .burger, .menu-close):focus-visible { outline-color: var(--accent); }
.nav-disclosure > summary:focus-visible { outline-color: var(--accent); }

/* -- SIDEBAR LOGO + MOBILE DRAWER CONTACT BUTTON. The drawer loads the dark
   lockup; use the full-colour one. The contact button text force white on the
   Liwa fill (white on Liwa = 9.35). */
.menu-logo {
  min-block-size: 44px;
  display: flex;
  align-items: center;
}

/* ==================================================== CARD GROUNDS, INVERTED
   Owner, 21 Aug: the page floor is White, so a card on it takes Light Grey.
   PROMOTED to assets/css/sdeira-sections.css (26 Aug 2026 sub-page rollout):
   that file is shared by the homepage and every generated page, so the same
   rule there covers sub-pages too instead of leaving them white-on-white. */

/* ON A SECTION: one p.43 composition across the ground, at the guideline's
   own 5% on the light ground. PROMOTED into sdeira-v2.css / sdeira-v2-en.css
   themselves, 31 Aug 2026: this used to override a base rule in those files
   that still painted the retired diagonal hatch (--ground-sand) underneath,
   so this override was the only reason .needs/.value-sections ever rendered
   correctly. One component, one implementation - the two homepage files now
   write the real value directly. */

/* ==================================================== PATTERN CLEAN-UP, PASS 2
   Owner, 21 Aug: the site's own stripe language leaves completely - identity
   bands behind sections, ribbons on card photos, the ribbon on the About
   figure. The p.43 line set is the only mark that remains. */
/* .section-glass / .news-glass / .ribbon-frame / .split-ribbon (hide) and
   .cta-glass (unhide + p.43 mark) PROMOTED to assets/css/sdeira-sections.css
   (26 Aug 2026 sub-page rollout) - that file is shared by the homepage and
   every generated page. .hero-glass stays here: it is a homepage-only
   element with no sub-page equivalent (sub-pages use .subpage-hero-glass,
   a different component, untouched by this migration). */
.hero-glass {
  display: block;
  opacity: 1;
}

/* Same p.43 mark the promoted .cta-glass rule draws, mirrored onto the
   homepage hero photograph - see the sections.css comment for the story.
   --photo-mark-width-hero: the full-bleed section tier, kept in step with
   .cta-glass below by using the same token (site owner, 28 Aug 2026). */
.hero-glass::before,
.hero-glass::after {
  content: "";
  position: absolute;
  inline-size: var(--photo-mark-width-hero);
  aspect-ratio: var(--photo-mark-p43-ratio);
  pointer-events: none;
}
.hero-glass::before {
  inset: 0 auto auto 0;
  background: url("../images/patterns/lines-rotated-180.svg?v=bc182f344a4d87fd") no-repeat left top / 100% 100%;
}
.hero-glass::after {
  inset: auto 0 0 auto;
  background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right bottom / 100% 100%;
}

/* On photography the line set appears twice, diagonally opposite, the way the
   guideline's own cover uses it (second instance is the first rotated 180deg
   so the 45deg slant stays one angle in both). Flat strength.
   .needs-route-media / .project-card-media / .project-card--feature
   PROMOTED to assets/css/sdeira-sections.css (26 Aug 2026 sub-page rollout) -
   those are that file's own shared components. .about-visual has no
   sub-page equivalent and stays here. */
.about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom 0 / auto 80%;
  pointer-events: none;
  z-index: 2;
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out);
}
.about-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom -28px / auto 80%;
  pointer-events: none;
  z-index: 2;
  transform: rotate(180deg) scale(1);
  transform-origin: 100% 100%;
  transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out);
}

/* ==================================================== THE MARK, ON SECTOR CARDS
   Owner, 23 Aug: extend the same p.43 corner mark to the group-business cards
   and hover panels. The hover panel photo is text-free (full mark); the card's
   own photo carries tile text (hidden at rest, revealed on hover). */
.sector-hover-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom 0 / auto 80%;
  pointer-events: none;
  z-index: 2;
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: transform var(--dur-normal, 200ms) var(--ease-out, ease-out);
}
.sector-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom 0 / auto 80%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-normal, 200ms) var(--ease-out, ease-out);
}
.sector-card:is(:hover, :focus-within) .sector-card-media::before { opacity: 1; transform: scale(1.1); }

/* ==================================================== THE MARK, ON THE ABOUT PHOTO
   Owner, 23 Aug: bring the line artwork to the About photo, upper-left, clear
   of the 2005 badge at lower-right. Static, so the mark stays visible. */
.about-visual::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  /* Sized off the shared content-tier token (was a local 42%, then the old
     shared 60%): re-pointed to --photo-mark-width, 28 Aug 2026 - this photo
     is content-scale like a split figure, not full-bleed like the hero/CTA,
     which now carry their own --photo-mark-width-hero. The owner retunes
     every content-tier p.43 mark from that one token in sdeira-tokens.css. */
  inline-size: var(--photo-mark-width);
  aspect-ratio: var(--photo-mark-p43-ratio);
  background: url("../images/patterns/lines-rotated-180.svg?v=bc182f344a4d87fd") no-repeat left top / 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.about-visual::before { display: none; }

/* ==================================================== NEWS CARD HOVER ACTION
   Keep the news headline on its resting ink when hovered; the interaction
   belongs to the Read more link (accent), not the editorial title. */
.news-card:is(:hover, :focus-within) h3,
.news-card:is(:hover, :focus-within) h3 a { color: var(--brand-black); }
.news-card:is(:hover, :focus-within) .more { color: var(--link-hover); }
.news-card:is(:hover, :focus-within) .more > i.ph { color: inherit; }
.news-card.news-card h3,
.news-card.news-card h3 a { transition: none; }
.news-card.news-card h3 {
  inline-size: min(100%, 34ch);
  max-inline-size: 34ch;
  max-width: 34ch;
}

@media (max-width: 1280px) {
  .menu { inline-size: min(88vw, 380px); }
  .menu-head { min-block-size: 64px; }
  .menu-logo { block-size: 44px; }
  .menu-logo img { inline-size: min(152px, 52vw); }
  .menu-close { inline-size: 44px; block-size: 44px; flex: 0 0 44px; }
  /* The drawer contact button text stays white on the Liwa fill (white on
     Liwa = 9.35); outside the drawer the control is hidden. */
  .menu.open .menu-contact { color: #fff; }
  .menu.open > a:not(.menu-logo),
  .menu.open > .nav-disclosure > summary { font-size: var(--type-control); }
}

/* ============================================================ SHORTER HERO
   Owner: 85dvh was still a full-screen mass. min-height (not height) so the
   hero can grow where short windows need it. */
.hero { min-height: max(540px, 75dvh); }
.hero-content { min-height: 75dvh; padding-block: 96px 48px; }
@media (max-width: 920px) {
  .hero { min-height: max(500px, 80dvh); }
  .hero-content { min-height: 80dvh; padding-block: 84px 40px; }
}
@media (max-width: 640px) {
  .hero { min-height: max(460px, 82dvh); }
  .hero-content { min-height: 82dvh; padding-block: 80px 32px; }
}

/* ============================================================ TAB GROUPS + FILTERS
   Owner / filtered-feature parity: the shared Light Grey ground for the filter
   group, transparent inactive chips, and the demoted lead project keeps the
   sunken copy surface in the comparison grid. */
:is(.project-filters, .news-filters) { background: var(--surface-sunken); }
:is(.project-filter, .news-filter) { background: transparent; }
:is(.project-filter, .news-filter):not(.is-active):hover { background: var(--surface-raised); }
.featured-projects .project-cards.is-filtered-view .project-card--feature,
.featured-projects .project-cards.is-filtered-view .project-card--feature .project-card-body {
  background: var(--surface-sunken) !important;
}
.featured-projects .project-cards.is-filtered-view .project-card--feature {
  grid-template-rows: clamp(240px, 25vw, 340px) auto;
  min-height: 0 !important;
  height: auto;
  background: var(--surface-sunken) !important;
}
.featured-projects .project-cards.is-filtered-view .project-card--feature .project-card-img {
  position: relative;
  inset: auto;
  height: clamp(240px, 25vw, 340px);
}
.featured-projects .project-cards.is-filtered-view .project-card--feature .project-card-body {
  position: relative;
  inset: auto;
  max-width: none;
  min-height: 0;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--surface-sunken) !important;
  color: var(--ink);
}
.featured-projects .project-cards.is-filtered-view .project-card--feature h3 {
  font-size: var(--type-card);
  line-height: var(--leading-card);
}
.featured-projects .project-cards.is-filtered-view .project-card--feature .project-type,
.featured-projects .project-cards.is-filtered-view .project-card--secondary .project-type { color: var(--ink); }
.featured-projects .project-cards.is-filtered-view
  :is(.project-card--feature, .project-card--secondary):is(:hover, :focus-within)
  .project-type { color: var(--brand-white) !important; }
.featured-projects .project-cards.is-filtered-view .project-card--feature:is(:hover, :focus-within) .project-card-body {
  background: var(--surface-sunken-strong) !important;
}

/* ============================================================ COMPANY LOGOS, 80%
   Owner, 21 Aug (finding p5-01): shrink the four company marks to exactly 80%
   of the live numbers, held at their corner pin.
   OFFSET REMOVED, 1 Sep 2026: flagged in a preview comment - the 14px
   right/down shift the 21 Aug finding also specified put the logo out of
   register with the h3/p column below it (both start flush at the card's
   own corner via .company-logo's align-self: flex-end), so the mark read
   as floating rather than pinned to the same edge the title uses. The 80%
   size reduction is unaffected; only the extra positional offset is gone. */
.company-logo svg { width: 43.2px; height: 38.4px; }
.company-logo--image img { 
    width: auto;
    max-width: min(100%, var(--company-mark-width, 262px));
    height: auto;
    max-height: 64px; 
  }
.company-logo--zoad img { width: min(123.2px, 65.6%); height: 65.6px; }

/* ============================================================ THE CTA BAND
   Owner + finding p2-04: the closing CTA takes brand-Black --scrim-control
   with the approved p.43 single mark layered over it. */
.cta::after {
  background:
    url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right -28px bottom -28px / auto 60%,
    var(--scrim-control);
}

/* ============================================================ SECTION GROUND SEAM
   Owner, 21 Aug: the 1px translucent seam between sector cards reads as a pale
   hairline against dark bottoms. Removed. */
.sector-grid { gap: 0; }

/* Sector gaps reveal a stable ground instead of the changing hero image. */
.hero-sectors { background: var(--brand-black); }
.hero-sectors .sector-grid {
  gap: var(--hero-sector-gap);
  background: var(--scrim-bar);
}
@media (max-width: 980px) {
  .hero-sectors .sector-card,
  .hero-sectors .sector-card-media { border-radius: var(--hero-sector-mobile-radius); }
}

/* ============================================================ SCROLL-TOP, REVERTED
   24 Aug: the back-to-top keeps its muted brand-black tile at rest, accent only
   on hover/focus - the live design's value, not the louder full-strength
   accent. Nothing to override here: this file deliberately leaves .scroll-top
   alone so it falls through to the live design.
   ========================================================================== */

/* ============================================================ BRAND GLASS BLOCK
   GLASS, NO OVERLAY - site owner, 26 Aug 2026 (revised same day)
   The live port of the prototype "brand glass block" treatment
   (docs/prototypes/shared/brand-fixes.css). The owner asked to remove the
   translucent overlay from the photography across the three spots that carry
   copy over a photograph - the hero, the closing Contact band, and the first
   full-image project card - while keeping the text legible and the photograph
   read through the panel rather than cut out of it.

   The answer on the prototypes - confirmed by the owner after seeing the
   opaque slab and rejecting it as not glass - is a block of brand colour at
   the same glass treatment the scrolled top bar takes: an alpha fill plus a
   backdrop blur. The alpha is --glass-fill-alpha (74%), the token file's own
   number for a glass panel over photography (sdeira-tokens.css section 11,
   moved by the owner's own decision; .74 is the last value white body text
   still clears). The blur is --glass-blur (18px) + saturate(112%), the pair
   the scrolled bar and the sector band already use. Nothing here is a new
   value.

   REVISED 26 Aug 2026: both prototypes converged on Brand Black for the
   glass fill (docs/prototypes/a-liwa/theme.css and b-khatim/theme.css now
   both set --copy-block-bg: var(--brand-black)) rather than each direction's
   own accent - a solid Liwa-red or Al Khatim-red panel read as a colour
   block, not glass, on a photograph. This port follows that revision:
   --scrim-glass (rgba(65,64,66,.74), sdeira-tokens.css section 11) is the
   token file's own name for exactly this fill, so it replaces the earlier
   per-direction colour-mix here rather than adding a second literal for the
   same value.
   ========================================================================== */

/* ---- The hero ------------------------------------------------------------ */
/* Remove both translucent layers over the hero photograph: the base wash
   (.hero::after, whatever step the cascade resolved to) and the copy's
   graduated readability gradient (.hero-content::after). */
.hero::after,
.hero-content::after {
  background: none;
}

/* The copy column becomes the glass block, hugging the copy at the reading
   edge over the clean photograph. --copy-block-glass is the block-only fill
   (a whole-section `background: var(--copy-block-bg)` would leak a
   translucent value past the block); the opaque var stays for section
   grounds. flex: 0 0 auto kills the flex-grow the base rule gives this box
   (sdeira-v2.css .hero-content-copy { flex: 1 1 auto }), which stretches it
   to the hero's full height and leaves the photo visible only beside it; at
   content height the photograph opens up above and around the block.
   max-width is kept modest and the padding tight so the block hugs its copy
   and the photo reads as the wide background - the owner's standing request.

   WIDENED 26 Aug 2026: at 520px the highlighted second line ("group living
   platform", wrapped in .em below) was wider than the block itself - an
   inline-flex element does not wrap internally, so it overflowed past the
   panel's right edge instead of resizing with it. 640px gives that phrase
   room to sit on one line at the sizes the hero actually ships; the .em fix
   below is the real fix (any width can still receive a longer phrase), this
   is the matching "give it more room first" half of it. */
.hero-content-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ffffff;
  padding: 0;
  border-radius: var(--r, 18px);
  max-width: min(720px, 100%);
}

/* WIDENED 28 Aug 2026, site owner: the 720px cap above was reviewed live and
   read as too narrow at desktop widths - the three-slide hero title (h1's
   own font-size is the unlayered, sitewide var(--type-display), which this
   file has never touched and does not touch here) was wrapping to three
   lines instead of two inside a 720px block. This does not reopen the 26 Aug
   "photo reads as the wide background" decision - the block still hugs its
   copy and stays well short of the photograph's own edges - it only widens
   the room given to that copy at the sizes where three-line wrapping was
   actually happening. sdeira-v2-en.css/sdeira-v2.css already carry a wider
   960px measure for this exact box at this exact breakpoint (search
   "Hero copy is a headline, not a narrow poster column"), authored for the
   same two-line goal before this file existed; that rule has sat shadowed
   ever since, because this file loads after it and wins on source order
   regardless of specificity. Matching its value here rather than inventing a
   new one. Left the mobile base (720px, and 640px's own overflow fix above)
   untouched - the three-line wrap was only ever observed at desktop widths. */
@media (min-width: 981px) {
  .hero-content-copy {
    max-width: min(960px, 100%);
  }
}

/* CORRECTED 26 Aug 2026: was Razeen. a-liwa/theme.css's own eyebrow on this
   panel is white (--copy-block-eyebrow: #ffffff), and this file had no
   matching override, so real and prototype disagreed with nothing here
   deciding it on purpose - found in the systematic a-liwa audit, not
   requested on its own. White matches the prototype exactly. */
.hero .hero-content-copy .eyebrow,
.hero .hero-content .eyebrow {
  color: #ffffff;
}

.hero .hero-content-copy h1,
.hero-content-copy h1:not(.em) {
  color: var(--brand-black);
  font-weight:500;
}

/* REVISED 26 Aug 2026, site owner: the highlighted phrase was a filled block
   (Brand Black, then briefly attempted as a wrapping one) - dropped
   entirely in favour of colouring the phrase itself. This isn't a smaller
   patch on the same idea, it removes the bug's precondition: every attempt
   at a wrapping background box ran into the same documented defect
   (docs/prototypes/shared/brand-fixes.css, "the square component doesn't
   fit") - Chrome paints an inline element's background over its CONTENT
   AREA, which is taken from the font's own ascent/descent, not from
   line-height, and DIN Next LT Arabic's metrics are tall enough that the
   box was never going to fit its own line without a font-specific
   line-height tuned around it (the prototype's own fix needed line-height:
   1.56 against a live 1.16, scoped to one width range, to stop it printing
   over the line above). No background, no content-area box, nothing to
   overflow: colour is a per-glyph paint operation, so it wraps exactly like
   the rest of the heading with no line-height coupling at all.

   COLOUR CORRECTED, same day: Liwa red on the panel's own near-black glass
   measured unreadable - two dark colours with no contrast between them, as
   opposed to white:Liwa's 9.35 the badge version relied on, which no longer
   applies once the fill is gone. --brand-razeen is the token file's own
   sanctioned text colour for a dark surface (section 11: "the logic inverts
   on dark surfaces" - Razeen fails body text on white, passes on dark), and
   it is already the colour of this exact panel's eyebrow line, so the
   phrase now reads as the same accent the panel already carries rather than
   introducing a second one.

   BOX MODEL CLEARED, same day: margin-inline, padding and vertical-align/
   transform were still the values the filled single-line badge needed to
   sit centred against the baseline and clear of its neighbours - meaningless
   once the phrase is plain coloured text and, left in, threw the word
   several pixels out of the heading's own flow (a visible offset down and
   right of where "An integrated" sits). Zeroed/normalised so the coloured
   words sit exactly where an uncoloured word would. */
.hero .hero-content-copy .em,
.hero-content-copy .em,
.hero .hero-content-copy h1.reveal .em,
.hero-content-copy h1.reveal .em {
  display: inline;
  white-space: normal;
  background: none;
  color: var(--brand-liwa);
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  transform: none;
  font-weight:700;
}

.hero-content-copy p {
  color: var(--brand-black);
}

/* REMOVED 26 Aug 2026: this used to force the hero's primary button to
   Brand Black, from an earlier revision where it had to invert against a
   solid black copy panel. a-liwa/theme.css never carried that override -
   its primary button reads the direction's own accent (Liwa red), the same
   value .hero .btn-primary above already resolves to (--accent-fill). This
   file's own black override was the only thing making the two disagree;
   removing it lets the general rule win, matching the prototype exactly. */

.hero .hero-content-copy .btn-ghost {
  color: var(--button-photo-ink);
  border-color: var(--button-photo-fill);
  background: var(--button-photo-fill);
}

.hero .hero-content-copy .btn-ghost:is(:hover, :focus-visible) {
  border-color: var(--button-photo-fill);
  background: var(--button-photo-fill);
}

/* .hero .hero-content-copy .btn-ghost::before {
  background: var(--scrim-control);
} */

/* ---- The closing Contact band ------------------------------------------- */
/* The band keeps its photograph but the flat dark tint (.cta::after, declared
   above at the CTA BAND block) comes off so the photo reads clean. The copy
   block (.cta-inner) sits on the same Brand Black glass surface carrying
   white copy and routing cards, exactly as the hero does. */
.cta-inner {
  background: var(--scrim-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(112%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%);
  border-radius: var(--r, 18px);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  max-width: min(880px, 94%);
  margin-inline: auto;
}

.cta::after {
  background: none;
}

@media (max-width: 640px) {
  #contact.cta > .wrap { width: 100%; }
  #contact .cta-inner {
    width: 100%;
    max-width: none;
    padding: var(--cta-mobile-panel-padding);
  }
  #contact .cta-actions {
    display: grid;
    width: 100%;
    margin-block-start: var(--cta-mobile-heading-gap);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cta-mobile-action-gap);
  }
  #contact .cta-action {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--cta-mobile-action-gap);
    padding: var(--cta-mobile-action-padding);
    height: auto;
    text-align: start;
  }
  #contact .cta-action > span {
    min-width: 0;
    max-width: none;
  }
}

.cta .kicker,
.cta h2 {
  color: #ffffff;
}

.cta p {
  color: rgba(255, 255, 255, .88);
}

/* ---- The first full-image project card ----------------------------------- */
/* The feature card's directional gradient scrim comes off; the card body sits
   on the same Brand Black glass surface so the type/meta/action read
   regardless of what the clean photograph holds. */
.project-card--feature .project-card-img::after {
  background: none;
}

/* The feature card's own corner mark, matched to the figure component's
   full-strength treatment (.split-media::after, sdeira-sections.css /
   docs/quality/figure-component.md) instead of the fainter cropped/offset
   version the shared .project-card-media rule gives every other project
   card - site owner, 28 Aug 2026: this card is meant to carry the mark the
   way it appears everywhere else it is used at full strength, not the
   subtler corner clip. Same lines.svg file, same --photo-mark-width /
   --photo-mark-p43-ratio tokens .split-media uses - no new artwork or
   value. --photo-mark-width is the responsive content-tier token, so this
   card stays visibly marked as its media grows without becoming a full-image
   overlay. Overrides only this
   card's own ::before; the shared rule in sdeira-sections.css
   (.needs-route-media, .project-card-media, and every other card that uses
   it) is untouched. */
.project-card--feature .project-card-img::before {
  inset: auto 0 0 auto;
  inline-size: var(--photo-mark-width);
  aspect-ratio: var(--photo-mark-p43-ratio);
  background: url("../images/patterns/lines.svg?v=d874099296964b63") no-repeat right bottom / contain;
  transform: none;
  transform-origin: 100% 100%;
}

.project-card--feature:is(:hover, :focus-within) .project-card-img::before {
  transform: scale(1.1);
}

/* RTL, 15 Sep 2026: this card's mark is placed bottom-right HERE, not by the
   shared rule, so its mirror has to be written here too - the shared [dir=rtl]
   block at the top of sdeira-sections.css only knows the top-left placement
   every generated page gets, and its translate compensation is the one that
   belongs to that placement. Box to the photograph's bottom-left, artwork
   mirrored in place, origin on the mirrored corner so the hover still grows
   out of it; the 110% at hover is the mirror of this rule's own scale(1.1)
   above (the same derivation as the shared block: with the left edge as the
   pivot, the translate has to grow with the scale or the mark drifts off its
   corner mid-hover). The html prefix is deliberate: it keeps this rule level
   with the shared one's specificity and lets source order (this sheet loads
   last on the two homepages) decide, the same way the shared rule's own
   comment describes. */
html[dir="rtl"] .project-card--feature .project-card-img::before {
  right: auto;
  left: 0;
  transform-origin: 0 100%;
  transform: translateX(100%) scale(-1, 1);
}

html[dir="rtl"] .project-card--feature:is(:hover, :focus-within) .project-card-img::before {
  transform: translateX(110%) scale(-1.1, 1.1);
}

.project-card--feature .project-card-body {
  background: var(--scrim-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(112%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%);
  color: #ffffff;
  padding: clamp(26px, 3.4vw, 44px);
  /* border-radius: var(--r, 18px); */
  max-width: min(560px, 88%);
}

/* .project-card--feature :is(.project-type, h3, p, .project-meta) {
  color: #ffffff;
} */

/* .project-card--feature p {
  color: rgba(255, 255, 255, .88);
} */

.project-card--feature .project-meta {
  border-top-color: rgba(255, 255, 255, .32);
}


#company-laundry .card-chevron.card-chevron {
  position: absolute;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  aspect-ratio: auto;
  max-block-size: none;
}
/* [dir="rtl"] i.row-item-action {
  transform: scaleX(-1);
} */