:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
::selection { background: #fff; color: #111; }

/* Soft, minimal background texture */
.grid-noise {
  background-image:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.035), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.025), transparent 30%),
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

/* Small motion details */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(.992);
  transition: opacity .75s cubic-bezier(.2,.75,.25,1), transform .75s cubic-bezier(.2,.75,.25,1);
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

.marquee { overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-flex; min-width: max-content; animation: marquee 30s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

.float-soft { animation: floatSoft 5s ease-in-out infinite; }
@keyframes floatSoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Public navigation mobile animation */
[data-mobile-menu] {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s cubic-bezier(.2,.75,.25,1), opacity .25s ease;
}
[data-mobile-menu] > div { overflow: hidden; }
[data-mobile-menu].is-open { grid-template-rows: 1fr; opacity: 1; }
[data-menu-button] svg { transition: transform .3s ease; }
[data-menu-button].is-open svg { transform: rotate(90deg); }

input, textarea, select { outline: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.08); border-color: rgba(255,255,255,.45) !important; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Prevent long customer data from breaking the admin UI */
.break-anywhere { overflow-wrap: anywhere; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }

@media (hover:hover) {
  .soft-lift { transition: transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease; }
  .soft-lift:hover { transform: translateY(-4px); box-shadow: 0 22px 55px rgba(255,255,255,.08); }
}

@media (max-width: 640px) {
  .marquee-inner { animation-duration: 22s; }
  input, textarea, select { font-size: 16px; } /* prevents iOS auto-zoom */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Project gallery modal */
.project-dialog { animation: dialogIn .28s cubic-bezier(.2,.8,.2,1); }
.project-dialog::backdrop { animation: backdropIn .25s ease; }
.project-thumb { border-color: transparent; opacity: .58; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.project-thumb:hover, .project-thumb.is-active { opacity: 1; border-color: #fff; transform: translateY(-1px); }
body.modal-open { overflow: hidden; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

/* Simple gallery lightbox */
.gallery-dialog { animation: galleryIn .28s cubic-bezier(.2,.8,.2,1); }
.gallery-dialog::backdrop { animation: backdropIn .22s ease; }
.gallery-dialog img { user-select: none; -webkit-user-drag: none; }
@keyframes galleryIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }


/* ===== Reference-style home shell ===== */
.site-header { width:100%; z-index:60; color:#fff; }
.site-header-floating {
  position:fixed;
  inset:0 0 auto 0;
  background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  transition:background-color .42s cubic-bezier(.2,.75,.25,1), border-color .42s ease, backdrop-filter .42s ease, -webkit-backdrop-filter .42s ease, box-shadow .42s ease;
}
.site-header.home-overlay { background:transparent; border-color:transparent; }
.site-header-solid { background:rgba(5,5,5,.88); border-bottom-color:rgba(255,255,255,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.site-header-floating.is-scrolled {
  background:rgba(5,5,5,.76);
  border-bottom-color:rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
.site-header-floating > div:first-child { transition:padding .4s cubic-bezier(.2,.75,.25,1); }
.site-header-floating.is-scrolled > div:first-child { padding-top:1rem; padding-bottom:1rem; }
.inner-page main { padding-top:5.6rem; }
.inner-page .site-flash { padding-top:6.7rem; margin-bottom:-5.6rem; }
.nav-link { position:relative; padding:.35rem 0 .7rem; color:rgba(255,255,255,.88); transition:color .28s ease, opacity .28s ease; }
.nav-link::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:#fff; transition:width .32s cubic-bezier(.2,.75,.25,1); }
.nav-link:hover,.nav-link.is-active { color:#fff; }
.nav-link:hover::after,.nav-link.is-active::after { width:100%; }
.header-quote { align-items:center; gap:.55rem; border:1px solid rgba(255,255,255,.65); border-radius:999px; padding:.85rem 1.4rem; font-size:.875rem; font-weight:650; color:#fff; transition:background-color .28s ease,color .28s ease,border-color .28s ease,transform .28s ease; }
.header-quote:hover { background:#fff; color:#000; border-color:#fff; transform:translateY(-1px); }
.mobile-menu-shell { background:rgba(4,4,4,.96); border-top:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); }

.home-hero { background:#050505; min-height:700px; border:0!important; }
.hero-glow { background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.15) 0%, rgba(255,255,255,.07) 18%, rgba(255,255,255,.025) 36%, transparent 62%); pointer-events:none; }
.hero-arcs { position:absolute; top:7%; bottom:4%; width:42vw; pointer-events:none; opacity:.52; }
.hero-arcs::before,.hero-arcs::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
.hero-arcs::after { inset:11% -8%; opacity:.62; }
.hero-arcs-left { left:-31vw; transform:rotate(-16deg); }
.hero-arcs-right { right:-31vw; transform:rotate(16deg); }
.hero-arcs-left::before { box-shadow:66px 38px 0 -1px rgba(255,255,255,.12),132px 77px 0 -1px rgba(255,255,255,.09),198px 115px 0 -1px rgba(255,255,255,.07); }
.hero-arcs-right::before { box-shadow:-66px 38px 0 -1px rgba(255,255,255,.12),-132px 77px 0 -1px rgba(255,255,255,.09),-198px 115px 0 -1px rgba(255,255,255,.07); }
.hero-copy { animation:heroIntro .85s cubic-bezier(.2,.75,.25,1) both; }
.hero-kicker { animation:heroFade .75s .08s ease both; }
.hero-btn { display:inline-flex; min-width:220px; align-items:center; justify-content:center; gap:.7rem; border-radius:999px; padding:1rem 1.55rem; font-size:.92rem; font-weight:700; transition:transform .28s cubic-bezier(.2,.75,.25,1),background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease; }
.hero-btn:hover { transform:translateY(-2px); }
.hero-btn-primary { background:#fff; color:#050505; box-shadow:0 10px 35px rgba(255,255,255,.08); }
.hero-btn-primary:hover { box-shadow:0 14px 42px rgba(255,255,255,.14); }
.hero-btn-secondary { color:#fff; border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.015); }
.hero-btn-secondary:hover { background:rgba(255,255,255,.08); border-color:#fff; }
.hero-scroll { animation:scrollCue 2.2s ease-in-out infinite; }
@keyframes heroIntro { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes heroFade { from { opacity:0; } to { opacity:1; } }
@keyframes scrollCue { 0%,100% { transform:translateY(0); opacity:.55; } 50% { transform:translateY(6px); opacity:1; } }

.site-footer { background:#050505; color:#fff; border-top:1px solid rgba(255,255,255,.09); }
.site-footer a { color:rgba(255,255,255,.88); transition:color .25s ease,transform .25s ease; }
.site-footer a:hover { color:#fff; }
.footer-heading { font-size:.72rem; text-transform:uppercase; letter-spacing:.28em; color:rgba(255,255,255,.62); }
.footer-icon { display:grid; width:2.5rem; height:2.5rem; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:999px; }
.footer-icon:hover { background:#fff; color:#000!important; border-color:#fff; transform:translateY(-2px); }
.footer-column a:hover { transform:translateX(2px); }

@media (max-width:1023px) {
  .site-header.home-overlay { position:fixed; }
  .hero-arcs { width:58vw; opacity:.34; }
  .hero-arcs-left { left:-46vw; }
  .hero-arcs-right { right:-46vw; }
}
@media (max-width:640px) {
  .home-hero { min-height:680px; }
  .hero-glow { background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.12), rgba(255,255,255,.03) 40%, transparent 68%); }
  .hero-arcs { opacity:.22; width:80vw; }
  .hero-arcs-left { left:-67vw; }
  .hero-arcs-right { right:-67vw; }
  .hero-btn { width:100%; min-width:0; }
}

/* ===== Admin mobile polish ===== */
.admin-input {
  width:100%; min-width:0; border:1px solid rgba(255,255,255,.11); background:#050506; color:#fff;
  border-radius:1rem; padding:.78rem .95rem; font-size:.875rem; line-height:1.35;
  outline:none; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.admin-input:focus { border-color:rgba(255,255,255,.35); background:#080809; box-shadow:0 0 0 3px rgba(255,255,255,.05); }
.admin-input::placeholder { color:rgba(255,255,255,.28); }
.admin-input option { background:#0a0a0c; color:#fff; }
.admin-mobile-menu { animation:adminMenuIn .2s cubic-bezier(.2,.75,.25,1); }
.admin-mobile-link { display:flex; min-height:44px; align-items:center; border:1px solid rgba(255,255,255,.09); border-radius:1rem; padding:.7rem .85rem; color:rgba(255,255,255,.68); background:rgba(255,255,255,.025); }
.admin-mobile-link.is-active { background:#fff; color:#000; border-color:#fff; }
@keyframes adminMenuIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@media (max-width:639px) {
  body { overflow-x:hidden; }
  .admin-input { font-size:16px; } /* Prevent iOS zoom */
  main { max-width:100vw; overflow:hidden; }
  .overflow-x-auto { -webkit-overflow-scrolling:touch; }
}