:root{
  --paper:#F3EFE6;
  --ink:#171716;
  --soft:#6B675F;
  --line:rgba(23,23,22,.16);
  --oxide:#8E3F32;
  --paper-2:#E9E2D7;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
}
body[dir="rtl"]{
  font-family:"Tahoma","Arial",sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:1160px;margin:auto;padding:0 28px}

.nav{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(243,239,230,.84);
  border-bottom:1px solid rgba(23,23,22,.08);
}
.nav-inner{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brandmark{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.brandmark-img{
  display:block;
  width:146px;
  height:auto;
  object-fit:contain;
}
.footer-brand{
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer-brand-img{
  display:block;
  width:158px;
  height:auto;
  object-fit:contain;
}
.nav-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.nav-links{
  display:none;
  align-items:center;
  gap:24px;
  margin-inline-start:auto;
  margin-inline-end:10px;
}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--soft);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:color .2s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:5px;
  height:1px;
  background:var(--oxide);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
body[dir="rtl"] .nav-link{letter-spacing:0;text-transform:none}
body[dir="rtl"] .nav-link::after{transform-origin:right center}
.nav-link:hover,.nav-link:focus-visible{color:var(--ink)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
@media(min-width:1120px){.nav-links{display:flex}}
.micro{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.cta-small{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;
  transition:.25s ease;
}
.cta-small:hover{background:var(--ink);color:var(--paper)}
.lang-switch{
  display:flex;
  align-items:center;
  padding:3px;
  border:1px solid rgba(23,23,22,.14);
  border-radius:999px;
  background:rgba(255,255,255,.10)
}
.lang-btn{
  border:0;
  background:transparent;
  color:var(--soft);
  cursor:pointer;
  min-width:42px;
  min-height:34px;
  border-radius:999px;
  padding:0 9px;
  font-size:10px;
  letter-spacing:.08em
}
.lang-btn.active{background:var(--ink);color:var(--paper)}
.hero{
  padding:88px 0 54px;
}
.kicker{
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:24px
}
.hero h1{
  font-family:Georgia, 'Times New Roman', serif;
  font-size:clamp(58px,9.2vw,116px);
  line-height:.88;
  letter-spacing:-.055em;
  margin:0;
  max-width:900px;
  font-weight:500;
}
body[dir="rtl"] .hero h1,
body[dir="rtl"] .section-head h2,
body[dir="rtl"] .card h3,
body[dir="rtl"] .feature h2,
body[dir="rtl"] .process-title,
body[dir="rtl"] .contact h2{
  font-family:"Tahoma","Arial",sans-serif;
  letter-spacing:-.02em;
}
.hero h1 .cutword{position:relative;display:inline-block}
.hero h1 .cutword:after{
  content:"";position:absolute;width:.75em;height:2px;background:var(--oxide);
  right:-.18em;top:.52em;transform:rotate(-34deg);transform-origin:center;
}
body[dir="rtl"] .hero h1 .cutword:after{
  right:auto;left:-.18em;transform:rotate(34deg);
}
.hero-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:52px;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--line);
  align-items:end;
}
.hero-copy{max-width:680px}
.hero-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:16px;
  min-width:220px;
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--soft);
  padding:4px 2px;
  border-bottom:1px solid transparent;
  transition:.2s ease;
}
.text-link:hover{
  color:var(--ink);
  border-bottom-color:var(--ink);
}
.lead{
  font-size:clamp(20px,2.3vw,28px);
  line-height:1.42;
  max-width:650px
}
.sub{
  font-size:14px;
  line-height:1.7;
  color:var(--soft);
  max-width:590px;
  margin-top:14px
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--ink);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:.25s ease;
}
body[dir="rtl"] .btn{letter-spacing:0;text-transform:none}
body[dir="rtl"] .text-link{letter-spacing:0;text-transform:none}
body[dir="rtl"] .hero-cta{align-items:flex-start}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost:hover{background:rgba(23,23,22,.06)}

.divider{margin:88px 0 26px;border-top:1px solid var(--line)}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.7fr);
  gap:56px;
  align-items:end;
  margin-bottom:32px;
}
.section-head h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(35px,5vw,62px);line-height:1;margin:0;font-weight:500;letter-spacing:-.03em
}
.section-head p{max-width:410px;margin:0;color:var(--soft);font-size:14px;line-height:1.7}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{
  min-height:340px;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;transition:.3s ease;background:rgba(255,255,255,.08)
}
.card:before{
  content:"";position:absolute;inset:auto -20% -45% auto;width:62%;aspect-ratio:1;
  border:1px solid rgba(23,23,22,.08);border-radius:50%;
}
body[dir="rtl"] .card:before{inset:auto auto -45% -20%}
.card:hover{transform:translateY(-3px);border-color:rgba(23,23,22,.34)}
.card-num{font-size:11px;letter-spacing:.2em;color:var(--soft)}
body[dir="rtl"] .card-num{letter-spacing:0}
.card h3{
  font-family:Georgia,'Times New Roman',serif;font-size:42px;font-weight:500;
  margin:0 0 12px;letter-spacing:-.03em
}
.card p{max-width:470px;margin:0;color:var(--soft);line-height:1.68}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{
  border:1px solid var(--line);border-radius:999px;padding:8px 10px;
  font-size:11px;letter-spacing:.05em
}
body[dir="rtl"] .tag{letter-spacing:0}


.applications{
  margin:92px 0 22px;
}

.application-note{
  margin-top:18px;
  color:var(--soft);
  font-size:12px;
  line-height:1.6;
}

