:root{
  /* Fixed header sizing (keep scroll offsets in sync). */
  /* Sync with .topbar-inner + .nav vertical padding + tallest row (brand / pills). */
  --topbar-h: 96px;
  --anchorPad: 18px;
  --bg: #eef7ff;
  --bg2:#f7fbff;
  --text:#0b1b2c;
  --muted:#4b6b86;
  --brand:#46b9ff;
  --brand2:#7cf0ff;
  --card: rgba(255,255,255,0.72);
  --border: rgba(70,185,255,0.25);
  --shadowA: rgba(11,27,44,0.10);
  --shadowB: rgba(255,255,255,0.85);
  --glow: rgba(70,185,255,0.45);
  /* Light blue "ambient" drop shadow used under panels */
  --blueShadow: rgba(70,185,255,0.22);
  /* Feathered blue ambient shadow layers (soft falloff) */
  --blueGlow1: rgba(70,185,255,0.14);
  --blueGlow2: rgba(70,185,255,0.09);
  --radius: 22px;
  --radiusSm: 16px;
  /* Wider, modern layout (less empty side gutters). */
  --max: 1540px;
  --bodyFont: "Made Tommy Light", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --headingFont: "Made Tommy ExtraBold", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

@font-face{
  font-family: "Made Tommy Light";
  src: url("assets/fonts/made_tommy/MADE-TOMMY-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Made Tommy ExtraBold";
  src: url("assets/fonts/made_tommy/MADE-TOMMY-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html[data-theme="dark"]{
  --bg: #000000;
  --bg2:#000000;
  --text:#e9f4ff;
  --muted:#9bb6cc;
  --card: rgba(12,18,28,0.72);
  --border: rgba(124,240,255,0.22);
  --shadowA: rgba(0,0,0,0.55);
  --shadowB: rgba(255,255,255,0.06);
  --blueShadow: rgba(124,240,255,0.12);
  --blueGlow1: rgba(124,240,255,0.08);
  --blueGlow2: rgba(124,240,255,0.05);
}

*{box-sizing:border-box}
/* Prevent any child from forcing horizontal overflow. */
img,video,canvas,svg{max-width:100%;height:auto}
body *{min-width:0}
html,body{height:100%}
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(env(safe-area-inset-top) + var(--topbar-h) + var(--anchorPad));
}
body{
  margin:0;
  padding-top: calc(env(safe-area-inset-top) + var(--topbar-h));
  font-family: var(--bodyFont);
  color:var(--text);
  position: relative;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  overflow-x:hidden;
}
body::before{
  /* Fixed background layer to prevent scroll seam "bands" */
  content:"";
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1400px 820px at 8% 8%, rgba(124,240,255,0.28) 0%, rgba(124,240,255,0.00) 72%),
    radial-gradient(1200px 760px at 92% 18%, rgba(70,185,255,0.22) 0%, rgba(70,185,255,0.00) 74%),
    radial-gradient(1400px 900px at 30% 100%, rgba(70,185,255,0.12) 0%, rgba(70,185,255,0.00) 76%);
  transform: translateZ(0);
  will-change: transform;
}

html[data-theme="dark"] body{
  background: #000;
}
html[data-theme="dark"] body::before{display:none}

a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

/* Fluid container: uses most of the viewport without feeling edge-to-edge. */
.wrap{
  /* Avoid 100vw overflow on mobile (some browsers include scrollbar / safe-area). */
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(14px, 2.2vw, 26px);
}
.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip:focus{
  left:16px;
  top: calc(16px + env(safe-area-inset-top) + var(--topbar-h));
  width:auto;height:auto;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 12px 40px var(--shadowA)
}

.topbar{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:80;
  padding-top: env(safe-area-inset-top);
  overflow: visible;
  isolation: isolate;
  backdrop-filter: blur(14px);
  background: rgba(238,247,255,0.72);
  border-bottom: 1px solid rgba(70,185,255,0.18);
  box-shadow:
    0 26px 70px var(--blueGlow1),
    0 60px 140px var(--blueGlow2);
}
.topbar::after{
  /* Some browsers clip box-shadow on fixed + backdrop-filter; use a gradient shadow layer. */
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:64px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(70,185,255,0.16), rgba(70,185,255,0.00));
  filter: blur(8px);
  opacity: .65;
  z-index: -1;
}
html[data-theme="dark"] .topbar::after{
  background: linear-gradient(to bottom, rgba(124,240,255,0.12), rgba(124,240,255,0.00));
  opacity: .55;
}
html[data-theme="dark"] .topbar{
  background: rgba(10,14,22,0.72);
  border-bottom: 1px solid rgba(124,240,255,0.18);
}

