/* === Theme & base (user's preferred) === */
:root{
  --bg: #ff66d4;
  --bg2: #7a2de2;
  --radius: 18px;
  --accent: linear-gradient(135deg,#0040ff -60%, #00fff7 40%);
  --surface: rgba(255,255,255,0.10);
  --surface-2: rgba(255,255,255,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
  --text: #ffffff;

  /* gallery extras */
  --navy: #0b0620;
  --img-stroke: #ff45ff; /* change to #fff or #0b0620 if you prefer */
}

*{ box-sizing:border-box }
html, body { min-height:100%; background: transparent; }
html{ background-color:#0b0620; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  line-height:1.6;
  position: relative;
}

/* STATIC (fixed) radial gradient using brand colours (user's preferred) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle farthest-corner at 50% 80%,
    var(--bg) -20%,
    var(--bg2) 80%
  );
  will-change: transform;
}

/* Prevent page scroll while gallery is open */
body.no-scroll{
  overflow: hidden !important;
  touch-action: none;
}

.container{width:min(1100px, 92%); margin:0 auto}
img{max-width:100%; display:block}

/* === Header & nav === */
.site-header{ position: sticky; top:0; z-index:10; background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0)); backdrop-filter: blur(8px); color:var(--text); }
@supports (padding: env(safe-area-inset-top)) { .site-header{ padding-top: env(safe-area-inset-top); } }

.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.5px}
.brand img{width:40px; height:40px; border-radius:12px; object-fit:cover; box-shadow: var(--shadow)}
.nav-actions{ display:flex; align-items:center; gap:10px; }
button.ghost, .btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.5); color:var(--text); padding:8px 14px; border-radius:999px; cursor:pointer}

/* === Typography & badges === */
.hero{
  display:grid;
  grid-template-columns: 1.2fr 1fr;   /* desktop override below */
  gap:32px;
  padding:72px 0 40px;
  align-items:start; /* align logo top with H1 */
}
.hero-text{ display:flex; flex-direction:column; justify-content:flex-start; }
.hero-text h1{ font-family:Sora, Inter, system-ui; font-weight:800; line-height:1.05; margin:0 0 14px; font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.5px; }
.g{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size: clamp(16px, 2.3vw, 20px); opacity:.95}
.cta-row{ display:none } /* moved to nav */
.badges{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:16px 0 0; list-style:none}
.badges li{padding:8px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--surface-2)}

.hero-art{
  position:relative;
  display:flex;
  align-items:flex-start;         /* top-align image with H1 */
  justify-content:flex-end;       /* RIGHT align to match nav/right edge */
}
.glow{position:absolute; inset:10% 0 0 0; margin:auto; width:80%; height:80%; filter: blur(60px); background: var(--accent); opacity:.32; border-radius:50%; z-index:0}

/* Base hero logo size (mobile & default) */
.hero-logo{
  position:relative;
  z-index:1;
  width:min(520px, 90%);          /* desktop override below */
  height:auto;
  border-radius:24px;
  box-shadow: var(--shadow)
}

/* Sections */
.section{padding:56px 0}
.section h2{ font-family:Sora, Inter; font-size: clamp(28px,4.5vw,40px); margin:0 0 16px; background: var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{opacity:.9}
.small{font-size:.9rem}

.grid{display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
.card{ background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius); padding: 20px; box-shadow: 0 8px 18px rgba(0,0,0,.18); }

.pill-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0}
.pill-list li{background:var(--surface); border:1px solid var(--surface-2); padding:10px 14px; border-radius:999px}

