:root{
  --primary:#FF5A2A;
  --primary-2:#FF7A3D;
  --accent:#FFBF54;
  --text:#F6F3EF;
  --muted:#C9C3BC;
  --bg:#111111;
  --card:#1A1A1A;
  --smoke-1:#171614;
  --shadow: 0 20px 50px rgba(255,90,42,.18);
  --glow: 0 0 60px rgba(255,122,61,.35), 0 0 120px rgba(255,191,84,.18);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text);
  background: radial-gradient(800px 500px at 50% 0%, rgba(255,122,61,.10), transparent 60%),
              radial-gradient(600px 500px at 10% 100%, rgba(255,95,40,.12), transparent 60%),
              radial-gradient(600px 500px at 90% 100%, rgba(255,191,84,.10), transparent 60%),
              linear-gradient(180deg, var(--smoke-1), var(--bg));
  letter-spacing:0.2px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* wider container for big displays */
.container{width:min(92%, 1320px); margin-inline:auto}

/* NAVBAR */
.nav-wrap{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(17,17,17,0.3); border-bottom:1px solid rgba(255,191,84,.1)}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.logo{display:flex; align-items:center; gap:12px}
.logo img{width:40px; height:40px; filter: drop-shadow(0 0 14px rgba(255,122,61,.35));}
.brand{font-weight:800; letter-spacing:0.6px}
.brand .top{font-size:1.05rem}
.brand .sub{font-size:.7rem; color:var(--muted); letter-spacing:2px}
#burger{display:none; width:44px; height:44px; background:transparent; border:1px solid rgba(255,191,84,.25); border-radius:12px}
#burger span{display:block; height:2px; background:var(--text); margin:8px; transition:.3s}
.menu{display:flex; gap:18px; align-items:center}
.menu a{padding:10px 12px; border-radius:10px; color:var(--muted)}
.menu a:hover{color:var(--text); background:rgba(255,122,61,.08)}
.cta{padding:10px 16px; border-radius:12px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow:var(--glow); color:#140e0b; font-weight:700}

/* HERO */
.hero{padding:64px 0 48px; position:relative}
.hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center}
.pill{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(255,122,61,.08); color:var(--accent); font-weight:600; font-size:.85rem}
h1{font-size: clamp(2rem, 4.0vw, 4.5rem); line-height:1.1; margin:12px 0 10px}
.lead{color:var(--muted); font-size:clamp(1rem, 1.2vw, 1.25rem); max-width:60ch}
.hero-cta{display:flex; gap:12px; margin-top:22px}
.btn{border:1px solid rgba(255,191,84,.25); padding:12px 16px; border-radius:12px; background:#1a1a1a; color:var(--text)}
.btn:hover{border-color: rgba(255,122,61,.55); box-shadow: var(--glow)}
.lion-mark{justify-self:center; align-self:center; width:min(420px, 90%); filter: drop-shadow(0 0 30px rgba(255,122,61,.35));}

/* SECTIONS */
section{padding:72px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; margin-bottom:22px}
.section-head h2{margin:0; font-size: clamp(1.4rem, 2.2vw, 2.4rem)}
.section-head p{color:var(--muted)}

/* SERVICES */
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.card{background:linear-gradient(180deg, rgba(255,122,61,.06), rgba(17,17,17,.6)); border:1px solid rgba(255,191,84,.12); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:6px}
.chip{display:inline-block; padding:6px 10px; border:1px solid rgba(255,191,84,.25); color:var(--accent); border-radius:999px; font-size:.8rem}

/* WORK MASONRY */
.masonry{columns:3 280px; column-gap:18px}
.work{break-inside:avoid; display:block; background:var(--card); border:1px solid rgba(255,191,84,.12); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease}
.work:hover{transform:translateY(-4px); box-shadow:0 30px 80px rgba(255,122,61,.2)}
.work img{aspect-ratio:16/9; object-fit:cover; width:100%}
.work .meta{padding:12px 14px; display:flex; align-items:center; justify-content:space-between}
.tag{font-size:.75rem; color:var(--muted)}

/* Portfolio grid & clients */
.portfolio-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:18px}
iframe{width:100%; border-radius:14px; background:#000; border:1px solid rgba(255,191,84,.12)}
.clients{display:flex; flex-wrap:wrap; justify-content:center; gap:22px}
.client-card{width:220px; text-align:center; background:linear-gradient(180deg, rgba(255,122,61,.06), rgba(17,17,17,.6)); border:1px solid rgba(255,191,84,.12); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.client-card img{width:96px; height:96px; border-radius:50%; border:3px solid var(--primary); object-fit:cover; margin-inline:auto}
.client-card h4{margin:10px 0 6px}
.client-card p{color:var(--muted); margin:0}

/* ABOUT */
.about{display:grid; grid-template-columns:1fr; gap:24px}
.about p{color:var(--muted)}

/* CONTACT */
form{display:grid; gap:12px; max-width:720px}
.row-actions{display:flex; gap:12px; align-items:center}
input, textarea{background:#151515; border:1px solid rgba(255,191,84,.18); color:var(--text); padding:12px 14px; border-radius:12px; outline:none}
input:focus, textarea:focus{border-color:rgba(255,122,61,.55); box-shadow:var(--glow)}


/* ===== FOOTER ===== */

.site-footer {
  background: #0e0e0e;
  color: #cfcfcf;
  margin-top: 80px;
  font-size: 14px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  padding: 60px 20px 50px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.footer-brand h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #ffffff;
}

.footer-brand p {
  max-width: 280px;
  line-height: 1.6;
  color: #aaaaaa;
}

.footer-links h4,
.footer-contact h4 {
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 15px;
}

.footer-links a,
.footer-contact a {
  display: block;
  margin-bottom: 8px;
  color: #aaaaaa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #ffffff;
}

.footer-contact p {
  margin-top: 10px;
  color: #888888;
}

.footer-bottom {
  border-top: 1px solid #222;
  text-align: center;
  padding: 18px;
  font-size: 13px;
  color: #888888;
}







.site-footer .footer-links {
  display: flex;
  flex-direction: column;
}

.site-footer .footer-links h4 {
  order: 0;
}

.site-footer .footer-links a {
  order: 1;
}




/* ===== FOOTER FULL WIDTH LAYOUT ===== */

.site-footer {
  background: #0e0e0e;
  color: #cfcfcf;
  width: 100%;
  margin-top: 80px;
}

.footer-container {
  max-width: 1400px;
  margin: auto;
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: start;
  gap: 60px;
}

/* Brand */
.footer-brand h3 {
  margin: 0 0 10px;
  font-size: 22px;
  color: #ffffff;
}

.footer-brand p {
  max-width: 320px;
  line-height: 1.6;
  color: #aaaaaa;
}

/* Legal */
.footer-links h4,
.footer-contact h4 {
  margin-bottom: 16px;
  font-size: 15px;
  color: #ffffff;
}

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 30px;
}

.footer-links a,
.footer-contact a {
  color: #aaaaaa;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #ffffff;
}

/* Contact */
.footer-contact p {
  margin-top: 10px;
  color: #888888;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid #222;
  text-align: center;
  padding: 18px;
  font-size: 13px;
  color: #888888;
}




/* OUR TEAM SECTION */
#team {
  padding: 60px 0;
  background: #111;
  color: #fff;
}

.team-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.team-head span {
  display: block;
  width: 4px;
  height: 40px;
  background: #f4f4f4;
}

.team-head h2 {
  font-size: 28px;
  letter-spacing: .5px;
}

.team-grid {
  display: flex;
  justify-content: flex-start; /* shift left */
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.member {
  text-align: center;
  max-width: 220px;
}

.member img {
  width: 220px;       /* same size for both */
  height: 280px;      /* fixed height for uniform shape */
  object-fit: cover;  /* zoom & crop to fill box */
  display: block;
  margin: 0 auto 10px;
  border-radius: 8px; /* optional: round corners */
}

.member h3 {
  margin: 8px 0 4px;
  font-size: 18px;
}

.member p {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ccc;
}

.btn-outline {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #fff;
  transition: background .25s ease, color .25s ease;
}

.btn-outline:hover {
  background: #fff;
  color: #111;
}




/* ===== Policies (compact & professional) ===== */
#policies{ padding:48px 0 }
#policies .section-head h2{ font-size: clamp(1.2rem, 2vw, 2rem); }
#policies .section-head p{ max-width:68ch; font-size:.95rem }

/* two-column grid for policies */
.grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }

#policies .policy-card{
  padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,122,61,.05), rgba(17,17,17,.75));
  border:1px solid rgba(255,191,84,.10);
  box-shadow: var(--shadow);
}