/* Dark mode: remove "white glow" neumorphism */
html[data-theme="dark"] .pill{
  box-shadow:
    12px 12px 26px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .pill:hover{
  box-shadow:
    14px 14px 30px rgba(0,0,0,0.60);
}
html[data-theme="dark"] .btn{
  box-shadow:
    14px 14px 30px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .btn:hover{
  box-shadow:
    16px 16px 34px rgba(0,0,0,0.62);
}
html[data-theme="dark"] .card{
  box-shadow:
    18px 18px 44px rgba(0,0,0,0.62);
}
html[data-theme="dark"] .card::before{opacity:.35}
html[data-theme="dark"] .stat,
html[data-theme="dark"] .work-card,
html[data-theme="dark"] .service,
html[data-theme="dark"] .auth-card{
  box-shadow:
    14px 14px 34px rgba(0,0,0,0.58);
}
html[data-theme="dark"] .work-media{
  box-shadow: 12px 12px 26px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .admin-fab button,
html[data-theme="dark"] .admin-dock{
  box-shadow:
    18px 18px 44px rgba(0,0,0,0.62),
    0 38px 110px var(--blueGlow1),
    0 92px 240px var(--blueGlow2);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;
  gap:12px;
  /* Nav uses vertical padding for pill glow; keep outer bar slightly tighter. */
  padding:11px 0;
}
.brand{
  display:flex;align-items:center;gap:12px;
}
.brand-mark{
  width:38px;height:38px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.35)),
    linear-gradient(135deg, rgba(70,185,255,0.70), rgba(124,240,255,0.65));
  box-shadow:
    10px 10px 24px var(--shadowA),
    -10px -10px 24px var(--shadowB),
    0 0 0 1px rgba(255,255,255,0.45) inset,
    0 0 26px rgba(70,185,255,0.22);
  position:relative;
  overflow:hidden;
}
.brand-mark::after{
  content:"";
  position:absolute;inset:-50%;
  background: conic-gradient(from 180deg, transparent 0 20%, rgba(255,255,255,0.85) 40%, transparent 60% 100%);
  animation: spin 8s linear infinite;
  opacity:.55;
}
.brand-name{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:rgba(11,27,44,0.85);font-family: var(--headingFont)}
.brand-sub{font-size:12px;color:var(--muted)}
html[data-theme="dark"] .brand-name{color: rgba(233,244,255,0.86)}

.nav{
  flex: 1;
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow: visible;
}
.nav-scroll{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  flex: 1;
  min-width: 0;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Keep pill glow inside the scrollport paint area (scroll containers clip). */
  padding: 24px 36px 24px 16px;
}
.nav-scroll::-webkit-scrollbar{display:none}
.pill{
  padding:10px 12px;border-radius:999px;
  background: var(--card);
  border:1px solid rgba(70,185,255,0.16);
  box-shadow:
    10px 10px 22px var(--shadowA),
    -10px -10px 22px var(--shadowB);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-size:13px;color:rgba(11,27,44,0.78)
}
html[data-theme="dark"] .pill{color: rgba(233,244,255,0.82)}
.pill:hover{
  transform: translateY(-2px);
  border-color: rgba(70,185,255,0.32);
  box-shadow:
    14px 14px 28px rgba(11,27,44,0.12),
    -14px -14px 28px rgba(255,255,255,0.90),
    0 0 0 1px rgba(255,255,255,0.55) inset,
    0 0 26px rgba(70,185,255,0.18);
}
.pill.primary{
  background: linear-gradient(135deg, rgba(70,185,255,0.70), rgba(124,240,255,0.55));
  border-color: rgba(255,255,255,0.55);
  color: rgba(11,27,44,0.92);
}

main{padding:22px 0 64px}

.hero{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items:stretch;
}

.card{
  background: var(--card);
  border:1px solid rgba(70,185,255,0.16);
  border-radius: var(--radius);
  box-shadow:
    16px 16px 34px rgba(11,27,44,0.12),
    -16px -16px 34px rgba(255,255,255,0.9);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;inset:-1px;
  background:
    radial-gradient(500px 220px at 20% 10%, rgba(124,240,255,0.35), transparent 60%),
    radial-gradient(420px 220px at 90% 10%, rgba(70,185,255,0.25), transparent 60%);
  opacity:.65;
  pointer-events:none;
}
.card-inner{position:relative;padding:22px}

.hero-layout{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items:start;
}
.hero-main{min-width:0}
.hero-photo{padding-top:4px}
.hero-photo{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
}
.hero-headshot{
  width: clamp(150px, 16vw, 220px);
  height: clamp(150px, 16vw, 220px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 3px solid rgba(70,185,255,0.42);
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.72),
    14px 14px 30px rgba(11,27,44,0.14),
    -10px -10px 24px rgba(255,255,255,0.88),
    0 0 36px rgba(70,185,255,0.28);
}
html[data-theme="dark"] .hero-headshot{
  border-color: rgba(124,240,255,0.45);
  box-shadow:
    0 0 0 5px rgba(12,18,28,0.85),
    14px 14px 30px rgba(0,0,0,0.35),
    0 0 40px rgba(70,185,255,0.32);
}
@media (max-width: 720px){
  .hero-layout{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .hero-main{width:100%}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
}

.kicker{
  display:inline-flex;gap:10px;align-items:center;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-size:12px;color:rgba(11,27,44,0.62)
}
.kicker-dot{
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0.2)),
    linear-gradient(135deg, rgba(70,185,255,1), rgba(124,240,255,1));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset, 0 0 18px rgba(70,185,255,0.35);
}

