/* Concept -> Reality page (transformation.html). Loaded after project.css + site.css.
   Each pair: 3D concept and delivered photo side by side at the same height (widths follow each image's shape, set inline),
   never taller than 85% of the screen; stacked on phones. Labels: black on a cream chip (BRAND-RULES). */
.cr-intro { max-width:760px; margin:0 auto; padding:144px 24px 64px; text-align:center; }
.cr-intro h1 { font-size:56px; line-height:1.05; margin-bottom:18px; }
.cr-intro p { font-size:18px; line-height:1.6; opacity:.85; }

.cr-project { max-width:1200px; margin:0 auto 96px; padding:0 40px; }
.cr-head { margin-bottom:28px; }
.cr-head h2 { font-size:40px; margin-bottom:6px; }
.cr-note { margin-top:10px; opacity:.8; }

.cr-pair { margin:0 0 56px; }
.cr-row { display:flex; gap:12px; align-items:flex-start; max-width:calc(85vh * var(--sum) + 12px); margin:0 auto; }
.cr-item { position:relative; flex:1 1 0; min-width:0; background:#000; }
.cr-item img { width:100%; height:auto; display:block; }
.cr-tag { 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"] .cr-tag { left:auto; right:12px; letter-spacing:0; font-size:13px; }
.cr-pair figcaption { font-size:22px; margin-top:12px; text-align:center; }
.cr-pair.hero figcaption { font-size:28px; }
.cr-link { margin-top:-24px; text-align:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.cr-link a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--camel); padding-bottom:3px; }
.cr-link a:hover { color:var(--brown); }
[dir="rtl"] .cr-link { letter-spacing:0; font-size:14px; }

@media (max-width:760px) {
  .cr-intro { padding:112px 16px 40px; } .cr-intro h1 { font-size:38px; } .cr-intro p { font-size:16px; }
  .cr-project { padding:0 16px; margin-bottom:72px; } .cr-head h2 { font-size:32px; }
  .cr-row { flex-direction:column; gap:8px; max-width:none; }
  .cr-item { flex:none !important; width:100%; }
  .cr-pair { margin-bottom:40px; } .cr-pair figcaption { font-size:20px; }
}

/* Phones: tap a pair to open it full screen (transformation.js, Amr 2026-09-29) */
.cr-expand { display:none; }
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .cr-pair { position:relative; cursor:pointer; }
  .cr-expand { display:flex; align-items:center; gap:6px; margin:10px auto 0; background:none; border:1px solid rgba(0,0,0,.3); border-radius:999px;
               padding:8px 14px; font:inherit; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); }
  .cr-expand::before { content:"⤢"; font-size:15px; letter-spacing:0; }
  [dir="rtl"] .cr-expand { letter-spacing:0; font-size:13px; }
}
.crv { position:fixed; inset:0; z-index:60; background:#000; color:var(--cream); display:flex; flex-direction:column;
       opacity:0; pointer-events:none; transition:opacity .25s; }
.crv.is-open { opacity:1; pointer-events:auto; }
html.crv-lock, html.crv-lock body { overflow:hidden; }
.crv-top { display:flex; justify-content:space-between; align-items:center; height:56px; padding:0 16px; flex:none; }
.crv-count { font-size:12px; letter-spacing:.2em; opacity:.8; }
.crv-close { background:none; border:1px solid rgba(234,230,223,.5); border-radius:999px; color:var(--cream); font:inherit; font-size:12px;
             letter-spacing:.2em; text-transform:uppercase; padding:8px 16px; }
.crv-track { flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; }
.crv-track::-webkit-scrollbar { display:none; }
.crv-slide { position:relative; flex:0 0 100%; scroll-snap-align:center; display:grid; place-items:center; }
.crv-slide picture { display:contents; }
.crv-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.crv-slide .cr-tag { top:12px; }
.crv-tabs { display:flex; justify-content:center; gap:8px; padding:14px 16px 0; flex:none; }
.crv-tabs button { background:none; border:1px solid rgba(234,230,223,.4); border-radius:999px; color:var(--cream); font:inherit; font-size:11px;
                   letter-spacing:.15em; text-transform:uppercase; padding:7px 14px; opacity:.7; }
.crv-tabs button.on { background:var(--cream); color:#000; border-color:var(--cream); opacity:1; }
.crv-cap { text-align:center; font-size:20px; padding:10px 16px 0; flex:none; }
.crv-hint { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.6); color:var(--cream); padding:10px 18px;
            border-radius:999px; font-size:12px; letter-spacing:.15em; text-transform:uppercase; opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap; }
.crv.hinting .crv-hint { opacity:1; }
.crv-nav { display:flex; justify-content:space-between; gap:12px; padding:14px 16px calc(16px + env(safe-area-inset-bottom)); flex:none; }
.crv-nav button { flex:1; background:none; border:1px solid rgba(234,230,223,.4); color:var(--cream); font:inherit; font-size:12px; letter-spacing:.2em;
                  text-transform:uppercase; padding:14px 10px; }
.crv-nav button:disabled { opacity:.3; }
.crv.seen .crv-next { background:var(--brick); border-color:var(--brick); color:#fff; }   /* seen both: nudge to the next comparison */
[dir="rtl"] .crv-count, [dir="rtl"] .crv-close, [dir="rtl"] .crv-tabs button, [dir="rtl"] .crv-hint, [dir="rtl"] .crv-nav button { letter-spacing:0; font-size:13px; }
@media (orientation:landscape) and (max-height:500px) { .crv-cap, .crv-tabs { display:none; } .crv-top { height:44px; } .crv-nav { padding-top:8px; } .crv-nav button { padding:8px; } }