/* =====================================================================
   AMJAD DEVELOPMENTS — inner pages
   ---------------------------------------------------------------------
   THIS FILE NOW SERVES ONE PAGE, not two. سابقة الأعمال was rebuilt as a
   full-screen film gallery at the client's request — "عايز الصفحه كلها
   فيديوهات بس زي الهشام" — and it lives entirely in css/gallery.css. The
   16:7 `.work-band` that used to sit at the top of it is gone, along with
   the 1.5 MB of video that fed it.

   What stayed here, and moved to المشاريع with it:
     · .page-head     the short page header
     · .vid-bg        the fixed full-page video backdrop
     · .pj-bar        the filters
     · .pg-cta        the closing panel

   THE BACKDROP IS FIXED, and that is the point of it: the client asked for
   the projects to sit in front of video, and a backdrop that stays put while
   cards scroll over it reads as depth rather than as a moving section.

   THE CLIP WAS CHOSEN BY MEASUREMENT, and the measuring found something worth
   recording: the company reel is a fast montage — 46 hard cuts in 126
   seconds, and only two cut-free stretches longer than 5.5s, one of which has
   Arabic titles burned into it. An earlier pass sampled at 2fps, was too
   coarse to see cuts falling between samples, and produced a "steady" loop
   that in fact contained four hard cuts and a visible seam.

   So the loop here is:
     · taken from a verified cut-free run (threshold 0.10 at 6fps)
     · PALINDROMIC — forward then reversed. A loop that jumps from its last
       frame back to its first flickers; a palindrome has no join at all.
     · warmed with colorbalance, not merely desaturated. Their reel is graded
       cool blue-grey and the brand is espresso and beige; dropping saturation
       made it grey, which is not the same thing as warm.
   ===================================================================== */

/* ===================================================== the page header ===
   Short, so the content starts high. A full-height hero belongs on the
   home page; an inner page that makes you scroll before you see anything
   is wasting the visit. */
.page-head{
  position:relative;
  padding:calc(var(--header-h) + clamp(56px,8vw,96px)) 0 clamp(44px,6vw,76px);
  overflow:hidden;
  background:var(--brown-900);
  text-align:center;
}
.page-head .eyebrow{ justify-content:center; }
.page-head h1{
  font-size:clamp(30px,4.6vw,52px);
  color:var(--cream);
  margin-bottom:14px;
}
.page-head .lead{ margin-inline:auto; }
.page-head-inner{ position:relative; z-index:3; }

/* THE FIX THE CLIENT ASKED FOR, and it was a real bug rather than a taste.

   `.page-head` above sets `background:var(--brown-900)` — opaque. On a page
   carrying the fixed video backdrop that slab paints straight over the video,
   so the top third of المشاريع was a flat empty brown rectangle with a title
   floating in it. The video only appeared once you had scrolled past it. That
   is the thing he screenshotted.

   `.on-vid` drops the fill and puts back only what the title actually needs:
   a soft pool of darkness behind the words, sized to the words, so the
   footage runs the full height of the page and the text still measures.

   Measured over the brightest frame of projects.mp4 — cream #ece2d4 on the
   pool plus the .vid-bg scrim reads 9.8:1, beige 6.3:1. Both PASS AA. */
.page-head.on-vid{
  background:transparent;
  padding-block:calc(var(--header-h) + clamp(48px,7vw,86px)) clamp(30px,4.5vw,56px);
}
.page-head.on-vid::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(72% 92% at 50% 46%,
    rgba(14,8,2,.62) 0%, rgba(14,8,2,.40) 54%, rgba(14,8,2,0) 100%);
}

/* --------------------------------------------------------- breadcrumbs ---
   Two links and a slash. On the project page they are the only way back to
   the listing other than the nav, and someone who arrived from a shared
   WhatsApp link has no back button worth pressing. */
.crumbs{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:#a08b71;
  margin-block-end:clamp(20px,2.6vw,30px);
}
.crumbs a{ color:var(--beige); }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ opacity:.5; }

/* ============================================== the fixed video backdrop
   position:fixed, so it does not move while the page scrolls.

   `will-change` is deliberately NOT set: on a fixed full-screen video it
   promotes a layer the size of the viewport and costs more than it saves.
   ==================================================================== */