.feature{
  margin:86px 0;background:var(--ink);color:var(--paper);
  border-radius:30px;padding:48px;position:relative;overflow:hidden
}
.feature:after{
  content:"";position:absolute;width:38%;height:2px;background:var(--oxide);
  right:-4%;top:37%;transform:rotate(-34deg)
}
body[dir="rtl"] .feature:after{right:auto;left:-4%;transform:rotate(34deg)}
.feature .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#C9C4B8}
body[dir="rtl"] .feature .eyebrow{letter-spacing:0;text-transform:none}
.feature h2{
  font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,7vw,84px);
  line-height:1;margin:20px 0 24px;font-weight:500;max-width:860px;letter-spacing:-.04em
}
.feature p{max-width:650px;color:#C9C4B8;font-size:16px;line-height:1.75}
.feature-list{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px;position:relative;z-index:1
}
.feature-item{border-top:1px solid rgba(243,239,230,.25);padding-top:14px;font-size:13px;line-height:1.5}
@media(max-width:760px){
  .real-case{
    margin-top:72px;
  }
  .real-case-head{
    grid-template-columns:1fr;
    gap:15px;
  }
  .real-case-frame{
    border-radius:18px;
  }
  .real-case-foot{
    flex-direction:column;
    gap:12px;
  }
  .real-case-services{
    justify-content:flex-start;
  }
}
.process{padding:20px 0 82px}
.process-row{
  display:grid;grid-template-columns:100px 1fr 1fr;gap:25px;
  padding:23px 0;border-top:1px solid var(--line)
}
.process-row:last-child{border-bottom:1px solid var(--line)}
.process-num{font-size:11px;letter-spacing:.18em;color:var(--soft)}
.process-title{font-family:Georgia,'Times New Roman',serif;font-size:26px}
.process-text{color:var(--soft);font-size:14px;line-height:1.65}

.contact{
  padding:76px 0 90px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.contact .tiny{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
body[dir="rtl"] .contact .tiny{letter-spacing:0;text-transform:none}
.contact h2{
  font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,8vw,96px);
  font-weight:500;line-height:1;letter-spacing:-.05em;margin:22px auto 26px;max-width:930px
}
.whatsapp{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:58px;padding:0 28px;border-radius:999px;background:var(--oxide);color:white;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:.25s ease
}
body[dir="rtl"] .whatsapp{letter-spacing:0;text-transform:none}
.whatsapp:hover{transform:translateY(-2px)}
.phone{
  margin-top:18px;
  color:var(--soft);
  font-size:13px;
  letter-spacing:.06em;
  text-align:center;
}
.footer{
  border-top:1px solid var(--line);
  padding:34px 0 38px;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:10px;
}
.footer-note{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft);
  text-align:center;
}
body[dir="rtl"] .footer-note{
  letter-spacing:0;
  text-transform:none;
}

.reveal{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:760px){
  .wrap{padding:0 18px}
  .nav-inner{min-height:62px}
  .nav-right{gap:7px}
  .nav-right .micro.location{display:none}
  .cta-small{display:none}
  .hero{
    padding-top:54px;
    padding-bottom:42px;
  }
  .kicker{
    margin-bottom:20px;
    font-size:9px;
    letter-spacing:.20em;
  }
  .hero h1{
    font-size:clamp(48px,13.4vw,62px);
    line-height:.90;
    letter-spacing:-.05em;
    max-width:95%;
  }
  .hero h1 .cutword:after{
    width:.62em;
    right:-.10em;
    top:.56em;
  }
  body[dir="rtl"] .hero h1 .cutword:after{
    right:auto;
    left:-.10em;
  }
  .hero-bottom{
    grid-template-columns:1fr;
    gap:28px;
    margin-top:34px;
    padding-top:24px;
  }
  .lead{
    font-size:20px;
    line-height:1.42;
  }
  .sub{
    font-size:13px;
    line-height:1.68;
    margin-top:12px;
  }
  .hero-cta{
    align-items:stretch;
    min-width:0;
    gap:13px;
  }
  body[dir="rtl"] .hero-cta{align-items:stretch}
  .hero-cta .btn{
    width:100%;
    min-height:50px;
  }
  .text-link{
    justify-content:center;
    min-height:38px;
    font-size:10px;
  }
  .section-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .grid{grid-template-columns:1fr}
  .selector-grid{grid-template-columns:1fr}
  .selector-card{min-height:0}
  .application-grid{grid-template-columns:1fr}
  .application-stack{grid-template-columns:1fr;grid-template-rows:auto}
  .application-card.tall{min-height:520px}
  .application-card{min-height:330px}
  .card{min-height:280px}
  .section-head{align-items:start;flex-direction:column}
  .feature{padding:32px 22px;border-radius:22px;margin:62px 0}
  .feature-list{grid-template-columns:1fr 1fr}
  .process-row{grid-template-columns:60px 1fr}
  .process-text{grid-column:2}
  .footer-inner{align-items:center;flex-direction:column;text-align:center}
}
@media(max-width:430px){
  .brandmark-img{width:120px}
  .footer-brand-img{width:138px}
  .lang-btn{min-width:36px;min-height:32px;padding:0 6px;font-size:9px}
  .feature-list{grid-template-columns:1fr}
  .application-meta{top:18px;left:18px;right:18px}
  .application-caption{display:none}
  .storefront-scene{inset:72px 20px 24px}
  .vehicle-scene,.package-scene,.digital-scene{inset:68px 16px 18px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ===== Desktop art-direction pass ===== */
@media (min-width: 900px){
  .wrap{
    max-width:1320px;
    padding-left:42px;
    padding-right:42px;
  }

  .nav .wrap{
    max-width:1380px;
  }

  .hero{
    padding-top:112px;
    padding-bottom:72px;
    text-align:center;
  }

  .hero .kicker{
    text-align:center;
    margin-bottom:30px;
  }

  .hero h1{
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:clamp(72px,7vw,118px);
    line-height:.9;
  }

  .hero-bottom{
    grid-template-columns:1fr;
    gap:28px;
    max-width:860px;
    margin:58px auto 0;
    padding-top:30px;
    text-align:center;
    align-items:center;
  }

  .hero-copy{
    max-width:760px;
    margin:0 auto;
  }

  .lead,
  .sub{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-cta,
  body[dir="rtl"] .hero-cta{
    min-width:0;
    align-items:center;
    justify-content:center;
  }

  .hero-cta .btn{
    min-width:230px;
  }

  .section-head{
    display:block;
    max-width:850px;
    margin:0 auto 42px;
    text-align:center;
  }

  .section-head h2{
    max-width:820px;
    margin:0 auto;
    text-align:center;
    font-size:clamp(42px,4.5vw,68px);
    line-height:.98;
  }

  .section-head p{
    max-width:610px;
    margin:18px auto 0;
    text-align:center;
    font-size:15px;
  }

  .divider{
    margin-top:104px;
    margin-bottom:38px;
  }

  .grid{
    gap:20px;
  }

  .card{
    min-height:360px;
    padding:34px;
  }

  .feature{
    max-width:1240px;
    margin:104px auto;
    padding:58px 62px;
  }

  .feature h2{
    max-width:900px;
  }

  .process{
    padding-top:34px;
    padding-bottom:104px;
  }

  .process-row{
    grid-template-columns:110px minmax(220px,.75fr) minmax(380px,1.25fr);
    gap:38px;
    padding:28px 22px;
    max-width:1080px;
    margin:0 auto;
  }

  .applications{
    margin-top:112px;
  }

  .contact{
    max-width:980px;
    padding-top:110px;
    padding-bottom:112px;
  }

  .contact h2{
    max-width:920px;
    font-size:clamp(58px,5.8vw,92px);
    text-align:center;
  }

  .footer{
    padding-top:44px;
    padding-bottom:46px;
  }
}

/* Intermediate laptops / smaller desktop screens */
@media (min-width: 900px) and (max-width: 1180px){
  .wrap{
    max-width:1040px;
    padding-left:32px;
    padding-right:32px;
  }

  .hero{
    padding-top:92px;
  }

  .hero h1{
    font-size:clamp(68px,8vw,94px);
  }

  .card{
    min-height:330px;
  }

  .process-row{
    grid-template-columns:80px .8fr 1.2fr;
    gap:26px;
  }
}


/* ===== Mobile visual consistency pass ===== */
@media (max-width: 899px){
  .hero{
    text-align:center;
  }

  .hero .kicker{
    text-align:center;
  }

  .hero h1{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    max-width:100%;
  }

  .hero-bottom{
    text-align:center;
  }

  .hero-copy{
    margin-left:auto;
    margin-right:auto;
  }

  .lead,
  .sub{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-cta,
  body[dir="rtl"] .hero-cta{
    align-items:center;
    justify-content:center;
  }

  .text-link{
    justify-content:center;
    text-align:center;
  }

  .section-head{
    display:block;
    text-align:center;
  }

  .section-head h2{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .section-head p{
    margin:14px auto 0;
    text-align:center;
    max-width:92%;
  }

  .contact{
    text-align:center;
  }

  .contact h2{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .contact .tiny,
  .phone{
    text-align:center;
  }

  .project-selector .section-head,
  .applications .section-head,
  .process .section-head{
    text-align:center;
  }
}

@media (max-width: 560px){
  .hero h1{
    font-size:clamp(46px,13vw,60px);
    line-height:.92;
  }

  .section-head h2,
  .real-case-head h2{
    font-size:clamp(34px,9.5vw,46px);
    line-height:1.02;
  }

  .contact h2{
    font-size:clamp(42px,11vw,58px);
    line-height:1;
  }

  .section-head p,
  .real-case-head p{
    font-size:13px;
    line-height:1.65;
  }
}
@media(max-width:560px){
  .brief-modal{
    align-items:flex-end;
    padding:12px;
  }
  .brief-panel{
    border-radius:24px 24px 18px 18px;
    padding:25px 18px 20px;
    max-height:92vh;
  }
  .brief-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .brief-help{
    text-align:center;
  }
}


/* ===== Refined selected work: clean visuals, no screenshot-card effect ===== */
.refined-work{
  margin:104px 0 46px;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.work-card{
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
}
.work-image-wrap{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#191816;
}
.work-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}
.work-card:hover .work-image{
  transform:scale(1.025);
}
.work-copy{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:24px;
  padding:23px 24px 25px;
  align-items:start;
}
.work-kicker{
  font-size:9px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--oxide);
  margin-bottom:9px;
}
body[dir="rtl"] .work-kicker{
  letter-spacing:0;
  text-transform:none;
}
.work-copy h3{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:29px;
  line-height:1;
  font-weight:500;
  letter-spacing:.01em;
}
.work-copy p{
  margin:0;
  color:var(--soft);
  font-size:13px;
  line-height:1.65;
}
body[dir="rtl"] .work-copy h3{
  font-family:Georgia,'Times New Roman',serif;
}

/* Approved logo has now been tightly cropped, so these dimensions are its real visual size. */
.brandmark-img{
  width:154px !important;
}
.footer-brand-img{
  width:172px !important;
}

@media(max-width:899px){
  .refined-work{
    margin-top:78px;
  }
  .work-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .work-copy{
    grid-template-columns:1fr;
    gap:10px;
    padding:19px 19px 21px;
    text-align:center;
  }
  .work-kicker,
  .work-copy h3,
  .work-copy p{
    text-align:center;
  }
  .work-image-wrap{
    aspect-ratio:16/9;
  }
}

@media(max-width:430px){
  .brandmark-img{
    width:116px !important;
  }
  .footer-brand-img{
    width:142px !important;
  }
  .work-copy h3{
    font-size:25px;
  }
  .work-copy p{
    font-size:12px;
  }
}


/* High-resolution portfolio imagery */
.work-image-wrap{
  aspect-ratio:3/2 !important;
}
.work-image{
  object-fit:cover !important;
  object-position:center center !important;
}
@media(max-width:899px){
  .work-image-wrap{
    aspect-ratio:3/2 !important;
  }
}


/* ===== Interactive Urban Move case study ===== */
.work-card-clickable{
  cursor:pointer;
}
.work-card-clickable:focus-visible{
  outline:2px solid var(--oxide);
  outline-offset:4px;
}

.case-result{
  font-size:14px;
  line-height:1.65;
  color:#BDB7AC;
}

@media(max-width:820px){
  .case-modal{
    padding:10px;
    align-items:flex-end;
  }
  .case-panel{
    border-radius:24px 24px 16px 16px;
    max-height:94vh;
  }
  .case-hero{
    grid-template-columns:1fr;
  }
  .case-hero-copy{
    padding:34px 22px 26px;
    text-align:center;
    align-items:center;
  }
  .case-summary{
    text-align:center;
  }
  .case-hero-media{
    min-height:300px;
  }
  .case-details{
    grid-template-columns:1fr;
  }
  .case-gallery{
    grid-template-columns:1fr;
  }
  .case-detail-shot{
    min-height:250px;
  }
  .case-actions{
    flex-direction:column;
  }
}
@media(max-width:820px){
  .case-detail-shot{
    min-height:230px;
  }
}

@media(max-width:900px){
  .luna-gallery{
    grid-template-columns:1fr;
  }
  .luna-shot{
    min-height:280px;
  }
  .luna-spec-row{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  .luna-shot{
    min-height:230px;
  }
}
@media(max-width:900px){
  #nawaCaseModal .luna-gallery{
    grid-template-columns:1fr;
  }
  #nawaCaseModal .luna-shot{
    min-height:260px;
  }
}
@media(max-width:900px){
  #nawaCaseModal .nawa-gallery-final{
    grid-template-columns:1fr !important;
  }
  #nawaCaseModal .nawa-door-shot,
  #nawaCaseModal .nawa-menu-shot{
    min-height:280px;
  }
}

@media(max-width:900px){
  .pure-gallery{
    grid-template-columns:1fr;
  }
  .pure-shot{
    min-height:280px;
  }
  .pure-spec-row{
    grid-template-columns:1fr;
  }
}
@media(max-width:560px){
  .pure-shot{
    min-height:230px;
  }
}


/* ============================================================
   V28 — FINAL ART DIRECTION PASS
   Flow: Hero → Selected Work → SIGN → Services → Process → CTA
   ============================================================ */

/* A tighter, more intentional vertical rhythm */
@media (min-width:900px){
  .hero{
    padding-top:94px !important;
    padding-bottom:58px !important;
  }

  .final-work-flow > .refined-work{
    margin-top:70px !important;
    margin-bottom:72px !important;
  }

  .final-work-flow > .feature{
    margin-top:72px !important;
    margin-bottom:76px !important;
  }

  .services-stage{
    margin-top:72px;
    margin-bottom:80px;
  }

  .services-stage .divider{
    margin-top:0 !important;
    margin-bottom:34px !important;
  }

  .services-stage .section-head{
    margin-bottom:36px !important;
  }

  .process{
    padding-top:18px !important;
    padding-bottom:82px !important;
  }

  .contact{
    padding-top:84px !important;
    padding-bottom:90px !important;
  }
}

/* Selected Work is now the first proof of quality after the hero */
.refined-work{
  position:relative;
}
.refined-work .section-head{
  position:relative;
}
.refined-work .section-head::after{
  content:"";
  display:block;
  width:52px;
  height:2px;
  margin:24px auto 0;
  background:var(--oxide);
  transform:rotate(-34deg);
  transform-origin:center;
}

/* Projects should immediately feel clickable */
.work-card-clickable{
  position:relative;
  cursor:pointer;
}
.work-card-clickable::after{
  content:"VIEW PROJECT ↗";
  position:absolute;
  right:18px;
  top:18px;
  z-index:5;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(18,18,17,.52);
  backdrop-filter:blur(9px);
  color:#fff;
  font-size:9px;
  line-height:1;
  letter-spacing:.12em;
  opacity:0;
  transform:translateY(-4px);
  transition:.25s ease;
  pointer-events:none;
}
html:lang(fr) .work-card-clickable::after{
  content:"VOIR LE PROJET ↗";
}
html:lang(ar) .work-card-clickable::after{
  content:"عرض المشروع ↗";
  letter-spacing:0;
}
.work-card-clickable:hover::after,
.work-card-clickable:focus-visible::after{
  opacity:1;
  transform:none;
}
body[dir="rtl"] .work-card-clickable::after{
  right:auto;
  left:18px;
}

/* Keep the portfolio cards editorial and consistent */
.work-card{
  border-radius:24px !important;
}
.work-image-wrap{
  background:#161614;
}
.work-copy{
  padding:22px 23px 24px !important;
}
.work-copy h3{
  font-size:28px !important;
}
.work-copy p{
  font-size:13px !important;
  line-height:1.65 !important;
}

/* MAQTA / SIGN gets one controlled 34-degree signature, not decoration everywhere */
.feature{
  position:relative;
  overflow:hidden;
}
.feature::before{
  content:"";
  position:absolute;
  width:78px;
  height:3px;
  right:42px;
  top:46px;
  background:var(--oxide);
  transform:rotate(-34deg);
  transform-origin:center;
  opacity:.92;
}
body[dir="rtl"] .feature::before{
  right:auto;
  left:42px;
}

/* Services are secondary to proof-of-work, so slightly quieter */
.services-stage .card{
  min-height:330px !important;
}
.services-stage .card h3{
  font-size:34px;
}
.services-stage .card p{
  font-size:14px;
  line-height:1.65;
}
.services-stage .tag{
  font-size:9px;
}

/* Process: reduce the feeling of a long form */
.process-row{
  border-radius:18px;
  transition:background .2s ease;
}
.process-row:hover{
  background:rgba(255,255,255,.11);
}

/* A final signature mark before conversion */
.contact{
  position:relative;
}
.contact::before{
  content:"";
  display:block;
  width:58px;
  height:2px;
  background:var(--oxide);
  margin:0 auto 28px;
  transform:rotate(-34deg);
}
.contact .whatsapp{
  min-width:250px;
}

/* Header: stronger brand presence but still restrained */
@media (min-width:900px){
  .brandmark-img{
    width:166px !important;
  }
  .nav{
    min-height:72px;
  }
  .cta-small{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}
.case-summary,
.case-result,
.case-service-list{
  font-size:13.5px !important;
}

/* ------------------------------------------------------------
   Mobile: retain the same luxury composition, not a "stacked app"
   ------------------------------------------------------------ */
@media (max-width:899px){
  .hero{
    padding-top:72px !important;
    padding-bottom:46px !important;
  }

  .final-work-flow > .refined-work{
    margin-top:62px !important;
    margin-bottom:58px !important;
  }

  .final-work-flow > .feature{
    margin-top:58px !important;
    margin-bottom:60px !important;
  }

  .services-stage{
    margin-top:58px;
    margin-bottom:58px;
  }

  .services-stage .divider{
    margin-top:0 !important;
    margin-bottom:26px !important;
  }

  .process{
    padding-top:14px !important;
    padding-bottom:62px !important;
  }

  /* always reveal clickability on touch devices */
  .work-card-clickable::after{
    opacity:1;
    transform:none;
    top:14px;
    right:14px;
    padding:7px 9px;
    font-size:8.5px;
  }
  body[dir="rtl"] .work-card-clickable::after{
    right:auto;
    left:14px;
  }

  .work-copy{
    padding:18px 18px 20px !important;
  }
  .work-copy h3{
    font-size:25px !important;
  }
  .work-copy p{
    font-size:14px !important;
    line-height:1.62 !important;
  }
  .work-kicker{
    font-size:10px !important;
  }

  /* service cards: text must remain readable after QR entry */
  .services-stage .card p{
    font-size:14px !important;
  }
  .services-stage .tag{
    font-size:10px !important;
  }

  .feature::before{
    width:50px;
    right:22px;
    top:30px;
  }
  body[dir="rtl"] .feature::before{
    right:auto;
    left:22px;
  }
  .case-service-list,
  .case-result{
    font-size:14px !important;
  }

  .contact{
    padding-top:68px !important;
    padding-bottom:72px !important;
  }
}

/* Small phones */
@media (max-width:560px){
  .brandmark-img{
    width:124px !important;
  }
  .section-head p,
  .real-case-head p{
    font-size:14px !important;
  }
  .contact .tiny,
  .phone{
    font-size:11px;
  }
}


/* ============================================================
   V29 — SIGNATURE HERO
   Exact MAQTA Q + exact approved 34° oxide cut.
   ============================================================ */
.hero-signature{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:660px;
}
.hero-signature > *:not(.hero-q-signature){
  position:relative;
  z-index:2;
}
@keyframes maqtaCutIn{
  from{opacity:0;transform:translate(-18px,12px) scaleX(.78)}
  to{opacity:.88;transform:none}
}

/* The hero now has one full-size brand signature, so suppress the old tiny slash. */
.hero-signature h1 .cutword:after{
  display:none !important;
}

.hero-signature .kicker{
  text-align:center;
  margin-bottom:30px;
}
.hero-signature h1{
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
  text-wrap:balance;
  position:relative;
}

/* Editorial rule interrupted by the 34° MAQTA cut */
.hero-brand-rule{
  position:relative !important;
  width:min(820px,80%);
  height:18px;
  margin:44px auto 0;
}
.hero-brand-rule::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:1px;
  background:var(--line);
}
.hero-brand-rule span{
  position:absolute;
  left:52%;
  top:2px;
  width:44px;
  height:3px;
  background:var(--paper);
  transform:translateX(-50%) rotate(-34deg);
}
.hero-brand-rule span::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--oxide);
  transform:scaleX(.62);
  transform-origin:center;
}

.hero-signature .hero-bottom{
  border-top:0 !important;
  margin-top:18px !important;
  padding-top:16px !important;
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:1fr !important;
  gap:28px !important;
  text-align:center;
}
.hero-signature .hero-copy{
  max-width:760px;
  margin:0 auto;
}
.hero-signature .lead,
.hero-signature .sub{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.hero-signature .hero-cta,
body[dir="rtl"] .hero-signature .hero-cta{
  align-items:center !important;
  justify-content:center;
  min-width:0;
}
.hero-signature .hero-cta .btn{
  min-width:230px;
}

.hero-footerline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1050px;
  margin:48px auto 0;
  padding-top:19px;
  border-top:1px solid rgba(23,23,22,.10);
}
.hero-meta{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--soft);
  font-size:9px;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.hero-meta-dot{
  color:var(--oxide);
}
.hero-scroll-cue{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .2s ease, color .2s ease;
}
.hero-scroll-cue:hover{
  color:var(--oxide);
  transform:translateY(2px);
}
body[dir="rtl"] .hero-meta,
body[dir="rtl"] .hero-scroll-cue{
  letter-spacing:0;
  text-transform:none;
}

/* Desktop composition */
@media(min-width:900px){
  .hero-signature{
    padding-top:88px !important;
    padding-bottom:44px !important;
  }
  .hero-signature h1{
    font-size:clamp(78px,7.4vw,122px) !important;
    line-height:.88 !important;
  }
}

/* Tablet / mobile: same idea, not a stripped-down version */
@media(max-width:899px){
  .hero-signature{
    min-height:0;
    padding-top:66px !important;
    padding-bottom:40px !important;
  }
  .hero-q-signature{
    width:360px;
    right:-100px;
    top:36px;
  }
  .hero-q-ghost{
    opacity:.045;
  }
  .hero-q-slash{
    opacity:.68;
  }
  .hero-brand-rule{
    width:88%;
    margin-top:34px;
  }
  .hero-signature .hero-bottom{
    gap:24px !important;
  }
  .hero-footerline{
    margin-top:38px;
    padding-top:17px;
    flex-direction:column;
    gap:13px;
    text-align:center;
  }
  .hero-meta{
    justify-content:center;
    flex-wrap:wrap;
    row-gap:6px;
    font-size:8.5px;
  }
  .hero-scroll-cue{
    font-size:9px;
  }
}

@media(max-width:560px){
  .hero-signature .kicker{
    margin-bottom:24px;
  }
  .hero-signature h1{
    font-size:clamp(48px,13vw,62px) !important;
    line-height:.92 !important;
  }
  .hero-q-signature{
    width:310px;
    right:-102px;
    top:42px;
  }
  .hero-brand-rule{
    margin-top:30px;
  }
  .hero-signature .lead{
    font-size:19px !important;
    line-height:1.42 !important;
  }
  .hero-signature .sub{
    font-size:14px !important;
  }
  .hero-footerline{
    margin-top:34px;
  }
  .hero-meta-dot{
    display:none;
  }
  .hero-meta span{
    width:100%;
    text-align:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-q-slash{
    animation:none;
  }
}
@keyframes maqtaVectorCutIn{
  from{opacity:0;transform:translate(-10px,7px) scaleX(.80)}
  to{opacity:.90;transform:none}
}

/* Slightly larger desktop vector since it remains perfectly sharp */
@media(min-width:900px){
  .hero-q-vector{
    width:min(44vw,590px) !important;
  }
}
@media(max-width:899px){
  .hero-q-vector{
    width:370px !important;
  }
}
@media(max-width:560px){
  .hero-q-vector{
    width:320px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-q-vector-slash{
    animation:none;
  }
}


/* ============================================================
   V31 — HERO CORRECTION PASS
   Remove oversized red mass, keep only quiet Q watermark,
   add one precise oxide slash, and give the title more air.
   ============================================================ */

/* The hero needs more breathing room below the header */
.hero-signature{
  min-height:700px !important;
}
@media(min-width:900px){
  .hero-signature{
    padding-top:124px !important;
    padding-bottom:52px !important;
  }
}
@media(max-width:899px){
  .hero-signature{
    padding-top:84px !important;
    padding-bottom:42px !important;
  }
}

/* Add one elegant, independent 34° cut accent */
.hero-cut-accent{
  position:relative;
  display:block;
  width:72px;
  height:3px;
  margin:18px auto 0;
  background:var(--oxide);
  border-radius:999px;
  transform:rotate(-34deg);
  z-index:3;
  box-shadow:0 0 0 10px rgba(244,241,236,.0);
}

/* Make the headline sit a little lower and feel less crowded */
.hero-signature .kicker{
  margin-bottom:34px !important;
}
.hero-signature h1{
  margin-top:14px !important;
  max-width:980px !important;
}
@media(min-width:900px){
  .hero-signature h1{
    font-size:clamp(76px,7vw,116px) !important;
    line-height:.90 !important;
  }
}

/* The editorial rule should support, not compete */
.hero-brand-rule{
  margin-top:34px !important;
  width:min(840px,82%) !important;
}
.hero-brand-rule span{
  left:50% !important;
}
.hero-brand-rule span::after{
  transform:scaleX(.55) !important;
}

/* Hero footer should not be visually touched by the watermark */
.hero-footerline{
  position:relative;
  z-index:3;
}

/* Mobile adjustments */
@media(max-width:899px){
  .hero-q-signature{
    width:300px !important;
    right:-48px !important;
    top:118px !important;
  }
  .hero-q-vector-carbon{
    opacity:.038 !important;
  }
  .hero-signature .kicker{
    margin-bottom:28px !important;
  }
  .hero-cut-accent{
    width:58px;
    margin-top:14px;
  }
  .hero-brand-rule{
    margin-top:26px !important;
    width:90% !important;
  }
}
@media(max-width:560px){
  .hero-q-signature{
    width:266px !important;
    right:-54px !important;
    top:126px !important;
  }
  .hero-signature h1{
    font-size:clamp(46px,12vw,60px) !important;
    line-height:.94 !important;
  }
  .hero-cut-accent{
    width:52px;
  }
}


/* ============================================================
   V32 — FINAL HERO BALANCE
   One cut only · clearer Q · shorter first screen
   ============================================================ */

/* Remove the extra standalone cut under the headline.
   Keep only the small 34° cut integrated into the editorial rule. */
.hero-cut-accent{
  display:none !important;
}

/* Only one signature cut: the editorial-rule cut */
.hero-brand-rule{
  width:min(820px,78%) !important;
  margin-top:30px !important;
  height:17px !important;
}
.hero-brand-rule span{
  left:50% !important;
  width:48px !important;
  height:3px !important;
}
.hero-brand-rule span::after{
  transform:scaleX(.62) !important;
}

/* Shorten the hero so the next section begins to enter the viewport */
.hero-signature{
  min-height:0 !important;
}
@media(min-width:900px){
  .hero-signature{
    padding-top:88px !important;
    padding-bottom:24px !important;
  }

  .hero-signature .kicker{
    margin-bottom:26px !important;
  }

  .hero-signature h1{
    margin-top:4px !important;
    font-size:clamp(72px,6.7vw,108px) !important;
    line-height:.91 !important;
  }

  .hero-signature .hero-bottom{
    margin-top:12px !important;
    padding-top:10px !important;
    gap:22px !important;
  }

  .hero-signature .lead{
    margin-bottom:12px !important;
  }

  .hero-footerline{
    margin-top:30px !important;
    padding-top:15px !important;
  }

  /* Pull Selected Work visually closer to the first screen */
  .final-work-flow > .refined-work{
    margin-top:42px !important;
  }
}

/* Slightly quieter metadata so it does not compete with the CTA */
.hero-meta,
.hero-scroll-cue{
  opacity:.78;
}

/* Tablet and mobile: preserve same composition */
@media(max-width:899px){
  .hero-signature{
    padding-top:72px !important;
    padding-bottom:28px !important;
  }

  .hero-q-signature{
    width:245px !important;
    right:-8px !important;
    top:112px !important;
  }

  .hero-q-vector-carbon{
    opacity:.032 !important;
  }

  .hero-signature .kicker{
    margin-bottom:24px !important;
  }

  .hero-brand-rule{
    width:86% !important;
    margin-top:24px !important;
  }

  .hero-signature .hero-bottom{
    margin-top:10px !important;
    padding-top:9px !important;
    gap:20px !important;
  }

  .hero-footerline{
    margin-top:28px !important;
  }

  .final-work-flow > .refined-work{
    margin-top:46px !important;
  }
}

@media(max-width:560px){
  .hero-q-signature{
    width:220px !important;
    right:-18px !important;
    top:118px !important;
  }

  .hero-signature h1{
    font-size:clamp(45px,11.8vw,58px) !important;
  }

  .hero-brand-rule{
    margin-top:22px !important;
  }

  .hero-footerline{
    margin-top:25px !important;
  }
}

/* Keep the Q behind content and never let it touch the footer metadata */
.hero-signature > *:not(.hero-q-signature){
  position:relative;
  z-index:2;
}

/* The single oxide cut remains only on the editorial rule */
.hero-cut-accent{
  display:none !important;
}

/* Desktop positioning tuned for ~1366–1600px screens */
@media(min-width:1200px){
  .hero-q-type{
    right:9.5% !important;
    top:122px !important;
  }
  .hero-q-letter{
    font-size:420px;
    opacity:.050;
  }
}

/* Laptop */
@media(min-width:900px) and (max-width:1199px){
  .hero-q-type{
    right:5.5% !important;
    top:136px !important;
  }
  .hero-q-letter{
    font-size:360px;
    opacity:.047;
  }
}

/* Mobile / tablet: still clearly Q, but quieter */
@media(max-width:899px){
  .hero-q-type{
    right:-22px !important;
    top:138px !important;
  }
  .hero-q-letter{
    font-size:260px;
    opacity:.042;
    transform:scaleX(.92);
  }
}

@media(max-width:560px){
  .hero-q-type{
    right:-34px !important;
    top:142px !important;
  }
  .hero-q-letter{
    font-size:230px;
    opacity:.038;
  }
}

/* Let the exact logo act as a quiet brand stamp, not a giant background shape */
@media(min-width:1200px){
  .hero-q-approved{
    width:176px !important;
    right:12.5% !important;
    top:205px !important;
  }
}

@media(min-width:900px) and (max-width:1199px){
  .hero-q-approved{
    width:148px !important;
    right:8% !important;
    top:218px !important;
  }
}

@media(max-width:899px){
  .hero-q-approved{
    width:108px !important;
    right:6% !important;
    top:190px !important;
    opacity:.065;
  }
}

@media(max-width:560px){
  .hero-q-approved{
    width:86px !important;
    right:4% !important;
    top:188px !important;
    opacity:.055;
  }
}

/* Keep only one independent MAQTA cut on the editorial rule */
.hero-cut-accent{
  display:none !important;
}
.hero-brand-rule span{
  width:42px !important;
  height:3px !important;
  left:50% !important;
}
.hero-brand-rule span::after{
  background:var(--oxide) !important;
  transform:scaleX(.58) !important;
}

/* Slightly refine hero spacing now that the giant watermark is gone */
@media(min-width:900px){
  .hero-signature{
    padding-top:92px !important;
    padding-bottom:28px !important;
  }
  .hero-signature h1{
    max-width:930px !important;
  }
}

/* Rebuild hero as a quieter, sharper editorial composition */
.hero-signature{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:0 !important;
}
.hero-signature > *{
  position:relative;
  z-index:2;
}

/* One subtle precision-cut architecture on the right */
.hero-signature::before{
  content:"";
  position:absolute;
  z-index:0;
  right:8.5%;
  top:176px;
  width:min(25vw,320px);
  height:280px;
  border:1px solid rgba(23,23,22,.08);
  border-radius:18px;
  clip-path:polygon(15% 0,100% 0,100% 84%,84% 100%,0 100%,0 15%);
  opacity:.95;
}
.hero-signature::after{
  content:"";
  position:absolute;
  z-index:0;
  right:11.5%;
  top:244px;
  width:min(17vw,200px);
  height:2px;
  background:rgba(166,58,34,.22);
  transform:rotate(-34deg);
  border-radius:999px;
}

/* Strong but airy first screen */
@media(min-width:900px){
  .hero-signature{
    padding-top:94px !important;
    padding-bottom:18px !important;
  }
  .hero-signature .kicker{
    margin-bottom:28px !important;
  }
  .hero-signature h1{
    max-width:920px !important;
    margin-top:0 !important;
    font-size:clamp(72px,6.85vw,110px) !important;
    line-height:.90 !important;
  }
  .hero-signature .hero-bottom{
    margin-top:10px !important;
    padding-top:10px !important;
    gap:20px !important;
    max-width:860px;
  }
  .hero-signature .lead{
    font-size:24px !important;
    line-height:1.36 !important;
    max-width:900px;
  }
  .hero-signature .sub{
    max-width:720px;
  }
  .hero-footerline{
    margin-top:26px !important;
    padding-top:14px !important;
  }
  .final-work-flow > .refined-work{
    margin-top:36px !important;
  }
}

/* Make the 34° cut the unmistakable visual signature */
.hero-brand-rule{
  width:min(880px,82%) !important;
  height:24px !important;
  margin:30px auto 0 !important;
}
.hero-brand-rule::before{
  top:11px !important;
  background:rgba(23,23,22,.12) !important;
}
.hero-brand-rule span{
  left:50% !important;
  top:4px !important;
  width:68px !important;
  height:2px !important;
  background:transparent !important;
  transform:translateX(-50%) rotate(-34deg) !important;
}
.hero-brand-rule span::after{
  background:var(--oxide) !important;
  transform:scaleX(1) !important;
  border-radius:999px;
}
.hero-brand-rule::after{
  content:"34°";
  position:absolute;
  right:8px;
  top:-2px;
  color:var(--soft);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body[dir="rtl"] .hero-brand-rule::after{
  right:auto;
  left:8px;
  letter-spacing:0;
}

/* CTA zone: clean and centered */
.hero-signature .hero-copy,
.hero-signature .lead,
.hero-signature .sub,
.hero-signature .hero-cta{
  text-align:center !important;
}
.hero-signature .hero-cta .btn{
  min-width:232px;
}

/* Refine footer meta */
.hero-meta,
.hero-scroll-cue{
  opacity:.82;
}

/* Mobile / tablet: keep same idea, hide the large cut-frame */
@media(max-width:899px){
  .hero-signature{
    padding-top:74px !important;
    padding-bottom:22px !important;
  }
  .hero-signature::before,
  .hero-signature::after{
    display:none;
  }
  .hero-signature .kicker{
    margin-bottom:22px !important;
  }
  .hero-signature h1{
    font-size:clamp(46px,11.8vw,60px) !important;
    line-height:.93 !important;
  }
  .hero-brand-rule{
    width:88% !important;
    margin-top:22px !important;
  }
  .hero-brand-rule span{
    width:56px !important;
  }
  .hero-brand-rule::after{
    display:none;
  }
  .hero-signature .hero-bottom{
    gap:18px !important;
    margin-top:8px !important;
    padding-top:8px !important;
  }
  .hero-signature .lead{
    font-size:20px !important;
    line-height:1.42 !important;
  }
  .hero-signature .sub{
    font-size:14px !important;
  }
  .hero-footerline{
    margin-top:22px !important;
  }
  .final-work-flow > .refined-work{
    margin-top:42px !important;
  }
}

.hero-signature{
  position:relative !important;
  isolation:isolate;
  overflow:hidden;
  color:#F4F1EC;
  background:transparent !important;
}

/* Full-bleed photographic background, beyond the .wrap width */
.hero-signature::before{
  content:"";
  display:block !important;
  position:absolute !important;
  z-index:-2 !important;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100% !important;
  transform:translateX(-50%) !important;
  background-image:url("image-01-b4dd0f282b97.webp") !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  opacity:1 !important;
}

/* Controlled overlay: dark enough for typography, still preserves glass detail */
.hero-signature::after{
  content:"";
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  left:50% !important;
  right:auto !important;
  top:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:100% !important;
  transform:translateX(-50%) !important;
  background:
    linear-gradient(90deg,
      rgba(15,15,14,.36) 0%,
      rgba(15,15,14,.46) 34%,
      rgba(15,15,14,.56) 58%,
      rgba(15,15,14,.27) 100%),
    linear-gradient(180deg,
      rgba(15,15,14,.14) 0%,
      rgba(15,15,14,.08) 44%,
      rgba(15,15,14,.28) 100%) !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  opacity:1 !important;
}

/* Typography becomes warm ivory over the dark glass */
.hero-signature .kicker{
  color:rgba(244,241,236,.72) !important;
}
.hero-signature h1{
  color:#F4F1EC !important;
  text-shadow:0 1px 24px rgba(0,0,0,.16);
}
.hero-signature .lead{
  color:#F4F1EC !important;
  text-shadow:0 1px 18px rgba(0,0,0,.14);
}
.hero-signature .sub{
  color:rgba(244,241,236,.68) !important;
}

/* The photo already contains a strong diagonal cut.
   Keep only a tiny brand acknowledgement in the rule. */
.hero-brand-rule{
  width:min(820px,80%) !important;
  margin-top:30px !important;
}
.hero-brand-rule::before{
  background:rgba(244,241,236,.24) !important;
}
.hero-brand-rule span{
  width:40px !important;
  height:2px !important;
}
.hero-brand-rule span::after{
  background:#A63A22 !important;
  opacity:.92;
}
.hero-brand-rule::after{
  color:rgba(244,241,236,.54) !important;
}

/* CTA: ivory pill for a premium editorial contrast */
.hero-signature .btn.primary{
  background:#F4F1EC !important;
  color:#171716 !important;
  border-color:#F4F1EC !important;
  box-shadow:0 10px 28px rgba(0,0,0,.13);
}
.hero-signature .btn.primary:hover{
  background:#FFFFFF !important;
  transform:translateY(-1px);
}
.hero-signature .text-link{
  color:rgba(244,241,236,.76) !important;
}
.hero-signature .text-link:hover{
  color:#F4F1EC !important;
}

/* Footer metadata stays legible but quiet */
.hero-footerline{
  border-top-color:rgba(244,241,236,.18) !important;
}
.hero-meta,
.hero-scroll-cue{
  color:rgba(244,241,236,.62) !important;
  opacity:1 !important;
}
.hero-meta-dot{
  color:#A63A22 !important;
}
.hero-scroll-cue:hover{
  color:#F4F1EC !important;
}

/* Desktop: preserve the elegant full first-screen feel */
@media(min-width:900px){
  .hero-signature{
    padding-top:96px !important;
    padding-bottom:28px !important;
  }
  .hero-signature h1{
    max-width:900px !important;
    font-size:clamp(72px,6.8vw,108px) !important;
    line-height:.90 !important;
  }
  .hero-signature .hero-bottom{
    max-width:870px !important;
  }
  .hero-signature .lead{
    font-size:24px !important;
  }
}

/* Mobile: shift photo so the right-side architectural cut remains visible
   without interfering with centered typography. */
@media(max-width:899px){
  .hero-signature::before{
    background-position:67% center !important;
  }
  .hero-signature::after{
    background:
      linear-gradient(90deg,
        rgba(15,15,14,.58) 0%,
        rgba(15,15,14,.54) 50%,
        rgba(15,15,14,.37) 100%),
      linear-gradient(180deg,
        rgba(15,15,14,.20) 0%,
        rgba(15,15,14,.12) 45%,
        rgba(15,15,14,.34) 100%) !important;
  }
  .hero-signature{
    padding-top:76px !important;
    padding-bottom:24px !important;
  }
  .hero-signature h1{
    color:#F4F1EC !important;
  }
  .hero-brand-rule::after{
    display:none !important;
  }
}

/* Small phones */
@media(max-width:560px){
  .hero-signature::before{
    background-position:72% center !important;
  }
  .hero-signature .lead{
    font-size:19px !important;
  }
}


/* ===== Arabic phone-number direction fix ===== */
.phone,
a[href^="tel:"],
[data-phone],
.phone-number{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  display:inline-block;
  text-align:left;
}
body[dir="rtl"] .phone,
body[dir="rtl"] a[href^="tel:"],
body[dir="rtl"] [data-phone],
body[dir="rtl"] .phone-number{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}


/* ============================================================
   V38 — PRE-LAUNCH POLISH
   Faster first visuals · clean anchors · tighter mobile rhythm
   ============================================================ */

/* ------------------------------------------------------------
   Anchor / sticky-header safety
   ------------------------------------------------------------ */
html{
  scroll-padding-top:92px;
}
section[id],
#work,
#contact,
.refined-work,
.feature,
.services-stage,
.process{
  scroll-margin-top:92px;
}
@media(max-width:899px){
  html{
    scroll-padding-top:78px;
  }
  section[id],
  #work,
  #contact,
  .refined-work,
  .feature,
  .services-stage,
  .process{
    scroll-margin-top:78px;
  }
}

/* ------------------------------------------------------------
   Selected Work: avoid black placeholders while images decode
   ------------------------------------------------------------ */
.work-image-wrap{
  background:
    linear-gradient(135deg,
      rgba(244,241,236,.96),
      rgba(230,224,214,.86)) !important;
  position:relative;
}
.work-image-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 28%, rgba(166,58,34,.06), transparent 32%),
    linear-gradient(135deg, rgba(23,23,22,.025), transparent 62%);
  pointer-events:none;
}
.work-image{
  position:relative;
  z-index:1;
  background:transparent !important;
}

/* Slightly quieter touch hint */
@media(max-width:899px){
  .work-card-clickable::after{
    background:rgba(17,17,16,.44) !important;
    border-color:rgba(255,255,255,.20) !important;
    backdrop-filter:blur(7px) !important;
    font-size:8px !important;
    padding:6px 8px !important;
  }
}

/* ------------------------------------------------------------
   MAQTA / SIGN: refine the 34° gesture
   ------------------------------------------------------------ */
.feature::before{
  width:58px !important;
  opacity:.78 !important;
}
@media(max-width:899px){
  .feature::before{
    width:38px !important;
    opacity:.72 !important;
  }
}

/* ------------------------------------------------------------
   Services: tighter mobile cards, same premium feel
   ------------------------------------------------------------ */
@media(max-width:899px){
  .services-stage .grid{
    gap:12px !important;
  }
  .services-stage .card{
    min-height:0 !important;
    padding:24px 20px !important;
    border-radius:20px !important;
  }
  .services-stage .card h3{
    margin-bottom:10px !important;
    font-size:29px !important;
    line-height:1.03 !important;
  }
  .services-stage .card p{
    margin-bottom:14px !important;
    font-size:14px !important;
    line-height:1.58 !important;
  }
  .services-stage .tag{
    font-size:9.5px !important;
  }
}

/* ------------------------------------------------------------
   Process: cleaner mobile entry below sticky nav
   ------------------------------------------------------------ */
@media(max-width:899px){
  .process .section-head{
    margin-bottom:24px !important;
  }
  .process-row{
    padding:20px 16px !important;
    gap:14px !important;
  }
  .process-row .num,
  .process-row .step{
    line-height:1.15 !important;
  }
}

/* ------------------------------------------------------------
   Case studies: mobile reaches visuals faster
   ------------------------------------------------------------ */
@media(max-width:820px){
  .case-hero-copy{
    padding:26px 18px 20px !important;
  }
  .case-eyebrow{
    margin-bottom:11px !important;
  }
  .case-hero-copy h2{
    font-size:clamp(38px,11vw,52px) !important;
    line-height:.94 !important;
    margin-bottom:10px !important;
  }
  .case-subtitle{
    margin-bottom:15px !important;
    font-size:9px !important;
  }
  .case-summary{
    max-width:520px !important;
    font-size:13.5px !important;
    line-height:1.58 !important;
  }
  .case-hero-media{
    min-height:245px !important;
  }
  .case-close{
    width:38px !important;
    height:38px !important;
    top:12px !important;
    right:12px !important;
  }
  body[dir="rtl"] .case-close{
    right:auto !important;
    left:12px !important;
  }

  /* Galleries breathe without feeling oversized */
  .luna-gallery,
  .pure-gallery{
    padding:12px !important;
    gap:10px !important;
  }
  .luna-shot,
  .pure-shot,
  .case-detail-shot{
    min-height:220px !important;
    border-radius:14px !important;
  }

  .case-details{
    padding:12px !important;
    gap:10px !important;
  }
  .case-specs{
    padding:20px !important;
    border-radius:14px !important;
    gap:20px !important;
  }
  .case-actions{
    padding:0 12px 14px !important;
    gap:10px !important;
  }
}

/* ------------------------------------------------------------
   Footer: keep phone number direction correct in Arabic
   ------------------------------------------------------------ */
.phone,
a[href^="tel:"],
[data-phone],
.phone-number{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  display:inline-block;
}
body[dir="rtl"] .phone,
body[dir="rtl"] a[href^="tel:"],
body[dir="rtl"] [data-phone],
body[dir="rtl"] .phone-number{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}

/* ------------------------------------------------------------
   Small-screen rhythm
   ------------------------------------------------------------ */
@media(max-width:560px){
  .refined-work .section-head,
  .services-stage .section-head,
  .process .section-head{
    margin-bottom:22px !important;
  }
  .work-grid{
    gap:14px !important;
  }
  .work-card{
    border-radius:18px !important;
  }
  .work-copy{
    padding:17px 16px 18px !important;
  }
  .work-copy h3{
    font-size:24px !important;
  }
  .application-note{
    margin-top:14px !important;
    font-size:11px !important;
    line-height:1.55 !important;
  }
}


/* ============================================================
   V39 — TRUST, READY-TO-APPLY & MOBILE CONVERSION
   FAQ · production specs · Instagram · direct WhatsApp CTA
   ============================================================ */

.service-spec{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(23,23,22,.12);
  color:var(--soft);
  font-size:12.5px;
  line-height:1.65;
}
.service-spec strong{color:var(--ink);font-weight:700}

.sign-ready{
  margin-top:28px;
  padding:24px 26px 22px;
  border:1px solid rgba(244,241,236,.20);
  border-radius:18px;
  background:rgba(244,241,236,.055);
  position:relative;
  overflow:hidden;
}
.sign-ready::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:92px; height:2px;
  background:var(--oxide);
  transform-origin:left center;
  transform:rotate(-34deg) translateY(-8px);
}
body[dir="rtl"] .sign-ready::before{
  left:auto; right:0;
  transform-origin:right center;
  transform:rotate(34deg) translateY(-8px);
}
.sign-ready-kicker{
  font-size:9px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:#C9C4B8;
  margin-bottom:8px;
}
body[dir="rtl"] .sign-ready-kicker{letter-spacing:0;text-transform:none}
.sign-ready-title{
  margin:0 0 8px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:24px; line-height:1.12; font-weight:500;
}
body[dir="rtl"] .sign-ready-title{font-family:"Tahoma","Arial",sans-serif}
.sign-ready-text{
  margin:0;
  max-width:760px;
  color:#C9C4B8;
  font-size:13.5px;
  line-height:1.7;
}
.sign-ready-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.sign-ready-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(244,241,236,.18);
  border-radius:999px;
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#F4F1EC;
}
body[dir="rtl"] .sign-ready-tags span{letter-spacing:0;text-transform:none}

