@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted:#888;
  --subtle:#f4f4f2;
  --border:#e8e8e8;
  --accent:#1a1a1a;
  --cta:#0a0a0a;
  --serif:'Instrument Serif',serif;
  --sans:'Geist',sans-serif;
}

body{background:var(--bg);}

#app{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  max-width:1320px;
  margin:0 auto;
  width:100%;
}

/* NAV */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 3rem;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;
  top:0;
  z-index:100;
}
.logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--serif);
  font-size:1.15rem;
  font-style:italic;
  color:var(--fg);
  letter-spacing:0.01em;
}
.logo-mark{
  display:block;
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:7px;
}
.logo-dot{color:#c8922a;}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.5rem;
  list-style:none;
  margin:0;
  padding:0;
  min-width:0;
}
.nav-links > li{
  display:flex;
  align-items:center;
}
.nav-links > li:last-child{
  flex-shrink:0;
}
.nav-links a{
  font-size:13px;
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--fg);}
.btn-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--cta);
  color:#fff;
  border:none;
  padding:0 1.5rem;
  min-height:2.45rem;
  box-sizing:border-box;
  border-radius:100px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  letter-spacing:0.03em;
  white-space:nowrap;
  transition:opacity 0.2s;
  flex-shrink:0;
}
.btn-nav:hover{opacity:0.8;}
.nav-actions{
  display:flex;
  align-items:center;
  gap:2rem;
  flex-wrap:nowrap;
  min-width:0;
}
.lang-dd{
  position:relative;
  flex-shrink:0;
  z-index:150;
  display:flex;
  align-items:center;
}
.lang-dd-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:100px;
  padding:0 1rem;
  min-height:2.45rem;
  box-sizing:border-box;
  background:var(--bg);
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.08em;
  color:var(--fg);
  cursor:pointer;
  transition:border-color 0.2s,background 0.2s;
}
.lang-dd-toggle:hover{border-color:#ccc;}
.lang-dd-current{min-width:1.75em;text-align:left;}
.lang-dd-chevron{
  font-size:9px;
  color:var(--muted);
  transition:transform 0.2s;
  line-height:1;
}
.lang-dd-toggle[aria-expanded="true"] .lang-dd-chevron{transform:rotate(180deg);}
.lang-dd-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:12rem;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(10,10,10,0.1);
}
.lang-dd-menu[hidden]{display:none !important;}
.lang-dd-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  font-family:var(--sans);
  font-size:13px;
  font-weight:400;
  color:var(--fg);
  padding:0.55rem 0.85rem;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.15s;
}
.lang-dd-code{
  font-size:10px;
  letter-spacing:0.08em;
  font-weight:500;
  color:var(--muted);
}
.lang-dd-item:hover{background:var(--subtle);}
.lang-dd-item[aria-current="true"]{
  background:var(--fg);
  color:#fff;
  font-weight:500;
}
.lang-dd-item[aria-current="true"] .lang-dd-code{color:rgba(255,255,255,0.72);}
.lang-dd-item[aria-current="true"]:hover{background:var(--fg);}
.nav-links a:focus-visible,.btn-nav:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-submit:focus-visible,.w-arr:focus-visible,.lang-dd-toggle:focus-visible,.lang-dd-item:focus-visible{outline:2px solid #c8922a;outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  .marquee-inner{animation:none;}
  .rv{opacity:1 !important;transform:none !important;transition:none !important;}
  .work-row,.work-row:hover{padding-left:0 !important;}
  .work-row:hover .w-arr{transform:none;}
  .btn-primary:hover{transform:none;}
}

