/* Shared styles for the 5 project pages (twin-villas.html, polysh.html, s-roof.html, sane.html, m-villa.html) */
  :root { --cream:#eae6df; --beige:#dcd5c3; --camel:#ba8867; --brick:#9b450b; --brown:#773805; --ink:#000000; /* black (was off-palette dark green #0f1f1b) */
          --bg:#dcd5c3; /* page background: light beige (was cream #eae6df) */
          /* Fonts from Amanda's brand manual, via Adobe Fonts web project "IKDU website" */
          --serif:"benton-modern-display", Georgia, serif;   /* headings */
          --sans:"cofo-sans-variable", Arial, sans-serif;     /* body + sub-headings */
          --arabic:"ibm-plex-arabic", Tahoma, sans-serif; }  /* Arabic */
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; }
  :lang(ar) { font-family:var(--arabic); letter-spacing:0 !important; text-transform:none !important; }
  .serif { font-family:var(--serif); font-weight:400; }
  .label { font-size:12px; letter-spacing:.25em; text-transform:uppercase; }

  /* Same header as the home page, starting in the small (emblem) state */
  header { position:fixed; inset:0 0 auto 0; z-index:10; height:64px; background:var(--bg);
           display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 40px; }
  nav { display:flex; gap:48px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
  nav a { color:var(--ink); text-decoration:none; opacity:.75; }
  nav a:hover, nav a.on { opacity:1; color:var(--brown); }   /* brown: 6.1:1 on light beige; .on = the page you're on */
  nav.right { justify-content:flex-end; }
  .logo img { height:40px; display:block; }

  /* Cover photo */
  .cover { margin-top:64px; height:calc(100vh - 64px); position:relative; overflow:hidden; background:#000; }
  .cover img { width:100%; height:100%; object-fit:cover; animation:settle 3s ease-out forwards; }
  @keyframes settle { from { transform:scale(1.08) } to { transform:scale(1) } }
  .cover::after { content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(transparent, rgba(0,0,0,.5)); }
  .cover .title { position:absolute; z-index:2; left:40px; bottom:40px; color:#fff; }
  .cover h1 { font-size:72px; line-height:1; margin-bottom:10px; }

  /* Facts + intro */
  .facts { display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); gap:24px; max-width:1100px; margin:72px auto 0; padding:0 40px; }
  .facts div { border-top:1px solid var(--camel); padding-top:14px; }
  .facts b { display:block; font-weight:400; font-size:17px; margin-top:8px; }
  .intro { max-width:760px; margin:56px auto 88px; padding:0 40px; font-size:22px; line-height:1.6; }

  /* Before / after slider */
  .ba-wrap { max-width:1200px; margin:0 auto 96px; padding:0 40px; }
  .ba-wrap h2 { font-size:40px; margin-bottom:8px; }
  .ba-wrap > p { opacity:.7; margin-bottom:24px; }
  .ba { position:relative; aspect-ratio:var(--ar, 3/2); max-width:calc(85vh * var(--arn, 1.5)); margin-left:auto; margin-right:auto; overflow:hidden; user-select:none; touch-action:pan-y; cursor:ew-resize; margin-bottom:24px; }
  .ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .ba .before { -webkit-clip-path:inset(0 0 0 var(--x, 50%)); clip-path:inset(0 0 0 var(--x, 50%)); }   /* EN: before sits RIGHT of the line, finished on the left (AR mirrored in rtl.css) */
  .ba .line { position:absolute; top:0; bottom:0; left:var(--x, 50%); width:2px; background:#fff; transform:translateX(-1px); }
  .ba .knob { position:absolute; top:50%; left:var(--x, 50%); width:48px; height:48px; border-radius:50%; background:#fff;
              transform:translate(-50%,-50%); display:grid; place-items:center; font-size:14px; color:var(--ink); box-shadow:0 2px 12px rgba(0,0,0,.25); }
  .ba .tag { position:absolute; top:16px; color:#fff; background:rgba(0,0,0,.45); padding:6px 10px; }
  .ba .tag.b { right:16px; } .ba .tag.a { left:16px; }
  /* Handle: white pill with "‹ DRAG ›" written inside (replaces the separate "Drag to compare" hint); stays fully visible at the edges */
  .ba .knob { left:clamp(54px, var(--x, 50%), calc(100% - 54px)); width:auto; min-width:100px; height:44px; padding:0 14px; border-radius:999px; gap:8px; direction:ltr;
              display:flex !important; align-items:center; justify-content:center; cursor:grab; white-space:nowrap;
              font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
  .ba .knob::before { content:"‹"; font-size:18px; letter-spacing:0; } .ba .knob::after { content:"›"; font-size:18px; letter-spacing:0; }
  .ba .knob:lang(ar) { letter-spacing:0; font-size:14px; }
  .ba:active .knob { cursor:grabbing; }
  .ba:focus-visible { outline:3px solid var(--brick); outline-offset:3px; }

  /* 3-step story: Before · Building · After, plays by itself, tap a step to jump */
  .steps { margin-bottom:24px; }
  .steps .frame { position:relative; aspect-ratio:3/2; overflow:hidden; background:#000; }
  .steps .frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }   /* faster fade (was 1.2 s) */
  .steps .frame img.on { opacity:1; }
  .steps .tabs { display:grid; grid-template-columns:repeat(3, 1fr); }
  .steps .tabs button { background:none; border:0; padding:14px 0 0; text-align:left;
                        font:inherit; font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--ink); opacity:.5; cursor:pointer; position:relative; }
  .steps .tabs button.on { opacity:1; }
  /* Timer (Amr, 2026-09-27): same as the home page, small white lines on the photo, bottom-centre; the current one fills over its 2.5 s */
  .steps .frame::after { content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(transparent, rgba(0,0,0,.3)); pointer-events:none; z-index:1; }
  .steps .dots { position:absolute; z-index:2; left:50%; bottom:24px; transform:translateX(-50%); display:flex; gap:10px; }
  .steps .dots span { width:40px; height:3px; background:rgba(255,255,255,.4); overflow:hidden; }
  .steps .dots span::after { content:""; display:block; height:100%; width:0; background:#fff; }
  .steps .dots span.on::after { animation:fill var(--dur, 2.5s) linear forwards; }   /* --dur set by project.js: 1.5 s first, then 2.5 s */
  [dir="rtl"] .steps .dots span::after { margin-left:auto; }
  @keyframes fill { to { width:100% } }

  /* Gallery: rhythm of one wide photo, then two side by side */
  .gallery { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 40px; }
  .gallery figure { overflow:hidden; align-self:start; }
  .gallery figure.wide { grid-column:1 / -1; }
  .gallery figure.solo { grid-column:1 / -1; justify-self:center; }
  .gallery figure.solo { width:min(100%, calc(85vh * var(--r, .75))); }   /* desktop: capped at --fit (below) */
  .gallery figure.solo img { width:100%; }
  .gallery img { width:100%; height:auto; display:block; transform:scale(1.08); transition:transform 1.8s ease; }
  .gallery figure.in img { transform:scale(1); }
  /* duo: two photos side by side at the same height, uncropped (widths set from each photo's shape in project.js) */
  .gallery .duo { grid-column:1 / -1; display:flex; gap:16px; align-items:flex-start; width:100%; justify-self:center; }
  .gallery .duo figure { flex:1 1 0; min-width:0; }
  .gallery figure.crop picture { display:block; height:100%; }
  .gallery figure.crop img { height:100%; object-fit:cover; object-position:center top; }   /* pairs end together: crop the bottom of the taller photo */

  /* Contact + next project */
  .next { display:block; position:relative; height:60vh; overflow:hidden; color:#fff; text-decoration:none; }
  .next img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; filter:brightness(.7); }
  .next:hover img { transform:scale(1.04); }
  .next div { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
  .next h3 { font-size:56px; margin-top:10px; }

  @media (max-width:760px) {
    header { padding:0 16px; grid-template-columns:72px 1fr 72px; } nav { display:none; } .logo { grid-column:2; justify-self:center; }
    .cover h1 { font-size:44px; } .cover .title { left:16px; bottom:24px; }
    .facts { grid-template-columns:1fr 1fr; padding:0 16px; margin-top:48px; }
    .intro { padding:0 16px; font-size:18px; margin:40px auto 64px; }
    .ba-wrap { padding:0 16px; }
    .gallery { grid-template-columns:1fr; gap:10px; padding:0 16px; }
    .gallery .duo { flex-direction:column; gap:10px; max-width:none !important; } .gallery .duo figure { flex:none !important; width:100%; }   /* phones: stacked */

    .next h3 { font-size:38px; }
  }
  /* In detail: two sliders side by side (phones: one column) */
  .detail-row.two { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  @media (max-width:760px) { .detail-row.two { grid-template-columns:1fr; gap:0; } }
  .ba-cap { text-align:center; font-size:12px; letter-spacing:.25em; text-transform:uppercase; margin:-10px 0 32px; opacity:.8; }

  /* "3D concept" label on any render shown on a project page; link to the Concept -> Reality page (2026-09-29) */
  .gallery figure { position:relative; }
  .chip3d { position:absolute; top:12px; left:12px; background:var(--cream); color:#000; font-size:11px; letter-spacing:.15em; text-transform:uppercase; padding:6px 10px; line-height:1; }
  [dir="rtl"] .chip3d { left:auto; right:12px; letter-spacing:0; font-size:13px; }
  .concept-link { max-width:760px; margin:-56px auto 72px; padding:0 40px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
  .concept-link a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--camel); padding-bottom:3px; }
  .concept-link a:hover { color:var(--brown); }
  [dir="rtl"] .concept-link { letter-spacing:0; font-size:15px; }
  @media (max-width:760px) { .concept-link { padding:0 16px; margin:-40px auto 56px; } }

  /* Every photo fits the screen below the header (Amr, 2026-09-29): wide photos, tall pairs, duos and the 3-step story
     are capped at the visible height; they get narrower and stay centred, nothing is cropped. Phones unchanged.
     --r (width ÷ height) is set per pair / story by project.js. */
  :root { --fit:calc(100vh - 96px); }   /* screen minus the 64 px header and a little air */
  @media (min-width:761px) {
    /* width from the photo's shape (--r, set by project.js from photos.json), so the space is right before the photo loads */
    .gallery figure.wide, .gallery figure.solo { justify-self:center; width:min(100%, calc(var(--fit) * var(--r, 1.5))); }
    .gallery figure.wide img, .gallery figure.solo img { width:100%; max-height:none; }
    .gallery figure.pair { width:100%; max-width:calc(var(--fit) * var(--r)); }
    .gallery figure.pair.first { justify-self:end; } .gallery figure.pair.second { justify-self:start; }   /* the two meet in the middle (also in Arabic) */
    .steps { max-width:calc((var(--fit) - 40px) * var(--r, 1.5)); margin-left:auto; margin-right:auto; }   /* 40 px = the step names under the photo */
  }

  /* 3+ photos side by side (e.g. Polysh massage room): on phones a swipeable row at one height, next photo peeking,
     dots below, instead of three tall photos stacked (Amr, 2026-09-29). Laptops unchanged. */
  .swipe-dots { display:none; }
  @media (max-width:760px) {
    .gallery .duo.swipe { flex-direction:row; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
                          margin:0 -16px; padding:0 16px; width:calc(100% + 32px); min-width:0; scroll-padding:0 16px; }
    .gallery { grid-template-columns:minmax(0, 1fr); }   /* the row must not widen the page */
    .gallery .duo.swipe::-webkit-scrollbar { display:none; }
    .gallery .duo.swipe figure { flex:0 0 auto !important; width:auto; height:min(42vh, 330px); scroll-snap-align:center; }
    .gallery .duo.swipe figure picture { display:block; height:100%; }
    .gallery .duo.swipe figure img { height:100%; width:auto; max-width:none; }
    .swipe-dots { display:flex; grid-column:1 / -1; justify-content:center; gap:8px; margin:-2px 0 6px; }
    .swipe-dots span { width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.25; transition:opacity .2s; }
    .swipe-dots span.on { opacity:.8; }
  }

  /* Concept -> Reality picture card under the intro (Polysh, S-Roof, L-Villa; Amr 2026-09-30: the small text link was missed) */
  .concept-card { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; max-width:760px; margin:-48px auto 80px; padding:18px;
                  background:var(--cream); color:var(--ink); text-decoration:none; }
  .cc-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:260px; }
  .cc-img { position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--beige); }
  .cc-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
  .concept-card:hover .cc-img img { transform:scale(1.05); }
  .cc-img em { position:absolute; left:6px; top:6px; background:var(--cream); font-style:normal; font-size:9px; letter-spacing:.12em; text-transform:uppercase; padding:4px 6px; line-height:1; }
  [dir="rtl"] .cc-img em { left:auto; right:6px; letter-spacing:0; font-size:11px; }
  .cc-text { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .cc-text b { font-weight:400; font-size:28px; line-height:1.1; }
  .cc-text > span:not(.cc-btn) { opacity:.8; line-height:1.5; }
  .cc-btn { margin-top:6px; padding:13px 22px; border-radius:999px; background:var(--brick); color:#fff; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
  .concept-card:hover .cc-btn { filter:brightness(1.1); }
  [dir="rtl"] .cc-btn { letter-spacing:0; font-size:15px; }
  @media (max-width:760px) {
    .concept-card { grid-template-columns:1fr; gap:16px; margin:-32px 16px 56px; }
    .cc-pair { width:100%; } .cc-text b { font-size:24px; } .cc-btn { align-self:stretch; text-align:center; }
  }

  /* Credits line under the description (2026-10-25) */
  .credit { max-width:760px; margin:-64px auto 72px; padding:0 40px; font-size:13px; letter-spacing:.06em; opacity:.75; }
  [dir="rtl"] .credit { letter-spacing:0; font-size:15px; }
  @media (max-width:760px) { .credit { padding:0 16px; margin:-48px auto 56px; } }