.faq{
  padding-top:22px;
  padding-bottom:88px;
}
.faq .section-head{margin-bottom:26px}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  gap:20px;
  align-items:center;
  min-height:78px;
  padding:18px 2px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(20px,2.1vw,26px);
  line-height:1.25;
}
body[dir="rtl"] .faq-item summary{font-family:"Tahoma","Arial",sans-serif}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{
  width:32px;height:32px;
  border:1px solid rgba(23,23,22,.22);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  transition:.22s ease;
}
.faq-item[open] .faq-plus{
  transform:rotate(45deg);
  background:var(--ink);
  color:var(--paper);
}
.faq-answer{
  max-width:820px;
  padding:0 54px 22px 2px;
  color:var(--soft);
  font-size:14px;
  line-height:1.78;
}
body[dir="rtl"] .faq-answer{padding:0 2px 22px 54px}

.contact-meta{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 22px;
  color:var(--soft);
  font-size:12px;
}
.contact-meta a{
  border-bottom:1px solid rgba(23,23,22,.22);
  padding-bottom:2px;
  transition:.2s ease;
}
.contact-meta a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* Floating WhatsApp — visible on desktop and mobile */
.mobile-wa{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:80;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#171716;
  color:#F4F1EC;
  box-shadow:0 14px 36px rgba(0,0,0,.26);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(244,241,236,.16);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
  isolation:isolate;
}
.mobile-wa::after{
  content:"";
  position:absolute;
  top:8px;
  right:6px;
  width:17px;
  height:2px;
  border-radius:2px;
  background:var(--oxide);
  transform:rotate(-34deg);
  transform-origin:center;
  z-index:-1;
}
.mobile-wa:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(0,0,0,.32);
  background:#111110;
}
.mobile-wa svg{width:25px;height:25px;flex:0 0 auto}
.mobile-wa span{
  position:absolute;
  right:70px;
  top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;
  padding:9px 12px;
  border-radius:10px;
  background:#171716;
  color:#F4F1EC;
  font-size:11px;
  font-weight:700;
  letter-spacing:.01em;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.mobile-wa:hover span,
.mobile-wa:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
body[dir="rtl"] .mobile-wa span{letter-spacing:0}

@media(max-width:899px){
  .mobile-wa{
    left:14px;
    right:14px;
    bottom:max(12px, env(safe-area-inset-bottom));
    width:auto;
    height:auto;
    min-height:54px;
    padding:0 18px;
    border-radius:999px;
    gap:10px;
  }
  .mobile-wa::after{top:7px;right:16px;width:21px}
  .mobile-wa svg{width:19px;height:19px}
  .mobile-wa span{
    position:static;
    transform:none;
    opacity:1;
    padding:0;
    background:transparent;
    box-shadow:none;
    font-size:13px;
    white-space:normal;
    pointer-events:auto;
  }
  .mobile-wa:hover span,
  .mobile-wa:focus-visible span{transform:none}
  .footer{padding-bottom:86px !important}
  .faq{padding-bottom:64px}
  .faq-item summary{min-height:70px;padding:16px 0;font-size:20px;gap:14px}
  .faq-answer,
  body[dir="rtl"] .faq-answer{padding-left:0;padding-right:0;padding-bottom:20px}
  .sign-ready{padding:22px 20px 20px}
  .sign-ready-title{font-size:22px}
  .service-spec{font-size:12px;margin-top:15px;padding-top:14px}
}

#work,#services,#faq{scroll-margin-top:92px}
@media(max-width:899px){#work,#services,#faq{scroll-margin-top:78px}}


/* ===== V41 MULTIPAGE ===== */
:root{--max:1160px}
body.page-site{min-height:100vh}
.nav a{cursor:pointer}
.mobile-page-links{display:none}
@media(max-width:1119px){.mobile-page-links{display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid rgba(23,23,22,.07);min-height:38px;padding:0 16px;background:rgba(243,239,230,.90)}.mobile-page-links a{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}.mobile-page-links a.active{color:var(--oxide)}body[dir="rtl"] .mobile-page-links a{letter-spacing:0;text-transform:none}}
@media(max-width:430px){.mobile-page-links{gap:15px}.mobile-page-links a{font-size:8.5px}}
.nav-link.active{color:var(--oxide)}
.lang-switch a.lang-btn{display:inline-flex;align-items:center;justify-content:center}
.page-main{min-height:65vh}
.page-hero{padding:106px 0 74px;border-bottom:1px solid var(--line)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:70px;align-items:end}
.page-eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--oxide);font-weight:700;margin-bottom:24px}
.page-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(54px,7vw,104px);line-height:.9;font-weight:400;letter-spacing:-.045em;margin:0;max-width:890px}
.page-title .accent{color:var(--oxide)}
.page-intro{font-size:16px;line-height:1.7;color:var(--soft);max-width:470px;margin:0}
.page-rule{width:56px;height:2px;background:var(--oxide);transform:rotate(-34deg);margin:30px 0 0}
.breadcrumbs{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-bottom:28px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.breadcrumbs a{border-bottom:1px solid transparent}.breadcrumbs a:hover{border-bottom-color:currentColor}
.page-section{padding:86px 0;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:44px;align-items:end}
.section-head h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(38px,5vw,66px);letter-spacing:-.035em;line-height:.98;margin:0}
.section-head p{max-width:540px;color:var(--soft);line-height:1.7;margin:0}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
a.project-card{display:block;border:1px solid rgba(23,23,22,.10);background:rgba(255,255,255,.16);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
a.project-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(23,23,22,.08)}
.project-card-image{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.project-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
a.project-card:hover img{transform:scale(1.018)}
.project-card-copy{padding:22px 22px 25px}
.project-card-kicker{font-size:10px;letter-spacing:.15em;color:var(--oxide);text-transform:uppercase;margin-bottom:10px;font-weight:700}
.project-card-copy h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:30px;margin:0 0 8px;letter-spacing:-.02em}
.project-card-copy p{color:var(--soft);font-size:13px;line-height:1.62;margin:0;max-width:520px}
.project-card-arrow{display:inline-block;margin-top:16px;font-size:18px;color:var(--oxide)}
.concept-note{margin-top:28px;font-size:11px;color:var(--soft);line-height:1.6;border-left:2px solid var(--oxide);padding-left:14px;max-width:780px}
body[dir="rtl"] .concept-note{border-left:0;border-right:2px solid var(--oxide);padding-left:0;padding-right:14px}