/* HERO */
.hero{
  padding:7rem clamp(1.5rem,4vw,3.75rem) 5rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  gap:clamp(2rem,5vw,3.5rem);
  align-items:center;
  max-width:1180px;
  margin:0 auto;
}
.hero-copy{min-width:0;max-width:100%;}
.hero-visual{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--subtle);
  aspect-ratio:4/3;
  max-width:520px;
  width:100%;
  justify-self:stretch;
  box-shadow:0 24px 56px rgba(10,10,10,0.08);
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-visual::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(200,146,42,0.08) 0%,transparent 45%);
}
.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  margin-bottom:2.75rem;
}
.tag-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:#c8922a;
  display:inline-block;
}
.hero-h1{
  font-family:var(--serif);
  font-size:clamp(3.1rem,5.8vw,4.85rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--fg);
  margin-bottom:2.25rem;
}
.hero-h1 em{font-style:italic;color:#c8922a;}
.hero-h1 .ghost{
  -webkit-text-stroke:1.5px #ccc;
  color:transparent;
}
.hero-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:2.25rem;
  border-top:1px solid var(--border);
  gap:1.75rem;
}
.hero-sub{
  font-size:1.05rem;
  color:var(--muted);
  font-weight:300;
  line-height:1.78;
  max-width:42em;
}
.btn-group{display:flex;gap:0.85rem;align-items:center;flex-wrap:wrap;}
.btn-arrow{font-size:13px;}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--cta);
  color:#fff;
  border:none;
  padding:0.95rem 2rem;
  border-radius:100px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background 0.2s,transform 0.2s;
  letter-spacing:0.02em;
}
.btn-primary:hover{background:#c8922a;transform:translateY(-1px);}
.btn-ghost{
  font-size:14px;
  color:var(--muted);
  background:none;
  border:1px solid var(--border);
  padding:0.95rem 1.85rem;
  border-radius:100px;
  font-family:var(--sans);
  cursor:pointer;
  transition:border-color 0.2s,color 0.2s;
  font-weight:400;
  letter-spacing:0.02em;
}
.btn-ghost:hover{border-color:#ccc;color:var(--fg);}

/* MARQUEE STRIP */
.marquee-section{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;
  overflow:hidden;
  background:var(--subtle);
}
.marquee-label{
  padding:0.7rem 3rem;
  border-bottom:1px solid var(--border);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
}
.marquee-track{
  display:flex;
  overflow:hidden;
  padding:1.5rem 0;
}
.marquee-inner{
  display:flex;
  align-items:center;
  gap:0;
  animation:marquee 28s linear infinite;
  white-space:nowrap;
  will-change:transform;
}
.marquee-inner:hover{animation-play-state:paused;}

@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

.mq-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:0 2.5rem;
  border-right:1px solid var(--border);
  flex-shrink:0;
}
.mq-logo{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  font-weight:400;
  flex-shrink:0;
  color:#fff;
}
.mq-logo:has(img){
  font-size:0;
  background:var(--bg);
  border:1px solid var(--border);
  padding:2px;
}
.mq-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:7px;
}
.mq-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  justify-content:center;
}
.mq-name{
  font-size:14px;
  font-weight:500;
  color:var(--fg);
  letter-spacing:-0.01em;
}
.mq-platform{
  font-size:11px;
  color:var(--muted);
  font-weight:300;
  letter-spacing:0.04em;
}
.mq-badge{
  font-size:9px;
  padding:3px 8px;
  border-radius:100px;
  letter-spacing:0.06em;
  font-weight:500;
  flex-shrink:0;
  justify-self:end;
}
.live{background:#f0faf4;color:#1a7a3e;border:1px solid #c3e8d0;}
.soon{background:#fef9ec;color:#9a6c0a;border:1px solid #f0dcaa;}

/* STATS */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);
}
.stat-box{
  padding:2.5rem 3rem;
  border-right:1px solid var(--border);
}
.stat-box:last-child{border-right:none;}
.stat-n{
  font-family:var(--serif);
  font-size:3rem;
  font-style:italic;
  color:var(--fg);
  line-height:1;
  margin-bottom:6px;
}
.stat-l{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  font-weight:400;
}

/* SECTION */
.sec{
  padding:6rem 3rem;
  border-bottom:1px solid var(--border);
  max-width:1180px;
  margin:0 auto;
}
.sec-full{
  padding:6rem 3rem;
  border-bottom:1px solid var(--border);
}
.sec-tag{
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  margin-bottom:0.6rem;
}
.sec-h2{
  font-family:var(--serif);
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--fg);
}
.sec-h2 em{font-style:italic;color:var(--muted);}
.sec-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:3.5rem;
  flex-wrap:wrap;
  gap:1rem;
}
.sec-sub{
  font-size:13px;
  color:var(--muted);
  font-weight:300;
  line-height:1.8;
  max-width:280px;
  text-align:right;
}

