/* David F. Mewa — clean PHP rebuild, styled to match the original hyperx/"Royal" theme.
   Light theme: white bg, #3a3a3a text, #e5ae47 gold accent, Lato body, fold (hamburger) menu. */
:root{
  --bg:#ffffff; --bg-2:#fcfcfc; --text:#3a3a3a; --muted:#7a7a7a;
  --line:#e6e6e6; --accent:#fcdf23; --accent-d:#e6c400;
  --hero-title:#d1d1d1; --hero-sub:#c4c4c4;
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Lato',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none;transition:color .2s}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Preloader (logo on load / between pages, like the original) ---------- */
.preloader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:#fff;opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s;
  animation:prldSafety 0s linear 5s forwards}
body.loaded .preloader{opacity:0;visibility:hidden}
.preloader-logo{display:block;width:90px;height:90px;animation:prldPulse 1.15s ease-in-out infinite}
.preloader-logo img{width:100%;height:100%;border-radius:50%;display:block}
@keyframes prldPulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1);opacity:1}}
@keyframes prldSafety{to{opacity:0;visibility:hidden}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand img{border-radius:50%;width:78px;height:78px}
.nav-toggle{background:none;border:0;cursor:pointer;width:26px;height:18px;padding:0;position:relative;z-index:60}
.nav-toggle span{display:block;height:2px;background:var(--text);border-radius:1px;margin:4px 0;transition:.25s}
.nav-toggle:hover span{background:var(--accent)}

/* ---------- Fold / overlay menu ---------- */
/* dark blue-gray overlay (matches live site rgba(68,84,91,.9)); wipes in left->right via clip-path */
.overlay-menu{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;
  background:rgba(68,84,91,.9);opacity:0;visibility:hidden;clip-path:inset(0 0 0 100%);
  transition:clip-path .45s ease,opacity .3s ease,visibility .45s}
.overlay-menu.open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
.overlay-close{position:absolute;top:30px;right:34px;background:none;border:0;color:#ddd11f;
  font-size:46px;line-height:1;cursor:pointer;opacity:.9}
.overlay-close:hover{opacity:1;color:#fff}
.overlay-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 52px;justify-content:center}
.overlay-links a{font-family:'Lato',sans-serif;font-size:18px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#ddd11f;opacity:0;transform:translateY(12px);transition:color .2s}
.overlay-menu.open .overlay-links a{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.overlay-menu.open .overlay-links li:nth-child(1) a{transition-delay:.08s}
.overlay-menu.open .overlay-links li:nth-child(2) a{transition-delay:.16s}
.overlay-menu.open .overlay-links li:nth-child(3) a{transition-delay:.24s}
.overlay-menu.open .overlay-links li:nth-child(4) a{transition-delay:.32s}
.overlay-links a:hover{color:#fff}
.overlay-links a.active{color:#fff}

/* ---------- Hero (banner image + overlaid title) ---------- */
.hero{position:relative;height:clamp(150px,16vw,235px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1a1a1a}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.25)}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.22)}
.hero-overlay{position:relative;text-align:center;padding:0 20px}
.hero h1{margin:0;font-family:'Open Sans',sans-serif;font-weight:300;
  font-size:clamp(38px,7.4vw,84px);line-height:1.04;letter-spacing:.04em;color:var(--hero-title)}
.hero-sub{margin:.05em 0 0;font-family:'Josefin Slab',serif;font-weight:400;
  font-size:clamp(22px,3.6vw,40px);letter-spacing:.03em;color:var(--hero-sub)}

/* ---------- Section divider headings ---------- */
.divider-head{display:flex;align-items:center;gap:22px;margin:0 0 30px}
.divider-head::after{content:"";flex:1;height:1px;background:var(--line)}
.divider-head span{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.divider-head.center{justify-content:center}
.divider-head.center::before{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Portfolio ---------- */
.portfolio{padding:50px 24px 80px}
.filters{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;margin-bottom:40px}
.filter{background:none;border:0;cursor:pointer;color:var(--text);
  font-family:'Lato',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;transition:.2s}
.filter:hover,.filter.active{color:#2b2b2b;background:#fcdf23}

/* uniform 16:9 grid, row-major (left-to-right) like the original */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{margin:0}
.card.hide{display:none}
.card-link{position:relative;display:block;overflow:hidden;background:#f3f3f3;box-shadow:0 1px 3px rgba(0,0,0,.12);aspect-ratio:16/9;padding-top:14px}
.card-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease,filter .6s}
.card-link:hover .card-thumb{transform:scale(1.39)}
.card-info{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;background:#fcdf23;opacity:0;transition:opacity .8s ease}
.card-link:hover .card-info{opacity:1}
.card-cat{order:2;font-style:italic;font-size:13px;color:#5d5a47;margin-top:8px}
.card-title{order:1;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#2b2b2b;line-height:1.45;max-width:94%}
.no-results{text-align:center;color:var(--muted);margin-top:30px}

/* ---------- Generic pages ---------- */
.page{padding:56px 24px 80px}

/* About */
.about-bio{max-width:980px;margin:0 auto}
.about-bio p{font-size:16px;color:#5a5a5a;margin:0}
.about-photo{margin:44px auto 0;max-width:520px}
.about-photo img{width:100%}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#2b2b2b;padding:13px 28px;border-radius:2px;
  font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--accent);cursor:pointer;transition:.2s}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn-block{display:block;width:100%;text-align:center}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form input,.contact-form textarea{
  background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--text);
  padding:13px 15px;font:inherit;font-size:15px;width:100%;transition:border-color .2s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a8a8a8}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form .math{display:flex;align-items:center;gap:12px;color:var(--text);font-size:15px}
.contact-form .math input{width:84px}
.contact-info p{margin:0 0 22px;color:#5a5a5a;border-bottom:1px solid var(--line);padding-bottom:22px}
.contact-info p:last-child{border-bottom:0}
.contact-info a{color:var(--text);font-weight:700;text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:14px 16px;border-radius:2px;margin-bottom:8px;font-size:15px}
.alert.success{background:#eef8f0;border:1px solid #8fce9f;color:#2c6e3e}
.alert.error{background:#fbeeee;border:1px solid #e3a3a3;color:#a23838}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:40px 0 34px;margin-top:30px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.socials{display:flex;gap:22px}
.socials a{color:var(--text);opacity:.75;transition:.2s}
.socials a:hover{color:var(--text);opacity:1}
.copy{margin:0;font-size:12px;letter-spacing:.18em;color:var(--muted)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(15,15,15,.92);padding:24px}
.lightbox.open{display:flex}
.lightbox-stage{width:min(1100px,100%);aspect-ratio:16/9}
.lightbox-frame{width:100%;height:100%}
.lightbox-frame iframe{width:100%;height:100%;border:0;background:#000}
.lightbox-close{position:absolute;top:16px;right:24px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer;opacity:.85}
.lightbox-close:hover{opacity:1;color:var(--accent)}
.lightbox-counter{position:absolute;top:26px;left:30px;color:#fff;font-size:14px;letter-spacing:.12em;opacity:.8;z-index:2}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.75;padding:14px 20px;z-index:2;transition:opacity .2s,color .2s}
.lightbox-nav:hover{opacity:1;color:var(--accent)}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}

/* ---------- Page transition (mimics the original "animsition" fade) ---------- */
main{animation:pageIn .55s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.is-leaving main{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;animation:none}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .header-inner{height:78px}
  .brand img{width:60px;height:60px}
  /* mobile: drop the menu items to the top of the screen instead of centering them */
  .overlay-menu{align-items:flex-start;padding-top:92px}
  .overlay-links{flex-direction:column;gap:26px;text-align:center}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .field-row{grid-template-columns:1fr}
}