/* NEXOBOX Premium v3 — exclusive restrained wordmark opening */
:root {
  --petrol: #0F3D3A;
  --bronze: #B8946F;
  --off: #F6F3ED;
  --brand-font: "Avenir Next", "Century Gothic", "Montserrat", "Inter", "Segoe UI", sans-serif;
}
body, .nav a, .btn, .eyebrow, h1, h2, h3, h4, .tag, .brand {font-family:var(--brand-font)}
body {font-size:15px}
.brand {width:204px;flex-shrink:0;align-items:center;justify-content:center}
.brand-art {display:block;width:100%;height:auto;object-fit:contain}
.topbar .brand{margin-right:18px}
.footer .brand{width:194px}
.skip-link{position:fixed;top:8px;left:8px;z-index:100001;transform:translateY(-200%);background:var(--off);color:var(--petrol);padding:12px 16px;border-radius:6px}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
/* Brand and intro */
html.intro-active,html.intro-active body{overflow:hidden}
.intro{display:none;position:fixed;inset:0;z-index:99990;isolation:isolate;overflow:hidden;place-items:center;background:var(--petrol)}
.intro-active .intro{display:grid}
.intro-panel{position:absolute;top:0;bottom:0;width:50.08%;z-index:1;will-change:transform;transition:transform 1.13s cubic-bezier(.78,0,.22,1)}
.intro-panel-left{left:0;background:linear-gradient(120deg,#092B29 0%,#0F3D3A 95%);border-right:1px solid rgba(221,192,156,.16)}
.intro-panel-right{right:0;background:linear-gradient(240deg,#082C29 0%,#0F3D3A 100%);border-left:1px solid rgba(221,192,156,.16)}
.intro-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.21;background:radial-gradient(ellipse 48% 60% at 50% 45%,rgba(184,148,111,.11),transparent 70%);transition:opacity .6s}
.intro-center{position:relative;z-index:4;width:min(78vw,860px);min-height:160px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-4%);transition:opacity .29s ease,filter .35s ease,transform .5s ease;pointer-events:none}
.intro-symbol{position:absolute;width:69px;height:auto;top:calc(50% - 56px);left:calc(50% - 34.5px);object-fit:contain;opacity:0;filter:drop-shadow(0 3px 14px rgba(9,20,18,.16));animation:nbxSymbol 1.21s cubic-bezier(.2,.72,.16,1) .12s both}
.intro-logo-frame{width:100%;max-width:860px;overflow:visible;line-height:0}
.intro-logo{display:block;width:100%;height:auto;object-fit:contain;opacity:0;clip-path:inset(0 50% 0 50%);transform:scaleX(.84);animation:nbxSpread 1.2s cubic-bezier(.65,.05,.14,.99) .77s forwards}
.intro-signature{opacity:0;margin-top:18px;white-space:nowrap;color:rgba(246,243,237,.7);font-family:var(--brand-font);font-size:10px;letter-spacing:.3em;animation:nbxSignature .65s ease 1.59s both}
.intro-rail{position:absolute;z-index:3;height:1px;background:linear-gradient(90deg,transparent,rgba(184,148,111,.55));width:50%;top:50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.3,.65,.2,1) .02s,opacity .6s ease;opacity:.55;pointer-events:none}
.intro-rail-left{left:0;transform-origin:right center}
.intro-rail-right{right:0;transform-origin:left center;background:linear-gradient(90deg,rgba(184,148,111,.55),transparent)}
.intro-active .intro-rail{animation:nbxRail 1.1s ease-out 1.52s both}
.intro-bottom{position:absolute;left:4.1%;right:4.1%;bottom:28px;z-index:4;display:flex;justify-content:space-between;color:rgba(246,243,237,.36);font:500 10px/1 var(--brand-font);letter-spacing:.23em;opacity:0;animation:nbxSignature .8s ease 1.6s forwards}
.intro-skip{position:absolute;right:4.1%;top:26px;z-index:5;cursor:pointer;background:transparent;border:0;color:rgba(246,243,237,.69);font:500 11px/1.5 var(--brand-font);letter-spacing:.10em;padding:10px 0;transition:color .2s}
.intro-skip:hover{color:var(--off)}
.intro-skip span{padding-left:7px;color:var(--bronze)}
.intro.is-opening .intro-panel-left{transform:translate3d(-101%,0,0)}
.intro.is-opening .intro-panel-right{transform:translate3d(101%,0,0)}
.intro.is-opening .intro-center{opacity:0;filter:blur(4px);transform:translateY(-4%) scale(1.04)}
.intro.is-opening .intro-grain,.intro.is-opening .intro-rail,.intro.is-opening .intro-skip,.intro.is-opening .intro-bottom{opacity:0;transition:opacity .24s ease}
.intro.is-done{visibility:hidden;pointer-events:none}
@keyframes nbxSymbol{0%{opacity:0;transform:scale(.67);filter:blur(3px)}27%{opacity:1;transform:scale(1);filter:blur(0)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.97)}}
@keyframes nbxSpread{0%{opacity:0;clip-path:inset(0 50% 0 50%);transform:scaleX(.84)}8%{opacity:1}85%{opacity:1}100%{opacity:1;clip-path:inset(0 0% 0 0%);transform:scaleX(1)}}
@keyframes nbxRail{0%{transform:scaleX(0);opacity:0}16%{opacity:.12}100%{transform:scaleX(1);opacity:.35}}
@keyframes nbxSignature{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Existing interactive elements: quieter executive-style finishes */
.topbar{background:rgba(5,31,29,.83);box-shadow:0 12px 35px rgba(0,0,0,.13);border-radius:12px}
.btn{border-radius:7px;position:relative;overflow:hidden;isolation:isolate;transition:filter .26s,box-shadow .32s,transform .13s,background .32s}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(108deg,transparent 24%,rgba(255,255,255,.18) 50%,transparent 76%);transform:translateX(-155%);transition:transform .7s cubic-bezier(.19,.75,.24,1);z-index:-1;pointer-events:none}
.btn:hover::before{transform:translateX(155%)}