.vid-bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.vid-bg video, .vid-bg .vid-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* the video arrives on top of the poster and fades in. A hard swap from a
   still to a moving image is read as a glitch. */
.vid-bg video{ opacity:0; transition:opacity .9s var(--ease); }
.vid-bg video.ready{ opacity:1; }
.vid-bg .vid-poster{
  background:center/cover no-repeat;
}
/* The scrim. Two jobs: hold the brand's warmth over footage that is only
   partly warm, and put enough darkness under the cards that their edges
   read. Measured against the worst frame of each loop — see the notes in
   projects.html and portfolio.html. */
.vid-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(20,11,3,.86) 0%,
      rgba(24,14,4,.74) 28%,
      rgba(24,14,4,.78) 72%,
      rgba(20,11,3,.92) 100%),
    linear-gradient(0deg, rgba(74,45,16,.34), rgba(74,45,16,.34));
}
/* everything on a video-backed page sits above the backdrop */
.has-vid-bg .site-header,
.has-vid-bg main,
.has-vid-bg .site-footer{ position:relative; z-index:2; }
/* the footer gets its own solid ground so the backdrop does not show
   through the last band of the page */
.has-vid-bg .site-footer{ background:#150c03; }

/* ========================================================= the toolbar ===
   Filters. Rendered from the projects themselves, so a category only
   appears when something is in it — an empty filter that returns nothing
   is worse than no filter. */
.pj-bar{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-bottom:clamp(26px,4vw,44px);
}
.pj-chip{
  padding:9px 18px;
  font-size:14px;
  color:var(--beige);
  background:rgba(36,21,5,.62);
  border:1px solid var(--line);
  border-radius:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.pj-chip:hover{ color:var(--cream); border-color:var(--line-strong); }
.pj-chip[aria-pressed="true"]{
  color:#2a1806; background:var(--gold); border-color:var(--gold);
}
.pj-count{ font-size:13.5px; color:#a08b71; text-align:center; margin:0 0 26px; }

/* the cards on a video page need a solid fill, not a translucent one:
   over moving footage a see-through card is unreadable */
.vid-page .proj{ background:rgba(40,23,7,.94); }
@supports (backdrop-filter:blur(1px)){
  .vid-page .proj{
    background:rgba(40,23,7,.80);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
            backdrop-filter:blur(14px) saturate(120%);
  }
}

/* The work grid and the numbered stage rail that used to be here are gone
   with the sections that used them — see the note in js/main.js. Their glass
   treatment is still declared in css/glass.css; it costs one unmatched
   selector and means the markup can come back without the styling having to
   be rewritten. */

/* ============================================================== the CTA === */
.pg-cta{
  text-align:center;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  padding:clamp(34px,5vw,58px) clamp(20px,4vw,44px);
  background:rgba(40,23,7,.86);
}
.pg-cta h2{ color:var(--cream); margin-bottom:12px; }
.pg-cta .lead{ margin:0 auto 26px; }
.pg-cta .row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){
  .pg-cta .row{ width:100%; }
  .pg-cta .row .btn{ flex:1 1 100%; }
}

/* =====================================================================
   عن الشركة — about.html
   ===================================================================== */
.ab-statement{
  text-align:center;
  padding:clamp(34px,5vw,64px) clamp(20px,4vw,52px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--brown-800);
}
.ab-mark{ width:min(52vw,460px); height:auto; margin:0 auto clamp(16px,2.4vw,26px); display:block; }
.ab-slogan{
  font-family:"Jost",system-ui,sans-serif;
  font-size:clamp(11px,1.4vw,15px); font-weight:300;
  letter-spacing:.46em; text-transform:uppercase;
  color:var(--gold); margin:0 0 clamp(18px,2.6vw,28px);
}
.ab-line{
  font-size:clamp(16px,2vw,20px); line-height:1.95;
  color:var(--cream); max-width:56ch; margin:0 auto;
}

/* the numbered rail. Two columns so the number is a margin note rather than a
   heading — it is an index, not a title. */
.ab-stages{ display:grid; gap:0; }
.ab-step{
  display:grid; grid-template-columns:84px 1fr; gap:24px;
  padding:clamp(22px,2.8vw,30px) 0;
  border-block-start:1px solid var(--line);
}
.ab-step:last-child{ border-block-end:1px solid var(--line); }
.ab-n{
  font-family:"Jost",system-ui,sans-serif;
  font-size:clamp(28px,3.6vw,44px); font-weight:200; line-height:1;
  color:var(--gold);
}
.ab-txt h3{ color:var(--cream); margin:0 0 8px; font-size:20px; }
.ab-txt p{ color:var(--beige); margin:0; font-size:15.5px; max-width:66ch; line-height:1.9; }
@media (max-width:640px){
  .ab-step{ grid-template-columns:54px 1fr; gap:16px; }
}

/* =====================================================================
   تواصل معنا — contact.html
   ===================================================================== */
.ct-page{ display:grid; gap:clamp(20px,2.8vw,34px); }

/* THE NUMBERS ARE THE PAGE. Someone reaching a developer's contact page in
   Egypt is going to call, so the two numbers are the largest thing on it and
   each one is a real tel: link, sized as a touch target rather than as text. */
.ct-calls{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(12px,1.8vw,20px);
}
.ct-call{
  display:flex; flex-direction:column; gap:6px;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--brown-800);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.ct-call:hover{ border-color:var(--gold); transform:translateY(-3px); }
.ct-call-l{
  font-family:"Jost",system-ui,sans-serif;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
}
.ct-call-n{
  font-size:clamp(20px,2.6vw,27px); color:var(--cream);
  font-weight:500; letter-spacing:.02em;
}
.ct-call-s{ font-size:13px; color:#a08b71; }
.ct-call-wa .ct-call-l{ color:#8fbf7a; }

.ct-two{
  display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(20px,2.8vw,34px); align-items:start;
}
@media (max-width:900px){ .ct-two{ grid-template-columns:1fr; } }

.form-card{
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--brown-800);
}
.form-card h2{ color:var(--cream); margin:0 0 8px; }
.form-card form{ display:grid; gap:14px; margin-block-start:20px; }
.fld{ display:grid; gap:7px; font-size:14px; color:var(--beige); }
.fld .opt{ color:#a08b71; font-size:12.5px; }
.fld input, .fld textarea{
  width:100%; padding:13px 15px;
  font: inherit; font-size:15px;
  color:var(--cream);
  background:rgba(20,11,3,.55);
  border:1px solid var(--line-strong);
  border-radius:10px;
}
.fld input:focus, .fld textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(216,184,144,.14);
}
.fld textarea{ resize:vertical; min-height:96px; }
/* THE STATUS LINE, and the two colours were measured rather than picked.
   On brown-800 #382008:
       #8fbf7a  success   7.18:1  PASS AA
       #e79b86  error     6.84:1  PASS AA
       #d9534f  the obvious "error red" — 3.85:1, FAIL
   The failing one is the line a visitor most needs to read: it is the only
   thing on the page that tells them their lead did not send. A red that
   "looks like an error" and cannot be read is worse than no colour at all. */
.ct-msg{ margin:4px 0 0; font-size:14px; min-height:1.4em; }
.ct-msg.ok{  color:#8fbf7a; }
.ct-msg.bad{ color:#e79b86; }

.ct-side{ display:grid; gap:clamp(14px,2vw,20px); }
.ct-block{
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--brown-800);
}
.ct-block h3{ color:var(--cream); margin:0 0 16px; font-size:18px; }
.ct-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.ct-list li{
  display:grid; gap:4px;
  padding:12px 0; border-block-end:1px solid var(--line);
}
.ct-list li:last-child{ border-block-end:0; padding-block-end:0; }
.ct-list span{ font-size:13px; color:#a08b71; }
.ct-list b{ font-size:15px; color:var(--cream); font-weight:400; word-break:break-word; }
.ct-list a{ color:var(--gold); }

.ct-map{
  display:grid; gap:6px;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  background:var(--brown-700);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.ct-map:hover{ border-color:var(--gold); transform:translateY(-3px); }
.ct-map-t{ font-size:18px; color:var(--cream); }
.ct-map-s{ font-size:13.5px; color:var(--gold); }


/* =====================================================================
   THE ROOM — one photograph behind a whole page
   ---------------------------------------------------------------------
   Used by تواصل (the reception) and عن الشركة (the light shaft). The client
   asked for each image to be the background of the ENTIRE page, not a band at
   the top, so this is a fixed layer the content scrolls over.

   THE FIVE NUMBERS BELOW WERE MEASURED, AND THE FIRST ATTEMPT AT THEM FAILED.
   My instinct was: light scrim on the page, and let the glass panels carry the
   text. Measured against the brightest pixel in each photograph — the lamp
   glow on the reception wall is rgb(252,230,197), the sunlit curtain is
   rgb(214,200,162) — the standard glass panel from css/glass.css (white .07
   over smoke .30) gives BODY COPY 2.44:1 on the reception. A comfortable fail,
   and invisible to look at, because pale text on a photograph always looks
   "fine" until it is measured.

   Three ways out, and only one of them keeps the photograph:
     · raise the page scrim to 0.74   -> beige 4.87, and the photo is mud
     · raise the panel smoke to 0.72  -> beige 5.6, page scrim stays at 0.40
     · put text straight on the photo -> needs a 0.74 LOCAL pool, per heading

   So: the page scrim stays low at 0.40 and the photograph stays visible
   between the panels; the panels on a room page are darker than anywhere else
   on the site; and any text that sits directly on the picture gets its own
   pool. That is how glass over a bright scene actually behaves.

       page scrim 0.40 + panel smoke 0.72
           reception   beige 5.6   ink 4.7    PASS
           light shaft beige 6.0   ink 5.1    PASS
       local pool 0.74 for a heading on the picture
           reception   cream 7.59  gold 5.18  PASS
           light shaft cream 8.65  gold 5.89  PASS
   ===================================================================== */

.room{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--room);
  background-size:cover;
  background-position:var(--room-pos, center center);
  background-repeat:no-repeat;
  /* NOT background-attachment:fixed. A fixed attachment on iOS Safari either
     jumps on scroll or silently falls back to scroll; a position:fixed element
     is the same effect and behaves. */
}
/* the page scrim. Slightly heavier at the very bottom, where the footer is. */
.room::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(16,9,2,.44) 0%,
      rgba(16,9,2,.38) 34%,
      rgba(16,9,2,.40) 66%,
      rgba(16,9,2,.52) 100%),
    linear-gradient(0deg, rgba(74,45,16,.18), rgba(74,45,16,.18));
}
.has-room .site-header,
.has-room main,
.has-room .site-footer{ position:relative; z-index:2; }
.has-room .site-footer{ background:rgba(14,8,2,.86); }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .has-room .site-footer{
    background:rgba(14,8,2,.72);
    -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px);
  }
}

/* ------------------------------------------------- which photograph, and
   WHICH CROP. Three cuts per page, because a phone does not need a smaller
   copy of the desktop framing — it needs a different framing.

   reception  desktop  the full frame, wall and desk
              tablet   cropped inward, so both stay large
              phone    the WALL ONLY. The desk panel's copy lands at ~12 CSS px
                       at phone width and cannot be read, so it leaves frame.
   light shaft desktop a deliberate 16:9 taken from 22% down — keeps her head,
                       the fall of the gown and the full height of the curtains
              tablet   4:3
              phone    the UNCROPPED portrait. The source is 4:5 and a phone
                       viewport is that shape, so the whole picture fits. */
.room-contact{ --room:url("../assets/room-contact.webp");  --room-pos:center 46%; }
.room-about  { --room:url("../assets/room-about.webp");    --room-pos:center 40%; }

/* THE PHONE CUT USED TO START AT 820px AND THAT WAS WRONG FOR TABLETS.
   An iPad in portrait is 768–834 CSS px wide. At an 820px boundary it was
   being served the PHONE crop — for the reception that is the wall on its own,
   with the desk cropped away, on a 1024px-tall screen with plenty of room for
   the whole picture. The tablet band now reaches down to 701px, so:

       >= 1181   desktop cut
       701–1180  tablet cut   (iPad portrait 768/834 AND landscape 1024)
       <= 700    phone cut
   The <link rel="preload"> media queries in contact.html and about.html carry
   these same two numbers. If one moves, both move. */
@media (max-width:1180px){
  .room-contact{ --room:url("../assets/room-contact-t.webp"); }
  .room-about  { --room:url("../assets/room-about-t.webp");   --room-pos:center 38%; }
}
/* THE PHONE CUTS ARE PHONE-SHAPED, and that took a second attempt.

   The first phone cut for the reception was 820x753 — almost square. A phone
   viewport is about 390x844, i.e. 0.46 wide. `cover` on a 1.09 image inside a
   0.46 frame scales to the HEIGHT and then discards 58% of the WIDTH — straight
   through the middle of the logo. Rendered at 390px it showed أمجاد clipped at
   both ends and COMMUNICATION DEPARTMENT cut off. Nothing about the CSS was
   wrong; the asset was the wrong shape.

   A landscape photograph cannot be cover-cropped to a phone screen without
   losing its middle, so the reception's phone cut is COMPOSED: the wall fitted
   to the full width at the top of a 0.46 canvas, the brand brown continuing
   below through a soft join. `cover` then has nothing left to crop.

   The light shaft is already 4:5, so it only needed a TALLER crop (0.56) that
   keeps her whole silhouette and both lit curtains.

   `top center` on the reception, because the composed canvas puts the wall at
   its top on purpose. */
@media (max-width:700px){
  .room-contact{ --room:url("../assets/room-contact-m.webp"); --room-pos:center top; }
  .room-about  { --room:url("../assets/room-about-m.webp");   --room-pos:center 22%; }
}

/* ---------------------------------------------------------- the opening ---
   A quiet band at the top where the photograph is allowed to be nothing but
   itself before the content starts. svh, not vh: on a phone `100vh` is the
   height with the browser chrome HIDDEN, so a vh-sized opening is taller than
   the screen and the first thing a visitor does is scroll past a gap. */
.room-open{
  height:clamp(150px, 30svh, 300px);
}
@media (max-width:700px){
  .room-open{ height:clamp(110px, 22svh, 210px); }
}
@media (max-height:520px) and (orientation:landscape){
  .room-open{ height:70px; }
}

/* ------------------------------------------- a heading ON the photograph
   Its own pool, sized to the text, rather than a page-wide scrim. 0.74 at the
   centre — measured above. */
.room-head{
  position:relative;
  text-align:center;
  padding:clamp(26px,4vw,44px) clamp(18px,4vw,40px);
  margin-block-end:clamp(22px,3vw,36px);
}
.room-head::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* A PLATEAU, not a peak. The first version fell from .74 at the centre to 0
     at the edge, which protects the middle of a centred heading and leaves the
     ENDS of its lines on bare photograph — at 85% radius the alpha was about
     .20 and body copy there measured 2.6:1. It holds .74 out to 78% and fades
     over the last 22%, so the whole text box is covered and only the boundary
     is soft. */
  background:radial-gradient(88% 124% at 50% 50%,
    rgba(14,8,2,.74) 0%, rgba(14,8,2,.74) 62%,
    rgba(14,8,2,.66) 78%, rgba(14,8,2,0) 100%);
}
.room-head > *{ position:relative; z-index:1; }
.room-head .eyebrow{ justify-content:center; }
.room-head h1{
  font-size:clamp(28px,4.4vw,50px); color:var(--cream); margin:0 0 12px;
}
.room-head .lead{ margin-inline:auto; }