.project-hero{padding:82px 0 42px}
.project-head{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:42px}
.project-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(52px,7vw,96px);line-height:.92;font-weight:400;letter-spacing:-.045em;margin:0}
.project-subtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oxide);margin:15px 0 0;font-weight:700}
.project-summary{font-size:17px;line-height:1.75;color:var(--soft);max-width:520px;margin:0}
.project-cover{width:100%;aspect-ratio:16/9;overflow:hidden;background:#ddd}
.project-cover img{width:100%;height:100%;object-fit:cover;display:block}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:64px 0}
.gallery-item{overflow:hidden;background:#ddd}
.gallery-item img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-item.wide{grid-column:1/-1;aspect-ratio:16/9}
.gallery-item.square{aspect-ratio:4/3}
.project-next{padding:80px 0;background:var(--ink);color:var(--paper)}
.project-next .page-eyebrow{color:#c86a56}
.project-next h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(40px,6vw,76px);line-height:.98;margin:0 0 30px;max-width:840px}
.button-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-dark,.btn-light,.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;border:1px solid transparent;transition:.2s ease}
.btn-dark{background:var(--ink);color:var(--paper)}.btn-dark:hover{background:#2a2a28}
.btn-light{background:var(--paper);color:var(--ink)}.btn-light:hover{background:white}
.btn-outline{border-color:rgba(23,23,22,.28);color:var(--ink)}.btn-outline:hover{border-color:var(--ink)}
.project-next .btn-outline{border-color:rgba(243,239,230,.35);color:var(--paper)}

.services-page .feature{margin-top:0}
.services-page .services-stage{margin-top:0}
.service-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.material-card{padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.16)}
.material-card strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;margin-bottom:10px}
.material-card p{font-size:12px;line-height:1.65;color:var(--soft);margin:0}