/* WORK LIST */
.work-row{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:1.6rem 0;
  border-top:1px solid var(--border);
  transition:padding-left 0.35s cubic-bezier(.23,1,.32,1);
  gap:1rem;
}
.work-row:last-child{border-bottom:1px solid var(--border);}
.work-row:hover{padding-left:0.75rem;}
.work-left{display:flex;align-items:flex-start;gap:1.5rem;flex:1;min-width:0;}
.work-main{flex:1;min-width:0;}
.work-idx{font-size:11px;color:#ccc;font-weight:300;min-width:20px;}
.work-logo{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:12px;
  color:#fff;flex-shrink:0;
}
.work-logo:has(img){
  font-size:0;
  background:var(--bg);
  border:1px solid var(--border);
  padding:2px;
}
.work-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:5px;
}
.work-name{
  font-family:var(--serif);
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--fg);
  transition:color 0.2s;
}
.work-row:hover .work-name{color:#c8922a;}
.work-desc{
  font-size:12px;
  color:var(--muted);
  font-weight:300;
  max-width:420px;
  line-height:1.6;
}
.work-meta{
  display:flex;
  align-items:center;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-top:0.85rem;
}
.work-plat{font-size:11px;color:var(--muted);font-weight:300;}
.w-arr{
  width:26px;height:26px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  text-decoration:none;
  flex-shrink:0;
  cursor:pointer;
  line-height:0;
  transition:border-color 0.2s,color 0.2s,transform 0.3s;
}
.w-arr-icon{
  display:block;
  width:11px;height:11px;
}
.work-row:hover .w-arr{
  border-color:#c8922a;color:#c8922a;transform:rotate(45deg);
}
.work-row:hover .w-arr.w-arr-loading{
  transform:none;
  border-color:#c8922a;
  color:transparent !important;
}
.w-arr.w-arr-loading{
  pointer-events:none;
  color:transparent !important;
  position:relative;
}
.w-arr.w-arr-loading::after{
  content:'';
  position:absolute;
  width:13px;
  height:13px;
  border:2px solid var(--border);
  border-top-color:#c8922a;
  border-radius:50%;
  animation:wspin 0.55s linear infinite;
}
@keyframes wspin{
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
  .w-arr.w-arr-loading::after{animation:none;border-top-color:#c8922a;opacity:0.85;}
}

/* SERVICES */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  max-width:1180px;
  margin:0 auto;
}
.svc-card{
  background:var(--bg);
  padding:3rem 2.5rem;
  transition:background 0.3s;
}
.svc-card:hover{background:var(--subtle);}
.svc-num{font-size:10px;color:#ccc;font-weight:300;letter-spacing:0.1em;margin-bottom:1.5rem;}
.svc-title{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--fg);
  margin-bottom:0.75rem;
  line-height:1.2;
}
.svc-body{font-size:13px;color:var(--muted);font-weight:300;line-height:1.85;}
.svc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:1.5rem;}
.svc-tag{
  font-size:10px;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);
  padding:3px 8px;border-radius:2px;
}

/* CONTACT */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6rem;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
}
.contact-h{
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,2.6rem);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--fg);
  margin-bottom:1.25rem;
}
.contact-h em{font-style:italic;color:#c8922a;}
.contact-p{font-size:13px;color:var(--muted);font-weight:300;line-height:1.9;margin-bottom:2.5rem;}
.cd-row{margin-bottom:1.25rem;}
.cd-lbl{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#c8922a;font-weight:400;margin-bottom:3px;}
.cd-v{font-size:14px;color:var(--fg);font-weight:300;}

.fg-row{margin-bottom:1.25rem;}
.fg-lbl{display:block;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:400;}
.fg-in,.fg-sel,.fg-ta{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  color:var(--fg);
  font-family:var(--sans);
  font-size:14px;
  font-weight:300;
  padding:0.55rem 0;
  outline:none;
  transition:border-color 0.2s;
  border-radius:0;
  -webkit-appearance:none;
}
.fg-in::placeholder,.fg-ta::placeholder{color:#ccc;}
.fg-in:focus,.fg-sel:focus,.fg-ta:focus{border-color:#c8922a;}
.fg-sel option{background:#fff;color:var(--fg);}
.fg-ta{resize:none;min-height:75px;}
.btn-submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--cta);
  color:#fff;
  border:none;
  padding:0.95rem 2.1rem;
  border-radius:100px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  margin-top:1.75rem;
  transition:background 0.2s;
  letter-spacing:0.02em;
}
.btn-submit:hover{background:#c8922a;}
.ok-msg{display:none;font-size:13px;color:#1a7a3e;margin-top:1rem;font-weight:300;}
.err-msg{display:none;font-size:13px;color:#a32020;margin-top:1rem;font-weight:300;line-height:1.5;}
.btn-submit:disabled{opacity:0.55;cursor:not-allowed;}

/* FOOTER */
footer{
  padding:2rem 3rem;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
.ft-copy{font-size:11px;color:#bbb;font-weight:300;}
.ft-mantra{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:#c8922a;
}

/* REVEAL */
.rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.8s cubic-bezier(.23,1,.32,1),transform 0.8s cubic-bezier(.23,1,.32,1);
}
.rv.in{opacity:1;transform:none;}

@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:2.25rem;
    max-width:640px;
  }
  .hero-visual{
    order:-1;
    max-width:none;
    justify-self:stretch;
  }
  .hero-h1{font-size:clamp(2.65rem,8vw,3.65rem);}
}
@media(max-width:640px){
  nav{padding:1.25rem 1.5rem;}
  .hero{padding:4rem 1.5rem 3rem;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;gap:3rem;}
  .sec,.sec-full{padding:4rem 1.5rem;}
  .stat-box{padding:1.75rem 1.5rem;}
  footer{padding:1.5rem;}
  .nav-actions{gap:0.75rem;}
  .nav-links li:not(:last-child){display:none;}
  .btn-nav{
    font-size:11px;
    padding:0 1rem;
    min-height:2.35rem;
    letter-spacing:0.02em;
  }
  .lang-dd-toggle{
    min-height:2.35rem;
    padding:0 0.8rem;
    font-size:10px;
  }
  .marquee-label{padding:0.7rem 1.5rem;}
}