/* ============================================================
     JCCI brand tokens — calibrated to the live site (teal-led)
     ============================================================ */
  :root{
    --brand:#37BAC6;          /* EXACT JCCI teal — extracted from official logo SVG fill */
    --brand-2:#2599a4;        /* darker teal — hover/active */
    --brand-3:#5acdd6;        /* lighter teal — highlights */
    --brand-soft:#e8f6f8;     /* tinted background */
    --navy:#09172d;           /* deep navy — extracted from live .jcc-sections background */
    --ink:#0d1b2a;            /* main body text — extracted from live (rgb 13,27,42) */
    --ink-2:#0d1b2a;          /* headings — same on live */
    --muted:#5b6b78;
    --line:#e4e9ee;
    --bg:#ffffff;
    --bg-soft:#f6f8fb;
    --shadow-sm:0 2px 6px rgba(21,165,159,.08);
    --shadow:0 18px 40px rgba(21,165,159,.14);
    --r:6px;
    --r-lg:10px;
    --maxw:1248px;
    --heading-color:#304F78;  /* exact JCCI section heading color */
    --link-accent:#10B8C7;    /* "تعرف على المزيد" teal accent */
  }
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
    font-family:'Tajawal','Noto Naskh Arabic',system-ui,sans-serif;
    line-height:1.6;font-size:14px;-webkit-font-smoothing:antialiased}
  a{color:var(--brand);text-decoration:none;transition:color .15s}
  a:hover{color:var(--brand-2)}
  a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
  img{max-width:100%;height:auto;display:block}
  button{font:inherit;cursor:pointer}
  .container{max-width:var(--maxw);margin-inline:auto;padding-inline:30px}

  .skip{position:absolute;right:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 14px;z-index:1000}
  .skip:focus{right:8px;top:8px}

  /* ============================================================
     TOP UTILITY BAR — TRANSPARENT, OVERLAYS hero (matches live site)
     ============================================================ */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;font-size:.88rem;color:#fff}
  .topbar .container{display:flex;align-items:center;gap:14px;min-height:46px;justify-content:flex-end}
  .topbar a{color:#fff;display:inline-flex;align-items:center;gap:6px;padding:6px 4px;text-shadow:0 1px 4px rgba(0,0,0,.3)}
  .topbar a:hover{color:var(--brand-3)}
  .topbar .divider{width:1px;height:18px;background:rgba(255,255,255,.4)}
  /* Search collapses to icon; expands to input on focus-within */
  .topbar form{display:inline-flex;align-items:center;position:relative}
  .topbar form input{border:0;border-bottom:1px solid rgba(255,255,255,.0);padding:6px 8px;font:inherit;width:0;outline:none;background:transparent;color:#fff;transition:width .25s, border-color .25s;order:1}
  .topbar form:focus-within input,.topbar form input:not(:placeholder-shown){width:180px;border-bottom-color:rgba(255,255,255,.6)}
  .topbar form input::placeholder{color:rgba(255,255,255,.7)}
  .topbar form button{border:0;background:transparent;color:#fff;padding:7px;display:inline-flex;align-items:center;cursor:pointer;order:2}
  .topbar form button:hover{color:var(--brand-3)}

  /* CMS status pill (only visible when authenticated) */
  .cms-status{display:none;background:var(--brand);color:#fff;padding:3px 12px;border-radius:999px;font-size:.78rem;font-weight:700;gap:6px;align-items:center}
  body.cms-on .cms-status{display:inline-flex}
  body.cms-on .login-link{display:none}
  .logout-link{display:none}
  body.cms-on .logout-link{display:inline-flex}
  .admin-link{display:none;align-items:center;gap:5px;background:var(--brand);color:#06222a;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.8rem;text-decoration:none}
  .admin-link:hover{background:#2aa4af}
  body.cms-on .admin-link{display:inline-flex}

  /* ============================================================
     HEADER (logo + main nav) — overlays the hero, transparent bg
     ============================================================ */
  header.site{background:transparent;position:absolute;top:46px;left:0;right:0;z-index:55;border:0}
  /* inner-page hero breadcrumb */
  .hero-crumb{color:#dceaf0;font-size:.92rem;margin-bottom:16px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.25)}
  .hero-crumb a{color:#fff;text-decoration:none}
  .hero-crumb a:hover{text-decoration:underline}
  header.site .container{display:flex;align-items:center;gap:28px;padding-block:14px}

  /* Logo block — uses the local JCCI logo SVG. Now sits OVER the dark hero
     so the white parts of the logo are visible. */
  .logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
  .logo img{height:72px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
  /* Fallback (only visible when img fails) */
  .logo .anniversary{display:none;width:78px;height:78px;border-radius:50%;
    background:radial-gradient(circle,#fff 0%,#fff 55%,var(--brand-soft) 100%);
    border:2px solid var(--brand);position:relative;font-family:'Tajawal',sans-serif}
  .logo .anniversary::before{content:"75";position:absolute;font-weight:900;font-size:26px;color:var(--brand);line-height:1;top:50%;left:50%;transform:translate(-50%,-58%)}
  .logo .anniversary::after{content:"1946";position:absolute;font-size:9px;color:var(--brand);font-weight:700;bottom:11px;left:50%;transform:translateX(-50%);letter-spacing:.08em}
  .logo.fallback img{display:none}
  .logo.fallback .anniversary{display:grid;place-items:center}
  .logo .text{display:none}  /* live logo already includes the wordmark */

  /* Primary nav — teal-gradient parallelogram bar (matches live site) */
  nav.primary{margin-inline-start:auto;position:relative}
  nav.primary::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,#0c8a92 0%,#37BAC6 70%,rgba(55,186,198,.0) 100%);
    clip-path:polygon(0 0, calc(100% - 50px) 0, calc(100% - 90px) 100%, 0 100%);
    z-index:-1
  }
  nav.primary > ul{list-style:none;margin:0;padding:6px 70px 6px 16px;display:flex;gap:2px;white-space:nowrap}
  nav.primary > ul > li{position:relative}
  nav.primary > ul > li > a{display:block;padding:12px 12px;color:#fff;font-weight:600;font-size:.88rem;position:relative;text-shadow:0 1px 4px rgba(0,0,0,.18);white-space:nowrap}
  nav.primary > ul > li > a::after{
    content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:#fff;
    transform:scaleX(0);transform-origin:center;transition:transform .2s
  }
  nav.primary > ul > li:hover > a::after,
  nav.primary > ul > li:focus-within > a::after,
  nav.primary > ul > li.open > a::after{transform:scaleX(1)}
  nav.primary > ul > li:hover > a,
  nav.primary > ul > li:focus-within > a,
  nav.primary > ul > li.open > a{color:#fff}

  /* Mega panel */
  .mega{
    position:absolute;top:100%;inset-inline-end:0;margin-top:8px;
    min-width:680px;max-width:980px;background:#fff;
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow);padding:22px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;
    opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;z-index:60;
    border-top:3px solid var(--brand)
  }
  nav.primary li:hover > .mega, nav.primary li:focus-within > .mega, nav.primary li.open > .mega{opacity:1;visibility:visible;transform:none}
  nav.primary li.open > a::after{transform:scaleX(1)}
  nav.primary li.open > a{color:var(--brand)}
  /* caret indicator on parent links that have a mega panel */
  nav.primary li > a[aria-haspopup]{padding-inline-end:24px;position:relative}
  nav.primary li > a[aria-haspopup]::before{content:"";position:absolute;inset-inline-end:8px;top:50%;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s;opacity:.7}
  nav.primary li.open > a[aria-haspopup]::before, nav.primary li:hover > a[aria-haspopup]::before{transform:translateY(-30%) rotate(225deg)}
  .mega h3{font-size:.78rem;margin:0 0 10px;color:var(--brand);font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:6px}
  .mega ul{list-style:none;margin:0;padding:0}
  .mega li + li{margin-top:2px}
  .mega a{display:block;padding:7px 10px;border-radius:var(--r);color:var(--ink);font-size:.93rem;transition:.12s}
  .mega a:hover{background:var(--brand-soft);color:var(--brand-2)}

  /* Mobile menu button */
  .menu-btn{display:none;background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;color:var(--brand);font-weight:700;margin-inline-start:auto}
  .mobile-nav{display:none;border-top:1px solid var(--line);background:#fff}
  .mobile-nav details{border-bottom:1px solid var(--line)}
  .mobile-nav summary{padding:14px 20px;font-weight:700;color:var(--ink-2);list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary::after{content:"+";color:var(--brand);font-weight:800;font-size:1.2rem}
  .mobile-nav details[open] summary::after{content:"−"}
  .mobile-nav details > div{padding:0 24px 14px}
  .mobile-nav a{display:block;padding:7px 0;color:var(--ink)}

  @media (max-width:1100px){
    nav.primary{display:none}
    .menu-btn{display:inline-flex;align-items:center;gap:8px}
    .mobile-nav.open{display:block}
    .logo .text .ar{font-size:1.1rem}
    .logo .anniversary{width:60px;height:60px}
    .logo .anniversary::before{font-size:20px}
  }
  /* Mega panel — stack columns on small screens */
  @media (max-width:760px){
    .mega{grid-template-columns:1fr;min-width:auto;max-width:90vw}
  }
  /* Hide hover on touch — touch users get click toggle */
  @media (hover:none){
    nav.primary li:hover > .mega{opacity:0;visibility:hidden;transform:translateY(8px)}
    nav.primary li.open > .mega{opacity:1;visibility:visible;transform:none}
  }

  /* ============================================================
     FLOATING SIDE RAIL — matches live site (square-ish teal, small, left)
     ============================================================ */
  .side-rail{position:fixed;inset-inline-start:0;top:38%;display:flex;flex-direction:column;gap:6px;z-index:40}
  .side-rail a{
    width:42px;height:42px;background:var(--brand);
    color:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(21,165,159,.3);
    transition:.18s;border-radius:0 6px 6px 0
  }
  .side-rail a:hover{background:var(--brand-2);width:50px}
  @media (max-width:780px){.side-rail{display:none}}

  /* ============================================================
     HERO — slideshow with crossfade, controls, Ken Burns pan
     ============================================================ */
  .hero{position:relative;min-height:680px;color:#fff;display:flex;align-items:center;overflow:hidden;background:#0d1b2a;padding-top:120px}
  .slides{position:absolute;inset:0;z-index:0}
  .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;will-change:opacity,transform}
  .slide.active{opacity:1;animation:kenburns 12s ease-out forwards}
  @keyframes kenburns{
    from{transform:scale(1.0)}
    to{transform:scale(1.08)}
  }
  /* Real video as hero background */
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0d1b2a}
  /* Hero gradient overlay — softer now that source images are clean YouTube thumbnails */
  .hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(13,27,42,.65) 0%,rgba(13,27,42,.35) 50%,rgba(13,27,42,.15) 100%);pointer-events:none}
  .hero .container{position:relative;z-index:2;padding-block:90px;width:100%}
  .hero h1{margin:0 0 18px;font-size:4.5rem;font-weight:900;line-height:1;color:#fff;animation:fadeUp .9s .2s both}
  .hero p{margin:0 0 28px;font-size:1.15rem;max-width:46ch;line-height:1.7;color:rgba(255,255,255,.96);animation:fadeUp .9s .4s both;min-height:3.4em}
  .hero .ctas{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp .9s .6s both}
  @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

  .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r);font-weight:700;border:0;text-decoration:none;transition:.15s;font-size:.95rem}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--brand);color:#fff;border:2px solid var(--brand)}
  .btn-primary:hover{background:var(--brand-2);color:#fff;border-color:var(--brand-2)}
  .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
  .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

  /* Slideshow controls — small chevrons at bottom-left of hero, matching live JCCI Bootstrap carousel-control style */
  .hero-controls{position:absolute;bottom:32px;left:60px;display:flex;align-items:center;gap:14px;z-index:3}
  .hero-controls .ctrl{width:32px;height:32px;border-radius:0;background:transparent;display:grid;place-items:center;color:#fff;border:0;padding:0;cursor:pointer;opacity:.85;transition:.18s}
  .hero-controls .ctrl:hover{opacity:1;color:var(--brand)}

  /* Slide pagination dots */
  .hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
  .hero-dots button{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.4);border:0;padding:0;cursor:pointer;transition:.2s}
  .hero-dots button.active{background:var(--brand);width:48px}
  .hero-dots button:hover{background:rgba(255,255,255,.7)}

  @media (max-width:880px){
    .hero{min-height:460px}
    .hero h1{font-size:2.4rem}
    .hero p{font-size:1rem}
    .hero-controls{bottom:18px;left:24px;gap:10px}
    .hero-controls .ctrl{width:28px;height:28px}
  }
  @media (prefers-reduced-motion: reduce){
    .slide.active{animation:none}
    .hero h1,.hero p,.hero .ctas{animation:none}
  }

  /* Visitor counter — pinned to the LEFT, thin teal accent on top + LEFT edge */
  .visitor-strip{position:relative;z-index:5;margin-top:-30px}
  .visitor-strip .container{display:flex;justify-content:flex-end;padding-inline-end:30px}
  .visitor-strip .inner{display:inline-flex;align-items:center;gap:16px;background:#fff;padding:14px 24px;font-weight:700;color:var(--ink-2);box-shadow:0 6px 18px rgba(13,27,42,.08);position:relative}
  .visitor-strip .inner::before{content:"";position:absolute;top:-2px;left:0;right:0;height:3px;background:var(--brand)}
  .visitor-strip .inner::after{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:3px;background:var(--brand)}
  .visitor-strip .inner b{color:var(--brand);font-size:1.05rem;font-variant-numeric:tabular-nums}

  /* Scroll-reveal helper (vanilla — no library) */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}
  .reveal.d5{transition-delay:.40s} .reveal.d6{transition-delay:.48s}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* Anniversary mark — subtle pulse */
  @keyframes pulseRing{
    0%{box-shadow:0 0 0 0 rgba(21,165,159,.45)}
    70%{box-shadow:0 0 0 14px rgba(21,165,159,0)}
    100%{box-shadow:0 0 0 0 rgba(21,165,159,0)}
  }
  .logo .anniversary{animation:pulseRing 2.6s ease-out infinite}

  /* ============================================================
     SECTIONS
     ============================================================ */
  section{padding-block:64px}
  section.alt{background:var(--bg-soft)}
  .section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
  .section-head h2{margin:0;font-size:32px;color:var(--heading-color);font-weight:600;display:inline-flex;align-items:center;gap:14px;line-height:1.3}
  .section-head h2::before{content:"";display:inline-block;width:6px;height:30px;background:var(--brand);border-radius:3px}
  .section-head p{margin:6px 0 0;color:var(--muted)}
  .section-head .more{color:var(--heading-color);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:6px}
  .section-head .more::before{content:"←"}

  /* Service icons grid — 4x2 large stroke icons with white-card hover lift (matches live site exactly) */
  .grid-services{display:grid;grid-template-columns:repeat(4, 1fr);gap:30px;padding:30px 0;position:relative;z-index:2}
  .svc{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink-2);text-decoration:none;
       padding:32px 14px;border-radius:8px;background:transparent;transition:.25s;border:1px solid transparent}
  .svc:hover{transform:translateY(-8px);background:#fff;box-shadow:0 14px 40px rgba(13,27,42,.10);border-color:#f0f3f7}
  .svc .ico{width:75px;height:75px;display:grid;place-items:center;color:var(--brand);margin-bottom:14px;transition:.25s}
  .svc:hover .ico{color:var(--brand-2);transform:scale(1.06)}
  .svc h3{margin:0;font-size:1.05rem;color:var(--ink-2);font-weight:700}
  .svc p{display:none}
  /* ss-bg.png — exact live dimensions 1193×699, absolute top-left of services section */
  /* Background: very subtle cool tint — slightly darker than pure white so cards/decoration pop */
  section.services-section{background:#f7fafc;position:relative;overflow:hidden}
  section.services-section::before{content:"";position:absolute;top:0;left:0;width:1193px;height:699px;
    background:url('../assets/logos/ss-bg.png') no-repeat top left;background-size:1193px 699px;
    pointer-events:none;z-index:1}
  @media (max-width:880px){.grid-services{grid-template-columns:repeat(2, 1fr);gap:30px 20px}}

  /* Announcement section — featured-card layout (matches live exactly) */
  .news-carousel{position:relative}
  .announce-row{display:grid;grid-template-columns:1fr 1.3fr;gap:0;background:#f4f7fa;border-radius:0;overflow:hidden;min-height:380px;align-items:stretch;margin-top:18px}
  .announce-row .featured{background:linear-gradient(135deg,var(--brand) 0%,#1b9aa6 60%,#0d5d6e 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:30px}
  .announce-row .featured::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.08),transparent 60%);pointer-events:none}
  /* Inner card on teal — image + title overlay + date badge */
  .featured-card{position:relative;width:88%;max-width:380px;border-radius:6px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25);background:#0c4e57}
  .featured-card .img-wrap{aspect-ratio:4/3;position:relative;overflow:hidden}
  .featured-card .img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
  .featured-card .img-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,78,87,.85) 0%,rgba(12,78,87,.35) 40%,rgba(12,78,87,.15) 100%)}
  .featured-card .card-title{position:absolute;left:0;right:0;bottom:40px;text-align:center;color:#fff;padding:0 16px;font-weight:800;font-size:1.05rem;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.4)}
  .featured-card .card-badge{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#fff;color:var(--ink-2);padding:6px 14px;border-radius:4px;font-size:.72rem;font-weight:700;z-index:3;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
  .featured-card .card-badge::before{content:"";width:10px;height:10px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23{37BAC6}' viewBox='0 0 24 24'><path d='M19 4h-2V2h-2v2H9V2H7v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z'/></svg>") no-repeat center;display:inline-block}
  .announce-row .detail{padding:30px 50px;display:flex;flex-direction:column;justify-content:center;gap:14px}
  .announce-row .detail .meta-cat{color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:10px}
  .announce-row .detail h3{margin:0;color:var(--heading-color);font-size:1.5rem;font-weight:600;line-height:1.45}
  .announce-row .detail p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.7}
  .announce-row .detail .more-inline{color:var(--link-accent);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-top:8px;text-decoration:none}
  .announce-row .detail .more-inline::before{content:"←"}
  .grid-news{display:none}
  @media (max-width:880px){.announce-row{grid-template-columns:1fr}.announce-row .featured{min-height:280px}.announce-row .detail{padding:24px 24px 30px}}
  /* Pagination matches live: "5 — 1" (total — current) with arrows */
  .news-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;align-items:center}
  .news-controls .pager{display:inline-flex;align-items:center;gap:14px;margin-inline-start:auto;font-weight:700;color:var(--ink-2)}
  .news-controls .pager .total{color:var(--brand)}
  .news-controls .pager .line{display:inline-block;width:36px;height:2px;background:var(--brand);border-radius:1px}
  .news-controls .arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--brand);display:grid;place-items:center;cursor:pointer;transition:.15s}
  .news-controls .arrow:hover:not(:disabled){background:var(--brand);color:#fff;border-color:var(--brand)}
  .news-controls .arrow:disabled{opacity:.35;cursor:not-allowed}
  .article{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.18s;position:relative}
  .article:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
  .article .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);position:relative;overflow:hidden}
  .article .thumb img{width:100%;height:100%;object-fit:cover}
  .article .thumb .cat{position:absolute;top:12px;inset-inline-start:12px;background:var(--brand);color:#fff;padding:5px 12px;border-radius:var(--r);font-size:.75rem;font-weight:700}
  .article .body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
  .article .meta{font-size:.78rem;color:var(--muted);display:flex;gap:10px;align-items:center}
  .article h3{margin:0;font-size:1.08rem;color:var(--ink-2);line-height:1.45;font-weight:700}
  .article p{margin:0;color:var(--muted);font-size:.92rem;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .article .read{margin-top:8px;color:var(--brand);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:4px}
  .article .read::before{content:"←"}
  .article .admin-actions{position:absolute;top:10px;inset-inline-end:10px;display:none;gap:6px;z-index:2}
  body.cms-on .article .admin-actions{display:flex}
  .article .admin-actions button{background:rgba(13,39,49,.94);color:#fff;border:0;padding:6px 12px;border-radius:var(--r);font-size:.78rem;font-weight:600}
  .article .admin-actions button:hover{background:var(--brand)}
  .article .admin-actions button.del:hover{background:#c0392b}
  .empty{text-align:center;padding:48px 20px;border:2px dashed var(--line);border-radius:var(--r-lg);color:var(--muted);grid-column:1/-1}
  .empty strong{color:var(--brand);display:block;margin-bottom:6px;font-size:1.1rem}

  /* CTA strip */
  .cta-strip{background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:center;position:relative;overflow:hidden}
  .cta-strip::before{content:"";position:absolute;width:240px;height:240px;background:rgba(255,255,255,.08);border-radius:50%;inset-inline-end:-80px;top:-80px}
  .cta-strip h3{margin:0 0 6px;font-size:1.5rem;font-weight:800}
  .cta-strip p{margin:0;opacity:.95}
  .cta-strip .channels{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
  .cta-strip .btn-primary{background:#fff;color:var(--brand);border-color:#fff}
  .cta-strip .btn-primary:hover{background:#f0fafa;color:var(--brand-2)}
  @media (max-width:780px){.cta-strip{grid-template-columns:1fr}.cta-strip .channels{justify-content:flex-start}}

  /* ============================================================
     LATEST NEWS — list (right) + featured image with overlay (left)
     ============================================================ */
  .latest-news{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;margin-top:18px}
  .news-list{list-style:none;margin:0;padding:0}
  .news-list li{border-bottom:1px solid var(--line);padding:20px 0}
  .news-list li:first-child{padding-top:0}
  .news-list a{display:block;text-decoration:none;color:inherit}
  .news-list h3{margin:0 0 10px;color:var(--heading-color);font-size:1.05rem;font-weight:600;line-height:1.55;transition:color .15s}
  .news-list a:hover h3{color:var(--brand)}
  .news-meta{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem}
  .news-meta .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:var(--muted)}
  .news-meta .badge::before{content:"";width:10px;height:10px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%235b6b78' viewBox='0 0 24 24'><path d='M19 5H5v14h14V5zm-2 12H7V9h10v8zm0-10H7V6h10v1z'/></svg>") no-repeat;display:inline-block}
  .news-feature{display:block;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3;text-decoration:none;color:#fff}
  .news-feature img{width:100%;height:100%;object-fit:cover}
  .news-feature .overlay{position:absolute;inset:auto 0 0 0;background:linear-gradient(0deg,#09172d 0%,rgba(9,23,45,.9) 60%,transparent 100%);padding:24px;display:flex;flex-direction:column;gap:10px}
  .news-feature h3{margin:0;color:#fff;font-size:1.1rem;font-weight:700;line-height:1.5}
  .news-feature .news-meta{color:rgba(255,255,255,.8)}
  .news-feature .news-meta time{background:rgba(255,255,255,.08);padding:4px 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;font-size:.8rem}
  @media (max-width:880px){.latest-news{grid-template-columns:1fr}}

  /* ============================================================
     خدمات قواعد بيانات الغرفة — dark navy section with wave bg
     ============================================================ */
  .db-section{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding-block:60px 80px}
  .db-wave-bg{position:absolute;inset:0;background:url('https://www.jcci.org.sa/documents/d/jcc/wave-bg-png') no-repeat center bottom/cover;opacity:.45;pointer-events:none}
  /* bg-text.svg — exact live measurements: 231×215, top:-44px (extends above section), left:77px */
  .db-section{overflow:visible}  /* allow the decoration to peek above the section */
  .db-section::before{content:"";position:absolute;left:77px;top:-44px;width:231px;height:215px;
    background:url('../assets/logos/bg-text.svg') no-repeat top left;background-size:231px 215px;
    pointer-events:none;z-index:3}
  .db-section .container{position:relative;z-index:2}
  .db-section .section-head h2{color:#fff;font-size:1.9rem}
  .db-section .section-head h2::before{display:none}
  .db-head{margin-bottom:40px}
  .grid-db{display:grid;grid-template-columns:repeat(4, 1fr);gap:40px;padding-top:20px;position:relative;z-index:2}
  .db-item{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-decoration:none;transition:transform .25s}
  .db-item:hover{transform:translateY(-4px)}
  .db-item svg{color:var(--brand-3);margin-bottom:18px;transition:.25s;width:60px;height:60px}
  .db-item:hover svg{color:#fff;transform:scale(1.08)}
  .db-item h3{margin:0;color:#fff;font-size:1rem;font-weight:700}
  @media (max-width:880px){.grid-db{grid-template-columns:repeat(2,1fr);gap:30px}}

  /* ============================================================
     مناسبات الغرفة — 3 event cards with image + category + date
     ============================================================ */
  .events-section{background:#f6fafd;padding-block:60px 70px;position:relative;overflow:hidden}
  .events-section::before{content:"";position:absolute;top:140px;left:3%;width:140px;height:140px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M20 70 Q 40 30 60 50 T 90 30' stroke='%2337BAC6' fill='none' stroke-width='5' opacity='.4'/><path d='M30 80 Q 50 60 60 75' stroke='%2317658B' fill='none' stroke-width='4' opacity='.3'/></svg>") no-repeat;pointer-events:none;z-index:0}
  .events-section .container{position:relative;z-index:2}
  .grid-events{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
  .event-card{background:#fff;border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink-2);box-shadow:0 4px 18px rgba(13,27,42,.06);display:flex;flex-direction:column;transition:.2s}
  .event-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,27,42,.12)}
  .event-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--brand-2))}
  .event-img img{width:100%;height:100%;object-fit:cover}
  .event-cat{position:absolute;bottom:0;left:0;right:0;background:var(--brand-2);color:#fff;padding:10px 14px;font-size:.85rem;font-weight:700;text-align:center;letter-spacing:.01em}
  .event-cat-dark{background:var(--navy)}
  .event-img-plain{background:linear-gradient(135deg,#0a2e48 0%,#0d3b5c 60%,#143a55 100%);position:relative}
  .event-img-plain::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 70 Q 30 40 50 55 T 100 40' stroke='%2337BAC6' fill='none' stroke-width='2' opacity='.15'/><path d='M0 50 Q 25 30 45 45' stroke='%2337BAC6' fill='none' stroke-width='1.5' opacity='.1'/></svg>") no-repeat;background-size:cover;pointer-events:none}
  .event-cat-tag{position:absolute;top:50%;inset-inline-start:50%;transform:translate(50%,-50%);color:var(--brand-3);font-weight:700;font-size:1.2rem;z-index:2;letter-spacing:.02em;text-align:center;white-space:nowrap}
  /* Special invitation card (Canadian delegation) */
  .event-img-special{background:linear-gradient(135deg,#1a4a6e,#0a2e48);position:relative}
  .event-img-special img{opacity:.4}
  .event-invite{position:absolute;inset:14px 14px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;gap:6px;border:1px solid rgba(255,255,255,.25);padding:18px 12px;border-radius:4px}
  .event-invite small{font-size:.7rem;color:rgba(255,255,255,.85);font-weight:500}
  .event-invite-line{font-size:.85rem;color:rgba(255,255,255,.7);position:relative;padding:0 10px}
  .event-invite-line::before,.event-invite-line::after{content:"";position:absolute;top:50%;width:6px;height:1px;background:rgba(255,255,255,.4)}
  .event-invite-line::before{right:-2px}.event-invite-line::after{left:-2px}
  .event-invite strong{font-size:1rem;color:#fff;font-weight:700}
  .event-invite-info{display:flex;gap:10px;font-size:.65rem;color:rgba(255,255,255,.85);margin-top:6px;align-items:flex-start}
  .event-invite-info span{display:inline-flex;flex-direction:column;align-items:center;line-height:1.3;gap:3px;background:rgba(255,255,255,.08);padding:6px 8px;border-radius:3px}
  .event-body{padding:18px 18px 16px}
  .event-body h3{margin:0;font-size:1.05rem;color:var(--heading-color);font-weight:600;line-height:1.55;min-height:3em}
  .event-body hr{border:0;border-top:1px solid var(--line);margin:14px 0 12px}
  .event-meta{display:flex;justify-content:flex-start;font-size:.85rem;color:var(--muted)}
  .event-date{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-weight:600}
  @media (max-width:880px){.grid-events{grid-template-columns:1fr}}

  /* ============================================================
     PROJECTS — 3 white cards with logos + brand-art decoration
     ============================================================ */
  /* Group 400.svg (LEFT side) + Group 258.svg (RIGHT side) decorations — exact live positions */
  .projects-section{position:relative;overflow:hidden;background:#f7fafc;padding-block:90px 90px;min-height:384px}
  /* Group 400 at top-left of section: 486×232 */
  .projects-section::before{content:"";position:absolute;top:0;left:0;width:486px;height:232px;
    background:url('../assets/logos/Group 400.svg') no-repeat top left;background-size:486px 232px;
    pointer-events:none;z-index:1}
  /* Group 258 (teal swoosh + drop) at top, positioned to the LEFT of the heading column */
  .projects-section::after{content:"";position:absolute;top:40px;right:320px;width:122px;height:108px;
    background:url('../assets/logos/Group 258.svg') no-repeat top left;background-size:122px 108px;
    pointer-events:none;z-index:1}
  .projects-section .container{position:relative;z-index:2}
  /* Projects section: heading on RIGHT, 3 cards on LEFT side-by-side (matches live layout exactly) */
  .projects-section .container{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
  .projects-section .section-head{flex:0 0 264px;flex-direction:column;align-items:flex-end;margin-bottom:0;text-align:end}
  .projects-section .section-head > div{order:1}
  .projects-section .section-head h2{font-size:32px;line-height:1.35;white-space:normal}
  .projects-section .section-head .more{margin-top:10px}
  .grid-projects{display:grid;grid-template-columns:repeat(3,280px);gap:24px;margin-top:0;position:relative;z-index:2;flex:1}
  .project-card{background:#fff;border-radius:8px;padding:30px 24px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);text-decoration:none;box-shadow:0 4px 18px rgba(13,27,42,.06);width:280px;height:200px;transition:.2s}
  .project-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(13,27,42,.12)}
  .project-card img{max-width:85%;max-height:120px;height:auto;width:auto;object-fit:contain}
  @media (max-width:880px){.grid-projects{grid-template-columns:1fr}}

  /* ============================================================
     QUICK LINKS BAR — teal gradient strip with 4 items
     ============================================================ */
  .quick-links-section{margin:60px 0 0;padding:0}
  .quick-links{background:linear-gradient(90deg,#1ac4cf 0%,#0d8a92 50%,#17658B 100%);display:flex;align-items:center;justify-content:space-around;padding:24px;color:#fff;font-weight:700;gap:10px;flex-wrap:wrap}
  .quick-links a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-size:.95rem;transition:opacity .15s;position:relative}
  .quick-links a:hover{opacity:.85}
  .quick-links a .sep{opacity:.45;font-size:1.4rem;margin-inline-start:18px;display:inline-block}
  @media (max-width:880px){.quick-links{flex-direction:column;gap:18px;align-items:flex-start}.quick-links a .sep{display:none}}

  /* ============================================================
     CONTACT SECTION — dark navy with map + contact card
     ============================================================ */
  .contact-section{background:var(--navy);color:#fff;padding-block:60px 70px}
  .contact-section h3{color:#fff;margin:0 0 16px;font-size:1.1rem;font-weight:700}
  .contact-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:30px;align-items:start}
  .map-block .map{aspect-ratio:21/9;border-radius:8px;overflow:hidden;background:#0a2a3f}
  .contact-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:24px}
  .contact-item{display:flex;align-items:center;gap:14px;padding:14px 4px;color:#cfdde6}
  .contact-item + .contact-item{border-top:1px solid rgba(255,255,255,.06)}
  .contact-item svg{color:var(--brand)}
  .contact-item b{display:block;color:var(--brand);font-weight:700;font-size:.92rem;margin-bottom:2px}
  .contact-item span{color:#aec5cf;font-size:.92rem;letter-spacing:.02em}
  @media (max-width:880px){.contact-grid{grid-template-columns:1fr}}

  /* ============================================================
     FOOTER
     ============================================================ */
  /* Footer — single horizontal line (matches live site) */
  footer.site{background:var(--navy);color:#aec5cf;padding-block:18px;margin-top:0;border-top:1px solid rgba(255,255,255,.06)}
  footer.site .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  footer.site .social{display:flex;gap:10px;align-items:center}
  footer.site .social a{display:inline-grid;place-items:center;width:28px;height:28px;color:#aec5cf;transition:.15s}
  footer.site .social a:hover{color:var(--brand-3)}
  footer.site .links{display:flex;gap:24px}
  footer.site .links a{color:#aec5cf;font-size:.9rem;text-decoration:none}
  footer.site .links a:hover{color:#fff}
  footer.site .copyright{color:#aec5cf;font-size:.88rem}
  @media (max-width:780px){footer.site .row{justify-content:center;text-align:center}}

  /* ============================================================
     CMS UI
     ============================================================ */
  .fab{position:fixed;bottom:24px;inset-inline-start:24px;background:var(--brand);color:#fff;border:0;border-radius:999px;padding:14px 22px;font-weight:800;box-shadow:0 14px 36px rgba(21,165,159,.45);display:none;align-items:center;gap:8px;z-index:90;font-size:.95rem}
  .fab:hover{background:var(--brand-2)}
  body.cms-on .fab{display:inline-flex}

  /* Modal */
  .modal{position:fixed;inset:0;background:rgba(13,39,49,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;z-index:200}
  .modal.open{display:flex}
  .modal .panel{background:#fff;border-radius:var(--r-lg);max-width:680px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
  .modal header{background:var(--brand);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .modal header h2{margin:0;font-size:1.2rem;font-weight:800}
  .modal header button{background:transparent;color:#fff;border:0;font-size:1.6rem;line-height:1;padding:0;width:32px;height:32px}
  .modal .content{padding:24px}
  .modal label{display:block;margin-bottom:14px;font-weight:600;color:var(--ink-2);font-size:.92rem}
  .modal label small{font-weight:400;color:var(--muted);margin-inline-start:6px}
  .modal input[type=text],.modal input[type=url],.modal input[type=date],.modal input[type=password],.modal select,.modal textarea{
    width:100%;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font:inherit;background:#fff;margin-top:6px;transition:.15s;color:var(--ink)}
  .modal input:focus,.modal textarea:focus,.modal select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,165,159,.14)}
  .modal textarea{min-height:140px;resize:vertical;font-family:inherit}
  .modal .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .modal .actions{display:flex;gap:10px;padding-top:16px;border-top:1px solid var(--line);margin-top:16px}
  .modal .btn-primary{background:var(--brand);color:#fff;padding:10px 22px;border:0;border-radius:var(--r);font-weight:700}
  .modal .btn-primary:hover{background:var(--brand-2)}
  .modal .btn-cancel{background:transparent;color:var(--muted);border:1px solid var(--line);padding:10px 18px;border-radius:var(--r);font-weight:600}
  .modal .help{background:var(--brand-soft);border:1px solid var(--brand);border-inline-start:4px solid var(--brand);border-radius:var(--r);padding:12px 14px;color:var(--ink-2);font-size:.9rem;margin-bottom:16px}
  .modal .help code{background:#fff;padding:2px 6px;border-radius:3px;border:1px solid var(--line);color:var(--brand-2);font-weight:700}

  /* Toast */
  .toast{position:fixed;bottom:24px;inset-inline-end:24px;background:var(--brand);color:#fff;padding:14px 20px;border-radius:var(--r);box-shadow:var(--shadow);opacity:0;transform:translateY(20px);transition:.25s;z-index:300;font-weight:700}
  .toast.show{opacity:1;transform:none}
  .toast.err{background:#c0392b}

  /* ============================================================
     COOKIE CONSENT BANNER
     ============================================================ */
  .cookie{position:fixed;bottom:0;left:0;right:0;background:var(--ink-2);color:#fff;padding:18px 20px;z-index:150;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(110%);transition:transform .4s ease}
  .cookie.show{transform:none}
  .cookie .inner{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .cookie p{margin:0;flex:1;min-width:240px;font-size:.92rem;line-height:1.6}
  .cookie a{color:var(--brand-3);text-decoration:underline}
  .cookie .actions{display:flex;gap:10px}
  .cookie button{padding:10px 20px;border-radius:var(--r);font-weight:700;border:0;cursor:pointer;font:inherit}
  .cookie .accept{background:var(--brand);color:#fff}
  .cookie .accept:hover{background:var(--brand-2)}
  .cookie .decline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
  .cookie .decline:hover{background:rgba(255,255,255,.1)}

  /* Touch hint — only show on touch devices */
  .swipe-hint{display:none;font-size:.78rem;color:var(--muted);text-align:center;margin-top:6px}
  @media (hover:none){.swipe-hint{display:block}}

  /* Article detail view */
  .article-detail{display:none}
  .article-detail.show{display:block}
  .article-detail .hero-img{aspect-ratio:21/9;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px}
  .article-detail .hero-img img{width:100%;height:100%;object-fit:cover}
  .article-detail h1{color:var(--ink-2);font-size:2.2rem;margin:0 0 12px;font-weight:900;line-height:1.2}
  .article-detail .meta{color:var(--muted);margin-bottom:24px;display:flex;gap:14px;flex-wrap:wrap;font-size:.92rem;align-items:center}
  .article-detail .meta .cat{background:var(--brand);color:#fff;padding:4px 14px;border-radius:var(--r);font-weight:700;font-size:.82rem}
  .article-detail .body-content{font-size:1.05rem;line-height:1.95;color:#2c3a48;white-space:pre-wrap;max-width:760px}
  .article-detail .back{display:inline-flex;align-items:center;gap:6px;color:var(--brand);margin-bottom:24px;font-weight:700}