.faq-page .faq{padding-top:70px}
.contact-page-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:start}
.contact-card{border:1px solid var(--line);padding:30px;background:rgba(255,255,255,.18)}
.contact-card h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:38px;margin:0 0 20px}
.contact-direct{display:grid;gap:16px;font-size:14px;color:var(--soft)}
.contact-direct a{color:var(--ink);border-bottom:1px solid rgba(23,23,22,.2);width:max-content;max-width:100%}
.project-form{display:grid;gap:18px}
.form-field{display:grid;gap:8px}
.form-field label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--soft)}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid rgba(23,23,22,.18);background:rgba(255,255,255,.38);padding:14px 15px;color:var(--ink);font:inherit;border-radius:0;outline:none}
.form-field textarea{min-height:160px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--oxide)}
.form-note{font-size:11px;line-height:1.6;color:var(--soft);margin:0}

.site-sitemap{padding:28px 0;border-top:1px solid var(--line)}
.site-sitemap-inner{display:flex;gap:18px;flex-wrap:wrap;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.site-sitemap-inner a:hover{color:var(--ink)}

@media(max-width:899px){
 .page-hero{padding:72px 0 52px}.page-hero-grid,.project-head,.project-meta,.section-head,.contact-page-grid{grid-template-columns:1fr;gap:28px}
 .page-title{font-size:clamp(48px,15vw,76px)}.page-intro{font-size:15px}
 .project-grid,.project-gallery{grid-template-columns:1fr}.gallery-item.wide{grid-column:auto}.gallery-item.wide,.gallery-item.square{aspect-ratio:4/3}
 .project-title{font-size:clamp(48px,14vw,76px)}.project-cover{aspect-ratio:4/3}
 .service-materials{grid-template-columns:1fr}
 .page-section{padding:64px 0}.project-next{padding:60px 0}
}
@media(max-width:560px){
 .wrap{padding-left:20px;padding-right:20px}.page-hero{padding-top:54px}.project-card-copy{padding:18px}.contact-card{padding:22px}
}


/* ===== V41.2 — restore centered editorial hierarchy ===== */
.page-hero-grid{
  display:block;
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.page-hero .breadcrumbs{
  justify-content:center;
  text-align:center;
}
.page-hero .page-eyebrow{
  text-align:center;
}
.page-title{
  max-width:940px;
  margin:0 auto;
  text-align:center;
}
.page-intro{
  max-width:650px;
  margin:22px auto 0;
  text-align:center;
}
.page-rule{
  margin:30px auto 0;
}
.section-head{
  display:block;
  max-width:880px;
  margin:0 auto 44px;
  text-align:center;
}
.section-head h2{
  max-width:840px;
  margin:0 auto;
  text-align:center;
}
.section-head p{
  max-width:620px;
  margin:18px auto 0;
  text-align:center;
}
.project-head{
  display:block;
  max-width:980px;
  margin:0 auto 42px;
  text-align:center;
}
.project-title{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}
.project-subtitle{
  text-align:center;
}
.project-summary{
  max-width:660px;
  margin:22px auto 0;
  text-align:center;
}
.project-next .wrap{
  text-align:center;
}
.project-next h2{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.project-next .page-eyebrow{
  text-align:center;
}
.project-next .button-row{
  justify-content:center;
}
body[dir="rtl"] .page-title,
body[dir="rtl"] .project-title{
  font-family:"Tahoma","Arial",sans-serif;
  letter-spacing:-.02em;
}
body[dir="rtl"] .page-intro,
body[dir="rtl"] .project-summary,
body[dir="rtl"] .page-eyebrow,
body[dir="rtl"] .breadcrumbs{
  text-align:center;
}
@media(max-width:899px){
  .page-hero-grid,
  .project-head,
  .section-head{
    display:block;
  }
  .page-intro,
  .project-summary,
  .section-head p{
    margin-top:16px;
  }
}


/* ============================================================
   V41.3 — INTERNAL PAGE VISUAL IDENTITY PASS
   Match the photographic Carbon / Ivory / Oxide language of Home.
   ============================================================ */

/* 1) Four service cards: identical vertical start for content. */
.services-stage .card{
  justify-content:flex-start !important;
}
.services-stage .card .card-num{
  flex:0 0 auto;
  margin-bottom:38px;
}
.services-stage .card > div:last-child{
  margin-top:0;
}
@media(max-width:899px){
  .services-stage .card .card-num{
    margin-bottom:26px;
  }
}

/* 2) Top-level internal heroes: same visual family as the homepage hero. */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:1160px;
  min-height:520px;
  margin:30px auto 0;
  padding:76px 0 68px;
  border-bottom:0;
  display:flex;
  align-items:center;
  color:#F4F1EC;
  background:#171716;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("image-01-b4dd0f282b97.webp");
  background-size:cover;
  background-position:center 50%;
  background-repeat:no-repeat;
  transform:scale(1.015);
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(14,14,13,.58) 0%,rgba(14,14,13,.70) 48%,rgba(14,14,13,.42) 100%),
    linear-gradient(180deg,rgba(14,14,13,.14) 0%,rgba(14,14,13,.20) 55%,rgba(14,14,13,.44) 100%);
}
.page-hero-grid{
  position:relative;
  z-index:1;
  width:100%;
  max-width:980px;
  padding-top:10px;
  padding-bottom:10px;
}
.page-hero-grid::after{
  content:"DESIGN · PRINT · SIGN · DIGITAL";
  display:block;
  width:min(760px,82%);
  margin:40px auto 0;
  padding-top:19px;
  border-top:1px solid rgba(244,241,236,.18);
  color:rgba(244,241,236,.54);
  font-size:9px;
  letter-spacing:.18em;
  text-align:center;
}
.page-hero .breadcrumbs{
  color:rgba(244,241,236,.54);
  margin-bottom:24px;
}
.page-hero .breadcrumbs a:hover{
  color:#F4F1EC;
}
.page-hero .page-eyebrow{
  color:#D4745D;
  margin-bottom:22px;
}
.page-hero .page-title{
  color:#F4F1EC;
  max-width:940px;
  font-size:clamp(52px,6.4vw,88px);
  line-height:.91;
  text-shadow:0 2px 24px rgba(0,0,0,.17);
}
.page-hero .page-intro{
  color:rgba(244,241,236,.72);
  max-width:660px;
  font-size:15.5px;
  line-height:1.68;
  margin-top:24px;
}
.page-hero .page-rule{
  background:#A63A22;
  width:48px;
  margin-top:27px;
}
.work-page .page-hero::before{background-position:center 44%}
.services-page .page-hero::before{background-position:67% center}
.faq-page .page-hero::before{background-position:40% center}
.contact-page .page-hero::before{background-position:74% center}
.work-page .page-title{font-size:clamp(48px,5.7vw,78px);max-width:960px}

/* Keep content from feeling detached from the new hero. */
.page-hero + .page-section,
.page-hero + .faq{
  margin-top:0;
}

/* 3) Project-detail hero: Carbon editorial panel before the case image. */
.project-hero{
  padding-top:50px;
}
.project-hero > .wrap > .breadcrumbs{
  justify-content:center;
  text-align:center;
  margin-bottom:28px;
}
.project-head{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:none;
  width:100%;
  min-height:360px;
  padding:62px 56px 58px;
  margin:0 auto 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#171716;
  color:#F4F1EC;
}
.project-head::before{
  content:"";
  position:absolute;
  width:250px;
  height:2px;
  right:-54px;
  top:43%;
  z-index:-1;
  background:#A63A22;
  transform:rotate(-34deg);
  opacity:.72;
}
body[dir="rtl"] .project-head::before{
  right:auto;
  left:-54px;
  transform:rotate(34deg);
}
.project-head::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 18%,rgba(166,58,34,.10),transparent 26%),
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 52%);
}
.project-head .page-eyebrow{
  color:#D4745D;
  margin-bottom:18px;
}
.project-title{
  color:#F4F1EC;
  font-size:clamp(54px,7vw,92px);
  text-shadow:0 2px 22px rgba(0,0,0,.16);
}
.project-subtitle{
  color:rgba(244,241,236,.62);
  margin-top:18px;
}
.project-summary{
  color:rgba(244,241,236,.72);
  margin-top:22px;
}
.project-cover{
  border:1px solid rgba(23,23,22,.08);
}