/* Repeating luxury shine for the lighter bronze buttons */
.btn:not(.btn-ghost){
  position:relative;
  overflow:hidden;
}
.btn:not(.btn-ghost)::after{
  content:"";
  position:absolute;
  top:-38%;
  left:-28%;
  width:28%;
  height:176%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.08) 82%, rgba(255,255,255,0) 100%);
  transform:translateX(-260%) skewX(-22deg);
  opacity:.94;
  pointer-events:none;
  will-change:transform,opacity;
  animation:nbxButtonSheen 4.8s cubic-bezier(.22,.61,.36,1) 1.15s infinite;
}
.btn:not(.btn-ghost):hover::after,
.btn:not(.btn-ghost):focus-visible::after{
  animation-duration:2.9s;
}
.btn:not(.btn-ghost):hover{
  filter:brightness(1.045);
  box-shadow:0 20px 44px rgba(184,148,111,.36), 0 0 0 1px rgba(255,255,255,.12) inset;
}
@keyframes nbxButtonSheen{
  0%{transform:translateX(-260%) skewX(-22deg);opacity:0}
  8%{opacity:.96}
  24%{transform:translateX(355%) skewX(-22deg);opacity:.92}
  30%{opacity:0}
  100%{transform:translateX(355%) skewX(-22deg);opacity:0}
}