h1{
  margin:10px 0 10px;
  font-size: clamp(34px, 4.3vw, 56px);
  line-height:1.02;
  letter-spacing:-.02em;
  font-family: var(--headingFont);
}
html[data-theme="dark"] h1{text-shadow:none}
.hero p{
  margin:10px 0 0;
  font-size:15px;
  color: rgba(11,27,44,0.72);
  max-width: 64ch;
}
html[data-theme="dark"] .hero p{color: rgba(233,244,255,0.74)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{
  border:0;cursor:pointer;
  padding:12px 14px;border-radius: 999px;
  background: var(--card);
  border:1px solid rgba(70,185,255,0.18);
  box-shadow:
    12px 12px 24px rgba(11,27,44,0.10),
    -12px -12px 24px rgba(255,255,255,0.86);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: rgba(11,27,44,0.85);
  font-weight:700;
}
html[data-theme="dark"] .btn{color: rgba(233,244,255,0.86)}
.btn:hover{transform: translateY(-2px); border-color: rgba(70,185,255,0.36)}
.btn.primary{
  background: linear-gradient(135deg, rgba(70,185,255,0.74), rgba(124,240,255,0.55));
  border-color: rgba(255,255,255,0.55);
}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px
}
@media (max-width: 520px){.stats{grid-template-columns:1fr}}
.stat{
  padding:14px;border-radius: var(--radiusSm);
  background: rgba(255,255,255,0.55);
  border:1px solid rgba(70,185,255,0.14);
  box-shadow:
    10px 10px 22px rgba(11,27,44,0.10),
    -10px -10px 22px rgba(255,255,255,0.86);
}
html[data-theme="dark"] .stat{background: rgba(12,18,28,0.55)}
.stat b{display:block;font-size:18px}
.stat span{display:block;font-size:12px;color:var(--muted);margin-top:4px}

.section{
  margin-top: 26px;
  scroll-margin-top: calc(env(safe-area-inset-top) + var(--topbar-h) + var(--anchorPad));
}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin: 0 0 12px;
}
.section-head h2{
  margin:0;font-size: 20px;letter-spacing:.02em;
  font-family: var(--headingFont);
}
.section-head p{margin:0;color:var(--muted);font-size:13px}