/* Arabic keeps the same hierarchy but with more comfortable line-height. */
body[dir="rtl"] .page-hero-grid::after{
  letter-spacing:.10em;
}
body[dir="rtl"] .page-hero .page-title{
  font-size:clamp(46px,6vw,80px);
  line-height:1.08;
}
body[dir="rtl"] .project-title{
  font-size:clamp(48px,6.4vw,84px);
  line-height:1.08;
}

@media(max-width:1190px){
  .page-hero{
    margin-left:20px;
    margin-right:20px;
  }
}
@media(max-width:899px){
  .page-hero{
    min-height:440px;
    margin:14px 14px 0;
    padding:62px 0 52px;
  }
  .page-hero::before{background-position:66% center !important}
  .page-hero::after{
    background:
      linear-gradient(90deg,rgba(14,14,13,.67),rgba(14,14,13,.54)),
      linear-gradient(180deg,rgba(14,14,13,.16),rgba(14,14,13,.40));
  }
  .page-hero-grid::after{
    width:90%;
    margin-top:30px;
  }
  .page-hero .page-title,
  .work-page .page-title{
    font-size:clamp(44px,12vw,68px);
  }
  body[dir="rtl"] .page-hero .page-title{
    font-size:clamp(39px,10.5vw,60px);
  }
  .project-hero{padding-top:32px}
  .project-head{
    min-height:310px;
    padding:48px 24px 44px;
  }
}
@media(max-width:560px){
  .page-hero{
    margin-left:10px;
    margin-right:10px;
    min-height:400px;
  }
  .page-hero-grid::after{
    font-size:8px;
    letter-spacing:.12em;
  }
  .project-head{
    padding-left:20px;
    padding-right:20px;
  }
}

/* ============================================================
   V41.4 — FULL-WIDTH INTERNAL HERO
   Internal pages now use the same full-bleed hero width as Home.
   Content remains constrained inside .wrap for editorial balance.
   ============================================================ */

/* Top-level Work / Services / FAQ / Contact heroes */
.page-hero{
  width:100%;
  max-width:none;
  margin:0;
  border-radius:0;
}

/* Remove the inset side gutters introduced in V41.3 on tablet/mobile. */
@media(max-width:1190px){
  .page-hero{
    margin-left:0;
    margin-right:0;
  }
}
@media(max-width:899px){
  .page-hero{
    margin:0;
  }
}
@media(max-width:560px){
  .page-hero{
    margin-left:0;
    margin-right:0;
  }
}

/* Project detail heroes: extend the Carbon panel beyond the page .wrap,
   while keeping title and copy centered to the same editorial measure. */
.project-head{
  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
}

/* Keep the project content measure elegant even when the panel is full width. */
.project-head > *{
  position:relative;
  z-index:1;
}
.project-head .project-title{max-width:920px}
.project-head .project-summary{max-width:660px}

/* ============================================================
   V41.5 — FULL VISUAL AUDIT POLISH
   Rhythm, project breadcrumb integration and mobile WA footprint.
   ============================================================ */

/* Services: give the dark Sign/Vinyl feature room to breathe after the full-width hero. */
.services-page .feature{
  margin-top:72px;
}

/* Project detail pages: make breadcrumbs part of the Carbon hero instead of a pale strip. */
.project-hero{
  padding-top:0;
}
.project-hero > .wrap > .breadcrumbs{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:0;
  padding:27px 28px 5px;
  background:#171716;
  color:rgba(244,241,236,.50);
  justify-content:center;
  text-align:center;
}
.project-hero > .wrap > .breadcrumbs a:hover{
  color:#F4F1EC;
}
.project-head{
  margin-bottom:28px;
}

/* Mobile: preserve the direct WhatsApp CTA while reducing how much content it covers. */
@media(max-width:899px){
  .services-page .feature{
    margin-top:28px;
  }
  .mobile-wa{
    left:auto;
    right:14px;
    width:auto;
    max-width:292px;
    min-height:50px;
    padding:0 16px;
    box-shadow:0 12px 28px rgba(0,0,0,.20);
  }
  body[dir="rtl"] .mobile-wa{
    right:auto;
    left:14px;
  }
  .mobile-wa span{
    font-size:12px;
    line-height:1.25;
  }
  .project-hero > .wrap > .breadcrumbs{
    padding:20px 18px 4px;
    font-size:9px;
  }
  .project-gallery{
    padding-top:42px;
    padding-bottom:54px;
  }
}
@media(max-width:430px){
  .mobile-wa{
    max-width:272px;
  }
}

/* Keep the mobile WhatsApp CTA visually compact and on a single line. */
@media(max-width:899px){
  .mobile-wa{max-width:320px;}
  .mobile-wa span{white-space:nowrap;font-size:11.5px;}
}
@media(max-width:350px){
  .mobile-wa{max-width:292px;}
  .mobile-wa span{font-size:10.5px;}
}


/* ============================================================
   V41.7 — CONVERSION + TRUST PASS
   ============================================================ */