.btn-ghost{border-color:rgba(184,148,111,.62)}
.service-card,.project-card{border-radius:12px;transition:box-shadow .3s, border-color .3s;will-change:auto}
.service-card:hover,.project-card:hover{border-color:rgba(184,148,111,.6)}
.card-visual,.project-art{border-radius:7px}
.hero h1{font-weight:620;letter-spacing:-.045em;line-height:1.04}
h2{letter-spacing:-.04em;font-weight:620}
.eyebrow{letter-spacing:.23em;font-weight:600}
.hero:after{width:min(45vw,550px);height:min(45vw,550px);border-color:rgba(184,148,111,.2)}
.replay-intro{border:1px solid rgba(184,148,111,.38);border-radius:6px;padding:9px 12px;color:#e9d2b9;background:transparent;font:500 11px var(--brand-font);white-space:nowrap;cursor:pointer;transition:border-color .2s}
.replay-intro:hover{border-color:var(--bronze)}
.replay-intro span{margin-left:6px}
.mobile-nav,.menu-toggle{display:none}
html:not(.js) [data-reveal]{opacity:1;transform:none}
/* Accessible navigation at laptop/tablet widths */
@media(max-width:980px){
 .topbar{overflow:visible}
 .topbar .btn-small{margin-left:auto;margin-right:15px}
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;flex:none;width:42px;height:42px;cursor:pointer;border:1px solid rgba(184,148,111,.48);border-radius:7px;background:rgba(4,39,36,.35);padding:0}
 .menu-toggle span{display:block;width:19px;height:1.5px;background:#f6f3ed;transition:transform .25s,opacity .25s}
 .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
 .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
 .mobile-nav{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);position:absolute;top:calc(100% + 10px);right:0;width:min(355px,calc(100vw - 24px));flex-direction:column;border:1px solid rgba(184,148,111,.35);background:#0b302d;padding:14px 16px;border-radius:10px;box-shadow:0 22px 45px rgba(0,0,0,.3);transition:opacity .23s,transform .23s,visibility .23s}
 .mobile-nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
 .mobile-nav a{display:flex;justify-content:space-between;align-items:center;padding:15px 5px;text-decoration:none;color:var(--off);border-bottom:1px solid rgba(255,255,255,.11);font-size:14px}
 .mobile-nav a:last-child{color:#d6ad8b;border:0}
 .mobile-nav a span{font-size:11px;color:#c49d79}
 .intro-center{width:min(86vw,720px)}
 .footer{flex-wrap:wrap;gap:18px}
}
@media(max-width:640px){
 .brand{width:174px}.topbar{padding:0 12px;height:62px}.topbar .btn-small{display:none}
 .hero{min-height:calc(100svh - 30px)}.hero h1{font-size:clamp(35px,9vw,48px)}
 .hero-stage{min-height:400px}.device-shell{top:18px}
 .intro-center{width:93vw;min-height:90px;transform:translateY(-10%)}
 .intro-symbol{width:56px;top:calc(50% - 45px);left:calc(50% - 28px)}
 .intro-signature{white-space:normal;font-size:8px;line-height:1.5;letter-spacing:.17em;margin-top:7px;padding:0 16px}
 .intro-bottom{left:22px;right:22px;bottom:24px;font-size:8px;letter-spacing:.12em}
 .intro-skip{right:20px;top:18px}
 .intro-rail{top:50%}
 .about-visual{min-height:310px}
}
@media (hover:none),(pointer:coarse){
 .tilt-card:not(.demo-tilt),.tilt-hero{transform:none!important}
 .btn{--x:0px!important;--y:0px!important}
}
@media (prefers-reduced-motion: reduce){
 html:not(.force-motion),html:not(.force-motion) body{scroll-behavior:auto!important}
 html:not(.force-motion) .intro{display:none!important}
 html:not(.force-motion).intro-active,html:not(.force-motion).intro-active body{overflow:visible!important}
 html:not(.force-motion) [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 html:not(.force-motion) .btn,
 html:not(.force-motion) .btn::before,
 html:not(.force-motion) .btn::after,
 html:not(.force-motion) .service-card,
 html:not(.force-motion) .project-card,
 html:not(.force-motion) .parallax,
 html:not(.force-motion) .intro,
 html:not(.force-motion) .intro *{animation:none!important;transition:none!important;transform:none!important}
}
.contact-actions{flex-wrap:wrap}.contact-preview-note{width:100%;font-size:11px;color:#b7bdb7;margin:7px 0 0;text-align:right}.contact-preview-note[hidden]{display:none}
@media(max-width:980px){.contact-preview-note{text-align:left}}

/* v5: explicit visual preview, intentionally absent from published site unless ?demo=1. */
.demo-controls{display:none;position:fixed;right:17px;bottom:17px;z-index:9988;
  max-width:min(315px,calc(100vw - 34px));gap:8px;padding:13px;border-radius:12px;
  border:1px solid rgba(196,156,119,.55);background:rgba(6,37,35,.94);
  color:#f6f3ed;box-shadow:0 22px 55px rgba(0,0,0,.33);backdrop-filter:blur(16px);
  font-family:var(--brand-font);flex-direction:column}
.preview-mode .demo-controls{display:flex}
.demo-kicker{display:flex;gap:8px;align-items:center;color:#ddb897;font-size:9px;letter-spacing:.17em;font-weight:700}
.demo-dot{width:6px;height:6px;border-radius:100%;background:#d5a878;box-shadow:0 0 13px rgba(213,168,120,.9)}
.demo-control{padding:10px 13px;border-radius:6px;border:1px solid rgba(221,184,151,.4);background:transparent;color:#f6f3ed;cursor:pointer;font:600 12px var(--brand-font);text-align:left;transition:background .2s}
.demo-control:hover{background:rgba(184,148,111,.17)}
.demo-control-accent{background:#c19a76;color:#173430;border-color:#c19a76}
.demo-control-accent:hover{background:#e0b58d}
.demo-controls small{color:#c4c9c1;font-size:10px;line-height:1.45;max-width:265px}
/* Dedicated triggered tilt animation: works without mouse on the preview including touch devices. */
.service-card.demo-tilt{animation:nbxDemoTilt 1.05s ease-in-out both!important;box-shadow:0 35px 65px rgba(25,50,47,.20)!important;z-index:4}
@keyframes nbxDemoTilt{0%,100%{transform:perspective(1050px) rotateX(0) rotateY(0) translateY(0)}28%{transform:perspective(1050px) rotateX(3deg) rotateY(-8deg) translateY(-12px)}65%{transform:perspective(1050px) rotateX(-2deg) rotateY(5deg) translateY(-9px)}}
@media(max-width:640px){.demo-controls{bottom:10px;right:10px;padding:10px;gap:6px;max-width:252px}.demo-control{font-size:11px;padding:8px 10px}}

.screen-brand,.card-body h3,.project-card h3,.about-title,.hero h1,.section-head h2,.process h2,.contact h2,.about h2{font-family:var(--brand-font)}