/* ------------------------------------------------- the panels on a room ---
   Smoke 0.72 rather than the 0.30 used everywhere else. See the header. */
.has-room .ct-call,
.has-room .form-card,
.has-room .ct-block,
.has-room .ab-statement,
.has-room .ab-step,
.has-room .why-item,
.has-room .proj,
.has-room .pg-cta{
  background-color:rgba(255,255,255,.07);
  background-image:linear-gradient(rgba(28,16,4,.72), rgba(28,16,4,.72));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 24px 54px rgba(10,6,2,.46);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .has-room .ct-call,
  .has-room .form-card,
  .has-room .ct-block,
  .has-room .ab-statement,
  .has-room .ab-step,
  .has-room .why-item,
  .has-room .proj,
  .has-room .pg-cta{
    -webkit-backdrop-filter:blur(26px) saturate(155%);
            backdrop-filter:blur(26px) saturate(155%);
  }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .has-room .ct-call,
  .has-room .form-card,
  .has-room .ct-block,
  .has-room .ab-statement,
  .has-room .ab-step,
  .has-room .why-item,
  .has-room .proj,
  .has-room .pg-cta{ background:rgba(30,17,4,.95); }
}
.has-room .ct-map{ background:rgba(64,38,12,.80); border-color:rgba(216,184,144,.34); }
/* fields stay nearly solid: a caret over a photograph is not a field */
.has-room .fld input, .has-room .fld textarea{
  background:rgba(12,7,2,.80);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* the numbered rail becomes separate sheets on a room page — the hairline
   borders it uses elsewhere disappear over a photograph */
.has-room .ab-stages{ gap:clamp(12px,1.6vw,18px); }
.has-room .ab-step{
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,28px);
  border-block-start:1px solid rgba(255,255,255,.16);
}
.has-room .ab-step:last-child{ border-block-end:1px solid rgba(255,255,255,.16); }

