:root{
    --charcoal:#1B1C1D;
    --charcoal-2:#232426;
    --marble:#F2EEE7;
    --marble-2:#E8E2D6;
    --brass:#B08D57;
    --brass-light:#CBA96E;
    --bronze:#7C5C3B;
    --ink:#211F1C;
    --stone:#8B8478;
    --line-dark: rgba(242,238,231,0.14);
    --line-light: rgba(33,31,28,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}

  .icon{width:1em; height:1em; display:inline-block; vertical-align:-0.14em; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  html{scroll-behavior:smooth; width:100%; max-width:100%; overflow-x:hidden;}
  html[dir="rtl"]{direction:rtl;}
  body{
    font-family:'IBM Plex Sans Arabic', sans-serif;
    background:var(--marble);
    color:var(--ink);
    line-height:1.7;
    position:relative;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  html[dir="rtl"] body{direction:rtl;}
  header, .nav, section{min-width:0;}
  h1,h2,h3,h4{font-family:'Cairo', sans-serif; font-weight:800; letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  /* corner registration marks - signature element */
  .reg{position:relative;}
  .reg::before,.reg::after,
  .reg .rc-tl,.reg .rc-br{position:absolute; width:16px; height:16px; pointer-events:none;}
  .reg::before{content:""; top:-1px; right:-1px; border-top:1.5px solid var(--brass); border-right:1.5px solid var(--brass);}
  .reg::after{content:""; bottom:-1px; left:-1px; border-bottom:1.5px solid var(--brass); border-left:1.5px solid var(--brass);}

  /* ---------- HEADER ---------- */
  header{
    width:100%; position:relative;
    background:#1B1C1D;
    border-bottom:1px solid var(--line-dark);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; flex-wrap:nowrap; gap:10px;}
  .logo{display:flex; align-items:center; gap:10px; color:var(--marble);}
  .logo-mark{width:34px; height:34px; border:1.5px solid var(--brass); display:flex; align-items:center; justify-content:center; position:relative;}
  .logo-mark::after{content:""; position:absolute; width:6px; height:6px; background:var(--brass); border-radius:50%;}
  .logo-text{font-family:'Cairo'; font-weight:800; font-size:1.05rem;}
  .logo-text span{color:var(--brass); font-weight:400; font-size:0.7rem; display:block; letter-spacing:0.15em; font-family:'IBM Plex Mono';}
  nav ul{display:flex; gap:30px; list-style:none;}
  nav ul li a{color:var(--marble-2); font-size:0.92rem; position:relative; padding:4px 0; transition:color .2s;}
  nav ul li a:hover{color:var(--brass-light);}
  .mobile-only-lang{display:none;}
  .mobile-only-lang a.active{color:var(--brass-light); font-weight:700;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 24px; font-size:0.9rem; font-weight:600;
    border:1px solid var(--brass); color:var(--marble); font-family:'IBM Plex Sans Arabic';
    transition:all .25s; cursor:pointer;
  }
  .btn:hover{background:var(--brass); color:var(--charcoal);}
  .btn-solid{background:var(--brass); color:var(--charcoal); border-color:var(--brass);}
  .btn-solid:hover{background:var(--brass-light); border-color:var(--brass-light);}
  .btn-dark{border-color:var(--ink); color:var(--ink);}
  .btn-dark:hover{background:var(--ink); color:var(--marble);}
  .burger{display:none; color:var(--marble); font-size:1.3rem; cursor:pointer;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; min-height:100vh; background:var(--charcoal); color:var(--marble);
    display:flex; align-items:center; overflow:hidden;
  }
  .blueprint-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line-dark) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse at 70% 40%, black 10%, transparent 70%);
    opacity:.8;
  }
  .hero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:60px 24px; width:100%;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px; color:var(--brass-light);
    font-family:'IBM Plex Mono'; font-size:0.78rem; letter-spacing:0.12em; margin-bottom:22px;
  }
  .eyebrow .dash{width:34px; height:1px; background:var(--brass-light);}
  .hero h1{
    font-size:clamp(2.2rem, 5.4vw, 4rem); line-height:1.18; max-width:820px; margin-bottom:22px;
  }
  .hero h1 em{
    font-style:normal; color:var(--brass-light);
    background:linear-gradient(transparent 70%, rgba(176,141,87,0.35) 70%);
  }
  .hero p{color:var(--stone); max-width:560px; font-size:1.05rem; margin-bottom:38px;}
  .hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:70px;}

  .stat-strip{display:flex; gap:0; border-top:1px solid var(--line-dark); flex-wrap:wrap;}
  .stat{flex:1; min-width:140px; padding:20px 0; border-left:1px solid var(--line-dark);}
  .stat:first-child{padding-right:0;}
  .stat .num{font-family:'IBM Plex Mono'; color:var(--brass-light); font-size:1.7rem; font-weight:500;}
  .stat .lbl{color:var(--stone); font-size:0.82rem; margin-top:4px;}

  /* ---------- SECTION HEADS ---------- */
  .section{padding:100px 0;}
  .section.tight{padding:80px 0;}
  .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap;}
  .sec-eyebrow{font-family:'IBM Plex Mono'; font-size:0.76rem; letter-spacing:0.12em; color:var(--brass); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .sec-eyebrow .dash{width:26px; height:1px; background:var(--brass);}
  .sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem); max-width:520px;}
  .sec-head p{color:var(--stone); max-width:360px; font-size:0.95rem;}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .service-card{background:var(--marble); border:1px solid var(--line-light); transition:transform .3s ease, box-shadow .3s ease; overflow:hidden;}
  .service-card:hover{transform:translateY(-4px); box-shadow:0 18px 34px rgba(20,19,18,0.1);}
  .service-media{position:relative; height:0; padding-top:75%; overflow:hidden; background:linear-gradient(155deg,#2c2d2e,#1b1c1d);}
  .service-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .service-card:hover .service-media img{transform:scale(1.06);}
  .service-media.no-image .icon{position:absolute; top:50%; right:50%; transform:translate(50%,-50%); width:2.6rem; height:2.6rem; color:rgba(203,169,110,0.35); stroke-width:1.1;}
  .service-badge{position:absolute; bottom:-20px; right:22px; width:52px; height:52px; border-radius:50%; background:var(--brass); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(20,19,18,0.28); border:3px solid var(--marble);}
  .service-badge .icon{width:1.3rem; height:1.3rem; color:var(--charcoal); stroke-width:1.6;}
  .service-body{padding:34px 26px 24px;}
  .service-card h3{font-size:1.1rem; margin-bottom:10px;}
  .service-card p{color:var(--stone); font-size:0.9rem;}
  .service-tag{font-family:'IBM Plex Mono'; font-size:0.7rem; color:var(--stone); letter-spacing:0.08em; margin-top:18px; display:block;}

  /* ---------- PROJECTS ---------- */
  .projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .project-card{position:relative; overflow:hidden; height:0; padding-top:125%; background:var(--ink);}
  .project-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .project-card:hover img, .project-card:hover .img-placeholder{transform:scale(1.06);}
  .img-placeholder{
    width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 13px),
      linear-gradient(155deg, #2c2d2e, #1b1c1d);
    transition:transform .5s ease;
  }
  .img-placeholder.light{
    background:
      repeating-linear-gradient(135deg, rgba(27,28,29,0.06) 0 1px, transparent 1px 13px),
      linear-gradient(155deg, #dcd3c1, #cabb9e);
  }
  .img-placeholder .ph-label{
    font-family:'IBM Plex Mono'; font-size:0.72rem; letter-spacing:0.08em; color:rgba(242,238,231,0.55);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .img-placeholder.light .ph-label{color:rgba(33,31,28,0.5);}
  .img-placeholder .ph-label .icon{width:1.6rem; height:1.6rem; opacity:0.7;}
  .project-card .img-placeholder, .ba-wrap .img-placeholder{position:absolute; inset:0;}
  .ba-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

  .project-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
    background:linear-gradient(180deg, transparent 40%, rgba(20,19,18,0.92) 100%);
    color:var(--marble);
  }
  .project-overlay .cat{font-family:'IBM Plex Mono'; font-size:0.7rem; color:var(--brass-light); letter-spacing:0.1em; margin-bottom:6px;}
  .project-overlay h4{font-size:1.05rem; font-weight:700;}
  .corner-tick{position:absolute; top:14px; left:14px; width:14px; height:14px; border-top:1.5px solid rgba(242,238,231,.7); border-left:1.5px solid rgba(242,238,231,.7);}

  /* ---------- BEFORE/AFTER (signature) ---------- */
  .ba-section{background:var(--charcoal); color:var(--marble); padding:100px 0;}
  .ba-ruler{display:flex; font-family:'IBM Plex Mono'; font-size:0.68rem; color:var(--stone); margin-bottom:26px; border-top:1px solid var(--line-dark);}
  .ba-ruler span{flex:1; padding-top:8px; border-right:1px solid var(--line-dark);}
  .ba-wrap{position:relative; max-width:820px; margin:0 auto; height:0; padding-top:62.5%; overflow:hidden; cursor:ew-resize; user-select:none;}
  .ba-wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .ba-after{clip-path:inset(0 0 0 50%);}
  .ba-handle{
    position:absolute; top:0; bottom:0; right:50%; width:2px; background:var(--brass);
    transform:translateX(50%);
  }
  .ba-handle::before{
    content:"\f337"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; top:50%; right:50%; transform:translate(50%,-50%);
    width:42px; height:42px; background:var(--brass); color:var(--charcoal);
    border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem;
  }
  .ba-label{position:absolute; top:16px; font-family:'IBM Plex Mono'; font-size:0.7rem; letter-spacing:0.1em; padding:6px 12px; background:rgba(27,28,29,0.75); border:1px solid var(--brass);}
  .ba-label.before{right:16px;}
  .ba-label.after{left:16px;}

  /* ---------- TESTIMONIALS ---------- */
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
  .testi-card{padding:34px 28px; border:1px solid var(--line-light); position:relative;}
  .testi-card .icon.quote{width:1.3rem; height:1.3rem; color:var(--brass); margin-bottom:18px; display:block;}
  .testi-card p{font-size:0.96rem; color:#4a463f; margin-bottom:22px;}
  .testi-person{display:flex; align-items:center; gap:12px;}
  .testi-avatar{width:38px; height:38px; border-radius:50%; background:var(--marble-2); border:1px solid var(--brass); display:flex; align-items:center; justify-content:center; font-family:'Cairo'; font-weight:700; color:var(--bronze); font-size:0.85rem;}
  .testi-person .name{font-weight:700; font-size:0.9rem;}
  .testi-person .role{font-size:0.78rem; color:var(--stone);}

  /* ---------- CTA STRIP ---------- */
  .cta-strip{background:var(--brass); color:var(--charcoal); padding:64px 0;}
  .cta-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .cta-inner h3{font-size:1.6rem; max-width:480px;}

  /* ---------- CONTACT ---------- */
  .contact-split{display:grid; grid-template-columns:1fr 1fr;}
  .contact-form{background:var(--marble); padding:80px 60px;}
  .contact-info{background:var(--charcoal); color:var(--marble); padding:80px 60px;}
  .field{margin-bottom:22px;}
  .field label{display:block; font-size:0.8rem; font-family:'IBM Plex Mono'; color:var(--stone); margin-bottom:8px; letter-spacing:0.05em;}
  .field input, .field textarea, .field select{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-light);
    padding:10px 2px; font-family:'IBM Plex Sans Arabic'; font-size:0.95rem; color:var(--ink); outline:none;
    transition:border-color .2s;
  }
  .field input:focus, .field textarea:focus, .field select:focus{border-color:var(--brass);}
  .info-row{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line-dark); align-items:flex-start;}
  .info-row .icon{width:1.05rem; height:1.05rem; color:var(--brass); margin-top:3px; flex-shrink:0;}
  .info-row .l{font-size:0.75rem; color:var(--stone); font-family:'IBM Plex Mono'; margin-bottom:4px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--charcoal); color:var(--stone); padding:60px 0 24px;}
  .footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-dark);}
  .footer-grid h5{color:var(--marble); font-family:'Cairo'; font-size:0.92rem; margin-bottom:18px; font-weight:700;}
  .footer-grid ul{list-style:none;}
  .footer-grid li{margin-bottom:10px; font-size:0.87rem;}
  .footer-grid a:hover{color:var(--brass-light);}
  .foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:0.78rem; flex-wrap:wrap; gap:12px;}
  .foot-bottom .mono{color:var(--stone);}

  /* ---------- MINI CTA BANNER ---------- */
  .mini-cta{background:var(--ink); color:var(--marble);}
  .mini-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:1180px; margin:0 auto; padding:30px 24px;}
  .mini-cta p{font-size:0.98rem; color:var(--marble-2);}
  .mini-cta p strong{color:var(--brass-light); font-family:'Cairo'; font-weight:700; display:block; font-size:1.15rem; margin-bottom:4px;}
  .mini-cta .btn{white-space:nowrap;}

  /* ---------- 3 STEPS ---------- */
  .steps-section{background:var(--marble-2); padding:100px 0;}
  .steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative;}
  .step{text-align:center; padding:0 18px; position:relative;}
  .step-num{width:56px; height:56px; border:1.5px solid var(--brass); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-family:'IBM Plex Mono'; color:var(--brass); font-size:1.15rem; background:var(--marble-2); position:relative; z-index:2;}
  .step h4{font-size:1.05rem; margin-bottom:10px;}
  .step p{color:var(--stone); font-size:0.88rem; max-width:230px; margin:0 auto;}
  .steps-row::before{content:""; position:absolute; top:28px; right:16%; left:16%; height:1px; background:var(--brass); opacity:0.4; z-index:1;}

  /* ---------- FLOATING ACTION BUTTONS ---------- */
  .floating-actions{position:absolute; left:24px; z-index:300; display:flex; flex-direction:column; gap:14px;}
  .fab{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.35rem; box-shadow:0 8px 22px rgba(0,0,0,0.28); transition:transform .2s; border:none; cursor:pointer;}
  .fab:hover{transform:scale(1.08);}
  .fab-wa{background:#25D366; color:#fff;}
  .fab-call{background:var(--brass); color:var(--charcoal); display:none;}
  @media (max-width:860px){.fab-call{display:flex;}}

  /* ---------- POPUP ---------- */
  .popup-overlay{position:absolute; right:0; left:0; background:rgba(20,19,18,0.6); z-index:400; display:none; align-items:center; justify-content:center; padding:20px;}
  .popup-overlay.show{display:flex;}
  .popup-box{background:var(--marble); max-width:380px; width:100%; padding:38px 30px; position:relative; border-top:3px solid var(--brass); animation:popIn .3s ease;}
  @keyframes popIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
  .popup-close{position:absolute; top:14px; left:14px; cursor:pointer; color:var(--stone); font-size:1.15rem; background:none; border:none;}
  .popup-eyebrow{font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--brass); letter-spacing:0.1em; margin-bottom:10px;}
  .popup-box h4{font-size:1.2rem; margin-bottom:10px;}
  .popup-box p{color:var(--stone); font-size:0.9rem; margin-bottom:22px;}

  /* two-stage quote form */
  .field-stage2{display:none;}
  .field-stage2.show{display:block;}
  .success-msg{display:none; text-align:center; padding:40px 10px;}
  .success-msg.show{display:block;}
  .success-msg .icon{width:2.4rem; height:2.4rem; color:var(--brass); margin-bottom:18px; stroke-width:1.2;}
  .success-msg h4{font-size:1.15rem; margin-bottom:10px;}
  .success-msg p{color:var(--stone); font-size:0.9rem; margin-bottom:24px;}
  .success-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

  /* reveal animation */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (max-width: 860px){
    nav ul{display:none;}
    .burger{display:block;}
    .lang-switch{display:none;}
    .logo-text span{display:none;}
    .mobile-only-lang{display:block !important; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-dark); font-size:1rem;}
    .nav{flex-wrap:wrap; row-gap:10px;}
    nav ul.mobile-menu-open{
      display:flex !important; flex-direction:column; position:absolute; top:100%; right:0; left:0;
      background:#1B1C1D; padding:24px; z-index:200; gap:18px; max-height:calc(100vh - 70px); overflow-y:auto;
    }
    .services-grid, .projects-grid, .testi-grid{grid-template-columns:1fr;}
    .contact-split{grid-template-columns:1fr;}
    .contact-form, .contact-info{padding:50px 26px;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .stat-strip{flex-direction:column;}
    .stat{border-left:none; border-top:1px solid var(--line-dark); padding:16px 0;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .project-card img{transition:none;}
  }

/* ---------- VIDEOS SECTION ---------- */
.videos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.video-embed{border-radius:8px; overflow:hidden; background:#000; border:1px solid var(--line-light);}
.video-embed--16x9{position:relative; padding-top:56.25%;}
.video-embed--16x9 iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-card-title{margin-top:10px; font-size:0.9rem; font-weight:700;}

/* ---------- PARTNERS SECTION ---------- */
.partners-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:44px; padding:10px 0;}
.partners-row img{height:44px; object-fit:contain; filter:grayscale(1); opacity:.7; transition:opacity .2s, filter .2s;}
.partners-row img:hover{filter:none; opacity:1;}

/* ---------- FAQ SECTION ---------- */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line-light); padding:20px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:1rem;}
.faq-q .icon{transition:transform .25s; flex-shrink:0; color:var(--brass);}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:300px;}
.faq-a p{color:var(--stone); padding-top:12px; font-size:0.92rem;}

