/* ═══════════════════════════════════════════════════════════════
   LEVYDESIGN.CA — SHARED STYLESHEET
   Mirrors index.css CSS variables + global base styles exactly
═══════════════════════════════════════════════════════════════ */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --ld-blue: #0793fd;
  /* Typography tokens */
  --h2-size: clamp(1.875rem, 4vw, 2.25rem);
  --h2-weight: 700;
  --h2-line-height: 1.2;
  --h2-color: #ffffff;
  --h3-size: clamp(1.25rem, 2.5vw, 1.5rem);
  --eyebrow-size: 0.75rem;
  --eyebrow-weight: 600;
  --eyebrow-color: #0793fd;
  --eyebrow-tracking: 0.05em;
  --body-size: 1rem;
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-color: #d1d5db;
  --small-size: 0.875rem;
  --small-weight: 500;
  --small-color: #9ca3af;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-relaxed: 1.6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #0f0f0f;
  color: #d1d5db;
  font-size: 1rem;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #000;
  border-bottom: 1px solid #111827;
  transition: border-color 150ms, box-shadow 150ms;
}
.site-header.scrolled {
  border-bottom-color: #1f2937;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.5);
}
.header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
@media(min-width:640px){.header-inner{padding:1rem 2rem;}}
@media(min-width:768px){.header-inner{padding:1.25rem 2rem;}}
.logo { transition: opacity 150ms; }
.logo:hover { opacity: .8; }
.logo img { height: 2rem; width: auto; }
@media(min-width:640px){.logo img{height:2.25rem;}}
@media(min-width:768px){.logo img{height:2.5rem;}}
.desktop-nav { display: none; align-items: center; gap: 1.5rem; }
@media(min-width:768px){.desktop-nav{display:flex;}}
.nav-link {
  color: #9ca3af; text-transform: uppercase;
  letter-spacing: .05em; font-size: .75rem; transition: color 150ms;
}
@media(min-width:768px){.nav-link{font-size:.875rem;}}
.nav-link:hover { color: var(--ld-blue); }
.nav-contact-btn {
  background: var(--ld-blue); color: #fff;
  padding: .5rem 1.5rem; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  border-radius: .5rem; border: none; cursor: pointer; transition: background 150ms;
}
@media(min-width:768px){.nav-contact-btn{font-size:.875rem;}}
.nav-contact-btn:hover { background: #0680d1; }
.mobile-menu-btn {
  display: block; background: none; border: none; color: #9ca3af;
  cursor: pointer; padding: .375rem; font-size: 1.25rem; line-height: 1;
  transition: color 150ms;
}
@media(min-width:768px){.mobile-menu-btn{display:none;}}
.mobile-menu-btn:hover { color: #fff; }
.mobile-nav { display: none; padding: 1rem 1.5rem .75rem; border-top: 1px solid #111; }
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; font-size: .75rem; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .05em; padding: .5rem 0; transition: color 150ms;
}
.mobile-nav a:hover, .mobile-nav a.contact { color: var(--ld-blue); }
.mobile-nav a.contact { font-weight: 600; }

/* ── FOOTER ── */
.site-footer {
  background: #0a0a0a; color: #d1d5db;
  padding: 3rem 1.5rem; border-top: 1px solid #111827;
}
@media(min-width:640px){.site-footer{padding:4rem 2rem;}}
.footer-inner { max-width: 72rem; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; margin-bottom: 2rem;
}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
.fcol-head {
  font-weight: 600; color: #fff; font-size: .875rem;
  text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 1rem;
}
.footer-col a { display: block; font-size: .875rem; color: #d1d5db; margin-bottom: 1rem; transition: color 150ms; }
.footer-col a:hover { color: var(--ld-blue); }
.footer-col a.blue { color: var(--ld-blue); }
.footer-col a.blue:hover { color: #0680d1; }
.footer-bottom { border-top: 1px solid #111827; padding-top: 2rem; text-align: center; }
.footer-bottom p { font-size: .75rem; color: #6b7280; margin-bottom: .5rem; }
.footer-copyright { font-size: .75rem; color: var(--ld-blue); }
@media(min-width:640px){.footer-copyright{font-size:.875rem;}}

/* ── COMMON SECTION SPACING ── */
.page-section { padding: 3.5rem clamp(1.25rem,5vw,1.5rem); }
.section-inner { max-width: 1150px; margin: 0 auto; }
.hero-section { position: relative; width: 100%; aspect-ratio: 16/9; background: #1a1a1a; overflow: hidden; max-width: 1280px; margin: 0 auto; }
.hero-section img, .hero-section video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  color: var(--ld-blue); letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; margin-bottom: .75rem;
}
.section-h2 {
  font-size: var(--h2-size); font-weight: var(--h2-weight);
  line-height: var(--h2-line-height); color: #fff; margin-bottom: 1.75rem;
}
.body-p { font-size: var(--body-size); line-height: var(--body-line-height); color: var(--body-color); margin: 0; }
.bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bullet-list li { font-size: var(--body-size); color: var(--body-color); padding-left: 1rem; position: relative; }
.bullet-list li::before { content: '•'; position: absolute; left: 0; color: var(--ld-blue); }
.scope-tag {
  font-size: var(--small-size); color: var(--ld-blue);
  border: 1px solid var(--ld-blue); border-radius: 999px;
  padding: .35rem .85rem; white-space: nowrap;
}

/* ── SPOTLIGHT CARD ── */
.spotlight-card {
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem; padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); overflow: hidden; position: relative;
}
.spotlight-card.accent::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--ld-blue); pointer-events: none;
}
.spotlight-card .scard-img {
  width: 100%; height: 280px; object-fit: cover;
  border-radius: .5rem; display: block; cursor: pointer;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
  box-shadow: 0 0 20px rgba(7,147,253,.3);
}
.spotlight-card .scard-img:hover {
  transform: scale(1.02); box-shadow: 0 0 30px rgba(7,147,253,.6);
}
.scard-contain { object-fit: contain; background: #0f0f0f; }
.scard-white-bg { background: #fff; }
.scard-label { font-size: var(--small-size); color: var(--small-color); margin-top: .75rem; font-weight: var(--small-weight); letter-spacing: .05em; }

/* ── EXPAND BUTTON ── */
.expand-btn {
  width: 100%; background: var(--ld-blue); color: #fff;
  border: none; border-radius: .5rem; padding: .875rem 1.5rem;
  font-size: var(--small-size); font-weight: 600; cursor: pointer;
  transition: background 200ms; display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 2rem;
}
.expand-btn:hover { background: #0680d1; }
.expanded-panel { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
.expanded-panel.open { display: block; }

/* ── GRIDS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(1.5rem,3vw,2rem); }
.grid-auto-220 { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(1.5rem,3vw,2rem); }
@media(max-width:640px){ .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} }
@media(max-width:768px){ .grid-3{grid-template-columns:1fr 1fr;} }

/* ── APP IMAGES (4:3 aspect trick) ── */
.app-img-wrap { position: relative; width: 100%; padding-bottom: 75%; overflow: hidden; border-radius: .75rem; cursor: pointer; }
.app-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; }
.app-img-wrap:hover img { transform: scale(1.05); }

/* ── APPAREL ITEM ── */
.apparel-item {
  height: clamp(200px,50vw,280px); border-radius: 1rem; overflow: hidden;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.3); cursor: pointer;
  transition: transform 200ms, box-shadow 200ms;
}
.apparel-item:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,.4),0 0 20px rgba(7,147,253,.2); }
.apparel-item img { width: 100%; height: 100%; object-fit: cover; }

/* ── BLUE BUTTON ── */
.btn-blue {
  background: var(--ld-blue); color: #fff; border: none;
  border-radius: .5rem; padding: .875rem 1.75rem;
  font-size: var(--small-size); font-weight: 600; cursor: pointer;
  transition: background 150ms; display: inline-block;
}
.btn-blue:hover { background: #0680d1; }
.btn-blue-sm { padding: .5rem 1rem; }

/* ── SELECTED WORK COMPACT ── */
.sw-section { padding: 3.5rem clamp(1.25rem,5vw,1.5rem); }
.sw-heading-wrap { margin-bottom: 2rem; padding-bottom: .75rem; border-bottom: 2px solid var(--ld-blue); display: inline-block; }
.sw-heading { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line-height); color: #fff; margin: 0; }
.sw-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media(min-width:768px){.sw-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1024px){.sw-grid{grid-template-columns:1fr 1fr 1fr;}}
.sw-card { cursor: pointer; transition: transform .25s; }
.sw-card:hover { transform: translateY(-4px); }
.sw-thumb { margin-bottom: .5rem; overflow: hidden; border-radius: .5rem; background: #2a2a2a; aspect-ratio: 16/9; position: relative; }
.sw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.sw-card:hover .sw-thumb img { transform: scale(1.05); }
.sw-overlay { position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,.4),transparent); opacity: 0; transition: opacity 300ms; }
.sw-card:hover .sw-overlay { opacity: 1; }
.sw-cat { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ld-blue); margin-bottom: .25rem; }
.sw-title { font-size: 1.125rem; font-weight: 700; color: #fff; transition: color 300ms; display: inline-block; position: relative; }
.sw-card:hover .sw-title { color: #60a5fa; }
.sw-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--ld-blue); transition: width 300ms; }
.sw-card:hover .sw-title::after { width: 100%; }
.sw-gallery-tile { aspect-ratio: 16/9; background: #1e1e1e; border: 1px solid rgba(255,255,255,.12); border-radius: .5rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; transition: border-color 250ms, box-shadow 250ms; }
.sw-card:hover .sw-gallery-tile { border-color: rgba(7,147,253,.35); box-shadow: 0 4px 16px rgba(7,147,253,.12); }

/* ── LIGHTBOX ── */
#lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.96); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
#lightbox.active { display: flex; }
#lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: .5rem; }
#lb-close { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255,255,255,.1); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms; }
#lb-close:hover { background: rgba(255,255,255,.2); }

/* ── VIDEO PLAYER ── */
.video-wrap { position: relative; width: 100%; border-radius: 1rem; overflow: hidden; background: #000; }
.video-wrap.ar-16-9 { aspect-ratio: 16/9; }
.video-wrap.ar-9-16 { aspect-ratio: 9/16; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; z-index: 10; color: var(--ld-blue); }
.vid-play-btn svg { width: 56px; height: 56px; }
.vid-controls { position: absolute; bottom: 1rem; right: 1rem; display: flex; gap: .75rem; z-index: 20; }
.vid-ctrl-btn { padding: .75rem; border-radius: 9999px; border: 2px solid white; opacity: .6; background: transparent; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.vid-ctrl-btn:hover { opacity: 1; }
.vid-ctrl-btn.blue { color: var(--ld-blue); }
.vid-ctrl-btn svg { width: 20px; height: 20px; }

/* ── CHALLENGE CARDS (ORT style) ── */
.challenge-card { background: rgba(255,255,255,.05); border: 1px solid var(--ld-blue); border-radius: .75rem; padding: 1.5rem; }
.impact-card { background: rgba(255,255,255,.05); border-left: 3px solid var(--ld-blue); border-radius: .5rem; padding: 1.25rem 1.5rem; }
.metric-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; padding: 1.5rem; text-align: center; }
.metric-num { font-size: clamp(2rem,5vw,3rem); font-weight: 700; color: var(--ld-blue); margin-bottom: .5rem; }

/* ── HERO VIDEO SECTION (About/Work pages) ── */
.hero-vid-section { padding: 70px 18px; background: linear-gradient(to bottom,#1a1a1a,#222); }
@media(min-width:640px){.hero-vid-section{padding:90px 28px;}}
@media(min-width:1024px){.hero-vid-section{padding:120px 64px;}}
.hero-vid-inner { max-width:1200px; margin:0 auto; }
.hero-vid-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; border-radius:.5rem; box-shadow: 0 25px 50px rgba(0,0,0,.5); }
.hero-vid-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-vid-overlay { position:absolute; inset:0; background:rgba(0,0,0,.15); pointer-events:none; }

/* ── HOME HERO ── */
.home-hero { position:relative; width:100%; overflow:hidden; background:#000; max-width:1280px; margin:0 auto; height:clamp(50vh,60vh,80vh); }
.home-hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.home-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.25),rgba(0,0,0,.4)); z-index:1; }
.home-hero-content { position:relative; z-index:10; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 1.5rem; max-width:1280px; margin:0 auto; }
@media(min-width:640px){.home-hero-content{padding:0 2rem;}}
@media(min-width:1024px){.home-hero-content{padding:0 3rem;}}
.hero-controls { position:absolute; bottom:1.5rem; right:1.5rem; display:flex; gap:.75rem; z-index:20; }
.hero-ctrl-btn { padding:.75rem; border-radius:9999px; border:2px solid white; opacity:.6; background:transparent; cursor:pointer; color:white; display:flex; align-items:center; justify-content:center; transition:opacity .2s; }
.hero-ctrl-btn:hover { opacity:1; }

/* ── SECTION BACKGROUNDS ── */
.bg-gradient-main { background: linear-gradient(to bottom,#1a1a1a,#222222); }
.bg-dark { background: #0f0f0f; }