:root{
      /* Global palette (Elementor-ready) */
      --bg-dark:#121417;
      --bg-secondary:#1A1E23;
      --text-primary:#E6E1D8;
      --text-secondary:#A6A29A;
      --accent:#8E7A4A;
      --border:#2A2F36;
      --muted:#6F6B64;

      --container: 1040px;
      --pad: 24px;
      --radius: 8px;
      --lh: 1.65;
    }

    /* Base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      line-height:var(--lh);
      color:var(--text-primary);
      background:var(--bg-dark);
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    a{color:var(--text-primary); text-decoration:none}
    a:hover{color:var(--accent)}
    .container{max-width:var(--container); margin:0 auto; padding:0 var(--pad)}
    .narrow{max-width:760px}
    .muted{color:var(--text-secondary)}
    .chip{
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      padding:10px 12px;
      border-radius:999px;
      color:var(--text-secondary);
      font-size:14px;
    }
    .divider{height:1px; background:var(--border); margin:28px 0}
    .spacer{height:40px}
    .card{
      border:1px solid var(--border);
      background:rgba(255,255,255,0.02);
      border-radius:var(--radius);
      padding:18px;
    }
    .grid{display:grid; gap:18px}
    @media (min-width:860px){
      .grid-3{grid-template-columns:repeat(3,1fr)}
      .grid-2{grid-template-columns:repeat(2,1fr)}
    }

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(120%) blur(10px);
      background:rgba(18,20,23,0.72);
      border-bottom:1px solid var(--border);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:baseline; gap:10px;
      letter-spacing:0.2px;
      white-space:nowrap;
    }
    .brand b{font-size:16px}
    .brand span{font-size:12px; color:var(--text-secondary)}
    nav ul{list-style:none; padding:0; margin:0; display:flex; gap:14px; flex-wrap:wrap}
    nav a{
      font-size:13px;
      color:var(--text-secondary);
      padding:8px 10px;
      border-radius:8px;
    }
    nav a:hover{color:var(--text-primary); background:rgba(255,255,255,0.03)}
    .cta{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 12px;
      border-radius:6px;
      border:1px solid rgba(142,122,74,0.55);
      background:rgba(142,122,74,0.12);
      color:var(--text-primary);
      font-size:13px;
      white-space:nowrap;
    }
    .cta:hover{background:rgba(142,122,74,0.18); color:var(--text-primary)}

    /* Hero */
    .hero{
      padding:72px 0 48px;
    }
    .hero h1{
      margin:0 0 10px;
      font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
      font-weight:600;
      letter-spacing:0.2px;
      font-size:42px;
      line-height:1.15;
    }
    .hero p{margin:0; max-width:72ch; color:var(--text-secondary); font-size:16px}
    .hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:12px 14px;
      border-radius:6px;
      border:1px solid var(--border);
      background:rgba(255,255,255,0.03);
      color:var(--text-primary);
      font-size:14px;
    }
    .btn:hover{background:rgba(255,255,255,0.05)}
    .btn.primary{
      border-color:rgba(142,122,74,0.7);
      background:rgba(142,122,74,0.18);
    }
    .btn.primary:hover{background:rgba(142,122,74,0.24)}
    .section{padding:42px 0}
    .section h2{
      margin:0 0 12px;
      font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
      font-weight:600;
      font-size:26px;
      line-height:1.25;
    }
    .section h3{
      margin:0 0 10px;
      font-weight:600;
      font-size:16px;
      line-height:1.25;
    }
    .section p{margin:0 0 12px; color:var(--text-secondary)}
    .meta{
      display:grid; gap:8px;
      padding:14px;
      border-radius:var(--radius);
      border:1px solid var(--border);
      background:rgba(255,255,255,0.02);
      font-size:14px;
      color:var(--text-secondary);
    }
    .meta b{color:var(--text-primary); font-weight:600}
    .pillars .card h3{margin-top:2px}
    .pillars .card p{margin-bottom:0}
    .kicker{
      display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;
    }
    .note{
      border-left:2px solid rgba(142,122,74,0.7);
      padding-left:12px;
      color:var(--text-secondary);
      margin:14px 0 0;
    }
    footer{
      padding:34px 0;
      border-top:1px solid var(--border);
      color:var(--text-secondary);
    }
    .small{font-size:13px}
    .anchor{scroll-margin-top:92px}
  
    /* Image slots (placeholders) */
    .img-slot{
      border:1px dashed rgba(142,122,74,0.55);
      background:rgba(142,122,74,0.06);
      border-radius:12px;
      padding:16px;
      color:var(--text-secondary);
      display:flex;
      align-items:flex-start;
      gap:12px;
      min-height:120px;
    }
    .img-slot .badge{
      width:44px; height:44px;
      border-radius:12px;
      border:1px solid rgba(142,122,74,0.45);
      background:rgba(142,122,74,0.10);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }
    .img-slot .badge svg{width:22px; height:22px; opacity:0.9}
    .img-slot b{color:var(--text-primary)}
    .img-slot .small{font-size:13px}
    .lang-btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 12px;
      border-radius:6px;
      border:1px solid var(--border);
      background:rgba(255,255,255,0.03);
      color:var(--text-secondary);
      font-size:13px;
      white-space:nowrap;
    }
    .lang-btn:hover{background:rgba(255,255,255,0.05); color:var(--text-primary)}

    /* Media (real images) */
    .media-frame{
      border:1px solid var(--border);
      background:rgba(255,255,255,0.02);
      border-radius:14px;
      overflow:hidden;
    }
    .media-img{
      display:block;
      width:100%;
      height:auto;
    }
    .media-caption{
      padding:12px 14px;
      border-top:1px solid var(--border);
      color:var(--text-secondary);
      font-size:13px;
    }
    .media-caption b{color:var(--text-primary)}

    /* Wide banners without forced cropping (background cover + foreground contain) */
    .banner{
      position:relative;
      height:260px;
      border-radius:14px;
      overflow:hidden;
      border:1px solid var(--border);
      background:rgba(255,255,255,0.02);
    }
    .banner::before{
      content:"";
      position:absolute; inset:0;
      background-image:var(--banner-url);
      background-size:cover;
      background-position:center;
      filter:blur(18px) saturate(115%);
      transform:scale(1.08);
      opacity:0.65;
    }
    .banner::after{
      content:"";
      position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(18,20,23,0.25), rgba(18,20,23,0.75));
    }
    .banner img{
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      object-fit:contain;
    }

    /* Small thumbs */
    .thumb-grid{
      display:grid;
      gap:12px;
    }
    @media (min-width:860px){
      .thumb-grid{grid-template-columns:repeat(3,1fr)}
    }