/*
  © 2026 Robert Brown / Browns Digital
  All rights reserved.

  Licensed under the LICENSE file in this repository.
  Unauthorized use, copying, or modification is prohibited.
*/

<style>

#panel-inner img{
  cursor: zoom-in;
}

#panel-inner img:hover{
  transform: scale(1.04);
  filter: brightness(1.05);
}

#modal-img{
  max-width: 100%;
  max-height: 85vh; /* slightly smaller */

  object-fit: contain;

  box-shadow:
    0 40px 120px rgba(0,0,0,.5),
    0 0 80px rgba(255,255,255,.05);

  cursor: default;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

#image-modal::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.6));
  pointer-events:none;
}

#image-modal{
  transition: opacity 0.25s ease;
  position: fixed;
  z-index: 9999;
}

#prev-btn {
  left: 20px;
}

#next-btn {
  right: 20px;
}

#close-btn {
  position: absolute;
  z-index: 10001;
}

#image-wrapper{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 0 80px; /* KEY: creates space for buttons */
  box-sizing: border-box;
}

.project-select.error .project-selected {
  border-color: rgba(220,38,38,.5);
  box-shadow: 0 0 0 4px rgba(220,38,38,.08);
}

.panel-link{
  color:#2563eb;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s ease;
  margin-top: -40px;
  position: relative;
z-index: 5;
}

.panel-link:hover{
  opacity:.7;
}

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
  --muted:#6e6e73;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   BACKGROUND SYSTEM
========================================================= */

body{
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  background:
    radial-gradient(1400px 800px at 0% 0%, #ffffff 0%, transparent 55%),
    radial-gradient(1200px 800px at 100% 0%, #edf0f8 0%, transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, #e7eaf4 0%, transparent 65%),
    linear-gradient(180deg, #fafbff 0%, #f1f3f9 50%, #e9edf6 100%);

  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.panel-scroll {
  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain; 

  scrollbar-width: none; /* Firefox */
}

.panel-scroll::-webkit-scrollbar {
  display: none; /* Chrome */
}

/* =========================================================
   LIQUID GLASS MATERIAL
========================================================= */

.liquid{
  position:relative;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(180%) brightness(1.05);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  isolation:isolate;

  box-shadow:
    0 30px 70px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 8px rgba(0,0,0,.05);
}

/* top diffusion layer */
.liquid::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.4) 40%,
      transparent 70%
    );
  opacity:.35;
  pointer-events:none;
}

/* specular highlight */
.liquid::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(
      120% 80% at 50% 0%,
      rgba(255,255,255,.9),
      transparent 72%
    );
  mix-blend-mode:screen;
  opacity:.5;
  pointer-events:none;
}

/* =========================================================
   NAVIGATION (SLIM RESTORED)
========================================================= */

.nav-fixed{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
}

.nav-container{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
}

.nav-brand{
  font-size:13px;
  font-weight:600;
  padding:0 14px;
  border-right:1px solid rgba(255,255,255,.45);
  white-space:nowrap;
}

.nav-tabs{
  position:relative;
  display:flex;
  gap:4px;
}

.nav-btn{
  padding:6px 16px;
  font-size:13px;
  font-weight:500;
  border-radius:999px;
  color:var(--muted);
  transition:color .3s ease;
}

.nav-btn.active,
.nav-btn:hover{
  color:#000;
}

/* animated pill */
#pill{
  position:absolute;
  top:4px;
  left:6px;
  height:calc(100% - 8px);
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(20px);
  border-radius:999px;

  box-shadow:
    0 12px 28px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:all .55s cubic-bezier(.16,1,.3,1);
  z-index:-1;
}

/* =========================================================
   PAGE SYSTEM
========================================================= */

.page{
  display:none;
  max-width:1100px;
  margin:0 auto;
  padding:125px 30px 120px;
}

.page > h2{
  font-size:34px;
  font-weight:700;
  letter-spacing:-0.035em;
  margin:0 0 70px 0;
  color:#111111;
}