/* عن الشركة carries a deliberately LIGHT band (#why, .on-light). Over a
   photograph a sand-coloured slab is a hole punched in the picture, so on a
   room page the band goes transparent and every colour .on-light set for dark
   text is put back. Listed one by one: drop any of them and that section
   renders brown-on-brown. */
.has-room .section.on-light{ background:transparent; color:var(--cream); }
.has-room .on-light .eyebrow{ color:var(--gold); }
.has-room .on-light .lead{ color:var(--beige); }
.has-room .on-light h2,
.has-room .on-light h3{ color:var(--cream); }
.has-room .on-light .why-item h3{ color:var(--cream); }
.has-room .on-light .why-item p{ color:var(--beige); }
.has-room .on-light .why-ico{ color:var(--gold); border-color:rgba(216,184,144,.34); }
.has-room .on-light .btn-ghost{ color:var(--cream); border-color:rgba(255,255,255,.30); }
.has-room .on-light .btn-ghost:hover{ background:rgba(255,255,255,.10); border-color:var(--gold); }
.has-room .why-item{ padding:clamp(22px,2.8vw,30px); border-radius:var(--radius-lg); }

/* ============================ THE BIT I NEARLY SHIPPED BROKEN ==============
   Turning the page background into a photograph does not only affect panels.
   EVERY piece of bare text on the page is now sitting on that picture, and on
   عن الشركة that is three section headings — «إزاي بنشتغل», «ليه أمجاد»,
   «شغلنا على الأرض» — plus their lead paragraphs and one ghost button.

   Measured over the brightest pixel of the light shaft, rgb(214,200,162),
   through the 0.40 page scrim:
       beige lead paragraph   2.08:1   FAIL
       cream ghost button     3.24:1   FAIL  (needs 4.5 — it is 15px text)
   Both looked completely fine. They were not.

   So a section heading on a room page gets the same pool as .room-head, and a
   ghost button gets a fill. The pool is weaker here (0.62 at centre) because a
   heading is large text and can afford it — and because three heavy pools down
   one page would read as three grey rectangles. */
.has-room .section-head{
  position:relative;
  padding:clamp(18px,2.6vw,28px) clamp(16px,3vw,32px);
  border-radius:var(--radius-lg);
}
.has-room .section-head::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(92% 138% at 50% 50%,
    rgba(14,8,2,.62) 0%, rgba(14,8,2,.62) 64%,
    rgba(14,8,2,.54) 80%, rgba(14,8,2,0) 100%);
}
.has-room .section-head > *{ position:relative; z-index:1; }

/* a ghost button over a photograph needs a body. 0.62 fill puts cream at
   6.4:1 on the worst pixel of either picture. */
.has-room .btn-ghost{
  background:rgba(18,10,2,.62);
  border-color:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.has-room .btn-ghost:hover{
  background:rgba(18,10,2,.78); border-color:var(--gold);
}

/* the count line and the crumbs, same reason, smaller cure */
.has-room .pj-count,
.has-room .crumbs{ text-shadow:0 1px 10px rgba(10,6,2,.85); }