/* Theme toggle pill */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.theme-toggle-icon{
  font-size:14px;
  width:16px;
  display:inline-flex;
  justify-content:center;
}
@media (max-width: 520px){
  .theme-toggle-label{display:none}
}

/* Work category grouping */
.work-groups{display:grid;gap:18px}
.work-group{
  padding:14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(70,185,255,0.14);
  scroll-margin-top: calc(env(safe-area-inset-top) + var(--topbar-h) + var(--anchorPad) + 18px);
  box-shadow:
    16px 16px 34px rgba(11,27,44,0.08),
    -16px -16px 34px rgba(255,255,255,0.75);
}

/* Performance: on small screens, skip offscreen rendering. */
@media (max-width: 980px){
  .work-group{
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }
}

/* Header: slightly smaller pills for category jump links */
.pill.pill-sub{
  padding:8px 10px;
  font-size:12px;
  opacity:.92;
}
@media (max-width: 980px){
  .pill.pill-sub{display:none}
  .work-group{
    scroll-margin-top: calc(env(safe-area-inset-top) + var(--topbar-h) + var(--anchorPad));
  }
}
html[data-theme="dark"] .work-group{
  background: rgba(12,18,28,0.42);
  border-color: rgba(124,240,255,0.14);
  box-shadow:
    18px 18px 44px rgba(0,0,0,0.62);
}
.work-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin: 2px 2px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(70,185,255,0.14);
}
html[data-theme="dark"] .work-group-head{border-bottom-color: rgba(124,240,255,0.14)}
.work-group-title{
  margin:0;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(11,27,44,0.66);
  font-family: var(--headingFont);
}
html[data-theme="dark"] .work-group-title{color: rgba(233,244,255,0.70)}
.work-group-count{
  margin:0;
  font-size:12px;
  color: var(--muted);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 16px);
}
/* Big screens: show more work per row (feels less "boxed"). */
@media (min-width: 1240px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width: 980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 620px){.grid{grid-template-columns:1fr}}

/* Android phones (slightly wider than iPhone): compact + single-column contact form */
@media (min-width: 431px) and (max-width: 520px){
  #contactForm{grid-template-columns:1fr !important}
}

/* Tablets: tune spacing & columns (no horizontal clipping) */
@media (min-width: 621px) and (max-width: 1024px){
  .wrap{padding-left: 18px; padding-right: 18px}
  .nav-scroll{padding: 18px 12px}
  .card-inner{padding:18px}
  h1{font-size: clamp(28px, 4.2vw, 40px)}
}

/* iPhone-sized screens: shrink everything aggressively */
@media (max-width: 430px){
  :root{
    --topbar-h: 68px;
    --anchorPad: 12px;
    --radius: 18px;
    --radiusSm: 14px;
  }

  body{padding-top: calc(env(safe-area-inset-top) + var(--topbar-h))}
  .wrap{max-width: 100%; padding: 0 10px}

  .topbar{backdrop-filter: blur(12px)}
  .topbar-inner{padding: 5px 0; gap: 9px}

  .brand-mark{width:30px;height:30px;border-radius:11px}
  .brand-name{font-size:10px}
  .brand-sub{font-size:10px}

  .nav-scroll{gap:7px; padding: 12px 22px 12px 8px}
  .pill{padding:7px 9px; font-size:11px}

  main{padding:12px 0 40px}
  .card-inner{padding:14px}

  h1{margin:6px 0 8px; font-size: 26px}
  .hero p{font-size:12px; margin-top:8px}
  .hero-headshot{
    width: 128px;
    height: 128px;
  }
  .hero-layout{gap:14px}
  .hero-actions{gap:7px; margin-top:12px}
  .btn{padding:9px 11px; font-size:11px}

  .stats{grid-template-columns:1fr; gap:8px; margin-top:10px}
  .stat{padding:10px}
  .stat b{font-size:15px}
  .stat span{font-size:11px}

  .section{margin-top:16px}
  .section-head{gap:10px; margin: 0 0 10px}
  .section-head h2{font-size:17px}
  .section-head p{font-size:12px}

  .grid{gap: 10px}
  .work-card{padding:10px; border-radius: var(--radius)}
  .work-media{border-radius: 14px}
  .work-title{font-size:12px}
  .work-cat{font-size:10px}

  .service{padding:12px}
  .service h3{font-size:13px}
  .service p{font-size:11px}

  .field label{font-size:10px}
  .field input,.field textarea{padding:9px 9px; border-radius: 12px}
  .field textarea{min-height: 120px}

  /* Contact form: single column on phones (prevents grid overflow). */
  #contactForm{grid-template-columns:1fr !important}
}