.trust-stage{max-width:1160px;margin:0 auto;padding:86px 0 92px;border-top:1px solid var(--line)}
.trust-inner{padding:0 28px}
.trust-head{max-width:820px;margin:0 auto 44px;text-align:center}
.trust-eyebrow{margin-bottom:16px;color:var(--oxide);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.trust-head h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5vw,64px);font-weight:400;line-height:.98;letter-spacing:-.035em}
.trust-head p{max-width:620px;margin:18px auto 0;color:var(--soft);font-size:14px;line-height:1.7}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-card{position:relative;min-height:245px;padding:28px 24px 30px;border-right:1px solid var(--line)}
.trust-card:last-child{border-right:0}
.trust-card::before{content:"";position:absolute;top:-1px;left:24px;width:42px;height:2px;background:var(--oxide)}
.trust-num{font-size:10px;letter-spacing:.16em;color:var(--soft);margin-bottom:42px}
.trust-card h3{margin:0 0 14px;font-family:Georgia,'Times New Roman',serif;font-size:25px;font-weight:400;line-height:1.05}
.trust-card p{margin:0;color:var(--soft);font-size:12.5px;line-height:1.7}
body[dir="rtl"] .trust-eyebrow{letter-spacing:0;text-transform:none}
body[dir="rtl"] .trust-head h2,body[dir="rtl"] .trust-card h3{font-family:Tahoma,Arial,sans-serif;letter-spacing:0}
body[dir="rtl"] .trust-card{border-right:0;border-left:1px solid var(--line)}
body[dir="rtl"] .trust-card:last-child{border-left:0}
body[dir="rtl"] .trust-card::before{left:auto;right:24px}
body[dir="rtl"] .trust-num{letter-spacing:.08em}
.contact-assurance{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.contact-assurance span{display:inline-flex;align-items:center;min-height:29px;padding:0 10px;border:1px solid rgba(23,23,22,.13);background:rgba(255,255,255,.26);color:var(--soft);font-size:10px;letter-spacing:.04em}
.contact-assurance span::before{content:"";width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--oxide)}
body[dir="rtl"] .contact-assurance span{letter-spacing:0} body[dir="rtl"] .contact-assurance span::before{margin-right:0;margin-left:7px}
.conversion-bridge{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:28px 28px 0;padding:24px 0 2px;border-top:1px solid var(--line)}
.conversion-bridge-copy{display:grid;gap:5px}.conversion-bridge-copy strong{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:400}.conversion-bridge-copy span{color:var(--soft);font-size:12px;line-height:1.55}
.conversion-bridge-link{flex:0 0 auto;padding-bottom:4px;border-bottom:1px solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body[dir="rtl"] .conversion-bridge-copy strong{font-family:Tahoma,Arial,sans-serif} body[dir="rtl"] .conversion-bridge-link{letter-spacing:0;text-transform:none}
@media(max-width:899px){.trust-stage{padding:66px 0 70px}.trust-inner{padding:0 20px}.trust-head{margin-bottom:34px}.trust-grid{grid-template-columns:1fr 1fr}.trust-card{min-height:220px;border-bottom:1px solid var(--line)}.trust-card:nth-child(2){border-right:0}.trust-card:nth-last-child(-n+2){border-bottom:0}body[dir="rtl"] .trust-card:nth-child(2){border-left:0}.conversion-bridge{align-items:flex-start;flex-direction:column;gap:16px;margin-left:20px;margin-right:20px}}
@media(max-width:560px){.trust-grid{grid-template-columns:1fr}.trust-card{min-height:0;border-right:0!important;border-left:0!important;border-bottom:1px solid var(--line)!important;padding:25px 4px 27px}.trust-card:last-child{border-bottom:0!important}.trust-card::before{left:4px}body[dir="rtl"] .trust-card::before{left:auto;right:4px}.trust-num{margin-bottom:24px}.contact-assurance{gap:6px;margin-bottom:17px}.contact-assurance span{font-size:9.5px}}


/* ============================================================
   V41.8 — CASE STUDIES + FULL-SERVICE FAQ
   ============================================================ */
.case-study{
  margin:58px 0 22px;
  padding:66px 0 8px;
  border-top:1px solid var(--line);
}
.case-study-head{
  max-width:820px;
  margin:0 auto 42px;
  text-align:center;
}
.case-study-head .page-eyebrow{margin-bottom:16px;color:var(--oxide)}
.case-study-head h2{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(38px,4.8vw,62px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
}
.case-study-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.case-step{
  position:relative;
  min-height:280px;
  padding:34px 36px 38px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.case-step::after{
  content:"";
  position:absolute;
  width:88px;
  height:1px;
  right:-18px;
  top:37px;
  background:var(--oxide);
  transform:rotate(-34deg);
  opacity:.78;
}
body[dir="rtl"] .case-step::after{right:auto;left:-18px;transform:rotate(34deg)}
.case-num{
  margin-bottom:42px;
  color:var(--oxide);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}
.case-step h3{
  margin:0 0 16px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(30px,3.2vw,44px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
}
.case-step p{
  max-width:560px;
  margin:0;
  color:var(--soft);
  font-size:14px;
  line-height:1.78;
}
.case-result{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.case-result p{color:rgba(244,241,236,.68)}
.case-result .case-num{color:#D4745D}
.case-result::after{background:#D4745D}
body[dir="rtl"] .case-study-head h2,
body[dir="rtl"] .case-step h3{font-family:"Tahoma","Arial",sans-serif;letter-spacing:0;line-height:1.25}

.faq-catalog{padding-top:76px;padding-bottom:96px}
.faq-category{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.55fr);
  gap:70px;
  padding:54px 0 62px;
  border-top:1px solid var(--line);
}
.faq-category:first-child{border-top:0;padding-top:0}
.faq-category-head{display:flex;gap:22px;align-items:flex-start;position:sticky;top:110px;align-self:start}
.faq-category-num{
  flex:0 0 auto;
  padding-top:8px;
  color:var(--oxide);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}
.faq-category-copy h2{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(34px,4vw,52px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
}
.faq-category-copy p{max-width:330px;margin:16px 0 0;color:var(--soft);font-size:13px;line-height:1.7}
.faq-category-items{border-top:1px solid var(--line)}
body[dir="rtl"] .faq-category-copy h2{font-family:"Tahoma","Arial",sans-serif;letter-spacing:0;line-height:1.25}

@media(max-width:899px){
  .case-study{margin-top:44px;padding-top:52px}
  .case-study-head{margin-bottom:30px;padding:0 4px}
  .case-study-grid{grid-template-columns:1fr;gap:12px}
  .case-step{min-height:0;padding:28px 24px 30px}
  .case-num{margin-bottom:26px}
  .faq-catalog{padding-top:56px;padding-bottom:70px}
  .faq-category{grid-template-columns:1fr;gap:26px;padding:46px 0 52px}
  .faq-category-head{position:static;gap:16px}
  .faq-category-copy p{max-width:520px}
}
@media(max-width:560px){
  .case-study-head h2{font-size:36px}
  .case-step h3{font-size:32px}
  .faq-category-copy h2{font-size:34px}
}


/* V41.8 mobile polish — compact WhatsApp control */
@media(max-width:899px){
  .mobile-wa{
    left:auto !important;
    right:14px !important;
    bottom:max(14px, env(safe-area-inset-bottom));
    width:52px !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 !important;
    border-radius:50% !important;
    gap:0 !important;
  }
  body[dir="rtl"] .mobile-wa{
    right:auto !important;
    left:14px !important;
  }
  .mobile-wa span{display:none !important;}
  .mobile-wa svg{width:20px;height:20px;}
  .mobile-wa::after{top:7px;right:7px;width:17px;}
  .footer{padding-bottom:72px !important;}
}


/* V41.9 SEO SERVICE DETAIL PAGES */
.card-detail-link{display:inline-flex;margin-top:22px;padding-bottom:5px;border-bottom:1px solid rgba(166,58,34,.45);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);transition:border-color .2s ease,color .2s ease}
.card-detail-link:hover{color:var(--oxide);border-color:var(--oxide)}
.service-detail-lead{padding:88px 0;border-bottom:1px solid var(--line)}
.service-detail-lead-grid{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:80px;align-items:start}
.service-detail-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--oxide);margin-bottom:18px}
.service-detail-lead h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,4.5vw,64px);font-weight:400;line-height:.98;margin:0;max-width:620px}
.service-detail-copy{font-size:16px;line-height:1.75;color:var(--soft);max-width:680px;margin:0}
.service-detail-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:38px}
.service-detail-card{border:1px solid var(--line);padding:30px;background:rgba(255,255,255,.16);min-height:220px}
.service-detail-card strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:400;line-height:1.08;margin-bottom:14px}
.service-detail-card p{font-size:12.5px;line-height:1.72;color:var(--soft);margin:0}
.service-detail-page .process{margin-top:0}
.service-related{padding:72px 0;border-bottom:1px solid var(--line)}
.service-related-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.service-related h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4vw,52px);font-weight:400;margin:0}
.service-related a{white-space:nowrap}
body[dir="rtl"] .service-detail-lead-grid,body[dir="rtl"] .service-detail-card{text-align:right}
@media(max-width:899px){.service-detail-lead{padding:64px 0}.service-detail-lead-grid{grid-template-columns:1fr;gap:28px}.service-detail-cards{grid-template-columns:1fr}.service-detail-card{min-height:0}.service-related-inner{align-items:flex-start;flex-direction:column}}
.digital-capability-copy .page-eyebrow{color:#c85a3b;margin-bottom:18px}
.service-detail-cards.four-up{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.service-detail-cards.four-up{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){.digital-capability{padding:10px 0 64px}.digital-capability-grid{grid-template-columns:1fr;border-radius:20px;min-height:0}.digital-capability-image{min-height:320px;max-height:420px}.digital-capability-copy{padding:42px 26px 48px}.digital-capability-copy h2{font-size:clamp(38px,12vw,58px)}.service-detail-cards.four-up{grid-template-columns:1fr}}


/* MAQTA SEO semantic project-title compatibility */
.work-project-title{font:inherit;font-family:inherit;color:inherit;}


/* MAQTA SEO portfolio semantic-title visual parity */
.work-copy .work-project-title{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:29px;
  line-height:1;
  font-weight:500;
  letter-spacing:.01em;
}
body[dir="rtl"] .work-copy .work-project-title{
  font-family:Georgia,'Times New Roman',serif;
}
@media(max-width:899px){
  .work-copy .work-project-title{text-align:center;}
}
@media(max-width:430px){
  .work-copy .work-project-title{font-size:25px;}
}


/* MAQTA SEO project-card semantic-title parity */
.project-card-copy .project-card-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:30px;margin:0 0 8px;letter-spacing:-.02em}


/* ===== FINAL QA / ACCESSIBILITY / PORTFOLIO BALANCE ===== */
.skip-link{
  position:fixed;left:16px;top:12px;z-index:9999;
  transform:translateY(-180%);padding:11px 15px;border-radius:999px;
  background:#171716;color:#F3EFE6;font-size:13px;font-weight:700;
  transition:transform .18s ease;
}
.skip-link:focus{transform:none}
body[dir="rtl"] .skip-link{left:auto;right:16px}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid #A63A22;outline-offset:3px;
}
#main-content:focus{outline:none}

.project-card-image,.work-image-wrap{position:relative}
.project-concept-badge,.work-concept-badge{
  position:absolute;z-index:3;top:14px;left:14px;
  padding:7px 10px;border-radius:999px;
  background:rgba(23,23,22,.76);color:#F3EFE6;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
  font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
body[dir="rtl"] .project-concept-badge,body[dir="rtl"] .work-concept-badge{
  left:auto;right:14px;letter-spacing:0;text-transform:none;
}

.portfolio-capabilities{padding:78px 0 86px;border-top:1px solid var(--line)}
.portfolio-capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.portfolio-capability-card{
  min-height:210px;padding:24px;border:1px solid var(--line);border-radius:20px;
  display:flex;flex-direction:column;transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.portfolio-capability-card:hover,.portfolio-capability-card:focus-visible{
  transform:translateY(-3px);border-color:rgba(23,23,22,.38);background:rgba(255,255,255,.18)
}
.portfolio-capability-card h3{font-family:Georgia,'Times New Roman',serif;font-size:25px;font-weight:400;margin:0 0 14px}
body[dir="rtl"] .portfolio-capability-card h3{font-family:Tahoma,Arial,sans-serif}
.portfolio-capability-card p{font-size:13px;line-height:1.65;color:var(--soft);margin:0}
.portfolio-capability-card span{margin-top:auto;padding-top:20px;color:var(--oxide);font-size:20px}

.contact-local-facts{margin-top:26px;padding-top:22px;border-top:1px solid rgba(243,239,230,.16);display:grid;gap:18px}
.contact-local-facts strong{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--oxide)}
.contact-local-facts span{display:inline-block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--ink)}
body[dir="rtl"] .contact-local-facts strong{letter-spacing:0;text-transform:none}

.project-related-services{padding:74px 0;border-top:1px solid var(--line)}
.project-related-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.project-related-links a{min-height:92px;padding:20px 22px;border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;transition:.2s ease}
.project-related-links a:hover,.project-related-links a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}
.project-related-links span{color:var(--oxide);font-size:20px}

@media(max-width:900px){
  .portfolio-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-related-links{grid-template-columns:1fr}
}
@media(max-width:600px){
  .portfolio-capabilities,.project-related-services{padding:58px 0}
  .portfolio-capability-grid{grid-template-columns:1fr}
  .portfolio-capability-card{min-height:170px}
  .project-concept-badge,.work-concept-badge{top:10px;left:10px;font-size:7.5px;padding:6px 8px}
  body[dir="rtl"] .project-concept-badge,body[dir="rtl"] .work-concept-badge{left:auto;right:10px}
}