.video-card{ display:flex; align-items:center; gap:16px; background: var(--surface); border:1px solid var(--surface-2); padding:18px; border-radius: var(--radius); }
.video-card.center{ justify-content:center; text-align:center; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn.primary{ background: var(--accent); color:#FF45FF; box-shadow: var(--shadow) }
.btn.primary:hover{transform: translateY(-2px)}
.btn.navlink{ padding:10px 14px; font-weight:700; }
.btn.ghost{ border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; }
.video-card .btn.primary.plain{ box-shadow:none; border:none; }
.btn.huge{ font-size: clamp(24px, 4.2vw, 40px); padding: 24px 44px; border-radius: 999px; }

/* Footer */
.site-footer{padding:36px 0 60px}
.ftr{display:flex; align-items:center; justify-content:space-between; opacity:.9}

/* === Modal (YouTube) === */
.modal{border:none; border-radius:16px; padding:0; width:min(1100px, 94vw); background: #0b0620; overflow: visible;}
.modal::backdrop{background: rgba(0,0,0,.85)}
.modal, .modal * { outline: none !important; }
.modal .close,
.modal .close:focus,
.modal .close:focus-visible,
.modal .close:active { outline: none !important; box-shadow: none !important; }
.modal .close::-moz-focus-inner{ border:0; }

.modal .close{
  position:absolute;
  top:0; right:0;
  transform: translate(50%, -50%);
  width:40px; height:40px;
  border:none;
  border-radius:999px;
  background: rgba(0,0,0,0.60);
  color:#fff;
  font-size:22px;
  line-height:40px;
  text-align:center;
  cursor:pointer;
  z-index: 100;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.player-shell{padding:12px}

/* Responsive 16:9 YouTube wrapper */
.yt-wrap{position:relative; width:100%; max-width:1100px; border-radius:16px; overflow:hidden; box-shadow: 0 8px 18px rgba(0,0,0,.18); background:#000}
.yt-wrap::before{content:''; display:block; padding-top:56.25%;}
.yt-wrap.in-modal{max-width:none}
/* ⬇️ Patched to also target the Archive.org iframe */
.yt-wrap iframe, .yt-wrap #reel, #archive-embed{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; padding-top:42px}
  .grid{grid-template-columns: 1fr}
}

/* === Stop hover movement & add white stroke highlight === */
.btn.primary:hover { transform: none; }
.btn.primary:hover,
.btn.primary:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), var(--shadow); }

.video-card .btn.primary.plain { box-shadow: none; }
.video-card .btn.primary.plain:hover,
.video-card .btn.primary.plain:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.9); }

/* --- iOS/mobile nav fixes --- */
.nav-actions .btn { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 480px){
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-actions{ margin-left: auto; gap: 8px; flex-wrap: wrap; }
  .btn.navlink{ padding: 8px 12px; font-size: 14px; }
}

/* --- Center the body logo on mobile --- */
@media (max-width: 900px){
  .hero-art{ justify-content: center; }
}

/* --- iOS safe-area --- */
@supports (padding: env(safe-area-inset-right)){
  .nav { padding-right: max(14px, env(safe-area-inset-right)); }
  .nav { padding-left:  max(0px,  env(safe-area-inset-left));  }
}

/* nav pills centered on small screens */
@media (max-width: 600px){
  .nav{ flex-wrap: wrap; row-gap: 8px; }
  .nav-actions{
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-left: 0 !important;
    flex-wrap: wrap;
  }
  .btn.navlink{ padding: 8px 12px; font-size: 14px; }
}

/* ---------- DESKTOP OVERRIDES ---------- */
@media (min-width: 901px){
  .hero{
    grid-template-columns: 1fr 1.3fr;
    column-gap: 40px;
  }
  .hero .hero-logo{
    width: min(720px, 100%);
    height: auto;
  }
  .hero .glow{ transform: scale(1.12); }
}

/* Mobile: center the hero heading */
@media (max-width: 900px){
  .hero-text{ align-items: center; text-align: center; }
  .hero-text h1{ text-align: center; margin-left:auto; margin-right:auto; }
  .hero-text .lead{ text-align: center; }
}

/* --- Cards: rounded thumbnails (strong specificity) --- */
#case-studies .card > img,
#case-studies .card a > img,
#ai-projects .card > img,
#ai-projects .card a > img,
.card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px !important;
}

/* --- Make cards obviously clickable --- */
#case-studies .card[role="button"],
#case-studies .card[role="button"] *,
#ai-projects .card,
#ai-projects .card * { cursor: pointer; }

/* Make linked cards look like cards, not links */
#ai-projects a.card { color: var(--text); text-decoration: none; }
#ai-projects a.card:visited { color: var(--text); }
#ai-projects a.card:hover,
#ai-projects a.card:focus-visible {
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25), var(--shadow);
}
#ai-projects a.card h3,
#ai-projects a.card p { color: inherit; }