.work-card{
  padding:14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.62);
  border:1px solid rgba(70,185,255,0.16);
  box-shadow:
    14px 14px 30px rgba(11,27,44,0.10),
    -14px -14px 30px rgba(255,255,255,0.88);
  transform: translateY(12px);
  opacity:0;
  transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .42s ease, box-shadow .2s ease;
  will-change: transform;
}
html[data-theme="dark"] .work-card{background: rgba(12,18,28,0.60)}
.work-card.in{
  transform: translateY(0);
  opacity:1;
}
.work-card:hover,
.work-card:focus-visible{
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    18px 18px 40px rgba(11,27,44,0.14),
    -18px -18px 40px rgba(255,255,255,0.88);
  border-color: rgba(70,185,255,0.34);
}
html[data-theme="dark"] .work-card:hover,
html[data-theme="dark"] .work-card:focus-visible{
  box-shadow:
    18px 18px 44px rgba(0,0,0,0.64),
    0 38px 110px var(--blueGlow1),
    0 92px 240px var(--blueGlow2);
  border-color: rgba(124,240,255,0.26);
}
.work-card:focus-visible{outline:none}
.work-media{
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(124,240,255,0.4), transparent 60%), rgba(11,27,44,0.06);
  border:1px solid rgba(70,185,255,0.16);
  overflow:hidden;
  box-shadow: 10px 10px 22px rgba(11,27,44,0.08), -10px -10px 22px rgba(255,255,255,0.9);
}
html[data-theme="dark"] .work-media{background: radial-gradient(circle at 30% 20%, rgba(124,240,255,0.18), transparent 60%), rgba(0,0,0,0.26)}
.work-media video,.work-media img{
  width:100%;height:100%;object-fit:cover;display:block
}
/* Logos + graphic posters read large in the 16:9 tile; pull back so previews show more of the art (graphics a bit more than logos). */
.work-group[data-work-category="Logos"] .work-media,
.work-group[data-work-category="Graphic Design"] .work-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.work-group[data-work-category="Logos"] .work-media img{
  width:82%;
  height:82%;
  object-fit:contain;
}
.work-group[data-work-category="Graphic Design"] .work-media img{
  width:76%;
  height:76%;
  object-fit:contain;
}
/* A couple of light marks need extra separation from the bright preview tile. */
.work-media.work-media--dropshadow,
.work-card[data-work-item="logo-full"] .work-media,
.work-card[data-work-item="logo-winter-2026"] .work-media,
.work-card[data-work-item="graphic-racer-girl-cover"] .work-media,
.work-card[data-work-item="graphic-tcc-season4-poster"] .work-media,
.work-card[data-work-item="graphic-fastlane3-2026-banner"] .work-media{
  overflow: visible;
}
.work-media.work-media--dropshadow img,
.work-card[data-work-item="logo-full"] .work-media img,
.work-card[data-work-item="logo-winter-2026"] .work-media img,
.work-card[data-work-item="graphic-racer-girl-cover"] .work-media img,
.work-card[data-work-item="graphic-tcc-season4-poster"] .work-media img,
.work-card[data-work-item="graphic-fastlane3-2026-banner"] .work-media img{
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.42));
}

