/* CCR Developments — union stylesheet.
   Generated by tools/extract_site.py from the signed-off static build.
   Base: project-iden.html (carries every body.theme-* block).
   Plus 2 home-page-only rule(s), appended so they win. */


/* ======= SELF-HOSTED ARABIC FONTS (no network dependency) ======= */
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/tajawal-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/tajawal-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/tajawal-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/tajawal-arabic-800-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:900;font-display:swap;
  src:url("fonts/tajawal-arabic-900-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0000-00FF}

/* ===== CCR DEVELOPMENTS — CORE SYSTEM (extracted from confirmed home page) ===== */
:root{
      --blue:#1751F1;
      --orange:#F15A22;
      --black:#111111;
      --black-2:#0E1015;
      --black-3:#171A22;
      --grey:#D5D9E2;
      --white:#ffffff;
      --muted:rgba(255,255,255,.62);
      --muted-2:rgba(255,255,255,.42);
      --line:rgba(255,255,255,.08);
      --container:min(1180px, calc(100% - 34px));
      --ease:cubic-bezier(.16,1,.3,1);
      --section-space:clamp(72px,8vw,110px);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--black);
      color:var(--white);
      font-family:'Montserrat',sans-serif;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    .container{width:var(--container);margin:auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)
    }
    .eyebrow::before{content:"";width:28px;height:1px;background:var(--orange)}
    .section-title{
      margin:14px 0 0;
      font-size:clamp(30px,3.7vw,56px);
      line-height:.98;
      letter-spacing:-.055em;
      font-weight:800;
    }
    .section-copy{
      max-width:720px;
      margin-top:18px;
      color:var(--muted);
      font-size:14px;
      line-height:1.85;
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:48px;padding:13px 18px;
      border:1px solid rgba(255,255,255,.14);
      font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
      color:#fff;background:transparent;cursor:pointer;
      transition:.35s var(--ease);
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-blue{background:var(--blue);border-color:var(--blue)}
    .btn-orange{background:var(--orange);border-color:var(--orange)}
    .btn-dark{background:#0d0f14;border-color:#0d0f14}
    .btn-light{background:#fff;color:#111;border-color:#fff}


    /* Enhanced motion layer */
    .scroll-progress{
      position:fixed;top:0;left:0;height:3px;width:0;
      background:linear-gradient(90deg,var(--orange),var(--blue));
      z-index:2000;box-shadow:0 0 16px rgba(23,81,241,.35);
    }

    .btn{
      position:relative;
      overflow:hidden;
    }
    .btn::after{
      content:"";
      position:absolute;
      top:0;bottom:0;left:-130%;
      width:54%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
      transform:skewX(-18deg);
      transition:left .7s var(--ease);
      pointer-events:none;
    }
    .btn:hover::after{left:145%}

    .reveal{
      opacity:0;
      transform:translateY(30px) scale(.985);
      filter:blur(4px);
      transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
    }
    .reveal.visible{
      opacity:1;
      transform:none;
      filter:none;
    }

    .motion-card{
      transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease),
        border-color .45s var(--ease),
        background .45s var(--ease);
      transform-style:preserve-3d;
      will-change:transform;
    }
    .motion-card:hover{
      transform:translateY(-6px);
      box-shadow:0 22px 42px rgba(0,0,0,.22);
    }

    .show-card,
    .fact-card,
    .journey-card,
    .project-feature,
    .project-side,
    .profile-hero,
    .pillar-item,
    .finder-note{
      position:relative;
      overflow:hidden;
    }

    .show-card::after,
    .fact-card::after,
    .journey-card::after,
    .project-feature::after,
    .project-side::after,
    .profile-hero::after,
    .pillar-item::after,
    .finder-note::after,
    .hero-panel::after{
      content:"";
      position:absolute;inset:0;
      pointer-events:none;
      opacity:0;
      background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 34%,transparent 66%,rgba(23,81,241,.12));
      transition:opacity .45s var(--ease);
    }
    .show-card:hover::after,
    .fact-card:hover::after,
    .journey-card:hover::after,
    .project-feature:hover::after,
    .project-side:hover::after,
    .profile-hero:hover::after,
    .pillar-item:hover::after,
    .finder-note:hover::after,
    .hero-panel:hover::after{
      opacity:1;
    }

    .finder-note{
      transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
    }
    .finder-note:hover{
      transform:translateY(-4px);
      border-color:rgba(23,81,241,.25);
      background:rgba(255,255,255,.045);
    }

    .field select,.field input,.finder-form input,.finder-form select{
      transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
    }
    .field select:focus,.field input:focus,.finder-form input:focus,.finder-form select:focus{
      outline:none;
      border-color:var(--blue);
      box-shadow:0 0 0 4px rgba(23,81,241,.12);
      transform:translateY(-1px);
    }

    .parallax-soft{
      will-change:transform;
      transition:transform .18s linear;
    }

    .section-glow{
      position:absolute;
      width:140px;height:140px;
      border-radius:50%;
      pointer-events:none;
      background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),rgba(23,81,241,.18) 42%,transparent 72%);
      filter:blur(2px);
      opacity:.48;
      animation:floatGlow 8s ease-in-out infinite;
    }
    .section-glow.one{right:18%;top:16%}
    .section-glow.two{right:8%;bottom:18%;width:84px;height:84px;animation-delay:1.2s}
    @keyframes floatGlow{
      0%,100%{transform:translateY(0) translateX(0)}
      50%{transform:translateY(-14px) translateX(8px)}
    }

    .stagger-1{transition-delay:.05s}
    .stagger-2{transition-delay:.12s}
    .stagger-3{transition-delay:.19s}
    .stagger-4{transition-delay:.26s}

    @media(max-width:700px){
      .scroll-progress{height:2px}
      .motion-card:hover,.finder-note:hover{
        transform:none;
        box-shadow:none;
      }
    }



    /* MOBILE RESPONSIVE + WORKING MENU */
    .menu{
      cursor:pointer;
      width:42px;
      height:42px;
      align-items:center;
      justify-content:center;
      position:relative;
      z-index:1502;
    }
    .menu-lines,
    .menu-lines::before,
    .menu-lines::after{
      width:20px;
      height:1.5px;
      background:#fff;
      display:block;
      position:absolute;
      transition:.3s var(--ease);
    }
    .menu-lines::before,
    .menu-lines::after{content:"";left:0}
    .menu-lines::before{top:-6px}
    .menu-lines::after{top:6px}
    .menu.is-open .menu-lines{background:transparent}
    .menu.is-open .menu-lines::before{top:0;transform:rotate(45deg)}
    .menu.is-open .menu-lines::after{top:0;transform:rotate(-45deg)}

    .mobile-menu-backdrop{
      position:fixed;
      inset:0;
      z-index:1398;
      background:rgba(0,0,0,.58);
      backdrop-filter:blur(6px);
      opacity:0;
      visibility:hidden;
      transition:.35s var(--ease);
    }
    .mobile-menu-backdrop.is-open{
      opacity:1;
      visibility:visible;
    }

    .mobile-drawer{
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      z-index:1400;
      width:min(92vw,410px);
      background:
        radial-gradient(circle at 100% 0%,rgba(23,81,241,.16),transparent 28%),
        #0b0d12;
      border-left:1px solid rgba(255,255,255,.10);
      transform:translateX(102%);
      transition:transform .45s var(--ease);
      overflow-y:auto;
      overscroll-behavior:contain;
      padding:92px 20px 28px;
    }
    .mobile-drawer.is-open{transform:translateX(0)}

    .mobile-drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding-bottom:18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:12px;
    }
    .mobile-drawer-head small{
      color:var(--orange);
      font-size:9px;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .mobile-drawer-head strong{
      display:block;
      margin-top:5px;
      font-size:20px;
      letter-spacing:-.03em;
    }

    .mobile-nav-list{display:grid}
    .mobile-nav-link,
    .mobile-accordion-trigger{
      min-height:56px;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:0 4px;
      color:#fff;
      background:transparent;
      border:0;
      border-bottom:1px solid rgba(255,255,255,.075);
      font-size:12px;
      font-weight:700;
      letter-spacing:.11em;
      text-transform:uppercase;
      text-align:left;
      cursor:pointer;
    }
    .mobile-nav-link:hover,
    .mobile-accordion-trigger:hover{color:var(--orange)}
    .mobile-plus{
      width:28px;height:28px;
      display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.10);
      font-size:17px;
      font-weight:300;
      transition:.3s var(--ease);
      flex:0 0 28px;
    }
    .mobile-accordion.is-open .mobile-plus{
      transform:rotate(45deg);
      background:var(--blue);
      border-color:var(--blue);
      color:#fff;
    }
    .mobile-submenu{
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:max-height .4s var(--ease),opacity .3s var(--ease),padding .4s var(--ease);
      padding:0 0;
    }
    .mobile-accordion.is-open .mobile-submenu{
      max-height:560px;
      opacity:1;
      padding:8px 0 14px;
    }
    .mobile-submenu a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-height:46px;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.05);
      color:rgba(255,255,255,.65);
      font-size:11px;
    }
    .mobile-submenu a:hover{
      color:#fff;
      background:rgba(255,255,255,.035);
      padding-left:16px;
    }
    .mobile-submenu a.primary{
      border:1px solid rgba(23,81,241,.36);
      background:linear-gradient(90deg,rgba(23,81,241,.18),transparent);
      color:#fff;
    }

    .mobile-drawer-actions{
      display:grid;
      gap:10px;
      margin-top:24px;
    }
    .mobile-drawer-actions .btn{width:100%}
    .mobile-contact-line{
      margin-top:24px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.44);
      font-size:11px;
      line-height:1.8;
    }

    body.menu-open{overflow:hidden}

    @media(max-width:1024px){
      .menu{display:flex}
      .brandtext{font-size:10px}
      .nav-inner{gap:10px}
      .navactions{gap:7px}
      .hero-content{padding-inline:0}
      .hero-copy{max-width:min(620px,78vw)}
      .hero-fins{left:42%;opacity:.78}
      .concept-layout,
      .project-columns,
      .journey-stage,
      .finder-layout,
      .profile-head,
      .profile-grid,
      .cta-row{
        gap:28px;
      }
      .concept-showcase{grid-template-rows:200px 200px}
      .project-feature{min-height:460px}
      .profile-hero{min-height:460px}
    }

    @media(max-width:700px){
      :root{
        --container:calc(100% - 28px);
        --section-space:68px;
      }
      .nav{height:66px}
      .nav.scrolled{height:60px}
      .brandmark span{width:26px;height:26px;font-size:11px}
      .brandtext{display:none}
      .lang-switch{min-height:38px}
      .navactions{gap:5px}

      .hero,.hero-slider,.hero-slide,.hero-content{min-height:100svh}
      .hero-copy{
        max-width:100%;
        padding-top:92px;
        padding-bottom:160px;
      }
      .hero-title{
        font-size:clamp(35px,11vw,44px);
        line-height:.92;
        max-width:100%;
      }
      .hero-sub{
        font-size:17px;
        line-height:1.22;
        max-width:100%;
      }
      .hero-text{
        font-size:12px;
        line-height:1.72;
        max-width:100%;
      }
      .hero-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
      }
      .hero-actions .btn{width:100%}
      .hero-proof{
        grid-template-columns:repeat(3,1fr);
        max-width:100%;
      }
      .proof{padding:12px 8px}
      .proof strong{font-size:18px}
      .proof span{font-size:7px;line-height:1.4}
      .hero-fins{
        left:45%;
        opacity:.52;
      }
      .hero-panel{
        left:14px;
        right:14px;
        bottom:76px;
        width:auto;
      }
      .hero-panel-controls{gap:8px}
      .hero-progress{gap:6px}
      .hero-dot{width:15px}
      .hero-dot.active{width:30px}
      .hero-arrow{width:36px;height:36px}

      .floating-contact{
        right:12px;
        bottom:12px;
      }
      .floating-contact-btn{width:46px;height:46px}

      .section-title{
        font-size:clamp(29px,9vw,40px);
        line-height:1;
      }
      .section-copy{
        font-size:13px;
        line-height:1.75;
      }

      .concept-layout{gap:30px}
      .concept-showcase{
        grid-template-columns:1fr;
        grid-template-rows:none;
      }
      .show-card,
      .show-card.large{min-height:260px;grid-row:auto}

      .project-columns{margin-top:26px}
      .project-feature{min-height:390px}
      .project-side{min-height:300px}
      .project-copy{left:18px;right:18px;bottom:18px}
      .project-copy h3{font-size:27px}
      .project-copy p{font-size:12px}

      .journey-visual{
        grid-template-columns:1fr;
        padding:14px;
      }
      .journey-point,
      .journey-point.p1,
      .journey-point.p2,
      .journey-point.p3,
      .journey-point.p4{
        min-height:96px;
      }

      .profile-head{margin-bottom:24px}
      .profile-hero{min-height:390px}
      .profile-hero-copy{left:20px;right:20px;bottom:20px}
      .profile-hero-copy h3{font-size:30px}
      .fact-card{min-height:auto}
      .profile-facts{gap:12px}

      .finder-layout{gap:28px}
      .finder-form{
        grid-template-columns:1fr;
        padding:18px;
      }
      .finder-form .full{grid-column:1}
      .field input,.field select,.field textarea{
        font-size:16px;
      }

      .cta{padding:62px 0}
      .cta h2{font-size:38px}
      .cta .btn{width:100%}
      .footer-grid{gap:24px}
      .footer-bottom{font-size:9px}
    }

    @media(max-width:390px){
      .hero-title{font-size:33px}
      .hero-sub{font-size:16px}
      .hero-proof{grid-template-columns:1fr}
      .hero-panel{bottom:72px}
      .mobile-drawer{width:100%;padding-inline:16px}
    }


    /* NAV */
    .nav{
      position:fixed;top:0;left:0;right:0;z-index:1000;height:74px;
      display:flex;align-items:center;
      background:linear-gradient(to bottom,rgba(17,17,17,.95),rgba(17,17,17,.35),transparent);
      transition:.35s var(--ease)
    }
    .nav.scrolled{
      height:64px;background:rgba(17,17,17,.92);backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.08)
    }
    .nav-inner{
      width:var(--container);margin:auto;
      display:flex;align-items:center;justify-content:space-between;gap:18px
    }
    .brand{display:flex;align-items:center;gap:12px}
    .brandmark{display:flex;gap:4px}
    .brandmark span{
      width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
      background:var(--blue);color:#fff;font-size:12px;font-weight:900
    }
    .brandtext{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}

    .navactions{display:flex;align-items:center;gap:10px}
    .lang{font-size:10px;font-weight:800}
    .menu{display:none;background:none;border:0;color:#fff;font-size:19px}


    /* PRIMARY NAVIGATION & DROPDOWNS */
    .navlinks{
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.025);
      backdrop-filter:blur(12px);
    }
    .navlinks > a,
    .nav-dropdown-trigger{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:42px;
      padding:0 14px;
      font-size:9px;
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(255,255,255,.64);
      transition:.3s var(--ease);
    }
    .navlinks > a:hover,
    .nav-dropdown-trigger:hover,
    .nav-dropdown:hover .nav-dropdown-trigger{
      color:#fff;
      background:rgba(255,255,255,.05);
    }
    .navlinks > a::after,
    .nav-dropdown-trigger::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:6px;
      height:1px;
      background:var(--orange);
      transform:scaleX(0);
      transform-origin:left;
      transition:.3s var(--ease);
    }
    .navlinks > a:hover::after,
    .nav-dropdown:hover .nav-dropdown-trigger::after{
      transform:scaleX(1);
    }
    .nav-dropdown{position:relative}
    .nav-chevron{
      width:12px;
      height:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--orange);
      transition:.3s var(--ease);
    }
    .nav-chevron svg{
      width:100%;
      height:100%;
      fill:none;
      stroke:currentColor;
      stroke-width:1.6;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .nav-dropdown:hover .nav-chevron,
    .nav-dropdown:focus-within .nav-chevron{
      transform:rotate(180deg);
    }
    .nav-dropdown-menu{
      position:absolute;
      top:calc(100% + 10px);
      left:50%;
      transform:translate(-50%,12px);
      width:360px;
      padding:12px;
      background:rgba(12,14,19,.98);
      backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 28px 70px rgba(0,0,0,.46);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:.3s var(--ease);
    }
    .nav-dropdown-menu::before{
      content:"";
      position:absolute;
      top:-7px;
      left:50%;
      width:12px;
      height:12px;
      background:rgba(12,14,19,.98);
      border-left:1px solid rgba(255,255,255,.10);
      border-top:1px solid rgba(255,255,255,.10);
      transform:translateX(-50%) rotate(45deg);
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      transform:translate(-50%,0);
    }
    .dropdown-head{
      padding:10px 10px 14px;
      border-bottom:1px solid rgba(255,255,255,.07);
      margin-bottom:6px;
    }
    .dropdown-head span{
      display:block;
      color:var(--orange);
      font-size:8px;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
    }
    .dropdown-head strong{
      display:block;
      margin-top:6px;
      font-size:15px;
      letter-spacing:-.02em;
    }
    .dropdown-project{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:12px 11px;
      border-bottom:1px solid rgba(255,255,255,.055);
      transition:.25s var(--ease);
    }
    .dropdown-project:hover{
      padding-left:15px;
      background:rgba(255,255,255,.035);
    }
    .dropdown-project.primary{
      margin:6px 0;
      border:1px solid rgba(23,81,241,.42);
      background:linear-gradient(90deg,rgba(23,81,241,.20),rgba(23,81,241,.03));
    }
    .dropdown-project b{
      display:block;
      font-size:12px;
      color:#fff;
    }
    .dropdown-project small{
      display:block;
      margin-top:4px;
      color:rgba(255,255,255,.38);
      font-size:8px;
      font-weight:600;
      letter-spacing:.10em;
      text-transform:uppercase;
    }
    .dropdown-project.primary small{color:var(--orange)}
    .menu-arrow{
      width:18px;
      height:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.40);
      transition:.25s var(--ease);
      flex:0 0 18px;
    }
    .menu-arrow svg{
      width:100%;
      height:100%;
      fill:none;
      stroke:currentColor;
      stroke-width:1.5;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .dropdown-project:hover .menu-arrow{
      color:var(--orange);
      transform:translate(2px,-2px);
    }
    .dropdown-all{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-top:8px;
      padding:12px 11px;
      color:#fff;
      background:var(--blue);
      font-size:9px;
      font-weight:700;
      letter-spacing:.13em;
      text-transform:uppercase;
    }
    .dropdown-all .menu-arrow.inline{
      color:#fff;
    }
    .news-menu{width:280px}

    @media(max-width:1180px){
      .navlinks{gap:4px}
      .navlinks > a,
      .nav-dropdown-trigger{padding:0 10px;letter-spacing:.11em}
    }
    @media(max-width:1024px){
      .navlinks{display:none}
    }

    /* HERO */
    .hero{
      position:relative;
      min-height:100svh;
      overflow:hidden;
      background:#0c0f14;
    }
    .hero::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(to bottom,transparent 78%,var(--black) 100%);
      pointer-events:none;z-index:3
    }
    .hero-slider{position:relative;min-height:100svh}
    .hero-slide{
      position:absolute;inset:0;opacity:0;visibility:hidden;
      transition:opacity .8s ease, visibility .8s ease;
      pointer-events:none;
    }
    .hero-slide.active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
    .hero-art{
      position:absolute;inset:0;overflow:hidden;
      background:
        radial-gradient(circle at 18% 24%, rgba(241,90,34,.06), transparent 18%),
        radial-gradient(circle at 78% 18%, rgba(23,81,241,.14), transparent 22%),
        linear-gradient(135deg, #0c0f14 0%, #101522 52%, #0c0f14 100%);
    }
    .hero-grid{
      position:absolute;inset:0;opacity:.12;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:36px 36px;
      mask-image:linear-gradient(to bottom, black 0%, rgba(0,0,0,.76) 70%, transparent 100%);
    }
    .hero-fins{
      position:absolute;inset:0;display:flex;justify-content:flex-end;gap:4px
    }
    .hero-fins span{
      flex:1;max-width:54px;
      background:linear-gradient(to bottom, transparent 0%, rgba(23,81,241,.94) 44%, transparent 100%);
      transform:scaleY(.5);
      opacity:.08;
      transform-origin:center center;
      filter:drop-shadow(0 0 14px rgba(23,81,241,.22));
      animation:rayPulse 5.6s ease-in-out infinite;
    }
    .hero-fins span:nth-child(1){animation-delay:0s;opacity:.05}
    .hero-fins span:nth-child(2){animation-delay:.14s;opacity:.08}
    .hero-fins span:nth-child(3){animation-delay:.28s;opacity:.12}
    .hero-fins span:nth-child(4){animation-delay:.42s;opacity:.18}
    .hero-fins span:nth-child(5){animation-delay:.56s;opacity:.26}
    .hero-fins span:nth-child(6){animation-delay:.7s;opacity:.4}
    .hero-fins span:nth-child(7){animation-delay:.84s;opacity:.6}
    .hero-fins span:nth-child(8){animation-delay:.98s;opacity:.8;max-width:92px}
    .hero-fins span:nth-child(9){animation-delay:.84s;opacity:.56}
    .hero-fins span:nth-child(10){animation-delay:.7s;opacity:.38}
    .hero-fins span:nth-child(11){animation-delay:.56s;opacity:.24}
    .hero-fins span:nth-child(12){animation-delay:.42s;opacity:.14}
    .hero-fins span:nth-child(13){animation-delay:.28s;opacity:.08}
    .hero-fins span:nth-child(14){animation-delay:.14s;opacity:.05}
    @keyframes rayPulse{
      0%,100%{transform:scaleY(.5);filter:brightness(.85)}
      50%{transform:scaleY(1.02);filter:brightness(1.35)}
    }

    .hero-rings{
      position:absolute;left:-70px;top:18%;width:280px;height:280px;border-radius:50%;
      border:1px solid rgba(255,255,255,.07);
      box-shadow:0 0 0 34px rgba(23,81,241,.035),0 0 0 68px rgba(23,81,241,.02)
    }
    .hero-orbit{
      position:absolute;right:11%;top:19%;width:150px;height:150px;border-radius:50%;
      border:1px solid rgba(255,255,255,.08)
    }
    .hero-orbit::before,.hero-orbit::after{
      content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)
    }
    .hero-orbit::before{inset:20px}
    .hero-orbit::after{inset:42px}
    .hero-orbit .dot{
      position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;
      background:var(--orange);transform:translateX(-50%);
      box-shadow:0 0 0 8px rgba(241,90,34,.08);
      animation:orbit 10s linear infinite
    }
    @keyframes orbit{
      from{transform:translateX(-50%) rotate(0deg) translateY(70px) rotate(0deg)}
      to{transform:translateX(-50%) rotate(360deg) translateY(70px) rotate(-360deg)}
    }
    .hero-sculpture{
      position:absolute;left:54%;top:16%;width:22%;height:56%;opacity:.62;
      filter:drop-shadow(0 0 18px rgba(23,81,241,.16))
    }
    .hero-sculpture svg{width:100%;height:100%}
    .hero-sculpture path{
      stroke-dasharray:1000;stroke-dashoffset:1000;
      animation:drawPath 3.8s ease forwards, breatheStroke 6s ease-in-out infinite 4s;
    }
    .hero-sculpture path:nth-child(2){animation-delay:.4s,4.2s}
    .hero-sculpture path:nth-child(3){animation-delay:.8s,4.4s}
    @keyframes drawPath{to{stroke-dashoffset:0}}
    @keyframes breatheStroke{50%{opacity:.48}}

    .hero-content{
      position:relative;z-index:5;min-height:100svh;display:flex;align-items:center
    }
    .hero-copy{
      max-width:760px;
      padding-top:78px;
      padding-bottom:120px;
    }
    .hero-kicker{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
    .hero-title{
      margin:18px 0 0;
      font-size:clamp(40px,5.2vw,76px);
      line-height:.88;
      letter-spacing:-.07em;
      font-weight:800;
      max-width:900px;
    }
    .hero-title .blue{color:var(--blue)}
    .hero-title .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}
    .hero-sub{
      margin-top:12px;
      font-size:clamp(20px,2.8vw,34px);
      line-height:1.08;
      color:rgba(255,255,255,.42);
      font-weight:300;
      max-width:880px;
    }
    .hero-text{
      max-width:590px;
      margin-top:22px;
      font-size:14px;
      line-height:1.85;
      color:rgba(255,255,255,.58)
    }
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .hero-proof{
      margin-top:34px;
      display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
      background:rgba(255,255,255,.08);max-width:500px
    }
    .proof{background:rgba(255,255,255,.03);padding:16px 16px 14px}
    .proof strong{display:block;font-size:19px;line-height:1}
    .proof span{display:block;margin-top:8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}

    /* NEW CLEAN SLIDER CONTROL */
    .hero-panel{
      position:absolute;right:24px;bottom:24px;z-index:8;
      width:auto;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(17,17,17,.56);
      backdrop-filter:blur(14px);
      padding:10px;
    }
    .hero-panel-controls{
      display:flex;align-items:center;justify-content:space-between;gap:12px
    }
    .hero-progress{
      display:flex;align-items:center;gap:8px;flex:1
    }
    .hero-dot{
      width:20px;height:2px;border:0;background:rgba(255,255,255,.18);cursor:pointer;transition:.3s
    }
    .hero-dot.active{width:42px;background:var(--orange)}
    .hero-arrows{display:flex;gap:8px}
    .hero-arrow{
      width:38px;height:38px;border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.02);color:#fff;cursor:pointer;transition:.3s
    }
    .hero-arrow:hover{background:var(--blue);border-color:var(--blue)}


    /* SLIDER SIZE REFINEMENT */
    .hero-copy{
      max-width:680px;
      padding-top:86px;
      padding-bottom:118px;
    }
    .hero-title{
      max-width:760px;
      font-size:clamp(36px,4.6vw,66px);
      line-height:.9;
      letter-spacing:-.06em;
    }
    .hero-sub{
      max-width:760px;
      font-size:clamp(18px,2.3vw,28px);
      line-height:1.12;
      margin-top:10px;
    }
    .hero-text{
      max-width:560px;
      font-size:13px;
      line-height:1.75;
      margin-top:18px;
    }
    .hero-actions{
      gap:10px;
      margin-top:24px;
      align-items:center;
    }
    .hero-actions .btn{
      min-height:46px;
      padding:12px 16px;
      font-size:9px;
    }
    .hero-proof{
      margin-top:26px;
      max-width:460px;
    }
    .proof{
      padding:14px 14px 12px;
    }
    .proof strong{
      font-size:21px;
    }
    .hero-panel{
      min-width:250px;
      padding:12px;
      right:18px;
      bottom:18px;
    }
    .hero-arrow{
      width:34px;
      height:34px;
    }

    @media(max-width:700px){
      .hero-copy{
        padding-top:90px;
        padding-bottom:148px;
      }
      .hero-title{
        font-size:38px;
        line-height:.92;
      }
      .hero-sub{
        font-size:20px;
      }
      .hero-text{
        font-size:12px;
      }
      .hero-actions{
        gap:8px;
      }
      .hero-actions .btn{
        width:100%;
      }
      .hero-panel{
        left:12px;
        right:12px;
        bottom:12px;
        min-width:auto;
      }
    }


    /* FLOATING CONTACT ACTIONS */
    .floating-contact{
      position:fixed;
      right:20px;
      bottom:20px;
      z-index:1300;
      display:flex;
      flex-direction:row;
      gap:10px;
      align-items:center;
    }
    .floating-contact-btn{
      width:54px;
      height:54px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 12px 28px rgba(0,0,0,.32);
      transition:.3s var(--ease);
      position:relative;
    }
    .floating-contact-btn:hover{
      transform:translateY(-4px) scale(1.04);
    }
    .floating-contact-btn.phone{
      background:var(--blue);
    }
    .floating-contact-btn.whatsapp{
      background:#25D366;
    }
    .floating-contact-btn svg{
      width:21px;
      height:21px;
      fill:currentColor;
    }
    .floating-contact-btn .tooltip{
      position:absolute;
      bottom:64px;
      left:50%;
      transform:translateX(-50%) translateY(6px);
      white-space:nowrap;
      padding:8px 10px;
      background:#fff;
      color:#111;
      font-size:9px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      opacity:0;
      visibility:hidden;
      transition:.25s;
      pointer-events:none;
    }
    .floating-contact-btn:hover .tooltip{
      opacity:1;
      visibility:visible;
      transform:translateX(-50%) translateY(0);
    }
    @media(max-width:700px){
      .floating-contact{
        right:12px;
        bottom:12px;
        gap:8px;
      }
      .floating-contact-btn{
        width:48px;
        height:48px;
      }
      .floating-contact-btn .tooltip{
        display:none;
      }
    }


    .hero-copy{max-width:620px}
    .hero-title{max-width:660px}
    .hero-sub{max-width:620px}
    .hero-text{max-width:480px}
    @media(max-width:700px){
      .hero-title{font-size:36px}
      .hero-sub{font-size:18px}
      .hero-text{max-width:100%}
    }

    /* MARQUEE */
    .marquee{
      overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(23,81,241,.08);padding:12px 0
    }
    .marquee-track{
      display:flex;gap:56px;white-space:nowrap;
      font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
      animation:marquee 75s linear infinite
    }
    @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .marquee-track{will-change:transform}
    .marquee:hover .marquee-track{animation-play-state:paused}

    section{padding:var(--section-space) 0}

    /* SIMPLE CREATIVE SECTION */
    .concept-layout{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:stretch
    }
    .concept-copy{display:flex;flex-direction:column;justify-content:center}
    .concept-showcase{
      display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:220px 220px;gap:16px
    }
    .show-card{
      position:relative;overflow:hidden;border:1px solid var(--line);background:#0f1116
    }
    .show-card.large{grid-row:span 2}
    .show-bg{position:absolute;inset:0}
    .show-bg.fins{
      background:
        radial-gradient(circle at 24% 22%, rgba(241,90,34,.08), transparent 18%),
        linear-gradient(140deg, #11141b 0%, #0d1015 100%);
    }
    .show-bg.fins::after{
      content:"";position:absolute;right:0;top:0;bottom:0;width:46%;
      background:
        linear-gradient(90deg,transparent,rgba(23,81,241,.08)),
        repeating-linear-gradient(90deg,
          rgba(255,255,255,.015) 0 10px,
          rgba(23,81,241,.45) 10px 20px,
          rgba(17,17,17,.88) 20px 34px);
      transform:perspective(900px) rotateY(-16deg) scale(1.04);
      transform-origin:right center;
    }
    .show-bg.orbit{
      background:
        radial-gradient(circle at 78% 20%, rgba(23,81,241,.16), transparent 20%),
        linear-gradient(140deg,#121620 0%,#0e1116 100%);
    }
    .show-bg.orbit::before,.show-bg.orbit::after{
      content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)
    }
    .show-bg.orbit::before{width:190px;height:190px;left:-36px;top:-30px}
    .show-bg.orbit::after{width:120px;height:120px;left:18px;top:40px}
    .show-bg.lines{
      background:
        radial-gradient(circle at 20% 70%, rgba(23,81,241,.13), transparent 22%),
        linear-gradient(140deg,#131821 0%,#0d1116 100%);
    }
    .show-bg.lines svg{width:100%;height:100%}
    .show-copy{
      position:absolute;left:20px;right:20px;bottom:18px;z-index:2
    }
    .show-copy small{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
    .show-copy h3{margin:10px 0 8px;font-size:19px;line-height:1.08;letter-spacing:-.04em}
    .show-copy p{margin:0;color:rgba(255,255,255,.48);font-size:13px;line-height:1.7}

    /* PROJECTS */
    .portfolio{
      background:linear-gradient(180deg,var(--grey) 0%,#e8ebf0 100%);
      color:#111;
    }
    .portfolio .section-copy{color:#5f6672}
    .project-columns{
      margin-top:34px;
      display:grid;grid-template-columns:1.05fr .95fr;gap:18px
    }
    .project-feature,.project-side{
      position:relative;overflow:hidden;background:#111;color:#fff
    }
    .project-feature{min-height:520px}
    .project-sides{display:grid;grid-template-rows:1fr 1fr;gap:18px}
    .project-side{min-height:250px}
    .project-art{
      position:absolute;inset:0;overflow:hidden
    }
    .project-art::before{
      content:"";position:absolute;right:0;top:0;bottom:0;width:40%;
      background:repeating-linear-gradient(90deg,rgba(23,81,241,.62) 0 10px,transparent 10px 24px);
      mix-blend-mode:screen;opacity:.32;mask-image:linear-gradient(to left,black,transparent)
    }
    .project-art::after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
      background:linear-gradient(to top,rgba(17,17,17,.95),rgba(17,17,17,.44),transparent)
    }
    .project-art .rings{
      position:absolute;left:-34px;top:-34px;width:190px;height:190px;border-radius:50%;
      border:1px solid rgba(255,255,255,.08)
    }
    .project-art .rings::before,.project-art .rings::after{
      content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)
    }
    .project-art .rings::before{inset:24px}
    .project-art .rings::after{inset:52px}
    .project-art .lines svg{width:100%;height:100%}
    .project-copy{
      position:absolute;left:22px;right:22px;bottom:22px;z-index:2
    }
    .project-copy small{
      font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)
    }
    .project-copy h3{
      margin:10px 0 8px;font-size:30px;line-height:.96;letter-spacing:-.04em
    }
    .project-copy p{
      max-width:480px;margin:0;color:#d6dbe4;font-size:13px;line-height:1.75
    }
    .project-tags{
      display:flex;flex-wrap:wrap;gap:8px;margin-top:14px
    }
    .project-tags span{
      padding:8px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
      font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase
    }

    /* NEW SIMPLE CREATIVE JOURNEY */
    .experience-strip{
      position:relative;overflow:hidden;
      background:
        radial-gradient(circle at 10% 10%,rgba(23,81,241,.09),transparent 20%),
        linear-gradient(180deg,#0d0f14 0%,#0a0c10 100%);
    }
    .journey-stage{
      margin-top:38px;
      display:grid;grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:stretch
    }
    .journey-visual{
      position:relative;overflow:hidden;min-height:500px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(145deg,#0f1218 0%,#0b0e13 100%);
      background-size:34px 34px,34px 34px,auto;
    }
    .journey-visual::before{
      content:"";position:absolute;inset:0;
      background:
        radial-gradient(circle at 20% 28%,rgba(23,81,241,.16),transparent 18%),
        radial-gradient(circle at 76% 74%,rgba(241,90,34,.05),transparent 18%);
    }
    .journey-line{
      position:absolute;left:18%;right:18%;top:50%;height:1px;
      background:linear-gradient(90deg,transparent,rgba(23,81,241,.65),rgba(255,255,255,.18),rgba(23,81,241,.65),transparent);
    }
    .journey-line::after{
      content:"";position:absolute;left:0;top:-1px;width:16%;height:3px;background:var(--orange);
      box-shadow:0 0 16px rgba(241,90,34,.35);
      animation:runLine 7s ease-in-out infinite;
    }
    @keyframes runLine{
      0%{left:0}
      50%{left:84%}
      100%{left:0}
    }
    .journey-point{
      position:absolute;width:112px;height:112px;border-radius:50%;
      display:grid;place-items:center;text-align:center;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(17,17,17,.84);
      box-shadow:0 0 0 14px rgba(23,81,241,.018);
    }
    .journey-point strong{font-size:13px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
    .journey-point span{display:block;margin-top:7px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
    .journey-point.p1{left:12%;top:18%}
    .journey-point.p2{left:60%;top:14%}
    .journey-point.p3{left:18%;bottom:12%}
    .journey-point.p4{right:12%;bottom:16%}
    .journey-point::before{
      content:"";position:absolute;width:14px;height:14px;border-radius:50%;
      background:var(--blue);box-shadow:0 0 0 5px #0d0f14,0 0 0 6px rgba(255,255,255,.15)
    }
    .journey-point.p1::before{right:-26px;top:50%;transform:translateY(-50%)}
    .journey-point.p2::before{left:-26px;top:50%;transform:translateY(-50%)}
    .journey-point.p3::before{right:-26px;top:50%;transform:translateY(-50%)}
    .journey-point.p4::before{left:-26px;top:50%;transform:translateY(-50%)}

    .journey-info{
      display:grid;grid-template-columns:1fr;gap:14px
    }
    .journey-card{
      border:1px solid rgba(255,255,255,.08);
      background:#111;padding:22px;min-height:117px;transition:.35s
    }
    .journey-card:hover{background:#161922}
    .journey-card small{
      color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase
    }
    .journey-card h3{margin:10px 0 8px;font-size:17px}
    .journey-card p{margin:0;font-size:12px;line-height:1.72;color:rgba(255,255,255,.46)}

    /* FINDER */
    .finder{
      position:relative;overflow:hidden
    }
    .finder::before{
      content:"";position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;
      border:1px solid rgba(23,81,241,.18);
      box-shadow:0 0 0 60px rgba(23,81,241,.06),0 0 0 120px rgba(23,81,241,.03)
    }
    .finder-layout{
      position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1.18fr;gap:42px;align-items:end
    }
    .finder-notes{display:grid;gap:12px;margin-top:26px}
    .finder-note{
      border:1px solid rgba(255,255,255,.08);padding:16px;background:rgba(255,255,255,.02)
    }
    .finder-note strong{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
    .finder-note span{display:block;margin-top:8px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.46)}
    .finder-form{
      background:#fff;color:#111;padding:22px;
      display:grid;grid-template-columns:repeat(2,1fr);gap:12px
    }
    .field{display:flex;flex-direction:column;gap:8px}
    .field label{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#727986}
    .field input,.field select,.field textarea{
      min-height:50px;border:1px solid #d7dce3;background:#f7f8fa;padding:0 14px
    }
    .field textarea{padding-top:14px;min-height:100px;resize:vertical}
    .full{grid-column:1/-1}



    /* LANGUAGE SWITCH */
    .lang-switch{
      display:inline-flex;align-items:center;gap:8px;
      min-height:38px;padding:7px 10px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.025);
      transition:.3s var(--ease)
    }
    .lang-switch:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
    .lang-icon{
      width:24px;height:24px;border-radius:50%;
      display:grid;place-items:center;
      background:var(--blue);color:#fff;
      font-family:Arial,sans-serif;font-size:14px;font-weight:700;
      line-height:1
    }
    .lang-text{
      font-size:9px;font-weight:800;letter-spacing:.14em
    }



    /* COMPANY PROFILE SHOWCASE */
    .profile-showcase{
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 86% 12%,rgba(23,81,241,.10),transparent 22%),
        linear-gradient(180deg,#0b0d12 0%,#10131a 100%);
    }
    .profile-head{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:36px;
      align-items:end;
      margin-bottom:34px;
    }
    .profile-head .section-copy{margin:0}
    .profile-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .profile-hero{
      position:relative;
      min-height:520px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      background:#0e1117;
    }
    .profile-art{position:absolute;inset:0}
    .profile-fins{
      position:absolute;right:-2%;top:-8%;bottom:-8%;width:54%;
      background:
        linear-gradient(90deg,transparent,rgba(23,81,241,.08)),
        repeating-linear-gradient(90deg,
          rgba(255,255,255,.015) 0 10px,
          rgba(23,81,241,.44) 10px 20px,
          rgba(17,17,17,.9) 20px 34px);
      transform:perspective(900px) rotateY(-14deg) scale(1.04);
      transform-origin:right center;
      animation:profileFins 8s ease-in-out infinite alternate;
    }
    @keyframes profileFins{
      to{transform:perspective(900px) rotateY(-8deg) scale(1.01)}
    }
    .profile-ring{
      position:absolute;
      border:1px solid rgba(255,255,255,.08);
      border-radius:50%;
    }
    .profile-ring.one{
      width:270px;height:270px;left:-70px;top:16%;
      box-shadow:0 0 0 36px rgba(23,81,241,.035),0 0 0 72px rgba(23,81,241,.018)
    }
    .profile-ring.two{width:150px;height:150px;left:18%;bottom:9%}
    .profile-line{
      position:absolute;left:8%;right:8%;top:48%;height:1px;
      background:linear-gradient(90deg,transparent,var(--orange),transparent);
      box-shadow:0 0 16px rgba(241,90,34,.3);
      animation:profileScan 6s ease-in-out infinite
    }
    @keyframes profileScan{
      0%,100%{transform:translateY(-120px);opacity:.2}
      50%{transform:translateY(120px);opacity:1}
    }
    .profile-hero-copy{
      position:absolute;left:28px;right:28px;bottom:28px;z-index:2;
      max-width:560px;
    }
    .profile-hero-copy small{
      color:var(--orange);
      font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    }
    .profile-hero-copy h3{
      margin:12px 0 12px;
      font-size:clamp(28px,3.6vw,46px);
      line-height:.98;
      letter-spacing:-.05em;
    }
    .profile-hero-copy p{
      margin:0;
      max-width:500px;
      font-size:13px;
      line-height:1.8;
      color:rgba(255,255,255,.54);
    }
    .profile-facts{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .fact-card{
      border:1px solid rgba(255,255,255,.08);
      background:#111;
      padding:22px;
      min-height:245px;
      transition:.35s var(--ease);
    }
    .fact-card:hover{
      transform:translateY(-4px);
      background:#151922;
      border-color:rgba(23,81,241,.42);
    }
    .fact-card strong{
      display:block;
      font-size:clamp(30px,3.4vw,46px);
      letter-spacing:-.05em;
    }
    .fact-card span{
      display:block;
      margin-top:8px;
      color:var(--orange);
      font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    }
    .fact-card p{
      margin:22px 0 0;
      font-size:12px;
      line-height:1.75;
      color:rgba(255,255,255,.46);
    }
    .profile-pillars{
      margin-top:18px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:1px;
      background:rgba(255,255,255,.08);
    }
    .pillar-item{
      background:#111;
      padding:22px;
      min-height:190px;
      transition:.35s;
    }
    .pillar-item:hover{background:#161922}
    .pillar-item small{
      color:var(--orange);
      font-size:9px;font-weight:700;letter-spacing:.14em;
    }
    .pillar-item h3{
      margin:30px 0 10px;
      font-size:18px;
    }
    .pillar-item p{
      margin:0;
      font-size:12px;
      line-height:1.7;
      color:rgba(255,255,255,.46);
    }

    /* CTA */
    .cta{
      position:relative;overflow:hidden;background:var(--orange);color:#111;padding:80px 0
    }
    .cta::before{
      content:"";position:absolute;right:-4%;top:-40%;width:44%;height:180%;
      background:repeating-linear-gradient(90deg,rgba(17,17,17,.17) 0 9px,transparent 9px 24px);
      transform:skewX(-10deg);opacity:.36
    }
    .cta-row{
      position:relative;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:22px
    }
    .cta h2{
      margin:0;max-width:820px;font-size:clamp(36px,4.5vw,68px);line-height:.94;letter-spacing:-.06em
    }
    .cta p{
      max-width:670px;margin:16px 0 0;font-size:14px;line-height:1.8;color:rgba(17,17,17,.74)
    }

    /* FOOTER */
    footer{
      padding:52px 0 24px;background:#07080A;border-top:1px solid rgba(255,255,255,.07)
    }
    .footer-grid{
      display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px
    }
    footer h4{
      margin:0 0 16px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.46)
    }
    footer a,footer p{
      display:block;margin:10px 0;font-size:12px;line-height:1.65;color:rgba(255,255,255,.46)
    }
    .footer-bottom{
      margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);
      display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.28);font-size:10px
    }

    .reveal{opacity:0;transform:translateY(24px);transition:1s var(--ease)}
    .reveal.visible{opacity:1;transform:none}

    /* RESPONSIVE */
    @media(max-width:1024px){
      .navlinks{display:none}.menu{display:block}
      .concept-layout,.project-columns,.journey-stage,.finder-layout,.footer-grid,.cta-row,.profile-head,.profile-grid{grid-template-columns:1fr}
      .profile-pillars{grid-template-columns:1fr 1fr}
      .sitemap-grid{grid-template-columns:1fr 1fr}
      .concept-showcase{grid-template-columns:1fr 1fr}
      .care-grid{grid-template-columns:1fr 1fr}
      .hero-sculpture{left:auto;right:8%;width:30%;height:56%}
    }
    @media(max-width:700px){
      :root{--container:min(100% - 26px, 100% - 26px)}
      .navactions .btn{display:none}
      .hero-copy{padding-top:92px;padding-bottom:150px}
      .hero-title{font-size:42px}
      .hero-sub{font-size:17px}
      .hero-text{font-size:13px}
      .hero-proof{grid-template-columns:1fr}
      .hero-rings,.hero-orbit,.hero-sculpture{display:none}
      .hero-panel{
        right:14px;left:14px;bottom:14px;min-width:auto
      }
      .hero-arrow{width:36px;height:36px}
      .concept-showcase,.finder-form,.footer-grid,.project-columns{grid-template-columns:1fr}
      .project-sides{grid-template-rows:none;grid-template-columns:1fr}
      .project-feature,.project-side,.journey-visual{min-height:300px}
      .show-card.large{grid-row:auto}
      .journey-stage{grid-template-columns:1fr}
      .journey-visual{
        min-height:auto;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px
      }
      .journey-line{display:none}
      .journey-point,.journey-point.p1,.journey-point.p2,.journey-point.p3,.journey-point.p4{
        position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;min-height:112px;padding:18px
      }
      .journey-point::before{display:none}
      .finder-form .full{grid-column:auto}
      section{padding:74px 0}
      .cta-row{align-items:flex-start}
      .footer-bottom{flex-direction:column}

      .profile-facts{grid-template-columns:1fr}
      .profile-pillars{grid-template-columns:1fr}
      .profile-hero{min-height:400px}


      .lang-switch{padding:6px}.lang-text{display:none}
      .sitemap-root{align-items:flex-start;flex-direction:column}
      .root-routes{width:100%}
      .root-routes a{flex:1}
      .sitemap-columns{grid-template-columns:1fr}
      .projects-branch{grid-column:auto}
      .route-list a{grid-template-columns:1fr}
      .route-list code{text-align:left}


      .care-feature{min-height:380px}
      .care-feature-copy h3{font-size:25px}
      .care-row{grid-template-columns:auto auto 1fr}
      .care-arrow{display:none}
      .sitemap-map{min-height:auto;padding:18px;display:grid;gap:14px}
      .sitemap-spine,.map-center{display:none}
      .map-node,.map-node.corporate,.map-node.projects,.map-node.content,.map-node.platform{
        position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;min-height:auto
      }
      .map-node::after{display:none}

      .contact-float{right:12px;bottom:14px}.contact-circle{width:48px;height:48px}.contact-tooltip{display:none}
    }


/* =====================================================================
   INNER PAGES — component layer
   Built on the same tokens, easing and motion language as the home page.
   ===================================================================== */

/* --- Accessibility floor ------------------------------------------- */
:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;filter:none}
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:3000;
  padding:12px 18px;background:var(--orange);color:#111;
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.skip-link:focus{left:12px;top:12px}

/* Body offset so inner pages clear the fixed nav */
body.inner{padding-top:74px}
@media(max-width:700px){body.inner{padding-top:66px}}
body.inner .nav{background:rgba(17,17,17,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.navlinks a.active,
.navlinks .nav-dropdown-trigger.active{color:var(--orange)}

/* --- PAGE HERO ------------------------------------------------------ */
.page-hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(420px,56svh,600px);
  display:flex;align-items:flex-end;
  padding:0;
  background:#0c0f14;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,transparent 62%,var(--black) 100%);
}
.page-hero-art{
  position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(circle at 16% 26%, rgba(241,90,34,.07), transparent 20%),
    radial-gradient(circle at 80% 14%, rgba(23,81,241,.16), transparent 24%),
    linear-gradient(135deg,#0c0f14 0%,#101522 54%,#0c0f14 100%);
}
.page-hero-grid{
  position:absolute;inset:0;opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.7) 66%,transparent 100%);
}
.page-hero-fins{position:absolute;inset:0;display:flex;justify-content:flex-end;gap:4px}
.page-hero-fins span{
  flex:1;max-width:48px;
  background:linear-gradient(to bottom,transparent 0%,rgba(23,81,241,.9) 46%,transparent 100%);
  transform:scaleY(.5);opacity:.1;
  filter:drop-shadow(0 0 14px rgba(23,81,241,.2));
  animation:rayPulse 5.6s ease-in-out infinite;
}
.page-hero-fins span:nth-child(1){animation-delay:0s;opacity:.05}
.page-hero-fins span:nth-child(2){animation-delay:.14s;opacity:.09}
.page-hero-fins span:nth-child(3){animation-delay:.28s;opacity:.14}
.page-hero-fins span:nth-child(4){animation-delay:.42s;opacity:.22}
.page-hero-fins span:nth-child(5){animation-delay:.56s;opacity:.34}
.page-hero-fins span:nth-child(6){animation-delay:.7s;opacity:.52}
.page-hero-fins span:nth-child(7){animation-delay:.84s;opacity:.72;max-width:78px}
.page-hero-fins span:nth-child(8){animation-delay:.7s;opacity:.46}
.page-hero-fins span:nth-child(9){animation-delay:.56s;opacity:.28}
.page-hero-fins span:nth-child(10){animation-delay:.42s;opacity:.14}
.page-hero-ring{
  position:absolute;left:-80px;top:16%;width:300px;height:300px;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 0 36px rgba(23,81,241,.03),0 0 0 72px rgba(23,81,241,.017);
}
.page-hero-orbit{
  position:absolute;right:9%;top:20%;width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.page-hero-orbit::before{content:"";position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.page-hero-orbit .dot{
  position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--orange);transform:translateX(-50%);
  box-shadow:0 0 0 8px rgba(241,90,34,.08);
  animation:orbit 12s linear infinite;
}
.page-hero-scan{
  position:absolute;left:6%;right:6%;top:52%;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  box-shadow:0 0 18px rgba(241,90,34,.3);
  animation:profileScan 7s ease-in-out infinite;
}
.page-hero-inner{
  position:relative;z-index:5;width:var(--container);margin:auto;
  padding:118px 0 54px;
}
.page-hero-copy{max-width:760px}
.page-hero h1{
  margin:16px 0 0;
  font-size:clamp(36px,5vw,68px);
  line-height:.9;
  letter-spacing:-.065em;
  font-weight:800;
}
.page-hero h1 .blue{color:var(--blue)}
.page-hero h1 .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}
.page-hero-sub{
  margin-top:14px;
  max-width:640px;
  font-size:clamp(15px,1.7vw,20px);
  line-height:1.45;
  font-weight:300;
  color:rgba(255,255,255,.5);
}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* Breadcrumb */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.crumbs a{color:rgba(255,255,255,.55);transition:.25s var(--ease)}
.crumbs a:hover{color:var(--orange)}
.crumbs span[aria-current]{color:var(--orange)}
.crumbs i{font-style:normal;color:rgba(255,255,255,.2)}

/* Hero stat strip */
.hero-stats{
  margin-top:32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);
  max-width:660px;
}
.hero-stats div{background:rgba(255,255,255,.03);padding:15px 15px 13px}
.hero-stats strong{display:block;font-size:20px;line-height:1;letter-spacing:-.03em}
.hero-stats strong span{display:inline;margin:0;font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.hero-stats > div > span{display:block;margin-top:8px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}

@media(max-width:700px){
  .page-hero{min-height:auto}
  .page-hero-inner{padding:104px 0 44px}
  .page-hero h1{font-size:clamp(32px,10vw,42px)}
  .page-hero-sub{font-size:15px}
  .page-hero-ring,.page-hero-orbit{display:none}
  .page-hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .page-hero-actions .btn{width:100%}
  .hero-stats{grid-template-columns:1fr 1fr}
}

/* --- SECTION HELPERS ------------------------------------------------ */
.section-head{max-width:820px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.sec-alt{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% 10%,rgba(23,81,241,.10),transparent 24%),
    linear-gradient(180deg,#0b0d12 0%,#10131a 100%);
}
.sec-light{background:linear-gradient(180deg,var(--grey) 0%,#e8ebf0 100%);color:#111}
.sec-light .section-copy{color:#5f6672}
.sec-light .eyebrow{color:#C24A18}
.sec-light .eyebrow::before{background:#C24A18}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.split.tight{gap:26px}
.split.end{align-items:end}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}

/* --- PROJECT CARDS (listing) --------------------------------------- */
.proj-grid{
  margin-top:34px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.proj-grid.two{grid-template-columns:repeat(2,1fr)}
.pcard-link{
  display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;min-height:100%;
}
.pcard-link:hover{color:inherit}
.pcard{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:400px;
  border:1px solid rgba(255,255,255,.09);
  background:#0f1116;color:#fff;
  transition:.45s var(--ease);
}
.pcard:hover{border-color:rgba(23,81,241,.42)}
.pcard-art{position:relative;height:210px;overflow:hidden;flex:0 0 210px}
.pcard-art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(to top,rgba(15,17,22,.98),transparent);
}
.pcard-body{position:relative;z-index:2;padding:20px;display:flex;flex-direction:column;flex:1}
.pcard-body h3{margin:10px 0 8px;font-size:23px;line-height:1.02;letter-spacing:-.04em}
.pcard-body p{margin:0;font-size:12px;line-height:1.75;color:rgba(255,255,255,.48)}
.pcard-loc{
  display:inline-flex;align-items:center;gap:8px;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);
}
.pcard-meta{
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.pcard-meta b{display:block;font-size:13px;letter-spacing:-.02em}
.pcard-meta small{display:block;margin-top:5px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.pcard-cta{
  margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;
}
.pcard-cta .menu-arrow{color:var(--orange)}
.pcard:hover .pcard-cta .menu-arrow{transform:translate(3px,-3px)}
.status-chip{
  position:absolute;left:16px;top:16px;z-index:3;
  padding:7px 10px;
  font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(17,17,17,.72);backdrop-filter:blur(8px);
}
.status-chip.delivered{border-color:rgba(37,211,102,.5);color:#7ef0a8}
.status-chip.construction{border-color:rgba(241,90,34,.55);color:#ffb392}
.status-chip.launch{border-color:rgba(23,81,241,.6);color:#9db6ff}

/* Reusable generated artwork blocks */
.art{position:absolute;inset:0;overflow:hidden}
.art-a{background:radial-gradient(circle at 76% 20%,rgba(23,81,241,.2),transparent 24%),linear-gradient(140deg,#121620 0%,#0e1116 100%)}
.art-b{background:radial-gradient(circle at 24% 26%,rgba(241,90,34,.1),transparent 22%),linear-gradient(140deg,#11141b 0%,#0d1015 100%)}
.art-c{background:radial-gradient(circle at 20% 74%,rgba(23,81,241,.15),transparent 24%),linear-gradient(140deg,#131821 0%,#0d1116 100%)}
.art-fins{
  position:absolute;right:-2%;top:-10%;bottom:-10%;width:48%;
  background:
    linear-gradient(90deg,transparent,rgba(23,81,241,.08)),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0 10px,
      rgba(23,81,241,.44) 10px 20px,
      rgba(17,17,17,.9) 20px 34px);
  transform:perspective(900px) rotateY(-15deg) scale(1.04);
  transform-origin:right center;
  animation:profileFins 9s ease-in-out infinite alternate;
}
.art-rings{
  position:absolute;left:-36px;top:-36px;width:180px;height:180px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.art-rings::before,.art-rings::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.art-rings::before{inset:24px}
.art-rings::after{inset:50px}
.art-scan{
  position:absolute;left:8%;right:8%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  box-shadow:0 0 14px rgba(241,90,34,.3);
  animation:profileScan 7s ease-in-out infinite;
}
.art-tower{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:5px;height:66%;opacity:.6;
}
.art-tower i{
  display:block;width:16px;
  background:linear-gradient(to top,rgba(23,81,241,.7),rgba(23,81,241,.05));
  border-top:1px solid rgba(255,255,255,.2);
  animation:towerRise 6s ease-in-out infinite alternate;
}
.art-tower i:nth-child(1){height:44%;animation-delay:0s}
.art-tower i:nth-child(2){height:72%;animation-delay:.3s}
.art-tower i:nth-child(3){height:56%;animation-delay:.6s}
.art-tower i:nth-child(4){height:88%;animation-delay:.9s}
.art-tower i:nth-child(5){height:62%;animation-delay:1.2s}
.art-tower i:nth-child(6){height:38%;animation-delay:1.5s}
@keyframes towerRise{
  0%{transform:scaleY(.9);opacity:.7}
  100%{transform:scaleY(1);opacity:1}
}
.art svg{width:100%;height:100%}

@media(max-width:1024px){.proj-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .proj-grid,.proj-grid.two{grid-template-columns:1fr}
  .pcard{min-height:auto}
  .pcard-art{height:180px;flex-basis:180px}
}

/* --- FILTER BAR ----------------------------------------------------- */
.filterbar{
  margin-top:30px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
}
.filterbar .lbl{
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin-right:4px;
}
.chip{
  min-height:40px;padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;color:rgba(255,255,255,.7);
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:.3s var(--ease);
}
.chip:hover{border-color:rgba(255,255,255,.34);color:#fff}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.result-count{
  margin-top:16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.is-hidden{display:none !important}
.empty-state{
  margin-top:24px;padding:38px 22px;text-align:center;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);
}
.empty-state strong{display:block;font-size:16px;letter-spacing:-.02em}
.empty-state p{margin:10px auto 0;max-width:420px;font-size:12px;line-height:1.75;color:rgba(255,255,255,.46)}
@media(max-width:700px){
  .filterbar{padding:10px}
  .chip{flex:1 1 auto;text-align:center}
}

/* --- STICKY PROJECT SUBNAV ------------------------------------------ */
.subnav{
  position:sticky;top:64px;z-index:900;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(11,13,18,.94);backdrop-filter:blur(14px);
}
.subnav-inner{
  width:var(--container);margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.subnav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{
  display:inline-flex;align-items:center;min-height:54px;padding:0 14px;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);white-space:nowrap;
  border-bottom:2px solid transparent;transition:.3s var(--ease);
}
.subnav-links a:hover{color:#fff}
.subnav-links a.current{color:#fff;border-bottom-color:var(--orange)}
.subnav .btn{min-height:38px;padding:10px 14px;font-size:9px}
@media(max-width:700px){
  .subnav{top:60px}
  .subnav .btn{display:none}
  .subnav-links a{min-height:48px;padding:0 11px}
}
section[id]{scroll-margin-top:130px}

/* --- SPEC / FIGURE GRID --------------------------------------------- */
.spec-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.spec{background:#111;padding:22px;transition:.35s var(--ease)}
.spec:hover{background:#161922}
.spec b{display:block;font-size:clamp(24px,2.8vw,34px);line-height:1;letter-spacing:-.045em}
.spec span{display:block;margin-top:10px;color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.spec p{margin:14px 0 0;font-size:12px;line-height:1.7;color:rgba(255,255,255,.44)}
@media(max-width:900px){.spec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.spec-grid{grid-template-columns:1fr}}

/* --- FEATURE PANEL (image-less visual + copy) ----------------------- */
.panel{
  position:relative;overflow:hidden;
  min-height:460px;
  border:1px solid rgba(255,255,255,.08);
  background:#0e1117;
}
.panel-copy{position:absolute;left:26px;right:26px;bottom:26px;z-index:2;max-width:560px}
.panel-copy small{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.panel-copy h3{margin:12px 0 12px;font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.05em}
.panel-copy p{margin:0;max-width:500px;font-size:13px;line-height:1.8;color:rgba(255,255,255,.54)}
@media(max-width:700px){
  .panel{min-height:340px}
  .panel-copy{left:18px;right:18px;bottom:18px}
}

/* --- UNIT TABLE ----------------------------------------------------- */
.table-wrap{
  margin-top:26px;overflow-x:auto;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.utable{width:100%;border-collapse:collapse;min-width:640px}
.utable th{
  text-align:left;padding:16px 18px;
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.02);
  white-space:nowrap;
}
.utable td{
  padding:18px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:rgba(255,255,255,.72);
}
.utable tbody tr{transition:.3s var(--ease)}
.utable tbody tr:hover{background:rgba(23,81,241,.06)}
.utable td:first-child{color:#fff;font-weight:600;letter-spacing:-.01em}
.utable .tag{
  display:inline-block;padding:6px 9px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.sec-light .table-wrap{border-color:rgba(17,17,17,.12);background:#fff}
.sec-light .utable th{color:#6b7280;border-bottom-color:rgba(17,17,17,.1);background:#f4f6f9}
.sec-light .utable td{color:#3d434e;border-bottom-color:rgba(17,17,17,.07)}
.sec-light .utable td:first-child{color:#111}
.sec-light .utable tbody tr:hover{background:rgba(23,81,241,.05)}
.sec-light .utable .tag{border-color:rgba(17,17,17,.14);background:#eef1f5;color:#444}

/* --- AMENITIES ------------------------------------------------------ */
.amen-grid{
  margin-top:28px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.08);
}
.amen{background:#111;padding:24px;min-height:180px;transition:.35s var(--ease)}
.amen:hover{background:#161922}
.amen .ico{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(23,81,241,.42);background:rgba(23,81,241,.12);color:#9db6ff;
}
.amen .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.amen h4{margin:20px 0 8px;font-size:14px;letter-spacing:-.02em}
.amen p{margin:0;font-size:12px;line-height:1.7;color:rgba(255,255,255,.44)}
@media(max-width:900px){.amen-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.amen-grid{grid-template-columns:1fr}}

/* --- TIMELINE (about) ----------------------------------------------- */
.timeline{margin-top:36px;position:relative;display:grid;gap:0}
.timeline::before{
  content:"";position:absolute;left:0;right:0;top:38px;height:1px;
  background:linear-gradient(90deg,rgba(23,81,241,.18),rgba(23,81,241,.85),rgba(255,255,255,.42),rgba(23,81,241,.85),rgba(23,81,241,.18));
  box-shadow:0 0 14px rgba(23,81,241,.35);
}
.tl-track{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tl-item{position:relative;padding-top:0}
.tl-item .yr{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 14px;
  border:1px solid rgba(23,81,241,.42);background:rgba(11,13,18,.96);
  font-size:13px;font-weight:800;letter-spacing:-.02em;
}
.tl-item::after{
  content:"";position:absolute;left:16px;top:38px;width:9px;height:9px;border-radius:50%;
  background:var(--orange);transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px #0b0d12,0 0 0 6px rgba(255,255,255,.14);
}
.tl-item h4{margin:26px 0 8px;font-size:15px;letter-spacing:-.02em}
.tl-item p{margin:0;font-size:12px;line-height:1.72;color:rgba(255,255,255,.46)}
@media(max-width:900px){
  .timeline::before{top:0;bottom:0;left:18px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(23,81,241,.15),rgba(23,81,241,.85),rgba(23,81,241,.85),rgba(23,81,241,.15))}
  .tl-track{grid-template-columns:1fr;gap:26px}
  .tl-item{padding-left:52px}
  .tl-item::after{left:18px;top:19px}
}

/* --- LEADERSHIP ----------------------------------------------------- */
.people{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.person{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#111;padding:24px;
  transition:.35s var(--ease);
}
.person:hover{background:#151922;border-color:rgba(23,81,241,.4)}
.person .initials{
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:17px;font-weight:900;letter-spacing:.02em;
}
.person h4{margin:20px 0 6px;font-size:17px;letter-spacing:-.03em}
.person .role{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.person p{margin:16px 0 0;font-size:12px;line-height:1.75;color:rgba(255,255,255,.46)}
@media(max-width:900px){.people{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.people{grid-template-columns:1fr}}

/* --- GALLERY + LIGHTBOX --------------------------------------------- */
.gallery{
  margin-top:28px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.shot{
  position:relative;overflow:hidden;cursor:pointer;
  min-height:210px;border:1px solid rgba(255,255,255,.08);background:#0f1116;
  transition:.4s var(--ease);
}
.shot.wide{grid-column:span 2}
.shot.tall{grid-row:span 2;min-height:434px}
.shot:hover{border-color:rgba(23,81,241,.45);transform:translateY(-4px)}
.shot figcaption{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;
  background:linear-gradient(to top,rgba(10,12,16,.94),transparent);
}
.shot .zoom{
  position:absolute;right:14px;top:14px;z-index:3;
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(17,17,17,.6);
  color:#fff;opacity:0;transform:translateY(-6px);transition:.3s var(--ease);
}
.shot:hover .zoom{opacity:1;transform:none}
.shot .zoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(max-width:900px){
  .gallery{grid-template-columns:1fr 1fr}
  .shot.tall{grid-row:auto;min-height:210px}
}
@media(max-width:600px){
  .gallery{grid-template-columns:1fr}
  .shot.wide{grid-column:auto}
}

.lightbox{
  position:fixed;inset:0;z-index:2100;
  display:grid;place-items:center;padding:24px;
  background:rgba(6,7,10,.92);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:.35s var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox-frame{
  position:relative;width:min(980px,100%);aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.12);overflow:hidden;background:#0f1116;
}
.lightbox-cap{
  margin-top:16px;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.lightbox-close{
  position:absolute;right:18px;top:18px;z-index:2200;
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:#fff;font-size:20px;cursor:pointer;transition:.3s var(--ease);
}
.lightbox-close:hover{background:var(--orange);border-color:var(--orange)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2200;
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:#fff;cursor:pointer;transition:.3s var(--ease);
}
.lightbox-nav:hover{background:var(--blue);border-color:var(--blue)}
.lightbox-nav.prev{left:18px}
.lightbox-nav.next{right:18px}
@media(max-width:700px){.lightbox-nav{width:38px;height:38px}.lightbox-nav.prev{left:8px}.lightbox-nav.next{right:8px}}

/* --- TABS ----------------------------------------------------------- */
.tabs{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.tab{
  min-height:52px;padding:0 20px;
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:rgba(255,255,255,.5);cursor:pointer;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  transition:.3s var(--ease);
}
.tab:hover{color:#fff}
.tab.active{color:#fff;border-bottom-color:var(--orange)}
.tabpanel[hidden]{display:none}
@media(max-width:700px){.tab{flex:1 1 auto;padding:0 12px}}

/* --- NEWS ----------------------------------------------------------- */
.post-feature{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;
  border:1px solid rgba(255,255,255,.09);background:#0f1116;
  min-height:400px;
}
.post-feature-art{position:relative;overflow:hidden;min-height:300px}
.post-feature-body{padding:34px;display:flex;flex-direction:column;justify-content:center}
.post-feature-body h2{margin:14px 0 12px;font-size:clamp(24px,3vw,36px);line-height:1.04;letter-spacing:-.045em}
.post-feature-body p{margin:0;font-size:13px;line-height:1.85;color:rgba(255,255,255,.5)}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.36);
}
.post-meta .cat{color:var(--orange)}
.post-meta i{font-style:normal;color:rgba(255,255,255,.18)}
.news-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.09);background:#0f1116;
  overflow:hidden;transition:.4s var(--ease);
}
.post:hover{border-color:rgba(23,81,241,.42)}
.post-art{position:relative;height:180px;flex:0 0 180px;overflow:hidden}
.post-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-body h3{margin:12px 0 10px;font-size:17px;line-height:1.22;letter-spacing:-.025em}
.post-body p{margin:0 0 18px;font-size:12px;line-height:1.75;color:rgba(255,255,255,.46)}
.post-body .read{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff;
}
.post-body .read .menu-arrow{color:var(--orange)}
.post:hover .read .menu-arrow{transform:translate(3px,-3px)}
@media(max-width:1024px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .post-feature{grid-template-columns:1fr}
  .post-feature-body{padding:24px}
}
@media(max-width:640px){.news-grid{grid-template-columns:1fr}}

.pager{
  margin-top:34px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.pager a,.pager span{
  min-width:42px;height:42px;display:grid;place-items:center;padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;font-weight:700;color:rgba(255,255,255,.6);
  transition:.3s var(--ease);
}
.pager a:hover{border-color:rgba(255,255,255,.34);color:#fff}
.pager .current{background:var(--blue);border-color:var(--blue);color:#fff}

/* --- ARTICLE -------------------------------------------------------- */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.prose{max-width:720px}
.prose p{margin:0 0 22px;font-size:14px;line-height:1.95;color:rgba(255,255,255,.62)}
.prose h2{margin:44px 0 16px;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.04em}
.prose h3{margin:34px 0 12px;font-size:18px;letter-spacing:-.03em}
.prose ul,.prose ol{margin:0 0 24px;padding-left:20px}
.prose li{margin:0 0 12px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.62)}
.prose li::marker{color:var(--orange)}
.prose strong{color:#fff;font-weight:700}
.prose a{color:#9db6ff;border-bottom:1px solid rgba(157,182,255,.4)}
.prose a:hover{color:var(--orange);border-color:var(--orange)}
.pullquote{
  margin:36px 0;padding:26px 28px;
  border-left:2px solid var(--orange);
  background:rgba(255,255,255,.025);
}
.pullquote p{margin:0;font-size:clamp(17px,2vw,22px);line-height:1.45;font-weight:300;color:rgba(255,255,255,.86)}
.pullquote cite{
  display:block;margin-top:16px;font-style:normal;
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
}
.figure{margin:34px 0}
.figure .frame{position:relative;overflow:hidden;min-height:300px;border:1px solid rgba(255,255,255,.08);background:#0f1116}
.figure figcaption{margin-top:12px;font-size:11px;line-height:1.7;color:rgba(255,255,255,.38)}
.aside-rail{position:sticky;top:130px;display:grid;gap:16px}
.rail-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);padding:20px}
.rail-card h4{margin:0 0 14px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.rail-card a{display:block;margin:0 0 12px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.6);transition:.25s var(--ease)}
.rail-card a:hover{color:var(--orange)}
.share{display:flex;gap:8px}
.share button,.share a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;cursor:pointer;
  transition:.3s var(--ease);
}
.share button:hover,.share a:hover{background:var(--blue);border-color:var(--blue)}
.share svg{width:16px;height:16px;fill:currentColor}
@media(max-width:1000px){
  .article-layout{grid-template-columns:1fr;gap:30px}
  .aside-rail{position:static}
}

/* --- CONTACT -------------------------------------------------------- */
.contact-cards{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ccard{
  border:1px solid rgba(255,255,255,.08);background:#111;padding:24px;
  transition:.35s var(--ease);
}
.ccard:hover{background:#151922;border-color:rgba(23,81,241,.4);transform:translateY(-4px)}
.ccard .ico{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(241,90,34,.42);background:rgba(241,90,34,.1);color:#ffb392;
}
.ccard .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ccard h4{margin:20px 0 8px;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.ccard b{display:block;font-size:19px;letter-spacing:-.03em}
.ccard p{margin:12px 0 0;font-size:12px;line-height:1.72;color:rgba(255,255,255,.44)}
@media(max-width:900px){.contact-cards{grid-template-columns:1fr}}

.map-panel{
  position:relative;overflow:hidden;min-height:420px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(145deg,#0f1218 0%,#0b0e13 100%);
  background-size:30px 30px,30px 30px,auto;
}
.map-roads{position:absolute;inset:0}
.map-roads span{position:absolute;background:rgba(255,255,255,.07)}
.map-roads span:nth-child(1){left:0;right:0;top:38%;height:2px}
.map-roads span:nth-child(2){left:0;right:0;top:68%;height:1px}
.map-roads span:nth-child(3){left:32%;top:0;bottom:0;width:1px}
.map-roads span:nth-child(4){left:70%;top:0;bottom:0;width:2px}
.map-pin{
  position:absolute;width:16px;height:16px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 6px rgba(241,90,34,.16),0 0 0 14px rgba(241,90,34,.07);
  animation:pinPulse 2.8s ease-in-out infinite;
}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(241,90,34,.16),0 0 0 14px rgba(241,90,34,.07)}
  50%{box-shadow:0 0 0 10px rgba(241,90,34,.2),0 0 0 24px rgba(241,90,34,.04)}
}
.map-label{
  position:absolute;padding:9px 12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(11,13,18,.9);backdrop-filter:blur(8px);
  font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.map-legend{
  position:absolute;left:20px;bottom:20px;z-index:3;
  padding:14px 16px;border:1px solid rgba(255,255,255,.1);
  background:rgba(11,13,18,.86);backdrop-filter:blur(10px);
}
.map-legend b{display:block;font-size:12px;letter-spacing:-.02em}
.map-legend span{display:block;margin-top:8px;font-size:10px;line-height:1.7;color:rgba(255,255,255,.44)}
@media(max-width:700px){.map-panel{min-height:320px}}

.office-list{display:grid;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.office{background:#111;padding:22px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;transition:.3s var(--ease)}
.office:hover{background:#161922}
.office b{display:block;font-size:14px;letter-spacing:-.02em}
.office span{display:block;margin-top:7px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.44)}
.office .hours{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:right;white-space:nowrap}
@media(max-width:600px){.office{grid-template-columns:1fr}.office .hours{text-align:left}}

/* --- FAQ ACCORDION -------------------------------------------------- */
.faq{margin-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08)}
.faq-q{
  width:100%;min-height:66px;padding:18px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:transparent;border:0;color:#fff;cursor:pointer;text-align:left;
  font-size:14px;font-weight:600;letter-spacing:-.02em;
  transition:.3s var(--ease);
}
.faq-q:hover{color:var(--orange)}
.faq-q .pm{
  flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);font-size:17px;font-weight:300;
  transition:.3s var(--ease);
}
.faq-item.is-open .pm{transform:rotate(45deg);background:var(--blue);border-color:var(--blue)}
.faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s var(--ease),padding .4s var(--ease)}
.faq-item.is-open .faq-a{max-height:400px;opacity:1;padding-bottom:22px}
.faq-a p{margin:0;max-width:760px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.5)}

/* --- DOWNLOADS ------------------------------------------------------ */
.dl-list{margin-top:26px;display:grid;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.dl{
  background:#111;padding:20px 22px;
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  transition:.3s var(--ease);
}
.dl:hover{background:#161922}
.dl .ft{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(23,81,241,.42);background:rgba(23,81,241,.1);
  font-size:8px;font-weight:800;letter-spacing:.08em;color:#9db6ff;
}
.dl b{display:block;font-size:14px;letter-spacing:-.02em}
.dl span{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.4)}
.dl .get{
  display:inline-flex;align-items:center;gap:8px;
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  white-space:nowrap;
}
@media(max-width:600px){
  .dl{grid-template-columns:auto 1fr;gap:14px}
  .dl .get{grid-column:2}
}

/* --- VIDEO CARDS ---------------------------------------------------- */
.vid-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vid{
  position:relative;overflow:hidden;min-height:240px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:#0f1116;
  transition:.4s var(--ease);
}
.vid:hover{border-color:rgba(23,81,241,.45);transform:translateY(-4px)}
.vid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;background:linear-gradient(to top,rgba(10,12,16,.95),transparent)}
.vid .play{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);background:rgba(17,17,17,.5);backdrop-filter:blur(6px);
  transition:.35s var(--ease);
}
.vid:hover .play{background:var(--orange);border-color:var(--orange);transform:translate(-50%,-50%) scale(1.06)}
.vid .play svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.vid-copy{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.vid-copy small{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.vid-copy h4{margin:9px 0 0;font-size:15px;line-height:1.25;letter-spacing:-.025em}
@media(max-width:900px){.vid-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vid-grid{grid-template-columns:1fr}}

/* --- FORM ON DARK --------------------------------------------------- */
.form-dark{
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.022);
  padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.form-dark .field label{color:rgba(255,255,255,.42)}
.form-dark .field input,
.form-dark .field select,
.form-dark .field textarea{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.form-dark .field select option{background:#111;color:#fff}
.form-dark .field input::placeholder,
.form-dark .field textarea::placeholder{color:rgba(255,255,255,.3)}
.form-note{grid-column:1/-1;font-size:11px;line-height:1.7;color:rgba(255,255,255,.34)}
.form-ok{
  grid-column:1/-1;padding:14px 16px;
  border:1px solid rgba(37,211,102,.4);background:rgba(37,211,102,.1);
  color:#8ff0b4;font-size:12px;line-height:1.7;
}
@media(max-width:700px){
  .form-dark{grid-template-columns:1fr;padding:18px}
  .form-dark .field input,.form-dark .field select,.form-dark .field textarea{font-size:16px}
}

/* --- PAYMENT PLANS -------------------------------------------------- */
.plans{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{
  border:1px solid rgba(255,255,255,.09);background:#111;padding:26px;
  display:flex;flex-direction:column;transition:.35s var(--ease);
}
.plan:hover{background:#151922;border-color:rgba(23,81,241,.4)}
.plan.featured{border-color:var(--blue);background:linear-gradient(180deg,rgba(23,81,241,.14),rgba(23,81,241,.02))}
.plan small{color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.plan .pct{margin:16px 0 4px;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.055em;font-weight:800}
.plan .over{font-size:12px;color:rgba(255,255,255,.44)}
.plan ul{margin:22px 0 0;padding:0;list-style:none}
.plan li{
  padding:11px 0;border-top:1px solid rgba(255,255,255,.07);
  font-size:12px;line-height:1.6;color:rgba(255,255,255,.56);
  display:flex;gap:10px;align-items:flex-start;
}
.plan li::before{content:"—";color:var(--orange);flex:0 0 auto}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* --- RELATED / NEXT-PROJECT STRIP ----------------------------------- */
.nextstrip{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.nextstrip a{
  position:relative;overflow:hidden;background:#0f1116;
  min-height:190px;display:flex;align-items:flex-end;padding:24px;
  transition:.4s var(--ease);
}
.nextstrip a:hover{background:#141821}
.nextstrip .lbl{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.nextstrip h4{margin:10px 0 0;font-size:24px;letter-spacing:-.04em}
.nextstrip .inner{position:relative;z-index:2}
.nextstrip a.next{text-align:right;justify-content:flex-end}
@media(max-width:700px){.nextstrip{grid-template-columns:1fr}.nextstrip a.next{text-align:left;justify-content:flex-start}}


/* =====================================================================
   NEW PROJECT-PAGE SECTIONS
   Floor plans · Construction progress · Brochure
   ===================================================================== */

/* --- FLOOR PLANS ---------------------------------------------------- */
.plan-wrap{margin-top:28px;display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}
.plan-switch{display:grid;gap:10px}
.plan-tab{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  width:100%;padding:18px;text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);color:#fff;
  transition:.3s var(--ease);
}
.plan-tab:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
.plan-tab.active{border-color:var(--blue);background:linear-gradient(90deg,rgba(23,81,241,.18),rgba(23,81,241,.02))}
.plan-tab b{display:block;font-size:14px;letter-spacing:-.02em}
.plan-tab small{display:block;margin-top:6px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.plan-tab .sz{font-size:13px;font-weight:700;color:var(--orange);white-space:nowrap}
.plan-view{
  position:relative;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(160deg,#0f1218,#0b0e13);padding:22px;
}
.plan-canvas{position:relative;width:100%;aspect-ratio:4/3;background:rgba(255,255,255,.015)}
.plan-canvas svg{width:100%;height:100%;display:block}
.plan-canvas .room{fill:rgba(23,81,241,.07);stroke:rgba(255,255,255,.22);stroke-width:1.2}
.plan-canvas .room.wet{fill:rgba(23,81,241,.16)}
.plan-canvas .room.out{fill:rgba(241,90,34,.10);stroke:rgba(241,90,34,.42);stroke-dasharray:4 3}
.plan-canvas .wall{stroke:rgba(255,255,255,.5);stroke-width:2.4;fill:none}
.plan-canvas .lbl{fill:rgba(255,255,255,.78);font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.plan-canvas .sub{fill:rgba(255,255,255,.38);font-size:7.5px;letter-spacing:.06em}
.plan-canvas .dim{stroke:rgba(241,90,34,.55);stroke-width:1;stroke-dasharray:3 3}
.plan-legend{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.plan-legend div b{display:block;font-size:15px;letter-spacing:-.02em}
.plan-legend div span{display:block;margin-top:5px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.plan-note{margin:16px 0 0;font-size:11px;line-height:1.7;color:rgba(255,255,255,.34)}
@media(max-width:900px){
  .plan-wrap{grid-template-columns:1fr}
  .plan-legend{grid-template-columns:1fr 1fr}
}

/* --- CONSTRUCTION PROGRESS (redesigned) ----------------------------- */
.prog{margin-top:32px;display:grid;gap:18px}

/* Head: dial + narrative + status chips */
.prog-head{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  padding:30px 32px;
  border:1px solid var(--line,rgba(255,255,255,.1));
  background:
    radial-gradient(circle at 12% 50%,rgba(255,255,255,.05),transparent 42%),
    rgba(255,255,255,.022);
}
.prog-dial{position:relative;width:148px;height:148px;flex:0 0 148px}
.prog-dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.prog-dial .track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:6}
.prog-dial .ticks{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-dasharray:1.5 8.4}
.prog-dial .fill{
  fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.14));
  transition:stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1);
}
.prog-dial .cap{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
}
.prog-dial .cap b{display:block;font-size:33px;line-height:1;letter-spacing:-.05em}
.prog-dial .cap span{
  display:block;margin-top:7px;font-size:8px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;opacity:.5;
}
.prog-head .txt small{
  display:block;color:var(--orange);
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.prog-head .txt h3{margin:12px 0 12px;font-size:clamp(19px,2.3vw,27px);line-height:1.14;letter-spacing:-.035em}
.prog-head .txt p{margin:0;max-width:640px;font-size:12.5px;line-height:1.85;opacity:.58}
.prog-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.prog-chips span{
  padding:8px 11px;border:1px solid var(--line,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04);
  font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.72;
}
.prog-chips span.live{
  color:var(--orange);border-color:currentColor;opacity:1;
  display:inline-flex;align-items:center;gap:7px;
}
.prog-chips span.live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 currentColor}50%{opacity:.5;box-shadow:0 0 0 4px transparent}}

/* Phase bars */
.prog-bars{display:grid;gap:1px;background:var(--line,rgba(255,255,255,.1));
  border:1px solid var(--line,rgba(255,255,255,.1))}
.pbar{
  background:rgba(255,255,255,.022);padding:19px 26px;
  display:grid;grid-template-columns:230px 1fr 92px;gap:22px;align-items:center;
  transition:.3s var(--ease);
}
.pbar:hover{background:rgba(255,255,255,.05)}
.pbar .nm{display:flex;align-items:center;gap:11px;font-size:13px;letter-spacing:-.01em}
.pbar .dot{
  flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:1px solid currentColor;display:grid;place-items:center;
  color:rgba(255,255,255,.25);
}
.pbar .dot svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pbar.done .dot{color:var(--orange);background:color-mix(in srgb,var(--orange) 18%,transparent)}
.pbar.active .dot{color:var(--orange)}
.pbar.active .dot::after{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:livePulse 1.8s ease-in-out infinite;
}
.pbar .rail{height:5px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.pbar .rail i{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--orange) 45%,transparent),var(--orange));
  transition:width 1.5s cubic-bezier(.2,.7,.2,1);
}
.pbar.active .rail i::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 8px,transparent 8px 18px);
  animation:barFlow 1.1s linear infinite;
}
@keyframes barFlow{to{background-position:26px 0}}
.pbar .val{
  text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--orange);
}
.pbar.idle .val{color:inherit;opacity:.34}
.pbar.idle .nm{opacity:.55}
@media(max-width:760px){
  .prog-head{grid-template-columns:1fr;gap:22px;padding:22px}
  .pbar{grid-template-columns:1fr auto;gap:10px 14px;padding:16px 18px}
  .pbar .rail{grid-column:1/-1;order:3}
}

/* Milestone timeline */
.prog-track{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line,rgba(255,255,255,.1));
  background:rgba(255,255,255,.022);
  padding:34px 0 26px;
}
.prog-track::before{
  content:"";position:absolute;left:9%;right:9%;top:52px;height:1px;
  background:linear-gradient(90deg,var(--orange),color-mix(in srgb,var(--orange) 30%,transparent),rgba(255,255,255,.12));
}
.pmile{position:relative;padding:0 22px;text-align:left}
.pmile .node{
  position:relative;z-index:2;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:26px;
  border:1px solid var(--orange);background:var(--black,#111);
  color:var(--orange);
}
.pmile .node svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pmile.done .node{background:var(--orange);color:var(--black,#111)}
.pmile.now .node::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid currentColor;opacity:.5;
  animation:nodePing 2.4s ease-out infinite;
}
@keyframes nodePing{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.pmile.next .node{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.3)}
.pmile .st{
  display:block;font-size:8px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:9px;
}
.pmile.next .st{color:inherit;opacity:.4}
.pmile b{display:block;margin-bottom:8px;font-size:13.5px;letter-spacing:-.02em;line-height:1.25}
.pmile span.note{display:block;font-size:11.5px;line-height:1.72;opacity:.5}
@media(max-width:900px){
  .prog-track{grid-template-columns:1fr;padding:26px 0}
  .prog-track::before{left:34px;right:auto;top:26px;bottom:26px;width:1px;height:auto;
    background:linear-gradient(180deg,var(--orange),rgba(255,255,255,.12))}
  .pmile{padding:16px 22px 16px 62px}
  .pmile .node{position:absolute;left:26px;top:18px;margin:0}
}

/* Delivered variant — no point animating five bars to 100% */
.prog.is-delivered .prog-head{
  background:
    radial-gradient(circle at 14% 50%,color-mix(in srgb,var(--orange) 14%,transparent),transparent 46%),
    rgba(255,255,255,.03);
}
.prog.is-delivered .prog-dial .fill{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--orange) 55%,transparent))}
.delivered-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line,rgba(255,255,255,.1));
  border:1px solid var(--line,rgba(255,255,255,.1));
}
.dcell{
  background:rgba(255,255,255,.022);padding:24px 20px;transition:.35s var(--ease);
}
.dcell:hover{background:rgba(255,255,255,.06)}
.dcell .tick{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--orange) 16%,transparent);
  border:1px solid var(--orange);color:var(--orange);margin-bottom:16px;
}
.dcell .tick svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dcell b{display:block;font-size:12.5px;line-height:1.35;letter-spacing:-.01em}
.dcell span{display:block;margin-top:9px;font-size:8px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange)}
@media(max-width:1000px){.delivered-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.delivered-grid{grid-template-columns:1fr}}

/* --- BROCHURE ------------------------------------------------------- */
.broch{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
  border:1px solid rgba(255,255,255,.10);overflow:hidden;
}
.broch-art{position:relative;min-height:420px;overflow:hidden;background:#0f1116}
.broch-cover{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
  height:74%;width:auto;aspect-ratio:1/1.414;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 18px;
  transition:.5s var(--ease);
}
.broch:hover .broch-cover{transform:translate(-50%,-50%) rotate(-1deg) scale(1.03)}
.broch-cover .mark{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.broch-cover .ttl{font-size:20px;line-height:1;letter-spacing:-.04em;font-weight:800}
.broch-body{padding:34px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;justify-content:center}
.broch-body h3{margin:12px 0 12px;font-size:clamp(22px,2.6vw,32px);line-height:1.04;letter-spacing:-.045em}
.broch-body p{margin:0 0 20px;max-width:520px;font-size:13px;line-height:1.85;color:rgba(255,255,255,.5)}
.broch-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.broch-meta span{
  padding:8px 11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.broch-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:900px){
  .broch{grid-template-columns:1fr}
  .broch-art{min-height:340px}
  .broch-body{padding:24px}
  .broch-actions .btn{width:100%}
}


/* =====================================================================
   AYYAM RESIDENCE — project brand theme
   Applied only on body.theme-ayyam. Day palette (blue/cream) leads,
   Moments palette (green) marks the lived-experience sections.
   ===================================================================== */
body.theme-ayyam{
  --ay-prussian:#002147;
  --ay-oxford:#002E5B;
  --ay-yale:#00416A;
  --ay-powder:#9EB9D4;
  --ay-copper:#977957;
  --ay-tan:#D7BC9F;
  --ay-cream:#E7D2BD;
  --ay-linen:#F3E9DD;
  --ay-evergreen:#112D1C;
  --ay-forest:#163D26;
  --ay-spruce:#1F5435;
  --ay-hunter:#24603B;
  --ay-sea:#31834F;

  /* remap the shared system so every inherited component follows suit */
  --blue:var(--ay-yale);
  --orange:var(--ay-tan);
  --black:var(--ay-prussian);
  --line:rgba(243,233,221,.12);
  --muted:rgba(243,233,221,.66);

  background:var(--ay-prussian);
  color:var(--ay-linen);
}
body.theme-ayyam .brandmark span{background:var(--ay-linen);color:var(--ay-prussian)}
body.theme-ayyam .nav{background:rgba(0,33,71,.94);border-bottom-color:rgba(243,233,221,.12)}
body.theme-ayyam .navlinks{border-color:rgba(243,233,221,.14);background:rgba(243,233,221,.04)}
body.theme-ayyam .navlinks a.active,
body.theme-ayyam .navlinks .nav-dropdown-trigger.active{color:var(--ay-tan)}
body.theme-ayyam .nav-dropdown-menu{background:rgba(0,33,71,.98);border-color:rgba(243,233,221,.14)}
body.theme-ayyam .nav-dropdown-menu::before{background:rgba(0,33,71,.98);border-color:rgba(243,233,221,.14)}
body.theme-ayyam .mobile-drawer{background:var(--ay-prussian);border-left-color:rgba(243,233,221,.14)}
body.theme-ayyam footer{background:#001731;border-top-color:rgba(243,233,221,.10)}

/* Ayyam typography — Cormorant for display, Amiri for the Arabic lockups */
body.theme-ayyam .ay-display,
body.theme-ayyam .page-hero h1,
body.theme-ayyam .section-title,
body.theme-ayyam .panel-copy h3,
body.theme-ayyam .broch-body h3,
body.theme-ayyam .post-feature-body h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.02;
}
body.theme-ayyam .page-hero h1{font-size:clamp(42px,6vw,86px);font-weight:400}
body.theme-ayyam .section-title{font-size:clamp(32px,4.2vw,58px);font-weight:400}
body.theme-ayyam .eyebrow{color:var(--ay-tan);letter-spacing:.28em;font-weight:600}
body.theme-ayyam .eyebrow::before{background:var(--ay-tan)}
body.theme-ayyam .section-copy{color:rgba(243,233,221,.62)}

/* The Ayyam wordmark, set the way the guideline draws it */
.ay-lockup{display:flex;align-items:baseline;gap:.9em;line-height:1}
.ay-lockup .word{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:clamp(46px,7.6vw,104px);
  letter-spacing:.045em;
  color:var(--ay-linen);
  position:relative;
}
.ay-lockup .word::after{
  content:"";
  position:absolute;left:46%;right:24%;top:.07em;height:.035em;
  background:var(--ay-linen);
  transform:rotate(-3.5deg);
  border-radius:2px;
}
.ay-lockup .sub{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:clamp(15px,1.9vw,27px);
  letter-spacing:.34em;
  color:var(--ay-linen);
  opacity:.92;
}
.ay-arabic{
  font-family:'Amiri','Cormorant Garamond',serif;
  font-size:clamp(24px,3.4vw,46px);
  line-height:1.7;
  color:var(--ay-linen);
  direction:rtl;
}
.ay-tagline{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(14px,1.7vw,22px);
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--ay-linen);
}

/* Signature: the radiating sunburst from the guideline */
.ay-rays{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  width:min(780px,86%);aspect-ratio:1/1;
  pointer-events:none;opacity:.5;
}
.ay-rays svg{width:100%;height:100%;display:block}
.ay-rays line{stroke:var(--ay-powder);stroke-width:.7;opacity:.34}
.ay-rays .glow{
  position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);
  width:46%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(158,185,212,.30),transparent 66%);
  filter:blur(6px);
  animation:ayGlow 7s ease-in-out infinite;
}
@keyframes ayGlow{
  0%,100%{opacity:.5;transform:translateX(-50%) scale(.96)}
  50%{opacity:.9;transform:translateX(-50%) scale(1.04)}
}

/* Ayyam hero: replaces the CCR fins/rings art entirely */
.ay-hero{
  position:relative;overflow:hidden;
  min-height:clamp(560px,88svh,900px);
  display:flex;align-items:center;
  background:
    radial-gradient(circle at 50% 118%,rgba(0,65,106,.9),transparent 56%),
    linear-gradient(180deg,#00152F 0%,var(--ay-prussian) 46%,#00305F 100%);
}
.ay-hero-inner{position:relative;z-index:4;width:var(--container);margin:auto;padding:120px 0 70px;text-align:center}
.ay-hero .crumbs{justify-content:center;margin-bottom:26px;color:rgba(243,233,221,.4)}
.ay-hero .crumbs a{color:rgba(243,233,221,.66)}
.ay-hero .crumbs a:hover{color:var(--ay-tan)}
.ay-hero .crumbs span[aria-current]{color:var(--ay-tan)}
.ay-hero .ay-lockup{justify-content:center;margin-top:8px}
.ay-hero .ay-arabic{margin:0 0 6px}
.ay-hero .ay-tagline{margin-top:22px}
.ay-hero-lede{
  max-width:720px;margin:26px auto 0;
  font-size:14px;line-height:1.95;color:rgba(243,233,221,.6);
}
.ay-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
@media(max-width:700px){
  .ay-hero{min-height:auto}
  .ay-hero-inner{padding:104px 0 56px}
  .ay-hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .ay-hero-actions .btn{width:100%}
  .ay-arabic{font-size:22px}
  .ay-tagline{letter-spacing:.3em}
}

/* Buttons in the Ayyam palette */
body.theme-ayyam .btn{border-color:rgba(243,233,221,.34);color:var(--ay-linen)}
body.theme-ayyam .btn-blue{background:var(--ay-yale);border-color:var(--ay-yale)}
body.theme-ayyam .btn-orange{background:var(--ay-tan);border-color:var(--ay-tan);color:var(--ay-prussian)}
body.theme-ayyam .btn-light{background:var(--ay-linen);border-color:var(--ay-linen);color:var(--ay-prussian)}
body.theme-ayyam .btn-dark{background:var(--ay-prussian);border-color:var(--ay-prussian);color:var(--ay-linen)}

/* Section variants remapped to the two Ayyam palettes */
body.theme-ayyam .sec-alt{
  background:linear-gradient(180deg,var(--ay-oxford) 0%,#00203F 100%);
}
body.theme-ayyam .sec-light{background:linear-gradient(180deg,var(--ay-linen) 0%,#EFE2D2 100%);color:var(--ay-prussian)}
body.theme-ayyam .sec-light .section-copy{color:rgba(0,33,71,.62)}
body.theme-ayyam .sec-light .eyebrow{color:var(--ay-copper)}
body.theme-ayyam .sec-light .eyebrow::before{background:var(--ay-copper)}
/* "Moments" sections use the green palette */
body.theme-ayyam .sec-moments{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ay-evergreen) 0%,var(--ay-forest) 100%);
}
body.theme-ayyam .sec-moments .eyebrow{color:var(--ay-cream)}
body.theme-ayyam .sec-moments .eyebrow::before{background:var(--ay-cream)}

/* Inherited components restyled for Ayyam */
body.theme-ayyam .subnav{background:rgba(0,33,71,.95);border-color:rgba(243,233,221,.12)}
body.theme-ayyam .subnav-links a{color:rgba(243,233,221,.6)}
body.theme-ayyam .subnav-links a.current{color:var(--ay-linen);border-bottom-color:var(--ay-tan)}
body.theme-ayyam .spec,
body.theme-ayyam .amen,
body.theme-ayyam .pmile,
body.theme-ayyam .pbar,
body.theme-ayyam .plan{background:rgba(0,46,91,.55)}
body.theme-ayyam .spec:hover,
body.theme-ayyam .amen:hover,
body.theme-ayyam .pmile:hover{background:rgba(0,65,106,.6)}
body.theme-ayyam .spec-grid,
body.theme-ayyam .amen-grid,
body.theme-ayyam .prog-milestones,
body.theme-ayyam .prog-bars,
body.theme-ayyam .office-list{background:rgba(243,233,221,.12);border-color:rgba(243,233,221,.12)}
body.theme-ayyam .amen .ico{border-color:rgba(215,188,159,.5);background:rgba(215,188,159,.14);color:var(--ay-cream)}
body.theme-ayyam .spec span,
body.theme-ayyam .plan small,
body.theme-ayyam .panel-copy small,
body.theme-ayyam .pcard-loc{color:var(--ay-tan)}
body.theme-ayyam .plan.featured{border-color:var(--ay-tan);background:linear-gradient(180deg,rgba(215,188,159,.16),rgba(215,188,159,.02))}
body.theme-ayyam .plan li::before{color:var(--ay-tan)}
body.theme-ayyam .prog-dial .fill{stroke:var(--ay-tan)}
body.theme-ayyam .pbar .rail i{background:linear-gradient(90deg,var(--ay-yale),var(--ay-tan))}
body.theme-ayyam .plan-tab.active{border-color:var(--ay-tan);background:linear-gradient(90deg,rgba(215,188,159,.16),transparent)}
body.theme-ayyam .plan-tab .sz{color:var(--ay-tan)}
body.theme-ayyam .plan-canvas .room{fill:rgba(158,185,212,.08);stroke:rgba(243,233,221,.26)}
body.theme-ayyam .plan-canvas .room.wet{fill:rgba(0,65,106,.5)}
body.theme-ayyam .plan-canvas .room.out{fill:rgba(215,188,159,.12);stroke:rgba(215,188,159,.5)}
body.theme-ayyam .plan-canvas .wall{stroke:rgba(243,233,221,.6)}
body.theme-ayyam .plan-canvas .lbl{fill:rgba(243,233,221,.82)}
body.theme-ayyam .plan-canvas .sub{fill:rgba(243,233,221,.42)}
body.theme-ayyam .map-pin{background:var(--ay-tan);box-shadow:0 0 0 6px rgba(215,188,159,.18),0 0 0 14px rgba(215,188,159,.08)}
body.theme-ayyam .map-panel,
body.theme-ayyam .plan-view,
body.theme-ayyam .prog-head,
body.theme-ayyam .broch,
body.theme-ayyam .form-dark,
body.theme-ayyam .panel{border-color:rgba(243,233,221,.14)}
body.theme-ayyam .form-dark .field input,
body.theme-ayyam .form-dark .field select,
body.theme-ayyam .form-dark .field textarea{
  background:rgba(243,233,221,.05);border-color:rgba(243,233,221,.18);color:var(--ay-linen);
}
body.theme-ayyam .form-dark .field select option{background:var(--ay-oxford)}
body.theme-ayyam .field select:focus,
body.theme-ayyam .field input:focus,
body.theme-ayyam .field textarea:focus{border-color:var(--ay-tan);box-shadow:0 0 0 4px rgba(215,188,159,.16)}
body.theme-ayyam .finder-note{border-color:rgba(243,233,221,.14);background:rgba(243,233,221,.03)}
body.theme-ayyam .shot,body.theme-ayyam .gallery .shot{background:var(--ay-oxford);border-color:rgba(243,233,221,.14)}
body.theme-ayyam .cta{background:var(--ay-tan);color:var(--ay-prussian)}
body.theme-ayyam .cta p{color:rgba(0,33,71,.72)}
body.theme-ayyam .cta::before{background:repeating-linear-gradient(90deg,rgba(0,33,71,.16) 0 9px,transparent 9px 24px)}
body.theme-ayyam .lightbox-close:hover{background:var(--ay-tan);border-color:var(--ay-tan);color:var(--ay-prussian)}
body.theme-ayyam .lightbox-nav:hover{background:var(--ay-yale);border-color:var(--ay-yale)}

/* Ayyam artwork blocks — light, rays and horizon instead of CCR fins */
.ay-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(170deg,var(--ay-oxford),var(--ay-prussian))}
.ay-art.green{background:linear-gradient(170deg,var(--ay-forest),var(--ay-evergreen))}
.ay-art.sand{background:linear-gradient(170deg,var(--ay-cream),var(--ay-tan))}
.ay-art .horizon{
  position:absolute;left:0;right:0;top:58%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,233,221,.5),transparent);
}
.ay-art .sun{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:34%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(215,188,159,.45),rgba(215,188,159,.06) 62%,transparent 72%);
  animation:ayGlow 8s ease-in-out infinite;
}
.ay-art .fan{position:absolute;left:0;right:0;bottom:0;top:0;opacity:.42}
.ay-art .fan svg{width:100%;height:100%}
.ay-art .fan line{stroke:rgba(158,185,212,.5);stroke-width:.6}


/* Ayyam theme: panels that would otherwise fall back to the CCR near-black */
body.theme-ayyam .plan-view{background:linear-gradient(160deg,#00203F,#001navy)}
body.theme-ayyam .plan-view{background:linear-gradient(160deg,#00294F 0%,#001B39 100%)}
body.theme-ayyam .plan-canvas{background:rgba(243,233,221,.03)}
body.theme-ayyam .broch-art{background:linear-gradient(170deg,var(--ay-oxford),#001B39)}
body.theme-ayyam .broch-body{background:rgba(243,233,221,.04)}
body.theme-ayyam .broch-cover{
  border-color:rgba(0,33,71,.22);
  box-shadow:0 30px 70px rgba(0,10,25,.62);
}
body.theme-ayyam .broch-cover .ttl{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:26px;letter-spacing:.03em;
}
body.theme-ayyam .prog-head{background:rgba(243,233,221,.035)}
body.theme-ayyam .pbar .rail{background:rgba(243,233,221,.10)}
body.theme-ayyam .table-wrap{border-color:rgba(0,33,71,.14)}
body.theme-ayyam .sec-light .utable th{background:rgba(0,33,71,.05);color:rgba(0,33,71,.6);border-bottom-color:rgba(0,33,71,.14)}
body.theme-ayyam .sec-light .utable td{color:rgba(0,33,71,.78);border-bottom-color:rgba(0,33,71,.09)}
body.theme-ayyam .sec-light .utable td:first-child{color:var(--ay-prussian)}
body.theme-ayyam .sec-light .table-wrap{background:rgba(255,255,255,.6)}
body.theme-ayyam .sec-light .utable .tag{border-color:rgba(0,33,71,.18);background:rgba(0,33,71,.06);color:rgba(0,33,71,.7)}

/* Ayyam lockup stacks on small screens — the vertical lockup from the guideline */
@media(max-width:560px){
  .ay-lockup{flex-direction:column;align-items:center;gap:.14em}
  .ay-lockup .word{font-size:clamp(44px,15vw,64px)}
  .ay-lockup .word::after{left:44%;right:20%}
  .ay-lockup .sub{font-size:13px;letter-spacing:.52em;padding-left:.52em}
  .ay-hero .ay-tagline{letter-spacing:.26em;font-size:13px}
}


/* =====================================================================
   CCR x AYYAM co-brand layer
   Ayyam owns colour, type and the sunburst. CCR keeps the structural
   DNA: fin artwork, geometric motion, blue as the interactive accent.
   ===================================================================== */
body.theme-ayyam{
  --ay-ccr-blue:#1751F1;   /* CCR's electric blue, kept for interaction */
}

/* CCR fin artwork, recoloured into the Ayyam Day palette */
.ay-fins{
  position:absolute;inset:0;display:flex;justify-content:flex-end;gap:4px;
  pointer-events:none;
}
.ay-fins span{
  flex:1;max-width:52px;
  background:linear-gradient(to bottom,transparent 0%,rgba(158,185,212,.92) 46%,transparent 100%);
  transform:scaleY(.5);opacity:.09;
  filter:drop-shadow(0 0 16px rgba(158,185,212,.26));
  animation:rayPulse 6.4s ease-in-out infinite;
}
.ay-fins span:nth-child(1){animation-delay:0s;opacity:.05}
.ay-fins span:nth-child(2){animation-delay:.16s;opacity:.08}
.ay-fins span:nth-child(3){animation-delay:.32s;opacity:.13}
.ay-fins span:nth-child(4){animation-delay:.48s;opacity:.2}
.ay-fins span:nth-child(5){animation-delay:.64s;opacity:.3}
.ay-fins span:nth-child(6){animation-delay:.8s;opacity:.44}
.ay-fins span:nth-child(7){animation-delay:.64s;opacity:.3}
.ay-fins span:nth-child(8){animation-delay:.48s;opacity:.18}
.ay-fins span:nth-child(9){animation-delay:.32s;opacity:.1}
.ay-fins span:nth-child(10){animation-delay:.16s;opacity:.05}

/* CCR rings + scan line, in Ayyam colours */
.ay-ring{
  position:absolute;border:1px solid rgba(243,233,221,.10);border-radius:50%;
  pointer-events:none;
}
.ay-ring.one{width:320px;height:320px;left:-90px;top:14%;
  box-shadow:0 0 0 40px rgba(158,185,212,.028),0 0 0 80px rgba(158,185,212,.015)}
.ay-ring.two{width:150px;height:150px;right:9%;top:20%}
.ay-scan{
  position:absolute;left:6%;right:6%;top:82%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ay-tan),transparent);
  box-shadow:0 0 18px rgba(215,188,159,.32);
  animation:profileScan 8s ease-in-out infinite;
}

/* Interaction states borrow CCR's blue so the co-brand reads on hover */
body.theme-ayyam .btn-blue{background:var(--ay-ccr-blue);border-color:var(--ay-ccr-blue)}
body.theme-ayyam .btn:hover{border-color:rgba(243,233,221,.6)}
body.theme-ayyam .pbar .rail i{background:linear-gradient(90deg,var(--ay-ccr-blue),var(--ay-tan))}
body.theme-ayyam .plan-tab.active{
  border-color:var(--ay-ccr-blue);
  background:linear-gradient(90deg,rgba(23,81,241,.22),rgba(215,188,159,.06));
}
body.theme-ayyam .pcard:hover,
body.theme-ayyam .post:hover{border-color:rgba(23,81,241,.5)}
body.theme-ayyam .journey-point::before{background:var(--ay-ccr-blue)}
body.theme-ayyam .journey-line{
  background:linear-gradient(90deg,transparent,rgba(23,81,241,.7),rgba(243,233,221,.24),rgba(23,81,241,.7),transparent);
}
body.theme-ayyam .journey-visual{
  background:
    linear-gradient(rgba(243,233,221,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,233,221,.03) 1px,transparent 1px),
    linear-gradient(145deg,#00294F 0%,#001B39 100%);
  background-size:34px 34px,34px 34px,auto;
  border-color:rgba(243,233,221,.12);
}
body.theme-ayyam .journey-visual::before{
  background:
    radial-gradient(circle at 20% 28%,rgba(23,81,241,.2),transparent 20%),
    radial-gradient(circle at 76% 74%,rgba(215,188,159,.08),transparent 20%);
}
body.theme-ayyam .journey-point{background:rgba(0,27,57,.9);border-color:rgba(243,233,221,.14)}
body.theme-ayyam .journey-card{background:rgba(0,46,91,.5);border-color:rgba(243,233,221,.12)}
body.theme-ayyam .journey-card:hover{background:rgba(0,65,106,.58)}
body.theme-ayyam .journey-card small{color:var(--ay-tan)}

/* --- UNIT TYPE CARDS (the seven Ayyam types) ------------------------ */
.type-grid{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{
  position:relative;overflow:hidden;
  border:1px solid rgba(243,233,221,.14);
  background:linear-gradient(170deg,rgba(0,46,91,.6),rgba(0,27,57,.6));
  padding:24px;display:flex;flex-direction:column;
  transition:.4s var(--ease);
}
.tcard:hover{border-color:var(--ay-tan);transform:translateY(-5px)}
.tcard .code{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:44px;line-height:1;letter-spacing:.02em;color:var(--ay-tan);
}
.tcard h4{
  margin:12px 0 10px;font-size:17px;letter-spacing:-.02em;font-weight:600;
}
.tcard p{margin:0 0 18px;font-size:12px;line-height:1.75;color:rgba(243,233,221,.66)}
.tcard dl{margin:auto 0 0;padding-top:16px;border-top:1px solid rgba(243,233,221,.12);display:grid;gap:9px}
.tcard dl div{display:flex;justify-content:space-between;gap:12px}
.tcard dt{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,233,221,.4)}
.tcard dd{margin:0;font-size:11px;font-weight:600;color:var(--ay-linen);text-align:right}
@media(max-width:1100px){.type-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.type-grid{grid-template-columns:1fr}}

/* --- ROOM SCHEDULE (real dimensions from the sales kit) ------------- */
.roomsched{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.roomsched h5{
  margin:0 0 12px;font-size:9px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
.roomsched ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.08)}
.roomsched li{
  background:rgba(255,255,255,.02);padding:10px 12px;
  display:flex;justify-content:space-between;gap:10px;
  font-size:11px;
}
.roomsched li span{color:rgba(255,255,255,.62)}
.roomsched li b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
body.theme-ayyam .roomsched ul{background:rgba(243,233,221,.12)}
body.theme-ayyam .roomsched li{background:rgba(0,27,57,.7)}
body.theme-ayyam .roomsched li span{color:rgba(243,233,221,.6)}
body.theme-ayyam .roomsched li b{color:var(--ay-linen)}
@media(max-width:700px){.roomsched ul{grid-template-columns:1fr}}

/* Schematic reads as a diagram when a real room schedule sits beside it */
body.theme-ayyam .plan-canvas .lbl{font-size:8px;letter-spacing:.11em}
body.theme-ayyam .roomsched li b{color:var(--ay-tan)}


/* =====================================================================
   PHOTOGRAPHY LAYER — real renders (Ayyam Sales Kit)
   The CCR geometric artwork stays as the overlay language; photography
   sits underneath it, so the co-brand still reads.
   ===================================================================== */
.photo{position:absolute;inset:0;overflow:hidden;background:#00152F}
.photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);
  transition:transform 1.2s var(--ease);
}
.photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,21,47,.34) 0%,rgba(0,21,47,.12) 42%,rgba(0,33,71,.86) 100%);
}
.motion-card:hover .photo img,
.shot:hover .photo img{transform:scale(1.09)}

/* Hero with a full-bleed render behind the Ayyam lockup */
.ay-hero.has-photo{background:#00152F}
.ay-hero-photo{position:absolute;inset:0;overflow:hidden;z-index:0}
.ay-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ay-hero-photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(0,33,71,.30) 0%,rgba(0,21,47,.68) 58%,rgba(0,21,47,.90) 100%),
    linear-gradient(180deg,rgba(0,21,47,.62) 0%,transparent 30%,rgba(0,21,47,.88) 100%);
}
.ay-hero.has-photo .ay-fins span{opacity:.05!important}
.ay-hero.has-photo .ay-fins span:nth-child(6){opacity:.14!important}
.ay-hero.has-photo .ay-rays{opacity:.3}
.ay-hero.has-photo .ay-ring{border-color:rgba(243,233,221,.13)}

/* Gallery shots become photographic */
.shot .photo::after{
  background:linear-gradient(180deg,transparent 34%,rgba(0,21,47,.9) 100%);
}
.shot figcaption{text-shadow:0 1px 12px rgba(0,15,35,.7)}

/* Panel + masterplan figure */
.panel .photo::after{
  background:linear-gradient(180deg,rgba(0,21,47,.2) 0%,rgba(0,21,47,.45) 44%,rgba(0,27,57,.95) 100%);
}
.mp-figure{
  position:relative;overflow:hidden;margin-top:28px;
  border:1px solid rgba(243,233,221,.14);
  aspect-ratio:16/9;
}
.mp-figure .photo::after{
  background:linear-gradient(180deg,rgba(0,21,47,.16) 0%,transparent 40%,rgba(0,21,47,.72) 100%);
}
.mp-figure figcaption{
  position:absolute;left:24px;right:24px;bottom:20px;z-index:3;
  font-size:11px;line-height:1.7;color:rgba(243,233,221,.72);
  text-shadow:0 1px 12px rgba(0,15,35,.8);
}
.mp-figure .keynum{
  position:absolute;right:24px;top:22px;z-index:3;
  padding:12px 15px;
  border:1px solid rgba(243,233,221,.2);
  background:rgba(0,21,47,.62);backdrop-filter:blur(10px);
  text-align:right;
}
.mp-figure .keynum b{display:block;font-size:26px;line-height:1;letter-spacing:-.04em;color:var(--ay-tan)}
.mp-figure .keynum span{display:block;margin-top:6px;font-size:8px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(243,233,221,.6)}
@media(max-width:700px){
  .mp-figure{aspect-ratio:4/3}
  .mp-figure figcaption{left:16px;right:16px;bottom:14px;font-size:10px}
}

/* Brochure cover shows the real render */
.broch-cover.has-photo{padding:0;overflow:hidden;background:#00152F!important}
.broch-cover.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.broch-cover.has-photo .cov-in{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:22px 18px;
  background:linear-gradient(180deg,rgba(0,21,47,.72) 0%,rgba(0,21,47,.25) 46%,rgba(0,21,47,.88) 100%);
}
.broch-cover.has-photo .mark,
.broch-cover.has-photo .ttl{color:var(--ay-linen)}

/* Photographic gallery: uniform grid reads better than the masonry spans */
.gallery.photo-grid{grid-template-columns:repeat(3,1fr)}
.gallery.photo-grid .shot{min-height:0;aspect-ratio:16/10}
.gallery.photo-grid .shot.wide,
.gallery.photo-grid .shot.tall{grid-column:auto;grid-row:auto;min-height:0}
@media(max-width:900px){.gallery.photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gallery.photo-grid{grid-template-columns:1fr}}

/* Lightbox: the centred grid item must not shrink-wrap a photo's intrinsic size */
.lightbox > div{width:min(980px,100%)}
.lightbox-frame{width:100%}
.lightbox-frame .photo{position:absolute;inset:0}
.lightbox-frame .photo::after{display:none}
.lightbox-frame .photo img{transform:none}


/* =====================================================================
   PER-PROJECT BRAND THEMES
   Each project owns colour + display voice; CCR keeps the structure,
   the geometric motion layer and Montserrat for all UI and data.
   ===================================================================== */

/* ---------- THE CORE — The Business Hub ---------------------------- */
body.theme-core{
  --co-indigo:#2E3182;
  --co-deep:#1B1D57;
  --co-ink:#101132;
  --co-lilac:#A8AAE6;
  --co-mist:#E6E6F0;
  --co-ccr-blue:#1751F1;

  --blue:var(--co-indigo);
  --orange:var(--co-lilac);
  --black:var(--co-ink);
  --line:rgba(230,230,240,.12);
  --muted:rgba(230,230,240,.66);
  background:var(--co-ink);
  color:var(--co-mist);
}
body.theme-core .nav{background:rgba(16,17,50,.94);border-bottom-color:rgba(230,230,240,.12)}
body.theme-core .navlinks{border-color:rgba(230,230,240,.14);background:rgba(230,230,240,.04)}
body.theme-core .nav-dropdown-menu,
body.theme-core .nav-dropdown-menu::before{background:rgba(16,17,50,.98);border-color:rgba(230,230,240,.14)}
body.theme-core .mobile-drawer{background:var(--co-ink);border-left-color:rgba(230,230,240,.14)}
body.theme-core footer{background:#0C0D26;border-top-color:rgba(230,230,240,.1)}
body.theme-core .brandmark span{background:var(--co-mist);color:var(--co-ink)}
body.theme-core .sec-alt{background:linear-gradient(180deg,var(--co-deep) 0%,#14163F 100%)}
body.theme-core .sec-light{background:linear-gradient(180deg,#F2F2F7 0%,#E7E7F0 100%);color:var(--co-ink)}
body.theme-core .sec-light .section-copy{color:rgba(16,17,50,.62)}
body.theme-core .sec-light .eyebrow,
body.theme-core .sec-light .eyebrow::before{color:var(--co-indigo);background:none}
body.theme-core .sec-light .eyebrow::before{background:var(--co-indigo)}
body.theme-core .sec-moments{background:linear-gradient(180deg,#191B4E 0%,#22246B 100%)}
body.theme-core .btn-blue{background:var(--co-ccr-blue);border-color:var(--co-ccr-blue)}
body.theme-core .btn-orange{background:var(--co-lilac);border-color:var(--co-lilac);color:var(--co-ink)}
body.theme-core .btn{border-color:rgba(230,230,240,.34);color:var(--co-mist)}
body.theme-core .eyebrow{color:var(--co-lilac)}
body.theme-core .eyebrow::before{background:var(--co-lilac)}
body.theme-core .spec,body.theme-core .amen,body.theme-core .pmile,
body.theme-core .pbar,body.theme-core .plan{background:rgba(46,49,130,.4)}
body.theme-core .spec:hover,body.theme-core .amen:hover,body.theme-core .pmile:hover{background:rgba(46,49,130,.62)}
body.theme-core .spec-grid,body.theme-core .amen-grid,body.theme-core .prog-milestones,
body.theme-core .prog-bars,body.theme-core .office-list{background:rgba(230,230,240,.12);border-color:rgba(230,230,240,.12)}
body.theme-core .amen .ico{border-color:rgba(168,170,230,.5);background:rgba(168,170,230,.14);color:var(--co-lilac)}
body.theme-core .plan.featured{border-color:var(--co-lilac);background:linear-gradient(180deg,rgba(168,170,230,.16),transparent)}
body.theme-core .journey-visual{background:linear-gradient(145deg,#1B1D57,#101132);border-color:rgba(230,230,240,.12)}
body.theme-core .journey-point{background:rgba(16,17,50,.92);border-color:rgba(230,230,240,.14)}
body.theme-core .journey-card{background:rgba(46,49,130,.36);border-color:rgba(230,230,240,.12)}
body.theme-core .journey-card small{color:var(--co-lilac)}
body.theme-core .cta{background:var(--co-lilac);color:var(--co-ink)}
body.theme-core .cta p{color:rgba(16,17,50,.72)}
body.theme-core .map-pin{background:var(--co-lilac);box-shadow:0 0 0 6px rgba(168,170,230,.18),0 0 0 14px rgba(168,170,230,.07)}
body.theme-core .form-dark .field input,body.theme-core .form-dark .field select,
body.theme-core .form-dark .field textarea{background:rgba(230,230,240,.05);border-color:rgba(230,230,240,.18);color:var(--co-mist)}
body.theme-core .form-dark .field select option{background:var(--co-deep)}
/* The Core wordmark — lowercase, wide, with the barred E */
.core-lockup{
  display:flex;align-items:flex-end;gap:.30em;line-height:1;
  font-size:clamp(52px,9vw,120px);           /* em base for the whole lockup */
}
.core-lockup .word{
  font-size:1em;font-weight:300;letter-spacing:.015em;
  line-height:.76;color:var(--co-mist);
}
.core-lockup .bars{
  display:flex;flex-direction:column;justify-content:space-between;
  height:.46em;margin-bottom:.005em;
}
.core-lockup .bars i{display:block;height:.075em;background:var(--co-mist);border-radius:1px}
.core-lockup .bars i:nth-child(1){width:.46em}
.core-lockup .bars i:nth-child(2){width:.33em}
.core-lockup .bars i:nth-child(3){width:.46em}
.core-lockup .tag{
  font-size:.125em;font-weight:700;line-height:1.32;
  letter-spacing:.16em;text-transform:uppercase;color:var(--co-mist);
  border-left:1px solid rgba(230,230,240,.4);padding-left:1em;margin-left:.5em;
  align-self:center;text-align:left;
}
@media(max-width:560px){
  .core-lockup{flex-direction:column;align-items:center;gap:.16em;font-size:clamp(56px,17vw,80px)}
  .core-lockup .tag{border-left:0;border-top:1px solid rgba(230,230,240,.4);
    padding:.7em 0 0;margin:0;text-align:center;font-size:.15em}
  .core-lockup .wordwrap{display:flex;align-items:flex-end;gap:.30em}
}

/* ---------- FRONT GATE — A Pattern of Trust ------------------------ */
body.theme-frontgate{
  --fg-petrol:#132529;
  --fg-deep:#0C1A1D;
  --fg-slate:#1E393E;
  --fg-peach:#E2A87E;
  --fg-sand:#F0DCC9;
  --fg-ccr-blue:#1751F1;

  --blue:var(--fg-slate);
  --orange:var(--fg-peach);
  --black:var(--fg-deep);
  --line:rgba(240,220,201,.12);
  --muted:rgba(240,220,201,.66);
  background:var(--fg-deep);
  color:var(--fg-sand);
}
body.theme-frontgate .nav{background:rgba(12,26,29,.94);border-bottom-color:rgba(240,220,201,.12)}
body.theme-frontgate .navlinks{border-color:rgba(240,220,201,.14);background:rgba(240,220,201,.04)}
body.theme-frontgate .nav-dropdown-menu,
body.theme-frontgate .nav-dropdown-menu::before{background:rgba(12,26,29,.98);border-color:rgba(240,220,201,.14)}
body.theme-frontgate .mobile-drawer{background:var(--fg-deep);border-left-color:rgba(240,220,201,.14)}
body.theme-frontgate footer{background:#091417;border-top-color:rgba(240,220,201,.1)}
body.theme-frontgate .brandmark span{background:var(--fg-sand);color:var(--fg-deep)}
body.theme-frontgate .sec-alt{background:linear-gradient(180deg,var(--fg-petrol) 0%,#0F2024 100%)}
body.theme-frontgate .sec-light{background:linear-gradient(180deg,var(--fg-sand) 0%,#E6D0BA 100%);color:var(--fg-deep)}
body.theme-frontgate .sec-light .section-copy{color:rgba(12,26,29,.66)}
body.theme-frontgate .sec-light .eyebrow{color:#A8623A}
body.theme-frontgate .sec-light .eyebrow::before{background:#A8623A}
body.theme-frontgate .sec-moments{background:linear-gradient(180deg,#16302F 0%,#0F2422 100%)}
body.theme-frontgate .btn-blue{background:var(--fg-ccr-blue);border-color:var(--fg-ccr-blue);color:#fff}
body.theme-frontgate .btn-orange{background:var(--fg-peach);border-color:var(--fg-peach);color:var(--fg-deep)}
body.theme-frontgate .btn{border-color:rgba(240,220,201,.34);color:var(--fg-sand)}
body.theme-frontgate .eyebrow{color:var(--fg-peach)}
body.theme-frontgate .eyebrow::before{background:var(--fg-peach)}
body.theme-frontgate .spec,body.theme-frontgate .amen,body.theme-frontgate .pmile,
body.theme-frontgate .pbar,body.theme-frontgate .plan{background:rgba(30,57,62,.5)}
body.theme-frontgate .spec:hover,body.theme-frontgate .amen:hover,body.theme-frontgate .pmile:hover{background:rgba(30,57,62,.72)}
body.theme-frontgate .spec-grid,body.theme-frontgate .amen-grid,body.theme-frontgate .prog-milestones,
body.theme-frontgate .prog-bars,body.theme-frontgate .office-list{background:rgba(240,220,201,.12);border-color:rgba(240,220,201,.12)}
body.theme-frontgate .amen .ico{border-color:rgba(226,168,126,.5);background:rgba(226,168,126,.14);color:var(--fg-peach)}
body.theme-frontgate .plan.featured{border-color:var(--fg-peach);background:linear-gradient(180deg,rgba(226,168,126,.16),transparent)}
body.theme-frontgate .journey-visual{background:linear-gradient(145deg,#162C31,#0C1A1D);border-color:rgba(240,220,201,.12)}
body.theme-frontgate .journey-point{background:rgba(12,26,29,.92);border-color:rgba(240,220,201,.14)}
body.theme-frontgate .journey-card{background:rgba(30,57,62,.44);border-color:rgba(240,220,201,.12)}
body.theme-frontgate .journey-card small{color:var(--fg-peach)}
body.theme-frontgate .cta{background:var(--fg-peach);color:var(--fg-deep)}
body.theme-frontgate .cta p{color:rgba(12,26,29,.72)}
body.theme-frontgate .map-pin{background:var(--fg-peach);box-shadow:0 0 0 6px rgba(226,168,126,.18),0 0 0 14px rgba(226,168,126,.07)}
body.theme-frontgate .form-dark .field input,body.theme-frontgate .form-dark .field select,
body.theme-frontgate .form-dark .field textarea{background:rgba(240,220,201,.05);border-color:rgba(240,220,201,.18);color:var(--fg-sand)}
body.theme-frontgate .form-dark .field select option{background:var(--fg-petrol)}
/* Front Gate wordmark — light, wide, single word */
.fg-lockup{
  font-size:clamp(40px,7vw,96px);font-weight:200;letter-spacing:.06em;
  color:var(--fg-peach);line-height:1;
}
.fg-tagline{
  margin-top:20px;font-size:clamp(11px,1.3vw,15px);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--fg-peach);
}
/* The CCR monogram embossed into the leather, as on the brochure cover */
.fg-emboss{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(560px,52%);aspect-ratio:1/1;pointer-events:none;opacity:.5;
}
.fg-emboss svg{width:100%;height:100%}
.fg-emboss circle,.fg-emboss path{
  fill:none;stroke:rgba(240,220,201,.16);stroke-width:2.5;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}

/* ---------- IDEN — Now, sign it ------------------------------------ */
body.theme-iden{
  --id-char:#302E2F;
  --id-ink:#211F20;
  --id-coral:#E04B3C;
  --id-bone:#EFEBE7;
  --id-ccr-blue:#1751F1;

  --blue:#3A3839;
  --orange:var(--id-coral);
  --black:var(--id-ink);
  --line:rgba(239,235,231,.12);
  --muted:rgba(239,235,231,.66);
  background:var(--id-ink);
  color:var(--id-bone);
}
body.theme-iden .nav{background:rgba(33,31,32,.94);border-bottom-color:rgba(239,235,231,.12)}
body.theme-iden .navlinks{border-color:rgba(239,235,231,.14);background:rgba(239,235,231,.04)}
body.theme-iden .nav-dropdown-menu,
body.theme-iden .nav-dropdown-menu::before{background:rgba(33,31,32,.98);border-color:rgba(239,235,231,.14)}
body.theme-iden .mobile-drawer{background:var(--id-ink);border-left-color:rgba(239,235,231,.14)}
body.theme-iden footer{background:#1A1819;border-top-color:rgba(239,235,231,.1)}
body.theme-iden .brandmark span{background:var(--id-bone);color:var(--id-ink)}
body.theme-iden .sec-alt{background:linear-gradient(180deg,var(--id-char) 0%,#292728 100%)}
body.theme-iden .sec-light{background:linear-gradient(180deg,var(--id-bone) 0%,#E3DED9 100%);color:var(--id-ink)}
body.theme-iden .sec-light .section-copy{color:rgba(33,31,32,.66)}
body.theme-iden .sec-light .eyebrow{color:#C0392B}
body.theme-iden .sec-light .eyebrow::before{background:#C0392B}
body.theme-iden .sec-moments{background:linear-gradient(180deg,#332B29 0%,#2A2422 100%)}
body.theme-iden .btn-blue{background:var(--id-ccr-blue);border-color:var(--id-ccr-blue);color:#fff}
body.theme-iden .btn-orange{background:var(--id-coral);border-color:var(--id-coral);color:#fff}
body.theme-iden .btn{border-color:rgba(239,235,231,.34);color:var(--id-bone)}
body.theme-iden .eyebrow{color:var(--id-coral)}
body.theme-iden .eyebrow::before{background:var(--id-coral)}
body.theme-iden .spec,body.theme-iden .amen,body.theme-iden .pmile,
body.theme-iden .pbar,body.theme-iden .plan{background:rgba(58,56,57,.5)}
body.theme-iden .spec:hover,body.theme-iden .amen:hover,body.theme-iden .pmile:hover{background:rgba(70,67,68,.7)}
body.theme-iden .spec-grid,body.theme-iden .amen-grid,body.theme-iden .prog-milestones,
body.theme-iden .prog-bars,body.theme-iden .office-list{background:rgba(239,235,231,.12);border-color:rgba(239,235,231,.12)}
body.theme-iden .amen .ico{border-color:rgba(224,75,60,.5);background:rgba(224,75,60,.14);color:var(--id-coral)}
body.theme-iden .plan.featured{border-color:var(--id-coral);background:linear-gradient(180deg,rgba(224,75,60,.16),transparent)}
body.theme-iden .journey-visual{background:linear-gradient(145deg,#332F30,#211F20);border-color:rgba(239,235,231,.12)}
body.theme-iden .journey-point{background:rgba(33,31,32,.92);border-color:rgba(239,235,231,.14)}
body.theme-iden .journey-card{background:rgba(58,56,57,.44);border-color:rgba(239,235,231,.12)}
body.theme-iden .journey-card small{color:var(--id-coral)}
body.theme-iden .cta{background:var(--id-coral);color:#fff}
body.theme-iden .cta p{color:rgba(255,255,255,.82)}
body.theme-iden .map-pin{background:var(--id-coral);box-shadow:0 0 0 6px rgba(224,75,60,.18),0 0 0 14px rgba(224,75,60,.07)}
body.theme-iden .form-dark .field input,body.theme-iden .form-dark .field select,
body.theme-iden .form-dark .field textarea{background:rgba(239,235,231,.05);border-color:rgba(239,235,231,.18);color:var(--id-bone)}
body.theme-iden .form-dark .field select option{background:var(--id-char)}
.iden-lockup{
  font-size:clamp(58px,11vw,150px);font-weight:200;letter-spacing:.22em;
  color:var(--id-bone);line-height:1;padding-left:.22em;
}
.iden-script{
  margin-top:24px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(19px,2.6vw,34px);letter-spacing:.01em;
  color:var(--id-coral);
}

/* ---------- Generic project hero (used by Core / FG / IDEN) --------- */
.brand-hero{
  position:relative;overflow:hidden;
  min-height:clamp(540px,84svh,860px);
  display:flex;align-items:center;
}
.brand-hero-inner{position:relative;z-index:5;width:var(--container);margin:auto;padding:118px 0 66px}
.brand-hero .crumbs{margin-bottom:26px}
.brand-hero-lede{max-width:640px;margin-top:22px;font-size:14px;line-height:1.95;opacity:.66}
.brand-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.brand-hero .hero-stats{margin-top:38px;max-width:720px}
.brand-hero.center{text-align:center}
.brand-hero.center .crumbs,.brand-hero.center .brand-hero-actions{justify-content:center}
.brand-hero.center .brand-hero-lede{margin-inline:auto}
.brand-hero.center .core-lockup,.brand-hero.center .fg-lockup{justify-content:center}
.brand-hero.center .hero-stats{margin-inline:auto}
@media(max-width:700px){
  .brand-hero{min-height:auto}
  .brand-hero-inner{padding:100px 0 52px}
  .brand-hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .brand-hero-actions .btn{width:100%}
}

/* =====================================================================
   COMMERCIAL UNIT COLLECTION — replaces the raw spec table
   ===================================================================== */
.collection{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ucard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(255,255,255,.03);
  padding:28px 26px 26px;
  transition:.4s var(--ease);
}
.ucard:hover{transform:translateY(-6px);border-color:var(--orange)}
.ucard .badge{
  align-self:flex-start;padding:7px 11px;margin-bottom:20px;
  border:1px solid currentColor;color:var(--orange);
  font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.ucard h4{margin:0 0 12px;font-size:22px;line-height:1.08;letter-spacing:-.03em}
.ucard p{margin:0 0 24px;font-size:12.5px;line-height:1.8;opacity:.62}
.ucard .size{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line,rgba(255,255,255,.1));
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.ucard .size b{font-size:26px;letter-spacing:-.04em;line-height:1}
.ucard .size span{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.ucard .ulink{
  margin-top:18px;display:inline-flex;align-items:center;gap:9px;
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:inherit;background:none;padding:0;border:0;
}
.ucard .ulink .menu-arrow{color:var(--orange)}
.ucard:hover .ulink .menu-arrow{transform:translate(3px,-3px)}
.collection-note{
  margin-top:26px;padding:18px 22px;
  border-left:2px solid var(--orange);
  background:rgba(255,255,255,.03);
  font-size:12px;line-height:1.85;opacity:.66;max-width:760px;
}
@media(max-width:1000px){.collection{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.collection{grid-template-columns:1fr}}

/* Real architectural floor plates */
.plan-canvas.real{aspect-ratio:auto;background:#fff;padding:0}
.plan-canvas.real img{width:100%;height:auto;display:block}


/* Branded heroes need a stronger scrim than Ayyam's — the renders are brighter */
.brand-hero .ay-hero-photo::after{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(0,0,0,.34) 0%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.82) 100%),
    linear-gradient(180deg,rgba(0,0,0,.66) 0%,transparent 32%,rgba(0,0,0,.8) 100%);
}
body.theme-core .brand-hero .ay-hero-photo::after{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(16,17,50,.42) 0%,rgba(16,17,50,.74) 58%,rgba(16,17,50,.92) 100%),
    linear-gradient(180deg,rgba(16,17,50,.72) 0%,transparent 32%,rgba(16,17,50,.92) 100%);
}
body.theme-frontgate .brand-hero .ay-hero-photo::after{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(12,26,29,.44) 0%,rgba(12,26,29,.76) 58%,rgba(12,26,29,.94) 100%),
    linear-gradient(180deg,rgba(12,26,29,.74) 0%,transparent 32%,rgba(12,26,29,.94) 100%);
}
body.theme-iden .brand-hero{
  background:
    radial-gradient(circle at 50% 120%,rgba(224,75,60,.14),transparent 55%),
    linear-gradient(180deg,#211F20 0%,#302E2F 60%,#262425 100%);
}
body.theme-frontgate .brand-hero{
  background:
    radial-gradient(circle at 78% 40%,rgba(226,168,126,.09),transparent 46%),
    linear-gradient(160deg,#0C1A1D 0%,#132529 60%,#0C1A1D 100%);
}
/* IDEN has no renders yet — the CCR geometric layer carries the hero */
body.theme-iden .ay-fins span{
  background:linear-gradient(to bottom,transparent 0%,rgba(224,75,60,.85) 46%,transparent 100%);
}
body.theme-iden .ay-scan{background:linear-gradient(90deg,transparent,var(--id-coral),transparent)}
body.theme-frontgate .ay-fins span{
  background:linear-gradient(to bottom,transparent 0%,rgba(226,168,126,.8) 46%,transparent 100%);
}
body.theme-frontgate .ay-scan{background:linear-gradient(90deg,transparent,var(--fg-peach),transparent)}
body.theme-core .ay-fins span{
  background:linear-gradient(to bottom,transparent 0%,rgba(168,170,230,.9) 46%,transparent 100%);
}
body.theme-core .ay-scan{background:linear-gradient(90deg,transparent,var(--co-lilac),transparent)}
.core-lockup .wordwrap{display:flex;align-items:flex-end;gap:.30em}


/* =====================================================================
   PROGRESS — contrast fixes
   The empty track was a light tint, which on the darker project themes
   read almost the same as the fill. A dark track makes "how far along"
   legible at a glance, and each theme now fills in its own accent.
   ===================================================================== */
.pbar .rail{background:rgba(0,0,0,.30)}
.prog-dial .track{stroke:rgba(0,0,0,.32)}
.prog-dial .fill{stroke-width:9}

/* ---- The Core: indigo panel needs a brighter fill than CCR blue ---- */
body.theme-core .pbar .rail{background:rgba(0,0,0,.34)}
body.theme-core .pbar .rail i{background:linear-gradient(90deg,#5F63D8 0%,#A8AAE6 100%)}
body.theme-core .pbar .rail.done i{background:linear-gradient(90deg,#3FA98A 0%,#6FE3B8 100%)}
body.theme-core .pbar.done .val{color:#6FE3B8}
body.theme-core .pmile .st.done{color:#6FE3B8}
body.theme-core .pmile .st.now{color:var(--co-lilac)}
body.theme-core .prog-dial .track{stroke:rgba(0,0,0,.38)}
body.theme-core .prog-dial .fill{stroke:#A8AAE6}

/* ---- Front Gate ---------------------------------------------------- */
body.theme-frontgate .pbar .rail{background:rgba(0,0,0,.34)}
body.theme-frontgate .pbar .rail i{background:linear-gradient(90deg,#8A5A3C 0%,#E2A87E 100%)}
body.theme-frontgate .pbar .rail.done i{background:linear-gradient(90deg,#3E8F6B 0%,#7FD1A8 100%)}
body.theme-frontgate .pbar.done .val{color:#7FD1A8}
body.theme-frontgate .pmile .st.done{color:#7FD1A8}
body.theme-frontgate .pmile .st.now{color:var(--fg-peach)}
body.theme-frontgate .prog-dial .fill{stroke:var(--fg-peach)}

/* ---- IDEN ---------------------------------------------------------- */
body.theme-iden .pbar .rail{background:rgba(0,0,0,.32)}
body.theme-iden .pbar .rail i{background:linear-gradient(90deg,#8E2D22 0%,#E04B3C 100%)}
body.theme-iden .pbar .rail.done i{background:linear-gradient(90deg,#3E8F6B 0%,#6FCF97 100%)}
body.theme-iden .pbar.done .val{color:#6FCF97}
body.theme-iden .pmile .st.done{color:#6FCF97}
body.theme-iden .pmile .st.now{color:var(--id-coral)}
body.theme-iden .prog-dial .fill{stroke:var(--id-coral)}

/* ---- Ayyam --------------------------------------------------------- */
body.theme-ayyam .pbar .rail{background:rgba(0,0,0,.30)}
body.theme-ayyam .pbar .rail i{background:linear-gradient(90deg,#2F6E9E 0%,#D7BC9F 100%)}
body.theme-ayyam .pbar .rail.done i{background:linear-gradient(90deg,#3E8F6B 0%,#7FD1A8 100%)}
body.theme-ayyam .pbar.done .val{color:#7FD1A8}
body.theme-ayyam .pmile .st.done{color:#7FD1A8}
body.theme-ayyam .pmile .st.now{color:var(--ay-tan)}

/* A hairline cap on the filled portion so short bars still read */
.pbar .rail i::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.62);
}
.pbar .rail i[data-value="0"]::after{display:none}


/* =====================================================================
   FACILITIES — animated
   Icons draw themselves in on reveal, then respond to hover.
   ===================================================================== */
.amen{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.amen::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--orange),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.amen:hover::before{transform:scaleX(1)}
.amen::after{
  content:"";position:absolute;right:-30%;top:-60%;width:70%;height:180%;
  background:radial-gradient(circle,color-mix(in srgb,var(--orange) 12%,transparent),transparent 68%);
  opacity:0;transition:opacity .55s var(--ease);pointer-events:none;
}
.amen:hover::after{opacity:1}
.amen .ico{
  position:relative;z-index:2;
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
}
.amen:hover .ico{transform:translateY(-3px) scale(1.08)}
.amen h4,.amen p{position:relative;z-index:2}
.amen h4{transition:color .35s var(--ease)}
.amen:hover h4{color:var(--orange)}

/* Stroke draw-on: the icon traces itself when the card scrolls into view */
.amen .ico svg *{
  stroke-dasharray:var(--len,120);
  stroke-dashoffset:var(--len,120);
}
.amen.visible .ico svg *{
  animation:iconDraw 1.1s cubic-bezier(.35,.75,.3,1) forwards;
}
.amen.visible:nth-child(4n+2) .ico svg *{animation-delay:.09s}
.amen.visible:nth-child(4n+3) .ico svg *{animation-delay:.18s}
.amen.visible:nth-child(4n+4) .ico svg *{animation-delay:.27s}
@keyframes iconDraw{to{stroke-dashoffset:0}}
/* Filled shapes inside icons must not stay invisible */
.amen .ico svg [fill]:not([fill="none"]){stroke-dasharray:none;stroke-dashoffset:0}

/* Icon idles with a slow breath once drawn, so the grid never feels static */
.amen.visible .ico{animation:icoBreath 6.5s ease-in-out infinite}
.amen:nth-child(2n).visible .ico{animation-delay:-1.6s}
.amen:nth-child(3n).visible .ico{animation-delay:-3.2s}
@keyframes icoBreath{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 8%,transparent)}
}

@media(prefers-reduced-motion:reduce){
  .amen .ico svg *{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .amen.visible .ico{animation:none}
  .pbar.active .rail i::after,.pmile.now .node::after,.prog-chips span.live::before{animation:none}
}


/* Facilities: larger, more premium cards ----------------------------- */
.amen-grid{gap:1px}
.amen{padding:32px 28px 30px;min-height:230px}
.amen .ico{
  width:54px;height:54px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--orange) 18%,transparent),transparent 78%);
  border-color:color-mix(in srgb,var(--orange) 45%,transparent);
  color:var(--orange);
}
.amen .ico svg{width:25px;height:25px;stroke-width:1.35}
.amen h4{margin:24px 0 10px;font-size:16px;letter-spacing:-.025em;line-height:1.25}
.amen p{font-size:12.5px;line-height:1.8;opacity:.56}
.amen .idx{
  position:absolute;right:24px;top:26px;z-index:2;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--orange);opacity:.28;
  font-variant-numeric:tabular-nums;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.amen:hover .idx{opacity:.85;transform:translateY(-2px)}
.amen::before{height:2px}
@media(max-width:520px){.amen{padding:26px 22px;min-height:0}}


/* =====================================================================
   REAL BRAND LOGOS (supplied artwork replaces the CSS lockups)
   ===================================================================== */
.brand{display:inline-flex;align-items:center;gap:0}
.brandlogo{display:block;height:26px;width:auto}
@media(max-width:700px){.brandlogo{height:22px}}
footer .brandlogo{height:30px}

/* Hero lockups */
.logo-lockup{display:block}
.logo-lockup img{display:block;width:auto;height:auto}
.lockup-ayyam img{max-width:min(620px,84vw)}
.lockup-core img{max-width:min(560px,86vw)}
.lockup-frontgate img{max-width:min(640px,88vw)}
.lockup-iden img{max-width:min(520px,80vw)}
.brand-hero.center .logo-lockup img{margin-inline:auto}

/* Arabic text wordmarks (replace EN PNG lockups in html_i18n.ar) */
.logo-lockup-text{
  display:flex;align-items:center;justify-content:flex-start;
  margin:10px 0 4px;max-width:min(640px,92vw)
}
.brand-hero.center .logo-lockup-text{justify-content:center;margin-inline:auto}
.brand-wordmark-ar{
  display:block;
  font-family:"IBM Plex Sans Arabic","Noto Naskh Arabic",Tahoma,sans-serif;
  font-weight:800;font-size:clamp(2.4rem,7.2vw,4.6rem);
  line-height:1.05;letter-spacing:0;color:inherit;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis
}
.lockup-frontgate .brand-wordmark-ar{font-size:clamp(2.6rem,8vw,5rem)}
.lockup-core .brand-wordmark-ar{font-size:clamp(2.4rem,7vw,4.4rem)}
html[dir="rtl"] .proj-identity-name{letter-spacing:0;text-transform:none}
html[dir="rtl"] .proj-identity-meaning{letter-spacing:.04em;text-transform:none}

/* Masterplan drawing sits on its own light ground so the plan reads */
.mp-figure.drawing{aspect-ratio:auto;background:#FBF0E4;border-color:rgba(0,0,0,.08)}
.mp-figure.drawing img{display:block;width:100%;height:auto}
.mp-figure.drawing .photo::after{display:none}
.mp-figure.drawing figcaption{
  position:static;padding:16px 22px 18px;color:rgba(0,33,71,.62);text-shadow:none;
  background:#FBF0E4;border-top:1px solid rgba(0,0,0,.07);
}
.mp-figure.drawing .keynum{
  background:rgba(255,255,255,.9);border-color:rgba(0,33,71,.16);
}
.mp-figure.drawing .keynum b{color:#002147}
.mp-figure.drawing .keynum span{color:rgba(0,33,71,.6)}

/* Ayyam's hero is centre-aligned, so its lockup must centre too */
.ay-hero .logo-lockup img{margin-inline:auto}
.ay-hero .logo-lockup{margin:6px 0 2px}
.lockup-ayyam img{max-width:min(560px,80vw)}
@media(max-width:560px){.lockup-ayyam img{max-width:86vw}}

/* Facilities masterplan sits above the facility grid on Ayyam */
.fac-plan{
  position:relative;overflow:hidden;margin:0 0 28px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:#0B1E33;
}
.fac-plan img{display:block;width:100%;height:auto}
.fac-plan figcaption{
  padding:15px 22px 17px;font-size:11.5px;line-height:1.7;
  border-top:1px solid var(--line,rgba(255,255,255,.12));
  opacity:.6;
}

  
/* ============ CCR MASTER LOGO (corrected brand identity) ============ */
:root{
  --ccr-disc:#FFFFFF;      /* disc fill on dark surfaces  */
  --ccr-glyph:#0B0D12;     /* letter colour inside a disc */
  --ccr-word:#FFFFFF;      /* wordmark colour             */
}
.ccr-logo{display:block;height:26px;width:auto;line-height:0}
.ccr-logo svg{display:block;height:100%;width:auto}
.ccr-logo .ccr-discs circle{fill:var(--ccr-disc)}
.ccr-logo .ccr-letters text{
  fill:var(--ccr-glyph);
  font-family:inherit;font-weight:800;font-size:56px;letter-spacing:-.02em
}
.ccr-logo .ccr-word{
  fill:var(--ccr-word);
  font-family:inherit;font-weight:700;font-size:40px;letter-spacing:.22em
}
footer .ccr-logo{height:30px}
@media(max-width:700px){.ccr-logo{height:22px}}
/* light-surface variant (orange footer strip, print, light sections) */
.on-light .ccr-logo,.cta .ccr-logo{--ccr-disc:#0B0D12;--ccr-glyph:#FFFFFF;--ccr-word:#0B0D12}

/* ================= STARTING ANIMATION (site intro) ================= */
.ccr-intro{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#07080A;overflow:hidden;
  transition:opacity .5s ease,visibility .5s ease
}
.ccr-intro::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 28%, rgba(23,81,241,.20), transparent 42%),
    radial-gradient(circle at 78% 74%, rgba(241,90,34,.12), transparent 46%);
  opacity:0;animation:ccrIntroGlow 2.1s ease forwards
}
@keyframes ccrIntroGlow{20%{opacity:1}100%{opacity:.7}}
.ccr-intro-inner{position:relative;z-index:3;text-align:center;padding:0 24px}
.ccr-intro-mark{display:flex;justify-content:center;gap:10px}
.ccr-intro-disc{
  width:64px;height:64px;border-radius:50%;background:#fff;
  display:grid;place-items:center;
  opacity:0;transform:translateY(22px) scale(.72);
  animation:ccrDiscIn .72s cubic-bezier(.2,.9,.25,1) forwards
}
.ccr-intro-disc i{
  font-style:normal;font-weight:800;font-size:30px;color:#0B0D12;letter-spacing:-.02em
}
.ccr-intro-disc.d1{animation-delay:.10s}
.ccr-intro-disc.d2{animation-delay:.24s}
.ccr-intro-disc.d3{animation-delay:.38s}
@keyframes ccrDiscIn{to{opacity:1;transform:translateY(0) scale(1)}}
.ccr-intro-word{
  margin-top:20px;font-weight:700;font-size:15px;letter-spacing:.42em;color:#fff;
  opacity:0;transform:translateY(10px);
  animation:ccrFadeUp .7s ease .58s forwards
}
.ccr-intro-tag{
  margin-top:16px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.5);opacity:0;
  animation:ccrFadeUp .7s ease .96s forwards
}
@keyframes ccrFadeUp{to{opacity:1;transform:translateY(0)}}
.ccr-intro-bar{
  margin:26px auto 0;width:190px;height:2px;background:rgba(255,255,255,.14);overflow:hidden
}
.ccr-intro-bar span{
  display:block;height:100%;width:100%;background:#F15A22;
  transform:translateX(-100%);animation:ccrBar 1.5s cubic-bezier(.5,0,.2,1) .30s forwards
}
@keyframes ccrBar{to{transform:translateX(0)}}
.ccr-intro-curtain{
  position:absolute;top:0;height:100%;width:52%;background:#07080A;z-index:4;
  transition:transform .85s cubic-bezier(.76,0,.24,1)
}
.ccr-intro-curtain.left{left:0;transform:translateX(-101%)}
.ccr-intro-curtain.right{right:0;transform:translateX(101%)}
.ccr-intro.is-leaving .ccr-intro-inner{opacity:0;transition:opacity .35s ease}
.ccr-intro.is-leaving .ccr-intro-curtain.left{transform:translateX(0)}
.ccr-intro.is-leaving .ccr-intro-curtain.right{transform:translateX(0)}
.ccr-intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
html.ccr-intro-lock,html.ccr-intro-lock body{overflow:hidden}
/* page content lifts in behind the curtain */
body.ccr-revealed main,body.ccr-revealed .nav{animation:ccrPageIn .9s cubic-bezier(.2,.9,.25,1) both}
@keyframes ccrPageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ccr-intro,.ccr-intro *{animation:none!important;transition:none!important}
  .ccr-intro{display:none}
  body.ccr-revealed main,body.ccr-revealed .nav{animation:none}
}

/* ============ ANIMATED CCR CIRCLES (hero, right side) ============ */
.hero-ccr{
  position:absolute;right:6%;top:50%;transform:translateY(-50%);
  width:min(34vw,430px);aspect-ratio:1;z-index:2;pointer-events:none
}
.hero-ccr-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  animation:ccrRingPulse 7s ease-in-out infinite
}
.hero-ccr-ring.r2{inset:11%;border-color:rgba(23,81,241,.30);animation-delay:-2.3s}
.hero-ccr-ring.r3{inset:22%;border-color:rgba(255,255,255,.07);animation-delay:-4.6s}
@keyframes ccrRingPulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%    {transform:scale(1.055);opacity:1}
}
.hero-ccr-disc{
  position:absolute;top:50%;width:23.5%;aspect-ratio:1;margin-top:-11.75%;
  border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  opacity:0;transform:translateY(26px) scale(.86);
  animation:ccrHeroIn .9s cubic-bezier(.2,.9,.25,1) forwards,
            ccrHeroFloat 6.4s ease-in-out infinite
}
.hero-ccr-disc i{
  font-style:normal;font-weight:800;color:#0B0D12;
  font-size:clamp(18px,3.1vw,40px);letter-spacing:-.02em
}
.hero-ccr-disc.c1{left:11%; animation-delay:.55s, 1.5s}
.hero-ccr-disc.c2{left:38%; animation-delay:.72s, 1.8s}
.hero-ccr-disc.c3{left:65%; animation-delay:.89s, 2.1s}
@keyframes ccrHeroIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ccrHeroFloat{
  0%,100%{translate:0 0}
  50%    {translate:0 -11px}
}
@media(max-width:1080px){.hero-ccr{right:3%;width:40vw;opacity:.55}}
@media(max-width:820px){.hero-ccr{display:none}}
@media(prefers-reduced-motion:reduce){
  .hero-ccr-ring,.hero-ccr-disc{animation:none;opacity:1;transform:translateY(0) scale(1)}
}

/* ==================== LEAD FORM (modal + footer strip) ==================== */
.lf-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.lf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.lf-field.full{grid-column:1/-1}
.lf-field label{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.72
}
.lf-field label b{color:#F15A22;font-weight:700}
.lf-field input,.lf-field select,.lf-field textarea{
  width:100%;padding:13px 14px;font:inherit;font-size:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  color:inherit;border-radius:2px;transition:border-color .2s ease,background .2s ease;
  -webkit-appearance:none;appearance:none
}
.lf-field textarea{resize:vertical;min-height:88px;line-height:1.7}
.lf-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;
  padding-right:34px;cursor:pointer
}
.lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{
  outline:none;border-color:#1751F1;background:rgba(255,255,255,.07)
}
.lf-field input:user-invalid,.lf-field select:user-invalid{border-color:#E0503C}
.lf-phone{display:grid;grid-template-columns:minmax(160px,190px) 1fr;gap:8px}
.lf-phone select{padding-left:12px;padding-right:32px;text-overflow:ellipsis}
.lf-modal-close:focus-visible{outline:2px solid #1751F1;outline-offset:2px}
.lf-submit{grid-column:1/-1;justify-content:center;margin-top:2px;cursor:pointer}
.lf-note{grid-column:1/-1;margin:0;font-size:11px;line-height:1.7;opacity:.55}
.lf-note code{font-size:11px;opacity:.8}
.lf-ok{
  grid-column:1/-1;padding:14px 16px;border-radius:2px;font-size:13px;line-height:1.7;
  background:rgba(38,166,91,.14);border:1px solid rgba(38,166,91,.4);color:#8FE3B0
}
.lf-ok strong{display:block;margin-bottom:3px}
@media(max-width:640px){
  .lf-form{grid-template-columns:1fr}
  .lf-phone{grid-template-columns:1fr}
}

/* ---- modal shell ---- */
.lf-modal{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:22px}
.lf-modal[hidden]{display:none}
.lf-modal-backdrop{
  position:absolute;inset:0;background:rgba(4,5,8,.82);backdrop-filter:blur(7px);
  animation:lfFade .3s ease
}
.lf-modal-panel{
  position:relative;z-index:2;width:min(660px,100%);max-height:90vh;overflow:auto;
  padding:38px 38px 34px;background:#0E1117;color:#fff;
  border:1px solid rgba(255,255,255,.12);border-radius:3px;
  box-shadow:0 40px 110px rgba(0,0,0,.62);
  animation:lfRise .42s cubic-bezier(.2,.9,.25,1)
}
@keyframes lfFade{from{opacity:0}to{opacity:1}}
@keyframes lfRise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
.lf-modal-close{
  position:absolute;right:14px;top:12px;width:38px;height:38px;line-height:1;
  font-size:26px;color:#fff;background:none;border:0;opacity:.55;cursor:pointer;
  transition:opacity .2s ease
}
.lf-modal-close:hover{opacity:1}
.lf-modal-head{margin-bottom:24px;padding-right:34px}
.lf-eyebrow{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#F15A22;font-weight:700
}
.lf-modal-head h2{
  margin:14px 0 0;font-size:clamp(24px,3.2vw,34px);line-height:1.05;letter-spacing:-.035em
}
.lf-modal-head p{margin:12px 0 0;font-size:13.5px;line-height:1.8;opacity:.66}
@media(max-width:640px){
  .lf-modal{padding:0}
  .lf-modal-panel{max-height:100vh;height:100%;border-radius:0;padding:64px 22px 30px}
}
html.lf-open,html.lf-open body{overflow:hidden}

/* ---- enlarged footer strip ---- */
.cta-lead{padding:104px 0 96px}
.cta-lead-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:56px;align-items:start
}
.cta-lead-copy h2{
  margin:0;max-width:620px;font-size:clamp(34px,4.2vw,60px);line-height:.95;letter-spacing:-.06em
}
.cta-lead-copy p{max-width:560px;margin:18px 0 0;font-size:14px;line-height:1.85;color:rgba(17,17,17,.76)}
.cta-lead-points{
  display:flex;flex-wrap:wrap;gap:14px 26px;margin:30px 0 0;padding:26px 0 0;list-style:none;
  border-top:1px solid rgba(17,17,17,.22)
}
.cta-lead-points li{display:flex;flex-direction:column;gap:3px}
.cta-lead-points b{font-size:24px;line-height:1;letter-spacing:-.04em;color:#111}
.cta-lead-points span{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(17,17,17,.66)
}
/* form sits on the orange strip -> dark-on-light treatment */
.cta-lead-form{
  padding:30px 30px 28px;background:#0E1117;color:#fff;
  border-radius:3px;box-shadow:0 30px 70px rgba(17,17,17,.28)
}
@media(max-width:1000px){
  .cta-lead{padding:76px 0 72px}
  .cta-lead-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:640px){
  .cta-lead-form{padding:24px 20px 22px}
}

/* ============ PER-PROJECT IDENTITY (project pages) ============ */
.proj-identity{
  display:flex;align-items:center;gap:18px;margin:0 0 22px;
  opacity:0;transform:translateY(14px);
  animation:ccrFadeUp .8s cubic-bezier(.2,.9,.25,1) .25s forwards
}
.proj-identity-mark{
  width:62px;height:62px;flex:0 0 62px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:rgba(255,255,255,.04)
}
.proj-identity-mark svg{width:34px;height:34px;display:block}
.proj-identity-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.proj-identity-name{
  font-size:19px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1
}
.proj-identity-meaning{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.6
}
@media(max-width:640px){
  .proj-identity-mark{width:50px;height:50px;flex-basis:50px}
  .proj-identity-mark svg{width:27px;height:27px}
  .proj-identity-name{font-size:16px}
}


/* ============ IDEN — real project artwork & media ============ */
:root{ --iden-bone:#F2D7B4; --iden-char:#302E2F; --iden-coral:#E04B3C; }

/* --- the fingerprint, used as the page's artwork language --- */
.fp-art{
  position:absolute;pointer-events:none;z-index:0;
  background:url("assets/iden/iden-fingerprint.webp") no-repeat center/contain;
  opacity:.05;filter:saturate(0) brightness(1.6)
}
.fp-art.hero{
  right:4%;top:50%;width:min(34vw,470px);aspect-ratio:635/710;
  transform:translateY(-50%);opacity:.10;
  animation:fpDrift 22s ease-in-out infinite
}
.fp-art.corner{right:-6%;bottom:-14%;width:min(34vw,440px);aspect-ratio:635/710;opacity:.045}
.fp-art.left{left:-8%;top:8%;width:min(30vw,380px);aspect-ratio:635/710;opacity:.04}
@keyframes fpDrift{
  0%,100%{transform:translateY(-50%) rotate(0deg) scale(1)}
  50%    {transform:translateY(-52%) rotate(-3.5deg) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.fp-art{animation:none}}
@media(max-width:820px){.fp-art.hero{width:78vw;opacity:.055}.fp-art.left{display:none}}

/* ridge divider built from the same fingerprint arcs */
.fp-rule{
  position:relative;height:2px;margin:0;border:0;
  background:linear-gradient(90deg,transparent,var(--iden-bone),transparent);opacity:.22
}

/* --- hero over a real render --- */
.brand-hero.iden-hero{position:relative;overflow:hidden}
.iden-hero-bg{position:absolute;inset:0;z-index:0}
.iden-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.iden-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(20,18,19,.94) 0%,rgba(20,18,19,.80) 42%,rgba(20,18,19,.42) 100%),
    linear-gradient(0deg,rgba(20,18,19,.92) 0%,transparent 46%)
}
.brand-hero.iden-hero .brand-hero-inner{position:relative;z-index:3}
.iden-lockup{display:block;width:min(430px,74%);height:auto;margin:6px 0 4px}
@media(max-width:640px){.iden-lockup{width:82%}}

/* --- media blocks --- */
.iden-figure{margin:0;position:relative;z-index:2}
.iden-figure img{
  display:block;width:100%;height:auto;border-radius:3px;
  border:1px solid rgba(239,235,231,.14);background:#1A1819
}
.iden-figure figcaption{
  margin-top:12px;font-size:11.5px;letter-spacing:.04em;line-height:1.7;opacity:.6
}

/* --- gallery: real photography --- */
.shot .photo{position:absolute;inset:0;overflow:hidden}
.shot .photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)
}
.shot:hover .photo img{transform:scale(1.05)}
.lightbox-frame .photo img{width:100%;height:auto;max-height:82vh;object-fit:contain}

/* --- floor stack (replaces the invented master plan) --- */
.stack{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:34px}
.stack-list{display:flex;flex-direction:column-reverse;gap:6px}
.stack-row{
  display:grid;grid-template-columns:82px 1fr auto;gap:16px;align-items:center;
  text-align:left;font:inherit;color:inherit;
  padding:13px 16px;border:1px solid rgba(239,235,231,.12);
  background:rgba(239,235,231,.03);border-radius:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
  cursor:pointer
}
.stack-row:hover,.stack-row.is-active{
  border-color:var(--iden-coral);background:rgba(224,75,60,.10);transform:translateX(4px)
}
.stack-row .lvl{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;opacity:.62;
  text-transform:uppercase;white-space:nowrap;text-align:left
}
.stack-row .use b{display:block;font-size:14px;letter-spacing:-.01em}
.stack-row .use span{font-size:11px;opacity:.6;letter-spacing:.04em}
.stack-row .tag{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;
  border:1px solid rgba(239,235,231,.2);border-radius:100px;opacity:.72;white-space:nowrap
}
@media(max-width:900px){
  .stack{grid-template-columns:1fr;gap:28px}
  .stack-row{grid-template-columns:74px 1fr;gap:12px}
  .stack-row .tag{display:none}
}

/* --- floor plan viewer --- */
.fp-switch{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:18px;
  scrollbar-width:thin
}
.fp-tab{
  flex:0 0 auto;padding:10px 15px;font:inherit;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:inherit;cursor:pointer;
  background:rgba(239,235,231,.04);border:1px solid rgba(239,235,231,.14);
  border-radius:2px;transition:all .25s var(--ease);white-space:nowrap
}
.fp-tab:hover{border-color:rgba(239,235,231,.4)}
.fp-tab.active{background:var(--iden-coral);border-color:var(--iden-coral);color:#fff}
.fp-stage{
  position:relative;background:#EFEBE7;border-radius:3px;overflow:hidden;
  border:1px solid rgba(239,235,231,.14)
}
.fp-stage img{display:block;width:100%;height:auto}
.fp-zoom{
  position:absolute;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:7px;
  padding:9px 14px;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(33,31,32,.86);border:0;
  border-radius:2px;cursor:pointer;transition:background .25s var(--ease)
}
.fp-zoom:hover{background:var(--iden-coral)}
.fp-zoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.fp-meta{
  display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(239,235,231,.12)
}
.fp-meta div{display:flex;flex-direction:column;gap:3px}
.fp-meta b{font-size:16px;letter-spacing:-.02em}
.fp-meta span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.58}

/* --- location: real maps --- */
.iden-maps{display:grid;gap:20px;margin-top:34px}
.iden-maps .iden-figure img{background:#302E2F}


/* ======= OFFICIAL CCR LOCKUP (supplied artwork, used as-is) ======= */
.ccr-logo{display:block;height:28px;width:auto;line-height:0}
.ccr-logo img{display:block;height:100%;width:auto;object-fit:contain}
footer .ccr-logo{height:32px}
/* light surfaces (orange strip / print) get the dark artwork */
.cta .ccr-logo img,.on-light .ccr-logo img{content:url("assets/brand/ccr-lockup-dark.webp")}
@media(max-width:900px){.ccr-logo{height:24px}}
@media(max-width:420px){.ccr-logo{height:21px}}
@media print{.ccr-logo img{content:url("assets/brand/ccr-lockup-dark.webp")}}

/* ======= NAV DROPDOWN — hover bridge + tap support ======= */
/* invisible bridge spanning the visual gap so the pointer never leaves :hover */
.nav-dropdown::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:16px;
  display:block;pointer-events:none
}
.nav-dropdown:hover::after,.nav-dropdown:focus-within::after,
.nav-dropdown.is-open::after{pointer-events:auto}
/* widen the panel's own hit area upward, keeping the same visual offset */
.nav-dropdown-menu{
  top:100%!important;padding-top:22px!important;
  margin-top:0!important;background-clip:padding-box
}
.nav-dropdown-menu::before{top:5px!important}
/* keep it open while the pointer is inside the panel, and on tap/keyboard */
.nav-dropdown:hover>.nav-dropdown-menu,
.nav-dropdown:focus-within>.nav-dropdown-menu,
.nav-dropdown.is-open>.nav-dropdown-menu{
  opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;transform:translate(-50%,0)!important
}
.nav-dropdown.is-open .nav-chevron{transform:rotate(180deg)}
/* never let a panel run off-screen on narrow desktops */
@media(max-width:1180px){
  .nav-dropdown-menu{left:auto!important;right:0!important;transform:translate(0,12px)!important}
  .nav-dropdown:hover>.nav-dropdown-menu,
  .nav-dropdown:focus-within>.nav-dropdown-menu,
  .nav-dropdown.is-open>.nav-dropdown-menu{transform:translate(0,0)!important}
  .nav-dropdown-menu::before{left:auto!important;right:26px!important}
}

/* ======================= RESPONSIVE HARDENING ======================= */
/* nothing may exceed the viewport */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,canvas,iframe,table{max-width:100%}
img,video{height:auto}
/* scoped: a universal min-width:0 collapses nowrap flex items to zero width */
.container>*,.split>*,.footer-grid>*,.cta-lead-grid>*,
.collection>*,.amen-grid>*,.gallery>*,.stack>*{min-width:0}

/* fluid container instead of a fixed width */
.container{
  width:min(var(--container,1240px),100% - 2*var(--gutter,26px));
  margin-inline:auto
}
@media(max-width:900px){:root{--gutter:20px}}
@media(max-width:520px){:root{--gutter:16px}}

/* long words / URLs must not force a scrollbar */
h1,h2,h3,h4,p,li,a,figcaption,td,th{overflow-wrap:anywhere;word-break:normal}

/* fluid type so headlines never overflow small screens */
.section-title{font-size:clamp(26px,5.2vw,var(--h2,46px));line-height:1.06}
.page-hero-title,.brand-hero h1{font-size:clamp(30px,7vw,64px);line-height:1.02}

/* tables and wide blocks scroll instead of stretching the page */
.table-wrap,.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* tap targets */
@media(max-width:900px){
  .nav a,.subnav-links a,.footer-col a,.btn{min-height:44px;display:inline-flex;align-items:center}
  .btn{padding-block:13px}
}

/* generic grid collapse for any 2+ column layout we may have missed */
@media(max-width:900px){
  .split,.split.end,.cta-lead-grid,.stack,.profile-grid,.footer-grid,
  .collection,.amen-grid,.gallery,.plan-wrap,.finder-layout,.journey-stage{
    grid-template-columns:1fr!important
  }
  .shot.wide,.shot.tall{grid-column:auto!important;grid-row:auto!important}
}
@media(max-width:640px){
  .hero-stats{grid-template-columns:1fr 1fr!important}
  .subnav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .subnav-links::-webkit-scrollbar{display:none}
}

/* floating action buttons must not cover content on small screens */
@media(max-width:520px){
  .fab,.floating-actions{bottom:14px!important;right:14px!important;transform:scale(.92)}
}

/* respect notches */
@supports(padding:max(0px)){
  .container{padding-left:max(0px,env(safe-area-inset-left));
             padding-right:max(0px,env(safe-area-inset-right))}
}


/* ============ ARABIC TYPOGRAPHY & RTL CORRECTIONS (round 4) ============ */
/* professional pairing: Tajawal for display, IBM Plex Sans Arabic for text */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button{
  font-family:"IBM Plex Sans Arabic","Tajawal","Noto Sans Arabic",system-ui,sans-serif!important
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .section-title,html[dir="rtl"] .brand-hero h1,
html[dir="rtl"] .page-hero-title,html[dir="rtl"] .hero-title,
html[dir="rtl"] .cta-lead-copy h2,html[dir="rtl"] .lf-modal-head h2{
  font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif!important;
  font-weight:800!important;letter-spacing:0!important
}
/* Arabic needs more leading and no Latin tracking */
html[dir="rtl"] h1,html[dir="rtl"] .brand-hero h1,html[dir="rtl"] .page-hero-title{line-height:1.42!important}
html[dir="rtl"] h2,html[dir="rtl"] .section-title{line-height:1.45!important}
html[dir="rtl"] h3,html[dir="rtl"] h4{line-height:1.5!important}
/* Arabic glyphs read smaller than tracked Latin at the same px, so each tier
   is bumped ~10% — but the HIERARCHY must be preserved, never flattened. */
html[dir="rtl"] p,html[dir="rtl"] li,html[dir="rtl"] .section-copy{
  line-height:2!important;font-size:15.5px;font-weight:400
}
html[dir="rtl"] .brand-hero-lede{font-size:16px;line-height:1.95!important}
html[dir="rtl"] .hero-sub{font-size:30px!important;line-height:1.6!important;font-weight:500}
html[dir="rtl"] .page-hero-sub{font-size:21px!important;line-height:1.7!important;font-weight:500}
html[dir="rtl"] .iden-script{font-size:34px!important;line-height:1.55!important;font-weight:500}
html[dir="rtl"] .lede,html[dir="rtl"] .intro,html[dir="rtl"] .lead{
  font-size:19px!important;line-height:1.85!important
}

/* ---- navigation: 9px was sized for tracked-out Latin caps ---- */
html[dir="rtl"] .navlinks>a,
html[dir="rtl"] .nav-dropdown-trigger{
  font-size:15.5px!important;font-weight:600!important;
  letter-spacing:0!important;text-transform:none!important;
  padding:0 17px;min-height:44px
}
html[dir="rtl"] .nav{height:70px}
html[dir="rtl"] .navactions .btn{font-size:14.5px!important;padding:12px 22px}
html[dir="rtl"] .lang-switch{font-size:15px}
html[dir="rtl"] .navlinks{gap:4px}
html[dir="rtl"] .subnav-links a{font-size:13.5px!important;font-weight:600!important}
html[dir="rtl"] .dropdown-project b{font-size:15px}
html[dir="rtl"] .dropdown-project small,
html[dir="rtl"] .dropdown-head span{font-size:11.5px;letter-spacing:0}
html[dir="rtl"] .dropdown-head strong{font-size:16px}
html[dir="rtl"] .mobile-nav-list a{font-size:17px!important;font-weight:600!important}
html[dir="rtl"] .btn{font-size:13.5px!important;font-weight:600!important}
html[dir="rtl"] .eyebrow{font-size:12px!important;font-weight:700!important}
html[dir="rtl"] .lf-field label{font-size:12.5px!important;font-weight:600!important}
html[dir="rtl"] .badge,html[dir="rtl"] .status-chip,
html[dir="rtl"] .pcard-loc,html[dir="rtl"] .tag{font-size:11.5px!important}
html[dir="rtl"] .hero-stats strong,html[dir="rtl"] .stat b{letter-spacing:0}
html[dir="rtl"] .hero-stats span,html[dir="rtl"] .pcard-meta small,
html[dir="rtl"] .fp-meta span,html[dir="rtl"] .cta-lead-points span{
  font-size:11.5px!important;letter-spacing:0!important;text-transform:none!important
}
html[dir="rtl"] .footer-col a,html[dir="rtl"] .footer-col h5{
  font-size:14px!important;letter-spacing:0!important;text-transform:none!important
}

/* ---- MARQUEE: track stays LTR so translateX(-50%) loops cleanly ---- */
.marquee{overflow:hidden}
.marquee,.marquee-track{direction:ltr!important}
.marquee-track{
  display:flex;align-items:center;gap:0;width:max-content;
  animation:marquee 55s linear infinite;
}
.marquee-track>span{
  flex:0 0 auto;white-space:nowrap;min-width:max-content;
  display:inline-flex;align-items:center;gap:48px;
  padding-inline:0 48px;
}
.marquee-track>span::after{
  content:"•";opacity:.4;font-size:.9em;letter-spacing:0;text-transform:none;
}
html[dir="rtl"] .marquee-track>span{
  direction:rtl;unicode-bidi:isolate;
  font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;
  gap:40px;padding-inline:0 40px;
}
html[dir="rtl"] .marquee-track>span::after{
  content:"·";opacity:.55;font-size:1.15em;
}

/* ---- FLOATING CONTACT BUTTONS ---- */
/* correct class (the earlier rule targeted names that do not exist) */
html[dir="rtl"] .floating-contact{right:auto!important;left:20px!important}
.floating-contact{gap:12px}
.floating-contact-btn{flex:0 0 auto}
html[dir="rtl"] .floating-contact-btn .tooltip{direction:rtl}
/* smaller and tighter to the corner on phones so they cover less content */
@media(max-width:640px){
  .floating-contact{bottom:14px;right:14px;gap:10px}
  html[dir="rtl"] .floating-contact{left:14px!important;right:auto!important}
  .floating-contact-btn{width:46px;height:46px}
  .floating-contact-btn svg{width:18px;height:18px}
  .floating-contact-btn .tooltip{display:none}
}
/* keep clear of the footer lead form's submit button */
@media(max-width:520px){
  .cta-lead-form .lf-submit{margin-bottom:56px}
}

/* ---- misc RTL polish ---- */
html[dir="rtl"] .lang-switch .lang-icon{font-family:system-ui,sans-serif}
html[dir="rtl"] .crumbs{direction:rtl}
html[dir="rtl"] .crumbs i{transform:scaleX(-1);display:inline-block}
html[dir="rtl"] .accordion-head::after,html[dir="rtl"] .faq-q::after{right:auto;left:0}
html[dir="rtl"] .plan-tab .sz,html[dir="rtl"] .stack-row .tag{margin-left:0;margin-right:auto}
html[dir="rtl"] blockquote{border-left:0;border-right:3px solid var(--orange,#F15A22);padding-right:18px;padding-left:0}
html[dir="rtl"] ul,html[dir="rtl"] ol{padding-right:20px;padding-left:0}


/* ==================== ARABIC / RTL SUPPORT ==================== */
/* Arabic webfont — Cairo reads well for Egyptian real-estate marketing */
html[dir="rtl"]{
  font-family:"Cairo","Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  letter-spacing:0!important
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] h4,html[dir="rtl"] .section-title,
html[dir="rtl"] .brand-hero h1,html[dir="rtl"] .page-hero-title{
  font-family:"Cairo","Noto Kufi Arabic",sans-serif;
  letter-spacing:0!important;line-height:1.35!important;font-weight:800
}
/* Arabic has no small-caps tracking; undo the Latin display treatment */
html[dir="rtl"] .eyebrow,html[dir="rtl"] .badge,html[dir="rtl"] .status-chip,
html[dir="rtl"] .btn,html[dir="rtl"] .nav a,html[dir="rtl"] .lf-field label,
html[dir="rtl"] .subnav-links a,html[dir="rtl"] .pcard-loc,
html[dir="rtl"] .fp-meta span,html[dir="rtl"] .stack-row .lvl{
  letter-spacing:0!important;text-transform:none!important
}
html[dir="rtl"] p,html[dir="rtl"] li,html[dir="rtl"] .section-copy{
  line-height:2.05;font-size:15px
}

/* ---- direction & alignment ---- */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .container,html[dir="rtl"] .split,html[dir="rtl"] .section-head{text-align:right}
html[dir="rtl"] .crumbs,html[dir="rtl"] .nav,html[dir="rtl"] .navactions,
html[dir="rtl"] .brand-hero-actions,html[dir="rtl"] .cta-lead-points,
html[dir="rtl"] .fp-switch,html[dir="rtl"] .amen-grid,html[dir="rtl"] .collection{
  direction:rtl
}
/* numbers, codes, emails and URLs stay LTR inside RTL text */
/* keep numbers/emails LTR inside Arabic text, but never change `display`
   (that broke the grid-centred floating call button) */
html[dir="rtl"] .num,html[dir="rtl"] time,html[dir="rtl"] code,
html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="email"],
html[dir="rtl"] a[href^="tel:"]:not([class*="btn"]),
html[dir="rtl"] a[href^="mailto:"]:not([class*="btn"]){
  direction:ltr;unicode-bidi:isolate
}
html[dir="rtl"] .lf-phone{direction:ltr}
html[dir="rtl"] .lf-phone select,html[dir="rtl"] .lf-phone input{text-align:right}

/* ---- mirror the layout ---- */
html[dir="rtl"] .nav-dropdown-menu{left:auto;right:50%;transform:translate(50%,12px)}
html[dir="rtl"] .nav-dropdown:hover>.nav-dropdown-menu,
html[dir="rtl"] .nav-dropdown:focus-within>.nav-dropdown-menu,
html[dir="rtl"] .nav-dropdown.is-open>.nav-dropdown-menu{
  transform:translate(50%,0)!important
}
html[dir="rtl"] .nav-dropdown-menu::before{left:auto;right:50%;transform:translateX(50%) rotate(45deg)}
@media(max-width:1180px){
  html[dir="rtl"] .nav-dropdown-menu{right:auto!important;left:0!important;transform:translate(0,12px)!important}
  html[dir="rtl"] .nav-dropdown:hover>.nav-dropdown-menu,
  html[dir="rtl"] .nav-dropdown.is-open>.nav-dropdown-menu{transform:translate(0,0)!important}
  html[dir="rtl"] .nav-dropdown-menu::before{right:auto!important;left:26px!important}
}
/* arrows and chevrons point the other way */
html[dir="rtl"] .menu-arrow svg,html[dir="rtl"] .pcard-cta svg,
html[dir="rtl"] .ulink svg,html[dir="rtl"] .dropdown-project em svg{transform:scaleX(-1)}
html[dir="rtl"] .eyebrow::before,html[dir="rtl"] .section-head .eyebrow::before{
  margin-right:0;margin-left:10px
}
/* logical properties for the common offsets */
html[dir="rtl"] .fp-zoom{right:auto;left:14px}
html[dir="rtl"] .lf-modal-close{right:auto;left:14px}
html[dir="rtl"] .fp-art.hero{right:auto;left:-4%}
html[dir="rtl"] .fp-art.corner{right:auto;left:-6%}
html[dir="rtl"] .fp-art.left{left:auto;right:-8%}
html[dir="rtl"] .hero-ccr{right:auto;left:6%}
html[dir="rtl"] .stack-row:hover,html[dir="rtl"] .stack-row.is-active{transform:translateX(-4px)}
html[dir="rtl"] .office,html[dir="rtl"] .stack-row,html[dir="rtl"] .fp-meta,
html[dir="rtl"] .plan-legend,html[dir="rtl"] .hero-stats{direction:rtl}
html[dir="rtl"] .lightbox-nav.prev{left:auto;right:18px}
html[dir="rtl"] .lightbox-nav.next{right:auto;left:18px}
html[dir="rtl"] .lightbox-nav svg{transform:scaleX(-1)}
/* the floating call/whatsapp buttons move to the other corner */
html[dir="rtl"] .fab,html[dir="rtl"] .floating-actions{right:auto;left:22px}
@media(max-width:520px){html[dir="rtl"] .fab,html[dir="rtl"] .floating-actions{left:14px!important;right:auto!important}}
/* borders that carried meaning */
html[dir="rtl"] .journey-card,html[dir="rtl"] .amen{border-left:0}
/* Marquee track is forced LTR; do not reverse the -50% loop. */

/* mobile drawer slides from the other side */
html[dir="rtl"] .mobile-drawer{right:auto;left:0;transform:translateX(-100%)}
html[dir="rtl"] .mobile-drawer.is-open{transform:translateX(0)}

/* the language button keeps its Latin label upright */
.lang-switch .lang-text{direction:ltr;unicode-bidi:isolate}


/* ---- RTL off-screen elements must not extend the scroll area ---- */
/* left:-9999px is invisible in LTR but becomes scrollable width in RTL */
.skip-link{
  position:absolute!important;left:auto!important;right:auto!important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
.skip-link:focus,.skip-link:focus-visible{
  width:auto;height:auto;clip:auto;clip-path:none;
  inset-inline-start:16px;top:12px;padding:10px 16px;z-index:9999;
  background:#111;color:#fff
}
/* the closed off-canvas drawer is taken out of the scroll area entirely */
.mobile-drawer:not(.is-open){visibility:hidden}
.mobile-drawer{will-change:transform}
html[dir="rtl"] body{overflow-x:clip}


/* mirror the diagonal link arrows in RTL */
html[dir="rtl"] .mobile-nav-link>span,
html[dir="rtl"] .dropdown-project em,
html[dir="rtl"] .pcard-cta em,
html[dir="rtl"] .ulink em{display:inline-block;transform:scaleX(-1)}


/* floating buttons stay out of the way until the user scrolls past the hero */
.floating-contact{transition:opacity .3s ease,transform .3s ease}
.floating-contact:not(.is-visible){
  opacity:0;pointer-events:none;transform:translateY(14px)
}
@media(max-width:640px){
  .floating-contact-btn{width:42px;height:42px}
  .floating-contact-btn svg{width:17px;height:17px}
}



/* ---- home-page overrides ---- */
:root{
      --blue:#1751F1;
      --orange:#F15A22;
      --black:#111111;
      --black-2:#0E1015;
      --black-3:#171A22;
      --grey:#D5D9E2;
      --white:#ffffff;
      --muted:rgba(255,255,255,.62);
      --muted-2:rgba(255,255,255,.42);
      --line:rgba(255,255,255,.08);
      --container:min(1180px, calc(100% - 34px));
      --ease:cubic-bezier(.16,1,.3,1);
      --section-space:clamp(72px,8vw,110px);
    }
/* Supplied CCR artwork replaces the CSS lockup */
    .brand{display:inline-flex;align-items:center;gap:0}
/* —— React / CMS hardening (unit cards, menu, tables) —— */
.menu{display:none}
@media(max-width:1024px){
  .navlinks{display:none!important}
  .menu{display:inline-flex!important}
}
.unit-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}
.unit-cards .pcard{padding:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.unit-code{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange,#F15A22);margin-bottom:8px;font-weight:700;
}
.unit-cards dl{display:grid;gap:10px;margin:16px 0 0}
.unit-cards dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.unit-cards dd{margin:2px 0 0;font-weight:700}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:28px}
@media(max-width:900px){
  .unit-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .unit-cards{grid-template-columns:1fr}
  html[dir="rtl"] .hero-sub{font-size:clamp(18px,5.5vw,28px)!important}
  .nav-actions{gap:6px}
}

/* ================================================================
   VISUAL POLISH — nav readability + hero breathing room
   ================================================================ */

/* —— Navbar: visible bar, readable links, real padding —— */
.nav{
  height:84px !important;
  padding:0 4px;
  background:rgba(14,16,21,.88) !important;
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.nav.scrolled{
  height:72px !important;
  background:rgba(14,16,21,.96) !important;
}
.nav-inner{
  width:min(1180px, calc(100% - 40px)) !important;
  margin-inline:auto;
  gap:24px !important;
  padding-block:10px;
}
.brandlogo.ccr-logo,
.ccr-logo{
  height:34px !important;
}
@media(max-width:700px){
  .brandlogo.ccr-logo,
  .ccr-logo{height:28px !important}
}

.navlinks{
  gap:4px !important;
  padding:8px 10px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px;
  background:rgba(255,255,255,.06) !important;
}
.navlinks > a,
.nav-dropdown-trigger{
  min-height:44px !important;
  padding:0 16px !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
  color:rgba(255,255,255,.88) !important;
  border-radius:8px;
}
.navlinks > a:hover,
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.navlinks > a.active,
.nav-dropdown-trigger.active{
  color:#fff !important;
  background:rgba(23,81,241,.22) !important;
}
.navlinks > a::after,
.nav-dropdown-trigger::after{
  left:16px !important;
  right:16px !important;
  bottom:8px !important;
  height:2px !important;
}

.nav-actions,
.navactions{
  display:inline-flex !important;
  align-items:center;
  gap:12px !important;
  flex-shrink:0;
}
.lang-switch{
  min-height:42px !important;
  padding:8px 12px !important;
  border-radius:8px;
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff;
  cursor:pointer;
}
.lang-switch .lang-text{
  font-size:11px !important;
  letter-spacing:.12em;
  color:rgba(255,255,255,.9);
}

/* —— Hero: line-height + vertical rhythm —— */
.hero-copy,
.hero .hero-copy,
.hero-slide .hero-copy{
  max-width:min(720px, 92%) !important;
  padding-top:clamp(110px, 16vh, 160px) !important;
  padding-bottom:clamp(100px, 14vh, 150px) !important;
  padding-inline:clamp(4px, 1.5vw, 12px);
}
.hero-kicker,
.hero .eyebrow{
  display:inline-block;
  margin-bottom:8px !important;
  line-height:1.5 !important;
}
.hero-title,
.hero h1,
.hero-copy h1{
  margin:20px 0 0 !important;
  line-height:1.18 !important;
  letter-spacing:-.04em !important;
}
.hero-title .outline,
.hero h1 .outline{
  display:inline-block;
  margin-top:.12em;
  line-height:1.2 !important;
}
.hero-sub,
.hero-copy .hero-sub,
.hero h1 + p,
.hero-copy > p:first-of-type{
  margin-top:22px !important;
  line-height:1.45 !important;
  max-width:42rem;
}
.hero-text,
.hero-copy p.hero-text,
.hero-copy > p{
  margin-top:20px !important;
  line-height:1.85 !important;
  max-width:38rem;
}
.hero-actions{
  margin-top:36px !important;
  gap:14px !important;
}
.hero-proof{
  margin-top:40px !important;
}
.proof{
  padding:18px 16px 16px !important;
}
.proof strong{
  line-height:1.15 !important;
}
.proof span{
  margin-top:10px !important;
  line-height:1.45 !important;
}

/* page heroes (inner pages) */
.page-hero .container{
  padding-top:clamp(120px, 18vh, 170px) !important;
  padding-bottom:clamp(56px, 8vh, 90px) !important;
}
.page-hero h1{
  line-height:1.2 !important;
  margin-top:16px !important;
}
.page-hero p{
  margin-top:18px !important;
  line-height:1.75 !important;
}
.crumbs{
  margin-bottom:18px !important;
  gap:8px;
  line-height:1.5;
}

/* give main content air under the fixed nav */
main#top > *:first-child{
  scroll-margin-top:84px;
}

@media(max-width:1024px){
  .nav{height:72px !important}
  .nav.scrolled{height:66px !important}
  .navlinks{display:none !important}
  .menu{display:inline-flex !important}
  .hero-copy{
    padding-top:100px !important;
    padding-bottom:120px !important;
  }
  .hero-title,
  .hero h1,
  .hero-copy h1{line-height:1.22 !important}
  .hero-sub{line-height:1.4 !important; font-size:clamp(18px,4.6vw,28px) !important}
}
@media(max-width:640px){
  .nav-inner{width:min(100% - 24px, 100%) !important; gap:12px !important}
  .lang-switch .lang-text{display:none}
  .hero-copy{padding-inline:2px !important}
  .hero-title,
  .hero h1{font-size:clamp(32px,9vw,42px) !important; line-height:1.24 !important}
  .hero-actions{margin-top:28px !important}
  .hero-proof{margin-top:28px !important}
  html[dir="rtl"] .hero-sub{font-size:clamp(18px,5vw,26px) !important; line-height:1.45 !important}
}

/* —— Lead form selects: readable native dropdowns ——
   Chromium/Linux inherits <select> color into the OS popup. White text on a
   white popup looked empty. Keep these controls light-scheme always. */
.lf-form select,
.lf-field select,
.lf-phone select,
.lf-modal select,
.cta-lead-form select{
  height:48px !important;
  max-height:48px !important;
  line-height:1.35 !important;
  overflow:hidden !important;
  color:#111 !important;
  background-color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color-scheme:light !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 13px center !important;
  background-size:11px !important;
  padding-right:34px !important;
}
.lf-form select option,
.lf-field select option,
.lf-phone select option,
.lf-modal select option,
.cta-lead-form select option{
  background:#fff !important;
  color:#111 !important;
}
.lf-phone{align-items:stretch}
.lf-phone select{min-width:0;width:100%}
html[dir="rtl"] .lf-form select,
html[dir="rtl"] .lf-field select,
html[dir="rtl"] .lf-phone select{
  background-position:left 13px center !important;
  padding-left:34px !important;
  padding-right:12px !important;
}

/* —— Hero slider controls: stay in the corner, clear of copy —— */
.hero{
  position:relative !important;
}
.hero-panel{
  position:absolute !important;
  z-index:12 !important;
  right:24px !important;
  left:auto !important;
  bottom:24px !important;
  top:auto !important;
  width:auto !important;
  min-width:220px;
  max-width:min(320px, calc(100% - 48px));
  margin:0 !important;
}
.hero-copy{
  padding-bottom:140px !important;
}
html[dir="rtl"] .hero-panel{
  left:24px !important;
  right:auto !important;
}
html[dir="rtl"] .hero-copy{
  padding-bottom:150px !important;
}
html[dir="rtl"] .hero-arrows{
  flex-direction:row-reverse;
}
@media (max-width:900px){
  .hero-panel,
  html[dir="rtl"] .hero-panel{
    left:14px !important;
    right:14px !important;
    bottom:16px !important;
    min-width:0 !important;
    max-width:none;
    width:auto !important;
  }
  .hero-copy,
  html[dir="rtl"] .hero-copy{
    padding-bottom:120px !important;
  }
}

/* ============ SITE HARDENING: overflow + Arabic spacing (final) ============ */
html{
  overflow-x:clip !important;
  max-width:100% !important;
}
html,body,#root,main,#top{
  overflow-x:clip !important;
  max-width:100% !important;
}
body{
  overflow-x:clip !important;
}
img,video,svg,canvas,iframe{
  max-width:100%;
  height:auto;
}
/* Clip only the outer strip — NEVER max-width the track (it must overflow). */
.marquee{
  overflow:hidden !important;
  max-width:100% !important;
}
.marquee-track{
  overflow:visible !important;
  max-width:none !important;
  width:max-content !important;
}
.container{
  width:min(var(--container), calc(100% - 32px)) !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.hero,.page-hero,.brand-hero,section,.cta,.footer{
  max-width:100% !important;
  overflow-x:clip !important;
}

/* Kill Latin negative tracking on Arabic — that is what made letters look glued */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after{
  letter-spacing:0 !important;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-copy h1,
html[dir="rtl"] .section-title,
html[dir="rtl"] .page-hero h1,
html[dir="rtl"] .page-hero-title,
html[dir="rtl"] .brand-hero h1,
html[dir="rtl"] .cta-lead-copy h2{
  letter-spacing:0 !important;
  line-height:1.45 !important;
  word-spacing:0.04em !important;
}
html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-copy h1{
  line-height:1.38 !important;
  margin-bottom:0.2em !important;
}
html[dir="rtl"] .hero-title .blue,
html[dir="rtl"] .hero h1 .blue,
html[dir="rtl"] .hero-title .outline,
html[dir="rtl"] .hero h1 .outline{
  display:inline-block !important;
  margin-top:0.18em !important;
  line-height:1.4 !important;
}
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .hero-copy > p,
html[dir="rtl"] .hero-text,
html[dir="rtl"] .page-hero-sub,
html[dir="rtl"] .section-copy,
html[dir="rtl"] p,
html[dir="rtl"] li{
  line-height:1.9 !important;
  letter-spacing:0 !important;
  word-spacing:0.02em !important;
}
html[dir="rtl"] .btn,
html[dir="rtl"] .navlinks > a,
html[dir="rtl"] .nav-dropdown-trigger,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero-kicker,
html[dir="rtl"] .proof span{
  letter-spacing:0 !important;
  text-transform:none !important;
  line-height:1.5 !important;
}
html[dir="rtl"] .navlinks > a,
html[dir="rtl"] .nav-dropdown-trigger{
  white-space:nowrap;
  padding-inline:14px !important;
}
html[dir="rtl"] .hero-actions{
  flex-wrap:wrap !important;
  gap:12px !important;
}
html[dir="rtl"] .hero-actions .btn{
  white-space:normal !important;
  line-height:1.45 !important;
  padding-block:12px !important;
}
/* Keep Latin/numbers readable inside Arabic pages */
html[dir="rtl"] .hero-panel,
html[dir="rtl"] .lf-phone,
html[dir="rtl"] code,
html[dir="rtl"] .num,
html[dir="rtl"] [dir="ltr"]{
  letter-spacing:normal !important;
}
@media (max-width:900px){
  html,body,#root,main{
    overflow-x:clip !important;
  }
  .hero-copy,.page-hero .container{
    padding-inline:16px !important;
  }
  html[dir="rtl"] .hero h1,
  html[dir="rtl"] .hero-title{
    font-size:clamp(28px,8vw,40px) !important;
    line-height:1.4 !important;
  }
}

/* ============================================================
   ARABIC HOME DESIGN POLISH — single coherent composition
   ============================================================ */

/* ---- Nav: balanced capsule, readable Arabic ---- */
html[dir="rtl"] .nav-inner{
  gap:20px !important;
  padding-inline:clamp(16px,3vw,28px) !important;
}
html[dir="rtl"] .navlinks{
  gap:2px !important;
  padding:5px 6px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.1) !important;
}
html[dir="rtl"] .navlinks > a,
html[dir="rtl"] .nav-dropdown-trigger{
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding-inline:14px !important;
  min-height:40px !important;
  border-radius:999px !important;
}
html[dir="rtl"] .brandtext,
html[dir="rtl"] .brand .brandtext{
  letter-spacing:.06em !important;
}
html[dir="rtl"] .lang-switch,
html[dir="rtl"] .lang{
  font-size:12px !important;
  letter-spacing:.04em !important;
  min-width:42px;
  justify-content:center;
}

/* ---- Hero: calm vertical rhythm, readable Arabic display ---- */
html[dir="rtl"] .hero-copy{
  max-width:min(640px,92vw) !important;
  padding-top:clamp(96px,14vh,130px) !important;
  padding-bottom:clamp(110px,16vh,150px) !important;
  text-align:right !important;
}
html[dir="rtl"] .hero-kicker{
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--orange) !important;
  margin-bottom:6px !important;
}
html[dir="rtl"] .hero-title{
  font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif !important;
  font-size:clamp(34px,4.8vw,62px) !important;
  line-height:1.28 !important;
  letter-spacing:0 !important;
  font-weight:800 !important;
  max-width:18ch !important;
  margin:10px 0 0 !important;
}
html[dir="rtl"] .hero-title .blue{
  color:var(--blue) !important;
  display:inline !important;
  margin-top:0 !important;
}
html[dir="rtl"] .hero-title .outline{
  display:block !important;
  margin-top:0.12em !important;
  color:rgba(255,255,255,.88) !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  font-weight:700 !important;
  opacity:.92;
}
html[dir="rtl"] .hero-sub{
  margin-top:18px !important;
  font-size:clamp(17px,1.7vw,22px) !important;
  line-height:1.65 !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.78) !important;
  max-width:36ch !important;
  letter-spacing:0 !important;
}
html[dir="rtl"] .hero-text{
  margin-top:14px !important;
  font-size:15px !important;
  line-height:1.85 !important;
  color:rgba(255,255,255,.55) !important;
  max-width:42ch !important;
}
html[dir="rtl"] .hero-actions{
  margin-top:28px !important;
  gap:12px !important;
  justify-content:flex-start !important;
}
html[dir="rtl"] .hero-actions .btn{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:14px 22px !important;
  min-height:48px !important;
  border-radius:4px !important;
  line-height:1.35 !important;
  white-space:nowrap !important;
}

/* Proof strip — cards that breathe in Arabic */
html[dir="rtl"] .hero-proof{
  margin-top:32px !important;
  max-width:520px !important;
  gap:1px !important;
  background:rgba(255,255,255,.1) !important;
}
html[dir="rtl"] .hero-proof .proof{
  padding:16px 14px 14px !important;
  background:rgba(12,14,20,.72) !important;
}
html[dir="rtl"] .hero-proof .proof strong{
  font-size:22px !important;
  letter-spacing:0 !important;
  font-variant-numeric:tabular-nums;
}
html[dir="rtl"] .hero-proof .proof span{
  margin-top:8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.55) !important;
}

/* Slider controls stay bottom-start in RTL without covering copy */
html[dir="rtl"] .hero-panel{
  left:clamp(16px,3vw,28px) !important;
  right:auto !important;
  bottom:clamp(18px,3vh,28px) !important;
  border-radius:10px !important;
}

/* ---- Marquee: premium ticker, not a jammed bar ---- */
.marquee{
  overflow:hidden !important;
  max-width:100% !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(90deg,rgba(23,81,241,.12),rgba(23,81,241,.06),rgba(23,81,241,.12)) !important;
  padding:14px 0 !important;
}
.marquee-track{
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
  gap:0 !important;
  animation:marquee 50s linear infinite !important;
  will-change:transform;
  direction:ltr !important;
}
.marquee-track > span{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  white-space:nowrap !important;
  padding:0 28px !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.78) !important;
  position:relative;
}
.marquee-track > span::after{
  content:"" !important;
  position:absolute;
  inset-inline-end:0;
  top:50%;
  width:4px;height:4px;border-radius:50%;
  background:rgba(241,90,34,.85);
  transform:translateY(-50%);
  opacity:.9;
}
html[dir="rtl"] .marquee-track > span{
  font-family:"IBM Plex Sans Arabic","Tajawal",sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:0 44px !important;
  color:rgba(255,255,255,.88) !important;
  direction:rtl;
  unicode-bidi:isolate;
}
html[dir="rtl"] .marquee-track > span::after{
  width:5px;height:5px;
  background:var(--orange);
  opacity:.75;
}
.marquee:hover .marquee-track{animation-play-state:paused !important}

/* ---- Section heads / cards: Arabic breathing room ---- */
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-head h2{
  letter-spacing:0 !important;
  line-height:1.4 !important;
}
html[dir="rtl"] .section-copy,
html[dir="rtl"] .section-head p{
  font-size:15.5px !important;
  line-height:1.85 !important;
  max-width:52ch;
}
html[dir="rtl"] .eyebrow{
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:12.5px !important;
}

@media (max-width:900px){
  html[dir="rtl"] .hero-title{
    font-size:clamp(30px,8.5vw,40px) !important;
    max-width:100% !important;
    line-height:1.32 !important;
  }
  html[dir="rtl"] .hero-actions .btn{
    white-space:normal !important;
    width:100%;
    text-align:center;
  }
  html[dir="rtl"] .hero-proof{
    grid-template-columns:1fr 1fr 1fr !important;
    max-width:100% !important;
  }
  html[dir="rtl"] .navlinks{display:none !important}
}