/* ===================== Gallery (scoped) ===================== */
/* Strip video modal chrome for the image dialog by default */
dialog#galleryModal{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}
dialog#galleryModal:not([open]){ display:none !important; }
dialog#galleryModal[open]{
  display: grid !important;
  place-items: center !important;
}

/* Center cluster; no frame */
dialog#galleryModal .player-shell{
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
dialog#galleryModal .img-wrap{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Image centered and clamped */
#galleryImage{
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 96vw !important;
  max-height: 86vh !important;
  border-radius: 16px !important;
  /* stroke that never gets cropped */
  box-shadow: 0 0 0 3px var(--img-stroke) !important;
}

/* Arrows: bigger circles + chevrons, overlay so they don't affect layout */
dialog#galleryModal .gallery-nav{
  position: fixed !important;  /* overlay */
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 28px !important;  /* bigger chevrons */
  line-height: 1 !important;
}
dialog#galleryModal .gallery-nav.prev{ left: 12px !important; }
dialog#galleryModal .gallery-nav.next{ right: 12px !important; }
dialog#galleryModal .gallery-nav:hover,
dialog#galleryModal .gallery-nav:focus-visible{
  background: rgba(0,0,0,.8) !important;
  outline: 2px solid rgba(255,255,255,.5) !important;
}

@media (max-width: 480px){
  dialog#galleryModal .gallery-nav{
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  dialog#galleryModal .gallery-nav.prev{ left: 8px !important; }
  dialog#galleryModal .gallery-nav.next{ right: 8px !important; }
}

/* Close + Fullscreen buttons (visuals); positioned by JS to image corner */
dialog#galleryModal .close,
dialog#galleryModal .fs-toggle{
  position: fixed; /* JS sets coordinates */
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  display: grid;
  place-items: center;
  font-size: 22px !important;
  line-height: 1 !important; /* fixes off-center glyph */
  text-align: center !important;
  z-index: 1100 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
dialog#galleryModal .close:hover,
dialog#galleryModal .close:focus-visible,
dialog#galleryModal .fs-toggle:hover,
dialog#galleryModal .fs-toggle:focus-visible{
  background: rgba(0,0,0,.8) !important;
  outline: 2px solid rgba(255,255,255,.5) !important;
}

/* ===== Fullscreen mode ===== */
dialog#galleryModal.fullscreen{
  /* make the dialog itself fill the viewport */
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  background: var(--navy) !important; /* solid navy behind the image */
  display: grid !important;
  place-items: center !important;
}
dialog#galleryModal.fullscreen::backdrop{
  background: var(--navy) !important; /* navy edge-to-edge */
}

/* In fullscreen, let the image grow even more */
dialog#galleryModal.fullscreen #galleryImage{
  max-width: 98vw !important;
  max-height: 94vh !important;
  /* keep the stroke visible; still not cropped */
  box-shadow: 0 0 0 3px var(--img-stroke) !important;
}

/* Zoomed-in state (on click in fullscreen) */
dialog#galleryModal.fullscreen #galleryImage.zoomed{
  transform: scale(1.25);
  transform-origin: center center;
  transition: transform .15s ease;
}

/* Reel modal close button matches gallery style */
dialog#reelModal .close{
  top: 12px !important;
  right: 12px !important;
  transform: none !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-align: center !important;
  z-index: 1100 !important;
  /* white stroke ring + your existing shadow */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), var(--shadow) !important;
}
dialog#reelModal .close:hover,
dialog#reelModal .close:focus-visible{
  background: rgba(0,0,0,.8) !important;
  outline: 2px solid rgba(255,255,255,.5) !important;
}

/* Gallery: no fullscreen UI */
dialog#galleryModal .fs-toggle{ display:none !important; }


/* Disable highlight ring on Case Studies cards */
#case-studies .card[role="button"],
#case-studies .card[role="button"]:hover,
#case-studies .card[role="button"]:active,
#case-studies .card[role="button"]:focus,
#case-studies .card[role="button"]:focus-visible{
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; /* keep base shadow only */
  outline: none !important;
  border-color: var(--surface-2) !important;
}

/* Optional: remove the grey flash on mobile Safari when tapping */
#case-studies .card[role="button"]{
  -webkit-tap-highlight-color: transparent;
}