.field-error{color:#B5453C; font-size:0.8rem; margin-top:5px;}
@media (max-width:860px){
  .videos-grid{grid-template-columns:1fr;}
  .steps-row{grid-template-columns:1fr; gap:36px;}
  .steps-row::before{display:none;}
}

/* ---------- LANGUAGE SWITCH ---------- */
.lang-switch{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono'; font-size:0.8rem; color:var(--stone); margin-left:6px;}
.lang-switch a{color:var(--marble-2); padding:2px 4px;}
.lang-switch a.active{color:var(--brass-light); font-weight:700;}
.lang-switch span{color:var(--stone);}

/* ---------- LTR (ENGLISH) ADJUSTMENTS ---------- */
/* Most layout mirrors automatically via the html[dir] attribute (flexbox honors writing direction).
   Only a few absolutely-positioned elements need manual overrides below. */
body.ltr .floating-actions{left:auto; right:24px;}
body.ltr .popup-close{left:auto; right:14px;}
body.ltr .reg::before{right:auto; left:-1px; border-right:none; border-left:1.5px solid var(--brass);}
body.ltr .reg::after{left:auto; right:-1px; border-left:none; border-right:1.5px solid var(--brass);}
body.ltr .corner-tick{left:auto; right:14px; border-left:none; border-right:1.5px solid rgba(242,238,231,.7);}
@media (max-width:860px){
  body.ltr nav ul{right:auto; left:0;}
}

/* ---------- ROTATING TAGLINE ---------- */
.rotator-row{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.rotator-accent{width:64px; height:64px; object-fit:contain; flex-shrink:0; animation:floatY 3s ease-in-out infinite;}
.rotator-line{min-height:1.6em; overflow:hidden;}
.rotator-line span{
  display:inline-block; font-family:'Cairo'; font-style:italic; font-weight:600;
  font-size:1.15rem; color:var(--brass-light); opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.rotator-line span.show{opacity:1; transform:translateY(0);}

/* ---------- ABOUT / WHY US SECTION ---------- */
.about-section{padding:100px 0; background:var(--marble);}
.about-inner{max-width:720px; margin:0 auto; text-align:center;}
.about-inner p{color:var(--stone); font-size:1.02rem; line-height:1.9; margin-bottom:20px;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px;}
.why-card{padding:30px 22px; text-align:center; border:1px solid var(--line-light);}
.why-icon{width:64px; height:64px; border-radius:50%; background:var(--marble-2); border:1.5px solid var(--brass); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.why-icon .icon{width:1.7rem; height:1.7rem; color:var(--brass);}
.why-icon--img{width:110px; height:110px; border-radius:0; background:none; border:none;}
.why-icon--img img{width:100%; height:100%; object-fit:contain;}
.why-card h4{font-size:1rem; margin-bottom:8px;}
.why-card p{color:var(--stone); font-size:0.87rem;}

/* gentle looping animation for the "why us" images */
.why-card .why-icon{animation:floatY 3s ease-in-out infinite;}
.why-card:nth-child(2) .why-icon{animation-delay:.4s;}
.why-card:nth-child(3) .why-icon{animation-delay:.8s;}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}

.about-stat{display:inline-flex; align-items:center; gap:10px; margin-top:40px; padding:12px 24px; border:1px solid var(--brass); font-size:0.92rem; color:var(--ink);}
.about-stat .icon{width:1.1rem; height:1.1rem; color:var(--brass);}

@media (prefers-reduced-motion: reduce){
  .why-icon, .why-card .icon{animation:none !important;}
}
@media (max-width:860px){
  .why-grid{grid-template-columns:1fr;}
}

/* ---------- HERO BACKGROUND IMAGE (optional, set via admin settings) ---------- */
.hero.has-bg-image{background-size:cover; background-position:center;}
.hero.has-bg-image .blueprint-grid{opacity:0.35; mix-blend-mode:overlay;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,15,14,0.72) 0%, rgba(15,15,14,0.55) 45%, rgba(15,15,14,0.85) 100%);
}

/* ---------- CLICK-TO-LOAD VIDEO CARD (TikTok fallback) ---------- */
.video-embed--click{position:relative; height:0; padding-top:133.33%; max-width:325px; margin:0 auto; border-radius:8px; overflow:hidden; background:#000; cursor:pointer;}
.video-click-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.85;}
.video-click-fallback{position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,#2c2d2e,#1b1c1d);}
.video-click-fallback .icon{width:3rem; height:3rem; color:var(--brass);}
.video-play-btn{
  position:absolute; top:50%; right:50%; transform:translate(50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(20,19,18,0.75); border:2px solid var(--marble);
  display:flex; align-items:center; justify-content:center; color:var(--marble);
}
.video-play-btn .icon{width:1.3rem; height:1.3rem; transform:scaleX(-1);}
.video-external-link{
  position:absolute; bottom:14px; right:50%; transform:translateX(50%);
  font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--marble); background:rgba(20,19,18,0.6);
  padding:6px 12px; border-radius:20px; white-space:nowrap;
}

/* ---------- BEFORE/AFTER CAROUSEL (multiple comparisons) ---------- */
.ba-slide{display:none;}
.ba-slide.active{display:block;}
.ba-slide-title{text-align:center; color:var(--marble-2); font-size:0.92rem; margin-top:16px;}
.ba-nav{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:28px;}
.ba-prev, .ba-next{width:40px; height:40px; border-radius:50%; border:1px solid var(--brass); color:var(--marble); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.ba-prev:hover, .ba-next:hover{background:var(--brass); color:var(--charcoal);}
.ba-dots{display:flex; gap:9px;}
.ba-dot{width:8px; height:8px; border-radius:50%; background:var(--stone); cursor:pointer; transition:background .2s, transform .2s;}
.ba-dot.active{background:var(--brass); transform:scale(1.3);}

/* ---------- LOAD MORE ---------- */
.load-more-wrap{text-align:center; margin-top:40px;}
[data-load-more] > *:nth-child(n+7){display:none;}
[data-load-more].expanded > *{display:block;}