/* PETROCOWAR client revision — 2026-10-13 */

/* ---------- theme ------------------------------------------------------- */
html[data-theme="light"] {
  --ink: #fbfbfb;
  --ink-lift: #f1f1f1;
  --paper: #0a0a0a;
  --muted: #5f5f5f;
  --hair: rgba(10,10,10,.25);
  --hair-soft: rgba(10,10,10,.12);
  color-scheme: light;
}
html[data-theme="light"], html[data-theme="light"] body { background:#fbfbfb; color:#0a0a0a; }
html[data-theme="light"] .site-head { background:#fbfbfb; }
html[data-theme="light"] .mark > img { filter: invert(1); }
html[data-theme="light"] .mark:hover > img { filter:none; }
html[data-theme="light"] .drawer { background:rgba(251,251,251,.97); }
html[data-theme="light"] .drawer__close { color:#0a0a0a; }
html[data-theme="light"] .hero__wash,
html[data-theme="light"] .mast__wash,
html[data-theme="light"] .pmast__wash,
html[data-theme="light"] .testimonials,
html[data-theme="light"] .testimonial { color:#fbfbfb; }
html[data-theme="light"] .hero__wash .key--muted,
html[data-theme="light"] .mast__wash .key--muted,
html[data-theme="light"] .pmast__wash .key--muted,
html[data-theme="light"] .testimonials .key--muted { color:rgba(251,251,251,.72); }
html[data-theme="light"] .pmast--sketch { background:#eee; }

/* ---------- header controls -------------------------------------------- */
.site-tools {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:.8rem;
  direction:ltr;
  flex:none;
}
.lang-switch { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.78rem; letter-spacing:.05em; }
.lang-switch button,
.theme-toggle {
  appearance:none; border:0; background:transparent; color:inherit; cursor:pointer; padding:.35rem .18rem;
}
.lang-switch button[aria-pressed="true"] { color:var(--brand); }
.lang-switch button:hover { color:var(--paper); }
.theme-toggle {
  width:2rem; height:2rem; border:1px solid var(--hair); border-radius:50%; display:grid; place-items:center;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.theme-toggle:hover { background:var(--brand); color:var(--ink); border-color:var(--brand); }
.theme-toggle svg { width:1.05rem; height:1.05rem; grid-area:1/1; }
.theme-toggle__sun { display:none; }
html[data-theme="light"] .theme-toggle__moon { display:none; }
html[data-theme="light"] .theme-toggle__sun { display:block; }

html[dir="ltr"] body { text-align:left; }
html[dir="ltr"] .body-text { text-align:left; text-justify:auto; }
html[dir="ltr"] .site-head { direction:ltr; }
html[dir="ltr"] .mark { order:3; }
html[dir="ltr"] .site-nav { order:2; direction:ltr; }
html[dir="ltr"] .site-tools { order:1; margin-inline-end:auto; margin-inline-start:0; }
html[dir="ltr"] .site-head__burger { order:0; }
html[dir="ltr"] .pmast__back { align-self:flex-start; }
html[dir="ltr"] .pmast__foot,
html[dir="ltr"] .mast__wash,
html[dir="ltr"] .say,
html[dir="ltr"] .pspec__head,
html[dir="ltr"] .testimonials__inner { text-align:left; }

@media (max-width:859px) {
  .site-head { gap:.7rem; }
  .site-tools { margin-inline-start:auto; gap:.45rem; }
  .lang-switch { font-size:.68rem; gap:.2rem; }
  .theme-toggle { width:1.85rem; height:1.85rem; }
  html[dir="ltr"] .mark { order:3; }
  html[dir="ltr"] .site-tools { order:2; margin-inline-start:auto; margin-inline-end:0; }
  html[dir="ltr"] .site-head__burger { order:1; margin-inline-start:0; }
}
@media (max-width:480px) {
  .lang-switch span { display:none; }
  .lang-switch { gap:.1rem; }
  .lang-switch button { font-size:.63rem; }
}

/* ---------- homepage collage: colour at rest, richer on hover ---------- */
.collage__cell img { filter:saturate(.52) contrast(1.015) !important; }
.collage__cell:hover img,
.collage__cell:focus-within img { filter:saturate(1.08) contrast(1.02) !important; }

/* ---------- projects ---------------------------------------------------- */
.wall .tile__tag { display:none; }
.wall .tile__media { filter:saturate(.56) contrast(1.015); }
.wall .tile:hover .tile__media,
.wall .tile:focus-visible .tile__media { filter:saturate(1.08) contrast(1.025); }
.pmast__line { max-width:72ch; }
@media (min-width:900px) { .pmast__line { white-space:nowrap; } }
.pmast--sketch { background:#101010; }
/* Client fix 2026-10-21: under-construction hero images should fill the full
   masthead width like completed projects, without the side black gutters. */
.pmast--sketch .pmast__media { object-fit:cover; object-position:center; background:inherit; }
.pmast--sketch .pmast__wash {
  background:linear-gradient(to bottom, rgba(10,10,10,.34), rgba(10,10,10,.16) 42%, rgba(10,10,10,.78));
}

/* ---------- tighter services + process --------------------------------- */
#services.band--pad { padding-block:clamp(2.3rem,4vw,3.7rem) clamp(1rem,2vw,1.8rem); }
#services .say { padding-block:0 .75rem; }
#services .svc__row { padding-block:clamp(.7rem,1.35vw,1.1rem); }
#services .svc__desc { line-height:1.75; }
#how.band--pad { padding-block:clamp(1rem,2vw,1.7rem) clamp(2.2rem,4vw,3.5rem); }
#how .say { padding-block:0 .8rem; }
#how .steps { margin-block-start:.4rem; }
#how .steps__cell { padding-block:clamp(.8rem,1.5vw,1.2rem); }

/* ---------- resident testimonials -------------------------------------- */
.testimonials {
  position:relative;
  min-height:clamp(620px,82svh,900px);
  margin:0 var(--frame) var(--frame);
  overflow:hidden;
  display:flex;
  align-items:center;
  color:#fbfbfb;
}
.testimonials__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.testimonials__wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.7) 45%,rgba(10,10,10,.36) 100%); }
.testimonials__inner { position:relative; z-index:2; width:100%; padding:clamp(3rem,7vw,7rem) var(--gut); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:clamp(2rem,5vw,6rem); align-items:center; }
.testimonials__head { align-self:start; order:2; }
.testimonials__head .h1 { margin-block-end:.75rem; }
.testimonial { order:1; position:relative; min-height:310px; border:1px solid rgba(251,251,251,.3); background:rgba(10,10,10,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:clamp(2rem,4vw,3.5rem) clamp(3.4rem,5vw,5rem); display:grid; align-items:center; }
.testimonial__track { position:relative; min-height:205px; display:grid; align-items:center; }
.testimonial__item { grid-area:1/1; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity 450ms var(--ease-hover),transform 450ms var(--ease-hover); text-align:center; }
.testimonial__item.is-active { opacity:1; transform:none; pointer-events:auto; }
.testimonial__project { display:block; color:var(--brand); font-size:var(--fs-key); margin-block-end:.75rem; }
.testimonial blockquote { margin:0 auto 1rem; max-width:64ch; font-family:'Lahzeh',sans-serif; font-weight:500; font-size:clamp(1.12rem,1.8vw,1.65rem); line-height:1.9; }
.testimonial__who { color:rgba(251,251,251,.66); font-size:var(--fs-key); }
.testimonial__nav { position:absolute; top:50%; translate:0 -50%; width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid rgba(251,251,251,.4); background:transparent; color:#fbfbfb; cursor:pointer; z-index:3; font-size:1.5rem; line-height:1; }
.testimonial__prev { right:1rem; }
.testimonial__next { left:1rem; }
.testimonial__nav:hover { background:var(--brand); border-color:var(--brand); color:#0a0a0a; }
.testimonial__dots { position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); display:flex; gap:.42rem; }
.testimonial__dot { width:6px; height:6px; border-radius:50%; background:rgba(251,251,251,.42); }
.testimonial__dot.is-active { background:var(--brand); }
@media (max-width:859px) {
  .testimonials { min-height:720px; }
  .testimonials__wash { background:rgba(10,10,10,.7); }
  .testimonials__inner { grid-template-columns:1fr; gap:1.5rem; }
  .testimonials__head { order:1; }
  .testimonial { order:2; padding-inline:3rem; min-height:360px; }
  .testimonial__track { min-height:255px; }
}

/* Keep the final owner/contact block exactly as the closing action. */
#call { border-block-start:1px solid var(--hair-soft); }

/* ---------- catalogue flipbook ----------------------------------------- */
.catalog-modal { position:fixed; inset:0; z-index:300; display:none; background:rgba(0,0,0,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.catalog-modal[data-open="true"] { display:grid; grid-template-rows:auto 1fr; }
.catalog-modal__bar { min-height:64px; padding:.7rem clamp(1rem,2vw,2rem); display:flex; align-items:center; gap:.8rem; color:#fbfbfb; border-bottom:1px solid rgba(255,255,255,.18); }
.catalog-modal__title { margin-inline-end:auto; font-weight:500; }
.catalog-modal__btn,.catalog-modal__download { border:1px solid rgba(255,255,255,.28); color:#fbfbfb; background:transparent; padding:.45rem .8rem; cursor:pointer; font-size:.85rem; }
.catalog-modal__btn:hover,.catalog-modal__download:hover { background:var(--brand); color:#0a0a0a; border-color:var(--brand); }
.catalog-book { position:relative; overflow:hidden; display:grid; place-items:center; padding:clamp(1rem,2.5vw,2rem); }
.catalog-spread { height:min(82vh,900px); max-width:min(94vw,1320px); width:100%; display:flex; direction:rtl; justify-content:center; align-items:center; gap:clamp(5px,.7vw,10px); perspective:1800px; }
.catalog-page { height:100%; max-width:49%; object-fit:contain; background:#fff; box-shadow:0 12px 44px rgba(0,0,0,.45); cursor:pointer; transform-origin:right center; animation:catalogIn 360ms var(--ease-hover); }
.catalog-page--cover { max-width:min(70%,620px); }
@keyframes catalogIn { from{opacity:.2;transform:rotateY(-8deg) translateX(14px)} to{opacity:1;transform:none} }
.catalog-book__nav { position:absolute; top:50%; translate:0 -50%; width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(10,10,10,.55); color:#fff; cursor:pointer; font-size:1.6rem; z-index:2; }
.catalog-book__prev { right:1rem; }.catalog-book__next { left:1rem; }
.catalog-book__counter { position:absolute; bottom:.4rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.72); font-size:.78rem; }
@media (max-width:700px) {
  .catalog-spread { height:76vh; }
  .catalog-page { max-width:92%; display:none; }
  .catalog-page:first-child { display:block; }
  .catalog-modal__title { display:none; }
}

/* ---------- Zanbaq page specific adjustments --------------------------- */
.page-zanbaq .pmast--sketch { background:#ffffff; }
.page-zanbaq .pspec {
  background:#fbfbfb;
  color:#0a0a0a;
}
.page-zanbaq .pspec .h1,
.page-zanbaq .pspec__row dd,
.page-zanbaq .pspec__say { color:#0a0a0a; }
.page-zanbaq .pspec__row dt { color:#5f5f5f; }
.page-zanbaq .pspec__head,
.page-zanbaq .pspec__row { border-color:rgba(10,10,10,.12); }

/* ========================================================================
   FINAL CLIENT PASS — 2026-10-21
   ======================================================================== */

/* --- Header: language-aware physical layout ----------------------------- */
.site-head { direction: inherit; gap: clamp(.85rem,1.8vw,2.2rem); }
.site-nav { margin-inline-start:0; }
.site-tools { margin-inline-start:auto !important; margin-inline-end:0 !important; order:initial !important; }
html[dir="ltr"] .mark,
html[dir="ltr"] .site-nav,
html[dir="ltr"] .site-tools,
html[dir="rtl"] .mark,
html[dir="rtl"] .site-nav,
html[dir="rtl"] .site-tools { order:initial !important; }
html[dir="ltr"] .site-nav { direction:ltr; }
html[dir="rtl"] .site-nav { direction:rtl; }
.cta__icon { display:none !important; }
.call-tool {
  width:2rem; height:2rem; flex:none; border:1px solid var(--hair); border-radius:50%;
  display:grid; place-items:center; color:var(--muted);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.call-tool svg { width:1.02rem; height:1.02rem; }
.call-tool:hover { background:var(--brand); color:var(--ink); border-color:var(--brand); }
@media (max-width:859px){
  .site-nav{display:none;}
  .site-tools{margin-inline-start:auto !important;}
  .call-tool,.theme-toggle{width:1.85rem;height:1.85rem;}
}

/* --- Correct logo in light mode: black + original turquoise ------------- */
html[data-theme="light"] .mark > img,
html[data-theme="light"] .site-foot__mark > img {
  content:url('../img/logo-mark-light.webp');
  filter:none !important;
}
html[data-theme="light"] .mark:hover > img,
html[data-theme="light"] .site-foot__mark:hover > img { filter:none !important; opacity:.78; }

/* --- Light mode: all photographic washes become light, text becomes ink -- */
html[data-theme="light"] .hero__wash,
html[data-theme="light"] .mast__wash,
html[data-theme="light"] .pmast__wash,
html[data-theme="light"] .project-feature__wash {
  color:#0a0a0a !important;
  background:linear-gradient(to bottom,rgba(255,255,255,.78) 0%,rgba(255,255,255,.46) 42%,rgba(255,255,255,.90) 100%) !important;
}
html[data-theme="light"] .hero__wash .key--muted,
html[data-theme="light"] .mast__wash .key--muted,
html[data-theme="light"] .pmast__wash .key--muted,
html[data-theme="light"] .project-feature__wash .key--muted { color:rgba(10,10,10,.66) !important; }
html[data-theme="light"] .hero__line,
html[data-theme="light"] .hero__stat,
html[data-theme="light"] .pmast__title,
html[data-theme="light"] .pmast__line,
html[data-theme="light"] .pmast__spec,
html[data-theme="light"] .mast__title,
html[data-theme="light"] .mast__lead { color:#0a0a0a !important; }
html[data-theme="light"] .tile__wash {
  background:linear-gradient(to top,rgba(255,255,255,.90) 0%,rgba(255,255,255,.52) 44%,rgba(255,255,255,.16) 76%,rgba(255,255,255,0) 100%) !important;
}
html[data-theme="light"] .tile__body,
html[data-theme="light"] .tile__title,
html[data-theme="light"] .tile__desc { color:#0a0a0a !important; }
html[data-theme="light"] .person__wash {
  background:linear-gradient(to top,rgba(255,255,255,.97) 0%,rgba(255,255,255,.80) 24%,rgba(255,255,255,.46) 48%,rgba(255,255,255,.14) 70%,rgba(255,255,255,0) 90%) !important;
}
html[data-theme="light"] .person__name { color:#0a0a0a !important; }
html[data-theme="light"] .person__role { color:#148f8a; }

/* Contact page glass is genuinely light in Light mode. */
html[data-theme="light"] .page-contact .glass,
html[data-theme="light"] .page-contact .contact-panel {
  background:rgba(255,255,255,.84) !important;
  color:#0a0a0a !important;
  border-color:rgba(10,10,10,.18) !important;
}
html[data-theme="light"] .page-contact .fold__head:hover { background:rgba(255,255,255,.70) !important; }
html[data-theme="light"] .page-contact .fold[data-open='true'] .fold__head { background:rgba(255,255,255,.88) !important; }
html[data-theme="light"] .page-contact .fold__panel,
html[data-theme="light"] .page-contact .fold__title,
html[data-theme="light"] .page-contact .contact-panel a { color:#0a0a0a; }

/* --- About: record cards remain readable in light mode ------------------ */
html[data-theme="light"] .stat::after { background:rgba(255,255,255,.86) !important; }
html[data-theme="light"] .stat:hover::before { opacity:.28; }
html[data-theme="light"] .stat:hover::after { opacity:.90; }
html[data-theme="light"] .stat:hover,
html[data-theme="light"] .stat:hover .figure-num { color:#0a0a0a !important; }
html[data-theme="light"] .stat:hover .stat__label,
html[data-theme="light"] .stat:hover .stat__note { color:#4b4b4b !important; }

/* Bring “From the beginning to today” closer to its two cards. */
.page-home #record .say--mirror {
  padding-block:clamp(1.8rem,3.5vw,3rem) clamp(.7rem,1.25vw,1.05rem);
}
.page-home #record.band--pad { padding-block-start:clamp(1rem,2vw,1.5rem); }

/* Specialists: reduce the empty vertical field above the portraits. */
.page-about #people.band--pad { padding-block-start:clamp(2rem,4vw,3.5rem); }
.page-about #people .say { padding-block:0 clamp(1.2rem,2.4vw,2rem); }
.page-about #people .people { margin-block-start:0; }

/* After-sales page reverted to the original, roomier rhythm. */
.page-services #services.band--pad,
.page-services #how.band--pad { padding-block:var(--sp-field); }
.page-services #services .say,
.page-services #how .say { padding-block:clamp(2.5rem,7vw,8rem); }
.page-services #services .svc__row { padding-block:clamp(1.25rem,2.4vw,2rem); }
.page-services #how .steps { margin-block-start:0; }
.page-services #how .steps__cell { padding-block:clamp(1.5rem,2.5vw,2.25rem); }

/* --- Emaar-like panel-over-panel scroll on Home/About/After-sales ------- */
@media (min-width:900px) and (prefers-reduced-motion:no-preference) {
  .page-home main.stack > section,
  .page-about main.stack > section,
  .page-services main.stack > section {
    position:sticky;
    top:var(--hdr);
    min-height:calc(100svh - var(--hdr));
    background:var(--ink);
    box-shadow:0 -1px 0 var(--hair-soft);
  }
  .page-home main.stack > section:nth-of-type(1),.page-about main.stack > section:nth-of-type(1),.page-services main.stack > section:nth-of-type(1){z-index:1}
  .page-home main.stack > section:nth-of-type(2),.page-about main.stack > section:nth-of-type(2),.page-services main.stack > section:nth-of-type(2){z-index:2}
  .page-home main.stack > section:nth-of-type(3),.page-about main.stack > section:nth-of-type(3),.page-services main.stack > section:nth-of-type(3){z-index:3}
  .page-home main.stack > section:nth-of-type(4),.page-about main.stack > section:nth-of-type(4),.page-services main.stack > section:nth-of-type(4){z-index:4}
  .page-home main.stack > section:nth-of-type(5){z-index:5}
  .page-home main.stack > section:nth-of-type(6){z-index:6}
  .page-home main.stack > section:nth-of-type(7){z-index:7}
  .page-home main.stack > section:nth-of-type(8){z-index:8}
  .page-home main.stack > section:nth-of-type(9){z-index:9}
}

/* --- Five full-screen homepage project + resident review panels --------- */
.project-feature {
  position:relative;
  min-height:calc(100svh - var(--hdr));
  margin:0;
  overflow:hidden;
  display:grid;
  align-items:center;
  color:#fbfbfb;
  background:#0a0a0a;
}
.project-feature__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.project-feature__wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.35) 48%,rgba(10,10,10,.60) 100%); }
.project-feature__inner {
  position:relative; z-index:2; width:100%; padding:clamp(2rem,5vw,5.5rem) var(--gut);
  display:grid; grid-template-columns:minmax(280px,.78fr) minmax(360px,1.1fr); gap:clamp(2rem,6vw,7rem); align-items:center;
  direction:ltr;
}
.project-feature__meta { grid-column:1; align-self:center; direction:rtl; text-align:right; }
html[dir="ltr"] .project-feature__meta { direction:ltr; text-align:left; }
.project-feature__title { font-family:'Lahzeh',sans-serif; font-weight:600; font-size:clamp(2.8rem,6vw,6.2rem); line-height:1; margin:0 0 1.4rem; }
.project-feature__actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.project-feature__actions .btn { color:inherit; border-color:rgba(255,255,255,.58); }
.project-feature__actions .btn:hover { background:var(--brand); color:#0a0a0a; border-color:var(--brand); }
.feature-review {
  grid-column:2; position:relative; min-height:clamp(240px,34svh,340px);
  border:1px solid rgba(255,255,255,.28); background:rgba(10,10,10,.52);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  padding:clamp(2rem,3.8vw,3.4rem) clamp(3.1rem,5vw,5rem); color:#fbfbfb;
  display:grid; align-items:center; direction:rtl;
}
html[dir="ltr"] .feature-review { direction:ltr; }
.feature-review__track { position:relative; min-height:155px; display:grid; place-items:center; }
.feature-review__item { grid-area:1/1; opacity:0; transform:translateY(9px); pointer-events:none; transition:opacity 430ms var(--ease-hover),transform 430ms var(--ease-hover); text-align:center; }
.feature-review__item.is-active { opacity:1; transform:none; pointer-events:auto; }
.feature-review blockquote { margin:0 auto 1rem; max-width:52ch; font-family:'Lahzeh',sans-serif; font-size:clamp(1.1rem,1.65vw,1.55rem); line-height:1.85; font-weight:500; }
.feature-review__who { font-size:var(--fs-key); color:rgba(255,255,255,.68); }
.feature-review__nav { position:absolute; top:50%; translate:0 -50%; width:2.45rem; height:2.45rem; border-radius:50%; border:1px solid rgba(255,255,255,.38); background:transparent; color:#fff; cursor:pointer; font-size:1.45rem; z-index:3; }
.feature-review__prev { right:1rem; }.feature-review__next { left:1rem; }
.feature-review__nav:hover { background:var(--brand); color:#0a0a0a; border-color:var(--brand); }
.feature-review__dots { position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); display:flex; gap:.42rem; }
.feature-review__dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.38); }
.feature-review__dot.is-active { background:var(--brand); }
html[data-theme="light"] .project-feature { color:#0a0a0a; }
html[data-theme="light"] .project-feature__actions .btn { color:#0a0a0a; border-color:rgba(10,10,10,.35); }
html[data-theme="light"] .feature-review { color:#0a0a0a; background:rgba(255,255,255,.72); border-color:rgba(10,10,10,.20); }
html[data-theme="light"] .feature-review__who { color:rgba(10,10,10,.62); }
html[data-theme="light"] .feature-review__nav { color:#0a0a0a; border-color:rgba(10,10,10,.30); }
html[data-theme="light"] .feature-review__dot { background:rgba(10,10,10,.26); }
html[data-theme="light"] .feature-review__dot.is-active { background:var(--brand); }
@media(max-width:859px){
  .project-feature{min-height:auto;}
  .project-feature__inner{grid-template-columns:1fr;gap:1.4rem;padding-block:4rem;}
  .project-feature__meta,.feature-review{grid-column:1;}
  .feature-review{min-height:320px;padding-inline:3rem;}
}

/* --- Catalogue: real 3D page-turn motion ------------------------------- */
.catalog-spread { position:relative; transform-style:preserve-3d; }
.catalog-page { animation:none !important; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.catalog-flip-sheet {
  position:absolute; top:0; bottom:0; width:50%; z-index:8; transform-style:preserve-3d; pointer-events:none;
  transition:transform 820ms cubic-bezier(.2,.72,.14,1);
}
.catalog-flip-sheet--next { right:50%; transform-origin:right center; }
.catalog-flip-sheet--prev { left:50%; transform-origin:left center; }
.catalog-flip-sheet__face { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; box-shadow:0 12px 44px rgba(0,0,0,.45); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.catalog-flip-sheet__back { transform:rotateY(180deg); }
.catalog-flip-sheet--next.is-turning { transform:rotateY(180deg); }
.catalog-flip-sheet--prev.is-turning { transform:rotateY(-180deg); }
.catalog-flip-shadow { position:absolute; inset:0; pointer-events:none; z-index:7; opacity:0; background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,0) 68%); transition:opacity 380ms ease; }
.catalog-spread.is-turning .catalog-flip-shadow { opacity:.8; }

/* --- Zanbaq: white render sheet background ----------------------------- */
.page-zanbaq .pmast--sketch { background:#fff !important; }
.page-zanbaq .pmast--sketch .pmast__media { background:#fff !important; }


/* ========================================================================
   FINAL DELIVERY PATCH — 2026-10-21 (client-approved last pass)
   ======================================================================== */

/* Persian header: primary navigation stays on the right, utility controls
   stay on the far left. Inside the utility cluster the physical left-to-right
   order is: phone, theme, languages. */
html[dir="rtl"] .site-tools {
  margin-inline-start:auto !important;
  margin-inline-end:0 !important;
  flex-direction:row-reverse;
  direction:ltr;
}
/* English / Turkish: logo + navigation on the left, controls on the right. */
html[dir="ltr"] .site-head { direction:ltr; }
html[dir="ltr"] .mark { order:0 !important; }
html[dir="ltr"] .site-nav { order:1 !important; margin-inline-start:0 !important; }
html[dir="ltr"] .site-tools { order:2 !important; margin-inline-start:auto !important; margin-inline-end:0 !important; flex-direction:row; direction:ltr; }

/* Header mark in light mode: pure black at rest; original black+turquoise
   colour mark only on hover/focus. Footer keeps its black+turquoise version. */
html[data-theme="light"] .mark > img {
  content:url('../img/logo-mark-mono.webp') !important;
  filter:invert(1) !important;
  opacity:1 !important;
}
html[data-theme="light"] .mark::after {
  background-image:url('../img/logo-mark-color.webp') !important;
}
html[data-theme="light"] .mark:hover > img,
html[data-theme="light"] .mark:focus-visible > img { opacity:0 !important; }
html[data-theme="light"] .mark:hover::after,
html[data-theme="light"] .mark:focus-visible::after { opacity:1 !important; }
html[data-theme="light"] .site-foot__mark > img {
  content:url('../img/logo-mark-light.webp') !important;
  filter:none !important;
}

/* Light mode photographic treatment: keep the centre of every header/photo
   essentially untouched and let only the edges drift toward white. This is
   intentionally about half the opacity of the previous light wash. */
html[data-theme="light"] .hero__wash,
html[data-theme="light"] .mast__wash,
html[data-theme="light"] .pmast__wash,
html[data-theme="light"] .project-feature__wash {
  color:#0a0a0a !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.44) 0%,
      rgba(255,255,255,.12) 16%,
      rgba(255,255,255,.025) 34%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.025) 66%,
      rgba(255,255,255,.12) 84%,
      rgba(255,255,255,.44) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.04) 24%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.03) 72%,
      rgba(255,255,255,.34) 100%) !important;
}

/* The home photo collage must be allowed to finish naturally before the
   Emaar-style panel-over-panel sequence begins. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference) {
  .page-home main.stack > #who {
    position:relative !important;
    top:auto !important;
    min-height:auto !important;
    z-index:2 !important;
    box-shadow:none !important;
  }
  .page-home main.stack > #record,
  .page-home main.stack > .project-feature {
    position:sticky;
    top:var(--hdr);
    min-height:calc(100svh - var(--hdr));
  }
}

/* About-page hover cards: in Light mode keep the architectural image visible
   but much closer to white so the black copy never loses contrast. */
html[data-theme="light"] .stat::after { background:rgba(255,255,255,.94) !important; }
html[data-theme="light"] .stat:hover::before { opacity:.16 !important; }
html[data-theme="light"] .stat:hover::after { opacity:.93 !important; }

/* Center every carousel / flipbook arrow optically as well as geometrically. */
.testimonial__nav,
.feature-review__nav,
.catalog-book__nav {
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:0 !important;
  text-align:center !important;
}
.testimonial__nav > span,
.feature-review__nav > span,
.catalog-book__nav > span {
  display:block;
  line-height:1;
  transform:translateY(-1px);
  pointer-events:none;
}

/* --- 2026-10-24: About page Light Mode readability ---------------------- */
/* Keep black copy readable over the masthead photo without washing the
   photograph out: a soft white halo sits behind the text only. */
html[data-theme="light"] .page-about .mast__title .h1,
html[data-theme="light"] .page-about .mast__prose .body-text,
html[data-theme="light"] .page-about .mast__sign,
html[data-theme="light"] .page-about .mast__wash .spec dt,
html[data-theme="light"] .page-about .mast__wash .spec dd {
  text-shadow:
    0 1px 2px rgba(255,255,255,.96),
    0 0 8px rgba(255,255,255,.86),
    0 0 18px rgba(255,255,255,.62);
}

/* Light-mode record cards: preserve the quiet grey architectural photo on
   hover instead of covering it with an almost-solid white veil. */
html[data-theme="light"] .page-about .stat::after {
  background:rgba(255,255,255,.62) !important;
}
html[data-theme="light"] .page-about .stat:hover::before {
  opacity:.44 !important;
  filter:grayscale(1) blur(3px) contrast(.88) !important;
}
html[data-theme="light"] .page-about .stat:hover::after {
  opacity:.84 !important;
}

/* ========================================================================
   FINAL LIGHT-MODE READABILITY + SERVICES VIEWPORT FIT — 2026-10-24
   ======================================================================== */

/* Light masthead copy must remain readable over detailed photography. */
html[data-theme="light"] .page-services .mast__wash .mast__title,
html[data-theme="light"] .page-services .mast__wash .mast__body,
html[data-theme="light"] .page-services .mast__wash .spec {
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 10px rgba(255,255,255,.96),
    0 0 24px rgba(255,255,255,.90),
    0 0 42px rgba(255,255,255,.72);
}
html[data-theme="light"] .page-services .mast__wash .mast__body,
html[data-theme="light"] .page-services .mast__wash .spec dt {
  color:rgba(10,10,10,.80) !important;
}
html[data-theme="light"] .page-services .mast__wash .spec dd,
html[data-theme="light"] .page-services .mast__wash .spec a,
html[data-theme="light"] .page-services .mast__wash .mast__title {
  color:#0a0a0a !important;
}

/* Fit “What we do after handover” comfortably in one desktop viewport. */
@media (min-width:900px) {
  .page-services #services.band--pad {
    min-height:calc(100svh - var(--hdr));
    padding-block:clamp(.75rem,1.25vw,1.15rem) clamp(.65rem,1vw,1rem) !important;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .page-services #services .say {
    padding-block:clamp(.4rem,.75vw,.7rem) clamp(.45rem,.8vw,.75rem) !important;
  }
  .page-services #services .say .h1 {
    margin:0;
    line-height:1.15;
  }
  .page-services #services .svc {
    margin-block-start:0 !important;
  }
  .page-services #services .svc__row {
    padding-block:clamp(.45rem,.72vw,.68rem) !important;
    min-height:0;
  }
  .page-services #services .svc__name {
    margin-block:0;
    line-height:1.35;
  }
  .page-services #services .svc__desc {
    margin-block:0;
    line-height:1.55;
  }
}


/* ========================================================================
   PETROCOWAR FINAL CLIENT PATCH — 2026-10-24
   ======================================================================== */

/* Persian desktop header: mark + navigation on the right; language, theme
   and phone controls on the far left, with breathing room between groups. */
@media (min-width:860px) {
  html[dir="rtl"] .site-head { direction:rtl !important; }
  html[dir="rtl"] .mark { order:0 !important; }
  html[dir="rtl"] .site-nav { order:1 !important; margin-inline-start:0 !important; }
  html[dir="rtl"] .site-tools {
    order:2 !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
    flex-direction:row !important;
    direction:ltr !important;
    gap:clamp(.7rem,1.1vw,1rem) !important;
  }
  html[dir="rtl"] .site-tools .lang-switch { margin-inline-end:.15rem; }
}

/* Header mark: Dark = pure white at rest; Light = pure black at rest.
   In both themes only the two brand strokes turn turquoise on hover. */
.site-head .mark > img {
  content:url('../img/logo-mark-mono.webp') !important;
  filter:none !important;
  opacity:1 !important;
}
.site-head .mark::after { background-image:url('../img/logo-mark-color.webp') !important; }
.site-head .mark:hover > img,
.site-head .mark:focus-visible > img { opacity:0 !important; }
.site-head .mark:hover::after,
.site-head .mark:focus-visible::after { opacity:1 !important; }
html[data-theme="light"] .site-head .mark > img {
  content:url('../img/logo-mark-mono.webp') !important;
  filter:invert(1) !important;
}

/* Home collage is taller than one viewport. Let the visitor scroll through
   every photograph first; panel-over-panel sticking starts afterwards. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference) {
  .page-home main.stack > #who {
    position:relative !important;
    top:auto !important;
    min-height:auto !important;
    z-index:2 !important;
    box-shadow:none !important;
  }
}

/* Light masthead readability: halo the text, not the whole photograph. */
html[data-theme="light"] .page-services .mast__title,
html[data-theme="light"] .page-services .mast__body,
html[data-theme="light"] .page-services .mast__wash > .spec {
  position:relative;
  isolation:isolate;
}
html[data-theme="light"] .page-services .mast__title::before,
html[data-theme="light"] .page-services .mast__body::before,
html[data-theme="light"] .page-services .mast__wash > .spec::before {
  content:'';
  position:absolute;
  inset:-.55rem -.75rem;
  z-index:-1;
  background:rgba(255,255,255,.26);
  box-shadow:0 0 34px 18px rgba(255,255,255,.34);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  pointer-events:none;
}
html[data-theme="light"] .page-services .mast__title,
html[data-theme="light"] .page-services .mast__body,
html[data-theme="light"] .page-services .mast__wash > .spec {
  text-shadow:0 1px 1px #fff,0 0 5px rgba(255,255,255,.98),0 0 12px rgba(255,255,255,.90) !important;
}

/* Bring the services title to the top and keep all five rows in one desktop
   viewport without changing the approved wording. */
@media (min-width:900px) {
  .page-services #services.band--pad {
    padding-block:.4rem .65rem !important;
    min-height:calc(100svh - var(--hdr)) !important;
    justify-content:flex-start !important;
  }
  .page-services #services .say {
    padding-block:.55rem .45rem !important;
    gap:.25rem !important;
  }
  .page-services #services .svc { margin-block-start:0 !important; }
  .page-services #services .svc__row {
    padding-block:clamp(.36rem,.58vw,.58rem) !important;
    gap:.45rem clamp(1rem,2vw,2rem) !important;
  }
  .page-services #services .svc__desc { line-height:1.42 !important; }
}

/* “From request to resolution”: no overall photo background. Each step uses
   exactly the same architectural images as the About-page hover cards. */
.page-services #how { background:var(--ink) !important; }
.page-services #how::before,
.page-services #how::after { content:none !important; background:none !important; }
.page-services #how .say { padding-block:clamp(1rem,2vw,1.6rem) !important; }
.steps--visual {
  gap:clamp(.85rem,1.6vw,1.4rem) !important;
  align-items:stretch;
}
.steps__cell--visual {
  position:relative;
  min-height:clamp(270px,39svh,390px);
  padding:0 !important;
  border:1px solid var(--hair-soft) !important;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
}
.steps__media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(.92) brightness(.75);
  transform:scale(1.015);
  transition:filter 500ms var(--ease-hover),transform 700ms var(--ease-hover);
}
.steps__wash {
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.90) 0%,rgba(10,10,10,.42) 48%,rgba(10,10,10,.10) 100%);
  z-index:1;
}
.steps__copy {
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(1.2rem,2.2vw,2rem);
  display:flex;
  flex-direction:column;
  gap:.55rem;
  color:#fbfbfb;
}
.steps__copy .body-text { color:rgba(251,251,251,.78) !important; margin:0; text-align:start; }
.steps__cell--visual:hover .steps__media { filter:grayscale(.35) contrast(1) brightness(.82); transform:scale(1.045); }
html[data-theme="light"] .steps__cell--visual { border-color:rgba(10,10,10,.15) !important; }
html[data-theme="light"] .steps__media { filter:grayscale(1) contrast(.92) brightness(1.04); }
html[data-theme="light"] .steps__wash {
  background:linear-gradient(to top,rgba(255,255,255,.92) 0%,rgba(255,255,255,.50) 52%,rgba(255,255,255,.08) 100%);
}
html[data-theme="light"] .steps__copy { color:#0a0a0a; }
html[data-theme="light"] .steps__copy .body-text { color:rgba(10,10,10,.68) !important; }
html[data-theme="light"] .steps__cell--visual:hover .steps__media { filter:grayscale(.45) contrast(.96) brightness(1.02); }
@media (max-width:859px) {
  .steps__cell--visual { min-height:300px; }
}

/* Final owner contact panel: use the client-provided facade image to fill the
   previously empty left half. */
.owner-cta {
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  align-items:stretch;
  gap:clamp(1.5rem,4vw,4rem);
  min-height:min(62svh,560px);
}
.owner-cta__media { margin:0; overflow:hidden; min-height:360px; }
.owner-cta__media img { width:100%; height:100%; object-fit:cover; object-position:center 48%; display:block; }
.owner-cta__copy { justify-content:center; padding-block:clamp(1rem,3vw,3rem) !important; }
@media(max-width:859px){
  .owner-cta{grid-template-columns:1fr;min-height:auto;}
  .owner-cta__media{min-height:340px;max-height:520px;}
}

/* ========================================================================
   FINAL REVIEW FIXES — 2026-10-24-B
   ======================================================================== */

/* 1) Contact page, light mode: shift the grey accordion surfaces toward white. */
html[data-theme="light"] .page-contact .glass,
html[data-theme="light"] .page-contact .contact-panel {
  background:rgba(255,255,255,.90) !important;
  border-color:rgba(10,10,10,.14) !important;
}
html[data-theme="light"] .page-contact .fold__head {
  background:rgba(255,255,255,.34) !important;
}
html[data-theme="light"] .page-contact .fold__head:hover {
  background:rgba(255,255,255,.78) !important;
}
html[data-theme="light"] .page-contact .fold[data-open='true'] .fold__head {
  background:rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .page-contact .fold__panel {
  background:rgba(255,255,255,.74) !important;
}

/* 2) Services list: use the available viewport height more evenly without
   making the rows feel stuck together. */
.page-services #services {
  min-height:calc(100svh - var(--hdr));
  display:flex;
  flex-direction:column;
}
.page-services #services .svc {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.page-services #services .svc__row {
  flex:1 1 0;
  align-items:center;
  padding-block:clamp(.9rem,1.35vw,1.35rem) !important;
  gap:clamp(.6rem,1vw,.9rem) clamp(1.5rem,2.2vw,2.5rem) !important;
}
.page-services #services .svc__name,
.page-services #services .svc__desc { align-self:center; }
.page-services #services .svc__desc {
  margin:0;
  line-height:1.75 !important;
}
@media (max-width: 859px) {
  .page-services #services { min-height:auto; }
  .page-services #services .svc { display:block; }
  .page-services #services .svc__row {
    flex:none;
    align-items:start;
    padding-block:clamp(.8rem,2.5vw,1rem) !important;
  }
}

/* 3) Projects page in light mode: visible white gradient instead of the dark one. */
html[data-theme="light"] .wall .tile__wash {
  mix-blend-mode:normal !important;
  opacity:1 !important;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.08) 8%,
      rgba(255,255,255,.00) 18%),
    linear-gradient(to top,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.92) 17%,
      rgba(255,255,255,.78) 31%,
      rgba(255,255,255,.56) 46%,
      rgba(255,255,255,.30) 62%,
      rgba(255,255,255,.14) 76%,
      rgba(255,255,255,.00) 100%) !important;
}

/* 4) Homepage collage: prevent extra image slivers below the bounded grid. */
.page-home .collage {
  overflow:hidden;
}
.page-home .collage__cell {
  display:block;
}
.page-home .collage__cell img {
  display:block;
}

/* 5) Persian desktop header layout: logo right, nav next, utilities left.
   Inside utilities: phone, theme, languages. */
html[dir="rtl"] .site-head {
  direction:rtl;
}
html[dir="rtl"] .mark {
  order:0 !important;
}
html[dir="rtl"] .site-nav {
  order:1 !important;
  margin-inline-start:0 !important;
  margin-inline-end:0 !important;
}
html[dir="rtl"] .site-tools {
  order:2 !important;
  margin-inline-start:auto !important;
  margin-inline-end:0 !important;
  flex-direction:row-reverse !important;
  direction:ltr !important;
}
html[dir="rtl"] .site-head__burger {
  order:3 !important;
}