#policies .policy-card h3{ margin:0 0 6px; font-size:1.1rem }
#policies .policy-card p{ margin:6px 0 0; font-size:.95rem; color:var(--muted) }
#policies .policy-card ul{ margin:6px 0 0 16px; line-height:1.45; font-size:.95rem }
#policies .policy-card p em{ opacity:.85 }

/* footer policy links */
.footer-links{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px }
.footer-links a{ font-size:.9rem; opacity:.85 }
.footer-links a:hover{ opacity:1; text-decoration:underline }

@media (max-width: 900px){
  #policies{ padding:36px 0 }
  .grid.cols-2{ grid-template-columns:1fr }
  #policies .policy-card{ padding:12px }
}

.policy-page {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  line-height: 1.7;
  font-size: 16px;
}

.policy-page h2 {
  margin-top: 30px;
  font-size: 22px;
  color: #222;
}





/* YOUTUBE PAGE – DESIGNER SECTION 

 .yt-hero {
  position: relative;
  min-height: 100vh;
  background: url("images/site-bg.jpg.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
} */

.yt-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255,90,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), #000 85%);
}

.yt-content {
  position: relative;
  text-align: center;
  max-width: 820px;
  padding: 60px 20px;
  z-index: 2;
}

.yt-logo {
  display: block;
  margin: 0 auto 30px auto; /* center horizontally */
  max-width: 300px;         /* slightly bigger */
}