/* Dark marks that need a true white stage in the grid preview. */
.work-card[data-work-item="logo-perspective"]{
  background: #fff;
  border-color: rgba(11, 27, 44, 0.12);
}
html[data-theme="dark"] .work-card[data-work-item="logo-perspective"]{
  background: #fff;
  border-color: rgba(11, 27, 44, 0.16);
}
.work-card[data-work-item="logo-perspective"] .work-media{
  background: #fff !important;
  border-color: rgba(11, 27, 44, 0.12);
  box-shadow:
    10px 10px 22px rgba(11, 27, 44, 0.08),
    -10px -10px 22px rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .work-card[data-work-item="logo-perspective"] .work-media{
  background: #fff !important;
  border-color: rgba(11, 27, 44, 0.16);
  box-shadow: 12px 12px 26px rgba(0, 0, 0, 0.35);
}
.work-meta{
  padding:12px 4px 2px;
}
.work-title{
  margin:0;
  font-weight:800;
  letter-spacing:.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.work-cat{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service{
  padding:16px;border-radius: var(--radius);
  background: rgba(255,255,255,0.60);
  border:1px solid rgba(70,185,255,0.14);
  box-shadow:
    14px 14px 30px rgba(11,27,44,0.10),
    -14px -14px 30px rgba(255,255,255,0.88),
    0 34px 92px var(--blueGlow1),
    0 82px 210px var(--blueGlow2);
  position: relative;
}
html[data-theme="dark"] .service{background: rgba(12,18,28,0.58)}
.service h3{margin:0 0 8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-family: var(--headingFont)}
.service p{margin:0;color:rgba(11,27,44,0.72);font-size:13px;line-height:1.5}
html[data-theme="dark"] .service p{color: rgba(233,244,255,0.74)}

/* Edit-mode remove button (for removable text boxes like Services cards) */
.edit-remove{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius: 12px;
  border:1px solid rgba(70,185,255,0.18);
  background: rgba(255,255,255,0.65);
  color: rgba(11,27,44,0.75);
  font-size:22px;
  line-height: 1;
  display:none;
  cursor:pointer;
  box-shadow: 10px 10px 22px rgba(11,27,44,0.08), -10px -10px 22px rgba(255,255,255,0.72);
}
html[data-theme="dark"] .edit-remove{
  background: rgba(10,14,22,0.70);
  color: rgba(233,244,255,0.78);
  border-color: rgba(124,240,255,0.14);
  box-shadow: 12px 12px 26px rgba(0,0,0,0.45);
}
.editable-on .edit-remove{display:grid;place-items:center}
.edit-remove:hover{transform: translateY(-1px)}

.software-logos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px;
  align-items:start;
  margin: 0 0 14px;
}
.software-logo{
  margin:0;
  display:grid;
  justify-items:center;
  gap:10px;
  text-align:center;
}
.software-logos img{
  width: clamp(64px, 7vw, 92px);
  height: clamp(64px, 7vw, 92px);
  object-fit:contain;
  border-radius: 18px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(70,185,255,0.16);
  box-shadow: 10px 10px 22px rgba(11,27,44,0.08), -10px -10px 22px rgba(255,255,255,0.72);
  padding:14px;
}
html[data-theme="dark"] .software-logos img{
  background: rgba(10,14,22,0.55);
  border-color: rgba(124,240,255,0.14);
  box-shadow: 12px 12px 26px rgba(0,0,0,0.45);
}
.software-logo figcaption{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(11,27,44,0.70);
  font-family: var(--headingFont);
}
html[data-theme="dark"] .software-logo figcaption{color: rgba(233,244,255,0.72)}
.software-body{
  margin:0;
  color:rgba(11,27,44,0.74);
  line-height:1.65;
  white-space:pre-line;
}
html[data-theme="dark"] .software-body{color: rgba(233,244,255,0.74)}

.footer{
  padding:24px 0 36px;
  color: rgba(11,27,44,0.62);
}
html[data-theme="dark"] .footer{color: rgba(233,244,255,0.62)}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.footer a{color: rgba(11,27,44,0.72);text-decoration:underline;text-decoration-color: rgba(70,185,255,0.25)}
html[data-theme="dark"] .footer a{color: rgba(233,244,255,0.74); text-decoration-color: rgba(124,240,255,0.22)}

/* Auth pages */
.auth{
  min-height: calc(100vh - 160px);
  display:grid;place-items:center;
}
.auth-card{
  width:min(520px, 100%);
  padding:18px;border-radius: var(--radius);
  background: rgba(255,255,255,0.66);
  border:1px solid rgba(70,185,255,0.18);
  box-shadow:
    18px 18px 38px rgba(11,27,44,0.12),
    -18px -18px 38px rgba(255,255,255,0.90),
    0 38px 110px var(--blueGlow1),
    0 92px 240px var(--blueGlow2);
}
html[data-theme="dark"] .auth-card{background: rgba(12,18,28,0.66)}
.auth-card h1{font-size:22px;margin:6px 0 10px}
.field{display:grid;gap:6px;margin:10px 0}
.field label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.field input,
.field textarea{
  padding:12px 12px;border-radius: 14px;
  border:1px solid rgba(70,185,255,0.18);
  background: rgba(255,255,255,0.70);
  box-shadow: inset 8px 8px 16px rgba(11,27,44,0.06), inset -8px -8px 16px rgba(255,255,255,0.9);
  outline:none;
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea{background: rgba(10,14,22,0.70); color: var(--text)}
.field input:focus,
.field textarea:focus{border-color: rgba(70,185,255,0.40); box-shadow: 0 0 0 4px rgba(70,185,255,0.14), inset 8px 8px 16px rgba(11,27,44,0.05), inset -8px -8px 16px rgba(255,255,255,0.92)}
.field textarea{min-height: 180px; resize: vertical; line-height: 1.5}
.msg{margin:10px 0 0;color:rgba(11,27,44,0.72);font-size:13px}
.small{font-size:12px;color:var(--muted)}

/* Admin edit UI */
.admin-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display:none;
}
.site-admin-session .admin-fab{display:block}
.admin-fab button{
  width:54px;height:54px;border-radius:18px;border:1px solid rgba(70,185,255,0.20);
  background: rgba(255,255,255,0.75);
  box-shadow:
    16px 16px 34px rgba(11,27,44,0.12),
    -16px -16px 34px rgba(255,255,255,0.90),
    0 0 28px rgba(70,185,255,0.18),
    0 36px 100px var(--blueGlow1),
    0 90px 220px var(--blueGlow2);
}
.admin-dock{
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 60;
  width: min(380px, calc(100vw - 36px));
  display:none;
  padding:12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.78);
  border:1px solid rgba(70,185,255,0.18);
  /* When the dock is tall, keep it from sliding under the fixed header. */
  max-height: calc(100vh - (env(safe-area-inset-top) + var(--topbar-h) + 120px));
  overflow:auto;
  box-shadow:
    18px 18px 38px rgba(11,27,44,0.12),
    -18px -18px 38px rgba(255,255,255,0.90),
    0 38px 110px var(--blueGlow1),
    0 92px 240px var(--blueGlow2);
  backdrop-filter: blur(14px);
}
.admin-dock.open{display:block}
.admin-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-row .btn{padding:10px 12px;font-size:13px}
.admin-row .btn.primary{font-weight:800}
.admin-note{margin:10px 2px 2px;color:rgba(11,27,44,0.68);font-size:12px;line-height:1.4}
.editable-on [data-edit]{
  outline: 2px dashed rgba(70,185,255,0.55);
  outline-offset: 6px;
  border-radius: 12px;
}
[data-edit][contenteditable="true"]{cursor:text}

/* Admin panels */
.admin-panel{margin-top:12px;padding-top:10px;border-top:1px solid rgba(70,185,255,0.18)}
.admin-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.admin-panel-body{margin-top:10px;display:grid;gap:10px}
.admin-subhead{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.admin-rowline{display:grid;gap:8px}
.admin-rowline input,.admin-rowline select{
  width:100%;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid rgba(70,185,255,0.18);
  background: rgba(255,255,255,0.70);
  box-shadow: inset 8px 8px 16px rgba(11,27,44,0.06), inset -8px -8px 16px rgba(255,255,255,0.9);
  outline:none;
}
html[data-theme="dark"] .admin-rowline input,html[data-theme="dark"] .admin-rowline select{background: rgba(10,14,22,0.70); color: var(--text)}
.admin-mini{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.admin-chipwrap{display:flex;gap:8px;flex-wrap:wrap}
.admin-chip{
  border:1px solid rgba(70,185,255,0.18);
  background: var(--card);
  padding:8px 10px;border-radius:999px;
  cursor:pointer;
}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-select{min-width: 160px}

@keyframes spin{to{transform:rotate(360deg)}}