/* MAQTA V43 — portfolio digital showcase: web, e-commerce, web apps & mobile apps */
.digital-showcase{padding:16px 0 96px;background:var(--paper,#f3efe6)}
.digital-showcase-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:540px;overflow:hidden;border-radius:28px;background:#111;color:#f4f1ec}
.digital-showcase-visual{position:relative;min-height:540px;margin:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.92),rgba(243,235,220,.76) 31%,rgba(214,201,181,.7) 64%,rgba(190,174,151,.72) 100%)}
.digital-showcase-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%),radial-gradient(circle at 90% 12%,rgba(142,63,50,.10),transparent 28%);z-index:0}
.digital-device{position:absolute;display:block;height:auto;filter:drop-shadow(0 24px 30px rgba(23,23,22,.18));z-index:2;pointer-events:none}
.digital-device-laptop{width:72%;left:3%;bottom:-1%;z-index:2}
.digital-device-tablet{width:34%;right:5%;top:7%;z-index:1}
.digital-device-phone-shop{width:19%;right:3%;bottom:3%;z-index:4}
.digital-device-phone-agency{width:17%;left:1%;bottom:7%;z-index:5}
.digital-showcase-copy{padding:clamp(44px,5.2vw,76px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.digital-showcase-copy .page-eyebrow{margin:0 0 18px;color:#c85a3b}
.digital-showcase-copy h2{margin:0 0 24px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.8vw,70px);font-weight:400;line-height:.99;letter-spacing:-.035em}
.digital-showcase-copy p{margin:0 0 28px;max-width:590px;color:rgba(244,241,236,.78);font-size:15px;line-height:1.72}
.digital-showcase-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.digital-showcase-tags span{border:1px solid rgba(244,241,236,.22);border-radius:999px;padding:8px 11px;color:rgba(244,241,236,.88);font-size:10px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.digital-showcase-link{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid rgba(200,90,59,.82);color:#f4f1ec;font-size:11px;letter-spacing:.11em;text-transform:uppercase;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.digital-showcase-link:hover,.digital-showcase-link:focus-visible{background:#8e3f32;border-color:#8e3f32;transform:translateY(-1px)}
html[dir="rtl"] .digital-showcase-copy{text-align:right}
html[dir="rtl"] .digital-showcase-copy h2{font-family:Tahoma,Arial,sans-serif;letter-spacing:-.02em}
html[dir="rtl"] .digital-showcase-tags span,html[dir="rtl"] .digital-showcase-link{letter-spacing:0;text-transform:none}
@media(max-width:899px){
  .digital-showcase{padding:10px 0 70px}
  .digital-showcase-grid{grid-template-columns:1fr;border-radius:20px;min-height:0}
  .digital-showcase-visual{min-height:430px}
  .digital-device-laptop{width:80%;left:7%;bottom:0}
  .digital-device-tablet{width:35%;right:4%;top:5%}
  .digital-device-phone-shop{width:22%;right:2%;bottom:2%}
  .digital-device-phone-agency{width:19%;left:1%;bottom:7%}
  .digital-showcase-copy{padding:42px 26px 48px}
  .digital-showcase-copy h2{font-size:clamp(38px,11vw,58px)}
}
@media(max-width:520px){
  .digital-showcase-visual{min-height:350px}
  .digital-device-laptop{width:86%;left:5%;bottom:1%}
  .digital-device-tablet{width:36%;right:2%;top:7%}
  .digital-device-phone-shop{width:23%;right:1%;bottom:3%}
  .digital-device-phone-agency{width:20%;left:0;bottom:8%}
}

/* V44 — Digital service detail page: complete visual case + stable centered hero */
.digital-service-page .service-digital-hero .page-hero-grid{
  display:block !important;
  width:100%;
  max-width:980px !important;
  margin:0 auto !important;
  text-align:center !important;
}
.digital-service-page .service-digital-hero .page-hero-grid > div{
  width:100%;
  max-width:980px;
  margin:0 auto;
}
.digital-service-page .service-digital-hero .breadcrumbs{
  justify-content:center !important;
  text-align:center !important;
}
.digital-service-page .service-digital-hero .page-eyebrow,
.digital-service-page .service-digital-hero .page-title{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.digital-service-page .service-digital-hero .page-intro{
  display:block !important;
  float:none !important;
  width:auto !important;
  max-width:720px !important;
  margin:24px auto 0 !important;
  text-align:center !important;
}
.digital-service-page .service-digital-hero .page-rule{
  margin-left:auto !important;
  margin-right:auto !important;
}

.digital-service-overview{
  padding:96px 0;
  border-bottom:1px solid var(--line);
}
.digital-service-overview-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:70px;
  align-items:center;
}
.digital-service-stage{
  position:relative;
  min-height:540px;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 18%,rgba(166,58,34,.10),transparent 29%),
    linear-gradient(145deg,#e8e0d3 0%,#f3efe6 58%,#ddd3c4 100%);
  border:1px solid rgba(23,23,22,.09);
}
.digital-stage-laptop{
  position:absolute;
  width:82%;
  left:5%;
  top:50%;
  transform:translateY(-49%);
  z-index:1;
}
.digital-stage-phone{
  position:absolute;
  width:25%;
  right:4%;
  bottom:1%;
  z-index:2;
  filter:drop-shadow(0 22px 22px rgba(23,23,22,.18));
}
.digital-stage-laptop img,
.digital-stage-phone img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.digital-service-overview-copy h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(40px,4.5vw,64px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 24px;
}
.digital-service-overview-copy > p{
  color:var(--soft);
  font-size:15px;
  line-height:1.75;
  margin:0;
  max-width:580px;
}
.digital-service-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}
.digital-service-chips span{
  border:1px solid rgba(23,23,22,.18);
  border-radius:999px;
  padding:9px 12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.digital-solution-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.digital-solution-card{
  overflow:hidden;
  border:1px solid rgba(23,23,22,.10);
  background:rgba(255,255,255,.18);
}
.digital-solution-visual{
  height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 15%,rgba(166,58,34,.08),transparent 26%),
    #e8e1d6;
  padding:28px;
}
.digital-solution-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 18px 22px rgba(23,23,22,.13));
}
.digital-solution-card:nth-child(2) .digital-solution-visual img{
  width:112%;
  max-width:none;
}
.digital-solution-copy{
  padding:26px 28px 30px;
}
.digital-solution-index{
  color:var(--oxide);
  font-size:10px;
  letter-spacing:.18em;
  font-weight:700;
  margin-bottom:14px;
}
.digital-solution-copy h3{
  font-family:Georgia,'Times New Roman',serif;
  font-size:30px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 14px;
}
.digital-solution-copy p{
  color:var(--soft);
  font-size:13px;
  line-height:1.7;
  margin:0;
}

.digital-service-principles{
  padding:94px 0 96px;
  background:#171716;
  color:#f4f1ec;
}
.digital-principles-head{
  max-width:850px;
  margin:0 auto 46px;
  text-align:center;
}
.digital-principles-head .page-eyebrow{
  color:#d4745d;
  text-align:center;
  margin-bottom:18px;
}
.digital-principles-head h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(42px,5.3vw,72px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.035em;
  margin:0;
}
.digital-principles-head p{
  max-width:670px;
  margin:22px auto 0;
  color:rgba(244,241,236,.68);
  font-size:14px;
  line-height:1.75;
}
.digital-principles-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:rgba(244,241,236,.16);
}
.digital-principles-grid article{
  background:#171716;
  padding:28px 24px 30px;
  min-height:220px;
}
.digital-principles-grid span{
  display:block;
  color:#d4745d;
  font-size:10px;
  letter-spacing:.18em;
  margin-bottom:42px;
}
.digital-principles-grid h3{
  font-family:Georgia,'Times New Roman',serif;
  font-size:24px;
  font-weight:400;
  margin:0 0 12px;
}
.digital-principles-grid p{
  color:rgba(244,241,236,.65);
  font-size:12px;
  line-height:1.68;
  margin:0;
}

.digital-service-process{
  padding:92px 0;
  border-bottom:1px solid var(--line);
}
.digital-service-process .section-head{
  margin-bottom:42px;
}
.digital-service-process .process-row{
  max-width:100%;
}
.digital-service-page .service-related{
  padding-top:76px;
  padding-bottom:76px;
}

body[dir="rtl"] .digital-service-overview-copy,
body[dir="rtl"] .digital-solution-copy{
  text-align:right;
}
body[dir="rtl"] .digital-service-overview-copy h2,
body[dir="rtl"] .digital-solution-copy h3,
body[dir="rtl"] .digital-principles-head h2,
body[dir="rtl"] .digital-principles-grid h3{
  font-family:"Tahoma","Arial",sans-serif;
  letter-spacing:-.02em;
}
body[dir="rtl"] .digital-service-chips span,
body[dir="rtl"] .digital-solution-index,
body[dir="rtl"] .digital-principles-grid span{
  letter-spacing:0;
  text-transform:none;
}
body[dir="rtl"] .digital-stage-laptop{
  left:auto;
  right:5%;
}
body[dir="rtl"] .digital-stage-phone{
  right:auto;
  left:4%;
}

@media(max-width:1050px){
  .digital-service-overview-grid{
    grid-template-columns:1fr;
    gap:44px;
  }
  .digital-service-stage{
    min-height:520px;
  }
  .digital-service-overview-copy{
    max-width:760px;
    margin:0 auto;
    text-align:center;
  }
  .digital-service-overview-copy > p{
    margin-left:auto;
    margin-right:auto;
  }
  .digital-service-chips{
    justify-content:center;
  }
  body[dir="rtl"] .digital-service-overview-copy{
    text-align:center;
  }
  .digital-principles-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .digital-service-overview{
    padding:64px 0;
  }
  .digital-service-stage{
    min-height:390px;
  }
  .digital-stage-laptop{
    width:93%;
    left:-5%;
    top:47%;
  }
  .digital-stage-phone{
    width:31%;
    right:1%;
    bottom:0;
  }
  body[dir="rtl"] .digital-stage-laptop{
    right:-5%;
    left:auto;
  }
  body[dir="rtl"] .digital-stage-phone{
    left:1%;
    right:auto;
  }
  .digital-service-overview-copy h2{
    font-size:clamp(36px,10vw,50px);
  }
  .digital-solution-grid{
    grid-template-columns:1fr;
  }
  .digital-solution-visual{
    height:340px;
    padding:22px;
  }
  .digital-principles-grid{
    grid-template-columns:1fr;
  }
  .digital-principles-grid article{
    min-height:0;
  }
  .digital-principles-grid span{
    margin-bottom:22px;
  }
  .digital-service-process{
    padding:64px 0;
  }
}
@media(max-width:480px){
  .digital-service-stage{
    min-height:320px;
  }
  .digital-solution-visual{
    height:300px;
  }
  .digital-service-chips span{
    font-size:9px;
    padding:8px 10px;
  }
}

/* V45 — visual service pages: centered hierarchy + concept proof galleries */
.visual-service-page .page-hero-grid{
  grid-template-columns:1fr;
  max-width:980px;
  margin-inline:auto;
  text-align:center;
  justify-items:center;
}
.visual-service-page .page-hero-grid > div{width:100%}
.visual-service-page .page-hero .breadcrumbs{justify-content:center}
.visual-service-page .page-hero .page-eyebrow,
.visual-service-page .page-hero .page-title{margin-inline:auto}
.visual-service-page .page-hero .page-intro{
  max-width:760px;
  margin:24px auto 0;
  text-align:center;
}
.visual-service-page .page-hero .page-rule{margin-inline:auto}
.visual-service-page .service-detail-lead{padding:74px 0 58px}
.visual-service-page .service-detail-lead-grid{
  display:block;
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
.visual-service-page .service-detail-kicker{margin-bottom:18px}
.visual-service-page .service-detail-lead h2{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.visual-service-page .service-detail-copy{
  max-width:720px;
  margin:24px auto 0;
  text-align:center;
}
body[dir="rtl"] .visual-service-page .service-detail-lead-grid,
body[dir="rtl"] .visual-service-page .service-detail-copy,
body[dir="rtl"] .visual-service-page .service-detail-lead h2{
  text-align:center;
}

.service-proof{padding:6px 0 92px}
.service-proof-head{
  max-width:850px;
  margin:0 auto 34px;
  text-align:center;
}
.service-proof-head .page-eyebrow{margin-bottom:14px}
.service-proof-head h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(38px,5vw,64px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:400;
  margin:0 auto 18px;
  max-width:800px;
}
body[dir="rtl"] .service-proof-head h2{
  font-family:"Tahoma","Arial",sans-serif;
  letter-spacing:-.02em;
}
.service-proof-head p{
  color:var(--soft);
  font-size:15px;
  line-height:1.72;
  margin:0 auto;
  max-width:720px;
}
.service-proof-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  grid-template-rows:repeat(2,minmax(280px,1fr));
  gap:16px;
}
.service-proof-card{
  position:relative;
  min-height:310px;
  border-radius:24px;
  overflow:hidden;
  background:#181817;
  border:1px solid rgba(23,23,22,.10);
  isolation:isolate;
}
.service-proof-card--large{grid-row:1 / span 2;min-height:636px}
.service-proof-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}
.service-proof-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.02) 34%,rgba(10,10,10,.82) 100%);
}
.service-proof-card:hover img{transform:scale(1.025)}
.service-proof-overlay{
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:24px;
  color:#f4f1ec;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
body[dir="rtl"] .service-proof-overlay{align-items:flex-end;text-align:right}
.service-proof-badge{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:6px 9px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(12,12,12,.36);
  backdrop-filter:blur(6px);
}
body[dir="rtl"] .service-proof-badge{letter-spacing:0;text-transform:none}
.service-proof-overlay strong{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(25px,2.6vw,38px);
  line-height:1;
  font-weight:400;
}
body[dir="rtl"] .service-proof-overlay strong{font-family:"Tahoma","Arial",sans-serif}
.service-proof-desc{font-size:13px;line-height:1.55;color:rgba(244,241,236,.86);max-width:470px}
.service-proof-link{font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
body[dir="rtl"] .service-proof-link{letter-spacing:0;text-transform:none}

@media(max-width:899px){
  .visual-service-page .page-hero-grid{max-width:760px}
  .visual-service-page .service-detail-lead{padding:58px 0 46px}
  .service-proof{padding:0 0 68px}
  .service-proof-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}
  .service-proof-card,.service-proof-card--large{grid-row:auto;min-height:360px}
  .service-proof-head{margin-bottom:26px}
}
@media(max-width:560px){
  .visual-service-page .page-hero .page-title{font-size:clamp(40px,12vw,56px)}
  .visual-service-page .page-hero .page-intro{font-size:14px}
  .service-proof-card,.service-proof-card--large{min-height:300px;border-radius:18px}
  .service-proof-overlay{left:18px;right:18px;bottom:18px}
  .service-proof-desc{font-size:12px}
}