.yt-content h1 {
  font-size: clamp(32px, 5vw, 54px);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.yt-sub {
  font-size: 18px;
  color: #ddd;
  margin-bottom: 26px;
}

.yt-avatar {
  max-width: 320px;
  margin: 25px auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}

.yt-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #ccc;
  margin: 20px 0 35px;
}

.yt-btn {
  display: inline-block;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff0000, #ff6a00);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 15px 40px rgba(255,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.yt-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 25px 55px rgba(255,0,0,.55);
}






/* GLOBAL BACKGROUND FIX */

html, body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top, rgba(255,90,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.75), #000 85%),
    url("images/site-bg.jpg") center / cover no-repeat fixed;
}


/* Let global background show through */

section,
.hero,
.shop-section,
.contact,
.portfolio,
.yt-hero {
  background: transparent !important;
}

/* Soft readable panels */

.section,
.container {
  background: transparent;
  backdrop-filter: none;
}

.product-info-box{
  background:#111;
  padding:30px;
  border-radius:16px;
  border:1px solid rgba(255,150,60,.2);
}

.product-info-box h1{
  font-size:28px;
  margin-bottom:12px;
}

.price{
  font-size:26px;
  color:#ff7a3d;
  margin-bottom:20px;
}

.meta-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:25px;
}

.tag{
  background:#1c1c1c;
  border:1px solid rgba(255,150,60,.3);
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
}

.buy-btn{
  width:100%;
  padding:14px;
  background:#ff7a3d;
  border:none;
  border-radius:10px;
  color:#000;
  font-weight:600;
  cursor:pointer;
}

.product-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.product-tags .tag{
  background:#1a1a1a;
  border:1px solid rgba(255,140,0,0.4);
  color:#ff9b42;
  padding:5px 12px;
  border-radius:20px;
  font-size:13px;
  text-transform:capitalize;
}

/* ===== REMOVE GLOBAL DARK OVERLAYS ===== */

/* Main sections */
section,
.section,
.shop-section,
.portfolio-section,
.hero,
.page-section {
  background: transparent !important;
}

/* Containers */
.container {
  background: transparent !important;
}

/* Product cards */
.product-card,
.product,
.card {
  background: rgba(0,0,0,0.15) !important; /* light glass, not black */
  backdrop-filter: blur(3px);
}

/* Remove fake dark layers */
.overlay,
.bg-overlay,
.dark-layer,
.glass-layer {
  display: none !important;
}

/* Body fix */
body {
  background-color: transparent !important;
}






/* Responsive */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand p {
    margin: auto;
  }
}


/* RESPONSIVE */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-cta{justify-content:center}
  .section-head{flex-direction:column; align-items:flex-start; gap:6px}
  .grid.cols-3{grid-template-columns:1fr}
  #burger{display:block}
  .menu{position:absolute; right:4%; top:64px; background:rgba(17,17,17,.95); padding:12px; border:1px solid rgba(255,191,84,.12); border-radius:14px; display:none; flex-direction:column; min-width:220px}
  .menu.show{display:flex}
}

/* LARGE DESKTOPS (≥ 1400px) */
@media (min-width: 1400px){
  .container{width:min(90%, 1440px)}
  .hero{padding:88px 0 64px}
  .hero-grid{gap:56px}
  h1{font-size:clamp(2.4rem, 3.6vw, 5rem)}
  .lead{font-size:clamp(1.05rem, 1.1vw, 1.35rem)}
  .masonry{columns:4 300px}
  .portfolio-grid{grid-template-columns: repeat(auto-fit, minmax(360px, 1fr))}
}

/* ULTRA-WIDE / 27\"+ (≥ 1700px) */
@media (min-width: 1700px){
  html{font-size:18px} /* gentle scale-up */
  .container{width:min(88%, 1600px)}
  .hero{padding:100px 0 80px}
  .lion-mark{width:min(480px, 95%)}
  .masonry{columns:4 340px}
}