/* ==========================================================================
   Guard Javidan — shared design system
   ========================================================================== */

/* ----- self-hosted fonts ----- */
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-latin-900-normal.woff2') format('woff2');font-weight:900;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-arabic-900-normal.woff2') format('woff2');font-weight:900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Lalezar';src:url('../fonts/lalezar-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Lalezar';src:url('../fonts/lalezar-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

/* ----- tokens & base ----- */
:root{--bg:#0D0D0D;--card:#2B1F1A;--border:#4A3527;--dim:#8B7355;--gold:#C8A96B;--gold-l:#d4b87a;--txt:#E8DCC0}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth;scrollbar-color:#6b5432 #0d0b08}

/* ----- Persepolis-column scrollbar, muted to the site's bronze theme ----- */
::-webkit-scrollbar{width:15px}
::-webkit-scrollbar-track{background:linear-gradient(90deg,#0a0806,#141008 50%,#0a0806);border-inline:1px solid #241a10}
::-webkit-scrollbar-thumb{
  border-radius:8px;
  background:
    /* capital: muted bronze cap + shadow ledge + second ledge */
    linear-gradient(180deg,#a98c52,#6b5432)              top    /100% 6px  no-repeat,
    linear-gradient(180deg,#241a10,transparent)          0 6px  /100% 3px  no-repeat,
    linear-gradient(180deg,#8a6f3f,#5c4726)              0 9px  /100% 5px  no-repeat,
    linear-gradient(180deg,#241a10,transparent)          0 14px /100% 3px  no-repeat,
    /* stepped base mirrored */
    linear-gradient(0deg,#a98c52,#6b5432)                bottom /100% 6px  no-repeat,
    linear-gradient(0deg,#241a10,transparent)            0 calc(100% - 6px) /100% 3px no-repeat,
    linear-gradient(0deg,#8a6f3f,#5c4726)                0 calc(100% - 9px) /100% 5px no-repeat,
    linear-gradient(0deg,#241a10,transparent)            0 calc(100% - 14px)/100% 3px no-repeat,
    /* fluted shaft: subtle grooves over deep bronze, in the card/border palette */
    repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,#2B1F1A,#6b5432 30%,#8a6f3f 50%,#6b5432 70%,#2B1F1A)}
/* full gold only when interacting */
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(180deg,#e0c890,#a9854a)              top    /100% 6px  no-repeat,
    linear-gradient(180deg,#2b2014,transparent)          0 6px  /100% 3px  no-repeat,
    linear-gradient(180deg,#c8a96b,#8a6f3f)              0 9px  /100% 5px  no-repeat,
    linear-gradient(180deg,#2b2014,transparent)          0 14px /100% 3px  no-repeat,
    linear-gradient(0deg,#e0c890,#a9854a)                bottom /100% 6px  no-repeat,
    linear-gradient(0deg,#2b2014,transparent)            0 calc(100% - 6px) /100% 3px no-repeat,
    linear-gradient(0deg,#c8a96b,#8a6f3f)                0 calc(100% - 9px) /100% 5px no-repeat,
    linear-gradient(0deg,#2b2014,transparent)            0 calc(100% - 14px)/100% 3px no-repeat,
    repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,#4a3820,#a98c52 30%,#c8a96b 50%,#a98c52 70%,#4a3820)}
body{font-family:'Vazirmatn',Tahoma,sans-serif;font-size:17px;background:var(--bg);color:var(--txt);direction:rtl;text-align:right;line-height:1.7;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
h1,h2,h3,.display{font-family:'Lalezar','Vazirmatn',serif;font-weight:400;letter-spacing:.5px}
.gold{color:var(--gold)}

/* ----- visually-hidden utility (screen-reader-only content) ----- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ----- skip link: hidden until keyboard-focused, then pinned top-right (RTL) ----- */
.gj-skip-link:focus{position:fixed;top:10px;right:10px;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;z-index:100000;background:var(--gold);color:var(--bg);padding:10px 18px;border-radius:8px;font-weight:700;box-shadow:0 8px 25px rgba(0,0,0,.4)}

/* ----- Achaemenid cursor: interactive elements ONLY ----- */
a,button,input,select,textarea,label,summary,[role="button"],.clickable{
  cursor:url('../img/cursor-soldier.png') 8 4,pointer}

/* ----- header chrome ----- */
header{position:sticky;top:0;z-index:9999;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 0}
.head-wrap{max-width:1280px;margin:0 auto;padding:0 25px;display:flex;align-items:center;gap:18px}
.logo{flex-shrink:0}
.logo img{height:70px;width:auto;max-width:none}
nav{margin-right:auto;min-width:0}
nav>ul{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-start}
nav>ul>li{position:relative}
nav>ul>li>a{display:block;padding:12px 13px;font-size:14.5px;font-weight:600;color:var(--txt);border-radius:6px;transition:.2s;white-space:nowrap;font-family:'Vazirmatn',sans-serif}
nav>ul>li>a:hover,nav a.active{background:var(--card);color:var(--gold)}
.arrow{font-size:9px;margin-right:4px;color:var(--dim)}
.dropdown{display:none;position:absolute;top:100%;right:0;min-width:210px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 25px rgba(0,0,0,.4);z-index:10000;padding:6px 0}
nav>ul>li:hover>.dropdown,nav>ul>li:focus-within>.dropdown{display:block}
.dropdown li a{display:block;padding:9px 18px;font-size:14px;color:var(--txt);transition:.2s;border-radius:4px;margin:1px 6px}
.dropdown li a:hover{background:rgba(200,169,107,.12);color:var(--gold)}

/* ----- footer chrome ----- */
footer{background:linear-gradient(180deg,var(--bg) 0%,#1a1510 100%);border-top:1px solid var(--border);padding:50px 0 0;margin-top:35px}
.footer-grid{max-width:1200px;margin:0 auto;padding:0 30px;display:flex;flex-wrap:wrap;gap:35px}
.footer-col{flex:1;min-width:180px}
.footer-col h5{font-size:17px;font-weight:700;color:var(--gold);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:inline-block;font-family:'Vazirmatn',sans-serif}
.footer-col ul li{margin-bottom:7px}
.footer-col ul li a{font-size:14px;color:var(--dim);transition:.2s}
.footer-col ul li a:hover{color:var(--gold);padding-right:4px}
.social-list{display:flex;gap:10px;margin-top:10px}
.social-list a{display:flex;justify-content:center;align-items:center;width:40px;height:40px;background:var(--card);border:1px solid var(--border);border-radius:50%;transition:.3s}
.social-list a svg{width:18px;height:18px;fill:var(--txt);transition:.3s}
.social-list a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.social-list a:hover svg{fill:var(--bg)}
.footer-bottom{margin-top:35px;padding:18px 30px;border-top:1px solid var(--border);display:flex;justify-content:center;align-items:center;gap:14px}
.footer-bottom img{width:120px;opacity:.7}
.footer-bottom p{color:var(--dim);font-size:14px}
.hl{background:var(--gold);color:var(--bg);padding:2px 10px;border-radius:4px;font-weight:800;display:inline-block}
/* books marquee overlapping the footer (landing page) */
.has-books-overlap footer{padding-top:150px}

/* ----- layout helpers ----- */
.section{max-width:1200px;margin:50px auto;padding:0 30px}
.section-title{text-align:center;font-size:32px;color:var(--gold);margin-bottom:35px;position:relative}
.section-title::after{content:"";display:block;width:74px;height:3px;margin:12px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),#fff2cf,var(--gold),transparent);background-size:200% 100%;animation:titleShimmer 3.5s linear infinite}
@keyframes titleShimmer{to{background-position:-200% 0}}
.btn{display:inline-block;padding:11px 26px;font-size:15px;font-family:'Vazirmatn',sans-serif;font-weight:700;border-radius:8px;border:none;background:var(--gold);color:var(--bg);transition:.3s}
.btn:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 5px 18px rgba(200,169,107,.3);color:var(--bg)}
.crumbs{max-width:1200px;margin:18px auto 0;padding:0 30px;font-size:14px;color:var(--dim)}
.crumbs a:hover{color:var(--gold)}
.empty{text-align:center;color:var(--dim);padding:60px 20px;font-size:16px}
.empty::before{content:"◆";display:block;color:var(--gold);font-size:22px;margin-bottom:12px}

/* ----- page hero ----- */
.page-hero{position:relative;padding:90px 30px 55px;text-align:center;overflow:hidden;border-bottom:1px solid var(--border);background:radial-gradient(ellipse 90% 70% at 50% -10%,rgba(200,169,107,.10),transparent 60%)}
.page-hero .watermark{position:absolute;inset:0;background:url('../img/soldier-watermark.png') center 20%/280px no-repeat;opacity:.05;pointer-events:none}
.page-hero h1{font-size:clamp(34px,6vw,64px);color:var(--txt);position:relative;animation:riseIn .8s ease both}
.page-hero h1 .gold{color:var(--gold)}
.page-hero .sub{color:var(--dim);max-width:560px;margin:12px auto 0;position:relative;animation:riseIn .8s .15s ease both}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* golden ember particles (landing hero + page heroes) */
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-particles i{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#ffe9b8 0%,rgba(200,169,107,.75) 55%,transparent 75%);opacity:0;animation:ember linear infinite}
@keyframes ember{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:.85}80%{opacity:.2}100%{transform:translate(var(--dx,20px),-640px) scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-particles i{animation:none;opacity:0}}

/* ----- diamond divider ----- */
.divider-diamond{display:flex;align-items:center;gap:14px;justify-content:center;margin:26px auto;color:var(--gold);font-size:13px;animation:diamondGlow 3s ease-in-out infinite}
@keyframes diamondGlow{0%,100%{text-shadow:0 0 4px rgba(200,169,107,.15)}50%{text-shadow:0 0 16px rgba(200,169,107,.85)}}
.divider-diamond::before,.divider-diamond::after{content:"";height:1px;width:min(160px,28vw)}
.divider-diamond::before{background:linear-gradient(90deg,transparent,var(--gold))}
.divider-diamond::after{background:linear-gradient(270deg,transparent,var(--gold))}

/* ----- inscription frame (Persepolis-inspired) ----- */
.frame-kat{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:26px;transition:border-color .4s,box-shadow .4s}
.frame-kat:hover{border-color:rgba(200,169,107,.55);box-shadow:0 10px 40px rgba(200,169,107,.12)}
.frame-kat::before{content:"";position:absolute;inset:7px;border:1px solid rgba(200,169,107,.3);border-radius:8px;pointer-events:none}
.frame-kat::after{content:"◆";position:absolute;top:-12px;right:50%;transform:translateX(50%);color:var(--gold);font-size:14px;background:var(--bg);padding:0 10px}

/* ----- scroll reveal ----- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ----- animated waveform ----- */
.wave{display:flex;align-items:flex-end;gap:5px;justify-content:center;height:70px;margin:28px auto 0;max-width:520px}
.wave i{flex:1;max-width:6px;border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(200,169,107,.2));animation:wv 1.2s ease-in-out infinite}
@keyframes wv{0%,100%{height:18%}50%{height:100%}}

/* ----- category grid ----- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;max-width:1200px;margin:0 auto;padding:45px 30px 70px}
.cat-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.35s;display:block}
.cat-card img{width:100%;height:150px;object-fit:cover;opacity:.75;transition:.35s}
.cat-card h3{padding:14px 16px;color:var(--gold);font-size:20px}
.cat-card .num{position:absolute;top:8px;left:12px;font-family:'Lalezar',serif;color:rgba(232,220,192,.55);font-size:24px;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.cat-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 14px 35px rgba(200,169,107,.18)}
.cat-card:hover img{opacity:1;transform:scale(1.06)}

/* ----- custom audio player ----- */
.gj-audio{display:flex;align-items:center;gap:14px;background:rgba(13,13,13,.6);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:14px 0}
.gj-audio .pp{width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--bg);border:none;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s;font-family:'Vazirmatn',sans-serif}
.gj-audio .pp:hover{background:var(--gold-l);transform:scale(1.06)}
.gj-audio .bar{flex:1;height:6px;border-radius:3px;background:var(--border);position:relative;cursor:url('../img/cursor-soldier.png') 8 4,pointer}
.gj-audio .bar b{position:absolute;top:0;bottom:0;right:0;width:0%;background:var(--gold);border-radius:3px}
.gj-audio .t{font-size:12px;color:var(--dim);min-width:86px;text-align:center;direction:ltr;font-variant-numeric:tabular-nums}
.gj-audio .err{color:var(--dim);font-size:13px}

/* ----- comet ring (trailing light around search box) ----- */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.comet-ring{position:relative;border-radius:16px;max-width:484px;width:100%}
.comet-ring::before{content:"";position:absolute;inset:-2px;border-radius:18px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 72%,rgba(200,169,107,.28) 84%,var(--gold) 95%,#fff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:2px;
  animation:cometspin 4s linear infinite}
@keyframes cometspin{to{--a:360deg}}
@supports not (background:conic-gradient(from var(--a),red,blue)){
  .comet-ring::before{background:conic-gradient(transparent 0 72%,rgba(200,169,107,.28) 84%,var(--gold) 95%,#fff 100%);animation:none}}

/* ----- resume timeline ----- */
.timeline{position:relative;max-width:820px;margin:0 auto;padding:20px 30px 70px}
.timeline::before{content:"";position:absolute;top:0;bottom:0;right:44px;width:2px;background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent)}
.tl-item{position:relative;padding:0 76px 36px 0}
.tl-item::before{content:"◆";position:absolute;right:36px;top:0;color:var(--gold);background:var(--bg);font-size:17px;line-height:1.4}
.tl-item h3{color:var(--gold);font-size:22px}
.tl-item .when{color:var(--dim);font-size:14px;margin-bottom:6px}

/* ----- media (video/meeting) cards ----- */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;max-width:1200px;margin:0 auto;padding:45px 30px 70px}
.media-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.3s}
.media-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.media-card video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.media-card .mc-body{padding:16px 18px}
.media-card h3{color:var(--gold);font-size:19px;margin-bottom:4px}
.media-card .when{color:var(--dim);font-size:13px;margin-bottom:8px}
.media-card p{font-size:14.5px;color:var(--txt)}

/* ----- clickable video thumbnail (opens lightbox) ----- */
.vid-thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vid-thumb img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:.4s}
.vid-thumb .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid-thumb .play-badge span{width:62px;height:62px;border-radius:50%;background:rgba(13,13,13,.55);border:2px solid var(--gold);color:var(--gold);font-size:22px;display:flex;align-items:center;justify-content:center;padding-right:4px;transition:.35s;backdrop-filter:blur(4px)}
.vid-thumb:hover img{opacity:1;transform:scale(1.06)}
.vid-thumb:hover .play-badge span{background:var(--gold);color:var(--bg);transform:scale(1.12);box-shadow:0 0 30px rgba(200,169,107,.5)}
/* "unavailable media" overlay for training/meeting thumbs whose video/media
   ACF field is empty (page-trainings.php, page-meetings.php via
   template-parts/training-card.php + meeting-card.php) */
.vid-thumb .soon-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(13,13,13,.55);color:var(--gold);font-size:14px;font-weight:700;text-align:center;padding:0 12px}

/* ----- large video lightbox ----- */
.gj-modal{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.gj-modal .gm-box{position:relative;width:min(1100px,94vw);animation:riseIn .35s ease both}
.gj-modal h3{color:var(--gold);text-align:center;margin-bottom:12px;font-size:20px}
.gj-modal video{width:100%;max-height:80vh;border:1px solid var(--gold);border-radius:12px;background:#000;box-shadow:0 20px 80px rgba(0,0,0,.6),0 0 60px rgba(200,169,107,.12)}
.gj-modal .gm-close{position:absolute;top:-14px;left:-10px;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--bg);border:none;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.5);transition:.25s;z-index:2}
.gj-modal .gm-close:hover{transform:scale(1.12) rotate(90deg)}

/* ----- supervisor portrait ----- */
.portrait{width:172px;height:172px;margin:0 auto 20px;border-radius:50%;padding:5px;border:2px solid var(--gold);position:relative;box-shadow:0 0 44px rgba(200,169,107,.28);background:var(--card)}
.portrait::before{content:"";position:absolute;inset:-9px;border:1px dashed rgba(200,169,107,.28);border-radius:50%;animation:spinSlow 26s linear infinite}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1}
@keyframes spinSlow{to{transform:rotate(360deg)}}
/* large variant (client: portrait displayed big) */
.portrait-lg{width:min(280px,64vw);height:min(280px,64vw)}
.portrait-lg::after{content:"";position:absolute;inset:-22px;border:1px solid rgba(200,169,107,.14);border-radius:50%}
/* floating bubbles around the portrait — bigger, more transparent circles */
.portrait .pb{position:absolute;border-radius:50%;background:rgba(200,169,107,.06);border:1px solid rgba(200,169,107,.2);pointer-events:none;animation:pbFloat ease-in-out infinite alternate}
.portrait .pb:nth-child(1){width:64px;height:64px;top:-34px;right:-46px;animation-duration:5s}
.portrait .pb:nth-child(2){width:38px;height:38px;top:36%;right:-58px;animation-duration:6.5s;animation-delay:.8s}
.portrait .pb:nth-child(3){width:50px;height:50px;bottom:-26px;right:-18px;animation-duration:5.6s;animation-delay:1.6s}
.portrait .pb:nth-child(4){width:70px;height:70px;top:-40px;left:-48px;animation-duration:7s;animation-delay:.4s}
.portrait .pb:nth-child(5){width:34px;height:34px;top:42%;left:-56px;animation-duration:6s;animation-delay:2s}
.portrait .pb:nth-child(6){width:46px;height:46px;bottom:-30px;left:-14px;animation-duration:5.2s;animation-delay:1.2s}
@keyframes pbFloat{from{transform:translateY(6px) scale(.96)}to{transform:translateY(-10px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.portrait::before,.portrait .pb{animation:none}}

/* ----- about feature rows ----- */
.feature-row{display:flex;align-items:center;gap:50px;max-width:1100px;margin:0 auto 90px;padding:0 30px}
.feature-row.reverse{flex-direction:row-reverse}
.feature-row .fr-img{flex:1;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.feature-row .fr-img img{width:100%;height:380px;object-fit:cover;transition:.5s}
.feature-row .fr-img:hover img{transform:scale(1.07)}
.feature-row .fr-text{flex:1}
.feature-row h2{font-size:33px;color:var(--gold);margin-bottom:12px}
.feature-row p{color:var(--txt);font-size:16.5px;line-height:1.9}

/* ----- PDF frame ----- */
.pdf-frame{max-width:960px;margin:40px auto 70px;padding:14px}
.pdf-frame iframe{width:100%;height:78vh;border:none;border-radius:8px;background:#151515}

/* ----- responsive ----- */
@media(max-width:1280px){nav>ul>li>a{padding:10px 10px;font-size:13.5px}}
@media(max-width:1080px){nav>ul>li>a{padding:9px 8px;font-size:13px}.logo img{height:56px}}
@media(max-width:1024px){.feature-row{gap:30px}}
@media(max-width:768px){
header{position:static}  /* 3-row header must not stay stuck over mobile content */
.head-wrap{flex-direction:column;gap:12px}
.logo img{height:60px}
nav>ul{flex-wrap:wrap;justify-content:center}
.footer-grid{flex-direction:column}
.footer-bottom{flex-direction:column;text-align:center}
.feature-row,.feature-row.reverse{flex-direction:column}
.feature-row .fr-img img{height:240px}
.has-books-overlap footer{padding-top:110px}
.page-hero{padding:60px 20px 40px}
}

/* ================= client refinements (round: Elementor hero polish) ================= */
/* #1 — hero Elementor sections span the full landing width (not the boxed 1140) */
.elementor-section.page-hero > .elementor-container,
.elementor-section.gj-hero-full > .elementor-container,
.elementor-section:has(.hero-unified) > .elementor-container,
.elementor-section:has(.marquee-wrap) > .elementor-container,
.elementor-section:has(.page-hero) > .elementor-container{max-width:100%!important;padding-left:0;padding-right:0}
.elementor-section.page-hero,.elementor-section.gj-hero-full{padding-left:0;padding-right:0}
/* #6 — hero titles are WHITE + GOLD (override Elementor's default blue heading colour)
   with an entrance + gold shimmer animation */
.page-hero .elementor-heading-title,
.about-display .elementor-heading-title{color:var(--txt)!important;animation:riseIn .8s ease both}
.page-hero .elementor-heading-title .gold,
.about-display .elementor-heading-title .gold{
  color:var(--gold)!important;
  background:linear-gradient(100deg,var(--gold) 42%,#fff2cf 50%,var(--gold) 58%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:goldshine 5s linear infinite}
@keyframes goldshine{to{background-position:-220% 0}}
/* #8 / #9 — the line under the title is single-line, centred directly beneath it */
.page-hero .sub,.about-display .tag{max-width:none!important;white-space:nowrap}
@media(max-width:640px){.page-hero .sub,.about-display .tag{white-space:normal}}
/* #7 — supervisor photo stays inside the circle, with a tasteful entrance */
.portrait img{border-radius:50%!important}
.portrait-lg{animation:portraitIn 1s cubic-bezier(.2,.7,.3,1.2) both}
@keyframes portraitIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}