.page.active{
  display:block;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.hero-title{
  font-size:39px;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.02em;
  color:#1d1d1f;
  max-width:720px;
  margin:0 auto 24px;
}

@media (max-width:768px){
  .hero-title{
    font-size:32px;
  }
}

.hero-title span{
  display:block;
  font-weight:800;
  color:#111111;
}

h2{
  font-size:42px;
  font-weight:600;
  letter-spacing:-0.02em;
}

p{
  font-weight:400;
  font-size:20px;
  line-height:1.8;
  max-width:720px;
  color:#6e6e73;
}

/* =========================================================
   CARDS - LIQUID GLASS & MOTION
========================================================= */

.card-grid{
  perspective:1600px;
}

.card{
  position:relative;
  border-radius:42px;
  padding:40px;
  cursor:pointer;

  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;

  transform:
    translateZ(0)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateY(var(--lift));

  transition:
    box-shadow .4s cubic-bezier(.16,1,.3,1);

  box-shadow:
    0 30px 60px rgba(15,23,42,.12),
    0 8px 20px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.card:hover{
  will-change:transform;
}

/* edge highlight / glass rim */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.2) 45%,
      transparent 70%
    );
  mix-blend-mode:screen;
  opacity:.45;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}

.card:hover::after{
  opacity:.7;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(
      600px circle at var(--x, 50%) var(--y, 50%),
      rgba(255,255,255,.6),
      transparent 40%
    );
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.card:hover::before{
  opacity:.7;
}

.card h3{
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#1d1d1f;
  margin-bottom:6px;
}

.card p{
  font-size:17px;
  line-height:1.6;
  color:#6e6e73;
}

.card:hover{
  --lift: -12px;

  box-shadow:
    0 80px 160px rgba(15,23,42,.22),
    0 30px 60px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* =============================
   START PROJECT SECTION
============================= */

.project-wrapper{
  margin-top:140px;
}

.project-card{
  border-radius:42px;
  padding:70px 80px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 60px 140px rgba(15,23,42,.18);

  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:90px;
}

.project-left h2{
  font-size:38px;
  margin-bottom:20px;
}

.project-left p{
  font-size:16px;
  margin-bottom:30px;
}

.project-contact{
  margin-bottom:20px;
  font-size:14px;
  color:#4b5563;
}

.project-socials {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.project-socials a {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-socials svg {
  width: 24px;
  height: 24px;
}

.project-socials svg path {
  fill: #1f2937;
  transition: fill 0.2s ease;
}

.project-socials a:hover svg path {
  fill: #2563eb; /* your blue */
}

.project-socials a:first-child {
  transform: scale(1.1);
}

.project-form{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.project-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.project-form label{
  font-size:12px;
  color:#6b7280;
  margin-bottom:8px;
  display:block;
}

.project-form input,
.project-form textarea{
  width:100%;
  padding:16px 20px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.85);
  font-size:14px;
  outline:none;
}

.project-form textarea{
  min-height:140px;
  resize:none;
}

/* DROPDOWN */
.project-select{
  position:relative;
  cursor:pointer;
}

.project-selected{
  padding:16px 20px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.85);
}

.project-options{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:100%;
  border-radius:18px;
  background:white;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  display:none;
  z-index:10000;
}

.project-option{
  padding:14px 18px;
  cursor:pointer;
}

.project-option:hover{
  background:#f3f4f6;
}

.project-select.open .project-options{
  display:block;
}

.project-btn{
  position:relative;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.8);
  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.85),
    rgba(255,255,255,.65)
  );
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:#111827;
  font-weight:500;
  cursor:pointer;
  transition:.35s var(--ease);
  box-shadow:
    0 20px 50px rgba(15,23,42,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.project-btn:hover{
  transform:translateY(-4px);
  box-shadow:
    0 30px 80px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.pricing-highlight{
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 6px rgba(0,0,0,0.05),
    0 8px 24px rgba(15,23,42,0.12);

  border-left: 2px solid rgba(255,255,255,0.6);
  border-right: 2px solid rgba(255,255,255,0.6);

  font-weight: 600;
  color: #111827;

  transition: all .25s ease;
}

/* Email highlight */

.project-contact{
  position:relative;
  margin-bottom:20px;
}

.project-email{
  background: rgba(53,92,255,.12);
  color: #111827;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15.5px; /* increased */
  letter-spacing: -0.01em;
  border: 1px solid rgba(53,92,255,.25);
  cursor: pointer;
  transition: .25s ease;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.project-email:hover{
  background:rgba(53,92,255,.2);
}

.copy-toast{
  position:absolute;
  top:-32px;
  left:0;
  font-size:12px;
  background:#111827;
  color:white;
  padding:6px 10px;
  border-radius:6px;
  opacity:0;
  transform:translateY(6px);
  transition:.2s ease;
  pointer-events:none;
}

.copy-toast.show{
  opacity:1;
  transform:translateY(0);
}

.hero-cta{
  position:relative;
  padding:16px 30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  color:#111827;
  font-weight:500;
  font-size:15px;
  cursor:pointer;
  transition:all .35s var(--ease);
  box-shadow:
    0 20px 50px rgba(15,23,42,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}

.hero-cta:hover{
  transform:translateY(-4px);
  box-shadow:
    0 30px 80px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.hero-glow{
  position:fixed;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:900px;
  background:radial-gradient(circle,
    rgba(53,92,255,.25),
    rgba(53,92,255,.08) 40%,
    transparent 65%);
  filter:blur(24px);
  animation:floatGlow 18s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:-1;
}

@keyframes floatGlow{
  0%{ transform:translateX(-50%) translateY(0px); }
  100%{ transform:translateX(-50%) translateY(40px); }
}

.form-status{
  margin-top:12px;
  font-size:14px;
  opacity:0;
  transform:translateY(6px);
  transition:.3s ease;
}

.form-status.success{
  color:#16a34a;
  opacity:1;
  transform:translateY(0);
}

.form-status.error{
  color:#dc2626;
  opacity:1;
  transform:translateY(0);
}

.project-form input:focus,
.project-form textarea:focus{
  border-color:rgba(53,92,255,.6);
  box-shadow:0 0 0 4px rgba(53,92,255,.1);
}

/* =========================================
   FORM FIELD ERROR STATE (GLASS STYLE)
========================================= */

.field-error {
  position: relative;
  margin-top: 8px;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(220,38,38,.08);
  color: #b91c1c;
  border: 1px solid rgba(220,38,38,.25);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: .25s ease;
}

.field-error.show {
  opacity: 1;
  transform: translateY(0);
}

.project-form input.error,
.project-form textarea.error {
  border-color: rgba(220,38,38,.5);
  box-shadow: 0 0 0 4px rgba(220,38,38,.08);
}

/* =========================================================
   MOBILE ONLY OVERRIDES (DO NOT TOUCH DESKTOP)
========================================================= */

@media (max-width: 768px){

  /* ---------- NAV ---------- */

  .nav-brand{
    display:none; /* saves space */
  }

  .nav-container{
    padding:6px 10px;
  }

  .nav-btn{
    padding:6px 10px;
    font-size:12px;
  }

  #pill{
    display:none; /* prevents layout break */
  }

  /* ---------- PAGE SPACING ---------- */

  .page{
    padding:90px 20px 60px;
  }

  /* ---------- HERO ---------- */

  .hero-title{
    font-size:28px;
    line-height:1.2;
  }

  p{
    font-size:16px;
    line-height:1.6;
  }

  /* ---------- PROJECT SECTION ---------- */

  .project-card{
    grid-template-columns:1fr;
    padding:40px 24px;
    gap:40px;
  }

  .project-row{
    grid-template-columns:1fr;
  }

  /* ---------- GLOW (reduce intensity for mobile perf) ---------- */

  .hero-glow{
    width:700px;
    height:700px;
    filter:blur(28px);
  }

}

@media (max-width: 480px){

  .page{
    padding:80px 16px 50px;
  }

  .hero-title{
    font-size:24px;
  }

  .card{
    padding:24px;
    border-radius:28px;
  }

  .project-card{
    padding:28px 18px;
  }

}

/* PANEL SCROLLBAR */

#panel-overlay {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

#panel-overlay ::-webkit-scrollbar {
  width: 6px;
}

#panel-overlay ::-webkit-scrollbar-track {
  background: transparent;
}

#panel-overlay ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 999px;
}

#panel-overlay ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

/* CORRECT TARGET */

.panel-scroll {
  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  scrollbar-width: none; /* Firefox */
}

.panel-scroll::-webkit-scrollbar {
  display: none; /* Chrome */
}

.panel-scroll::after{
  content:"";
  position:absolute;
  top:16px;
  right:8px;
  width:3px;
  height:40px;
  border-radius:999px;
  background:rgba(0,0,0,0.2);
  opacity:.4;
  pointer-events:none;
}

body.no-scroll{
  overflow: hidden;
  height: 100vh;
}

</style>