/* Agency Page Styles — labs @ LA Renders */

:root {
  --cream: #F5F4F0;
  --white: #FFFFFF;
  --ink:   #111111;
  --mid:   #444444;
  --electric: #0066FF;
  --border: rgba(0,0,0,0.08);
  --coral: #FF5C35;
  --coral-soft: rgba(255,92,53,0.08);
}

html { scroll-behavior: smooth; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity:1; transform:none; }
.d1{transition-delay:0.1s} .d2{transition-delay:0.2s} .d3{transition-delay:0.3s}

/* NAV */
#lar-nav { position:fixed; top:0; left:0; right:0; z-index:9999; padding:24px 52px; display:flex; justify-content:space-between; align-items:center; transition:padding 0.4s, background 0.4s, border-bottom 0.4s; }
#lar-nav.stuck { padding:16px 52px; background:rgba(245,244,240,0.95); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.lar-logo { text-decoration:none; display:flex; align-items:center; gap:0; }
.lar-logo-img { height:28px !important; width:auto !important; display:block !important; max-width:none !important; }
.lar-flogo .lar-logo-img { height:20px !important; width:auto !important; display:block !important; max-width:none !important; }
.lar-logo-text { font-family:'Satoshi',sans-serif; font-size:22px; font-weight:800; letter-spacing:-0.04em; color:var(--ink); line-height:1; }
.lar-logo-sq { display:inline-block; width:7px; height:7px; border-radius:1px; background:var(--electric); flex-shrink:0; margin-left:3px; margin-bottom:10px; }
.lar-links { display:flex; gap:32px; list-style:none; margin:0; padding:0; }
.lar-links a { font-size:15px; font-weight:500; color:#333; text-decoration:none; transition:color 0.2s; }
.lar-links a:hover { color:var(--ink); }
.lar-btn { font-size:14px; font-weight:600; color:#fff; background:var(--ink); text-decoration:none; padding:11px 24px; border-radius:100px; transition:background 0.2s, box-shadow 0.3s; }
.lar-btn:hover { background:var(--electric); box-shadow:0 0 28px rgba(0,102,255,0.3); }

/* HERO */
#lar-hero { min-height:100vh; min-height:100dvh; background:var(--cream); display:flex; flex-direction:column; justify-content:center; padding:0 52px; position:relative; overflow:hidden; margin-top:-23px; padding-top:23px; }
.lar-blob { position:absolute; top:10%; right:-5%; width:55vw; height:55vw; max-width:800px; max-height:800px; border-radius:50%; background:radial-gradient(circle at 40% 40%, rgba(0,102,255,0.12) 0%, rgba(0,102,255,0.04) 40%, transparent 70%); animation:lar-blob 12s ease-in-out infinite alternate; pointer-events:none; }
@keyframes lar-blob { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,15px) scale(1.04)} 100%{transform:translate(10px,-20px) scale(0.98)} }
.lar-ring { position:absolute; top:15%; right:8%; width:300px; height:300px; border-radius:50%; border:1.5px solid rgba(0,102,255,0.15); animation:lar-ring 10s ease-in-out infinite alternate; pointer-events:none; }
.lar-ring::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:180px; height:180px; border-radius:50%; border:1px solid rgba(0,102,255,0.08); }
@keyframes lar-ring { 0%{transform:translateY(0) rotate(0deg)} 100%{transform:translateY(-20px) rotate(10deg)} }
.lar-dot { position:absolute; top:40%; right:20%; width:10px; height:10px; border-radius:50%; background:var(--electric); box-shadow:0 0 20px rgba(0,102,255,0.5); animation:lar-dot 4s ease-in-out infinite; pointer-events:none; }
@keyframes lar-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.8);opacity:0.4} }
.lar-hero-content { position:relative; z-index:1; max-width:1400px; margin:0 auto; width:100%; }
.lar-tag { font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--electric); margin-bottom:28px; display:flex; align-items:center; gap:10px; }
.lar-tag::before { content:''; width:24px; height:1.5px; background:var(--electric); }
.lar-h1 { font-size:clamp(52px,8vw,112px); font-weight:800; line-height:0.92; letter-spacing:-0.045em; color:var(--ink); margin:0 0 44px; }
.lar-hl { color:var(--electric); position:relative; display:inline-block; }
.lar-hl::after { content:''; position:absolute; bottom:4px; left:0; height:3px; width:0; background:var(--electric); border-radius:2px; transition:width 1.2s cubic-bezier(0.16,1,0.3,1) 0.8s; }
.lar-hl.active::after { width:100%; }
.lar-foot { display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; gap:60px; }
.lar-sub { font-size:22px; color:#333; max-width:450px; line-height:1.65; }
.lar-actions { display:flex; flex-direction:row; gap:12px; flex-shrink:0; align-items:center; }
.btn-dark { font-size:16px !important; font-weight:600 !important; color:#fff !important; background:var(--ink) !important; text-decoration:none !important; padding:16px 32px !important; border-radius:100px !important; border:none !important; cursor:pointer !important; transition:background 0.2s, box-shadow 0.3s !important; display:inline-block !important; }
.btn-dark:hover, .btn-dark:hover *, a.btn-dark:hover, button.btn-dark:hover { background:var(--electric) !important; color:#ffffff !important; box-shadow:0 0 36px rgba(0,102,255,0.3) !important; text-decoration:none !important; }
.btn-line { font-size:16px !important; font-weight:500 !important; color:#333 !important; text-decoration:none !important; padding:16px 32px !important; border-radius:100px !important; border:1px solid rgba(0,0,0,0.15) !important; transition:border-color 0.2s, color 0.2s !important; display:inline-block !important; }
.btn-line:hover { border-color:var(--ink) !important; color:var(--ink) !important; }

/* SECTIONS */
.lar-section { padding:120px 52px; }
.lar-inner { max-width:1400px; margin:0 auto; }
.lar-label { font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--electric); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.lar-contact-inner .lar-label { margin-bottom:20px; }
.lar-contact-h2 { margin-top:0; }
.lar-label::before { content:''; width:20px; height:1.5px; background:var(--electric); }
.lar-h2 { font-size:clamp(36px,4.5vw,64px); font-weight:800; letter-spacing:-0.035em; line-height:1.0; color:var(--ink); margin:0 0 64px; }

/* SERVICES */
#lar-services { background:var(--white); border-top:1px solid var(--border); }
.lar-svc-grid { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.lar-svc { padding:44px 32px; position:relative; overflow:hidden; transition:background 0.3s; }
.lar-svc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--electric); transform:scaleX(0); transform-origin:left; transition:transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.lar-svc:hover { background:var(--cream); }
.lar-svc:hover::before { transform:scaleX(1); }
.lar-svc-n { font-size:11px; font-weight:700; color:var(--electric); letter-spacing:0.1em; margin-bottom:28px; }
.lar-svc-t { font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; margin-bottom:14px; }
.lar-svc-d { font-size:18px; color:var(--mid); line-height:1.75; }

/* WORK */
#lar-work { background:var(--cream); border-top:1px solid var(--border); }
.lar-carousel { overflow:hidden; position:relative; }
.lar-track { display:flex; gap:24px; will-change:transform; user-select:none; cursor:grab; }
.lar-track:active { cursor:grabbing; }
.lar-card { background:var(--white); border:1px solid var(--border); border-radius:14px; overflow:hidden; flex-shrink:0; transition:box-shadow 0.35s, border-color 0.3s; }
.lar-card:hover { box-shadow:0 20px 50px rgba(0,0,0,0.08); border-color:rgba(0,102,255,0.2); }
.lar-vis { height:300px; position:relative; overflow:hidden; background:var(--cream); }
.lar-vis img { width:100%; height:100%; object-fit:cover; display:block; }
.lar-body { padding:28px 28px 32px; }
.lar-tag2 { font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--electric); margin-bottom:8px; }
.lar-title { font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; margin-bottom:18px; }
.lar-stat { font-size:16px; color:var(--mid); display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.lar-stat:last-child { border-bottom:none; }
.lar-stat-u { color:var(--electric); font-weight:700; }
.lar-controls { display:flex; gap:10px; margin-top:32px; }
.lar-cbtn { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; border-radius:50% !important; border:1px solid var(--border) !important; background:var(--white) !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; font-size:17px !important; color:var(--ink) !important; padding:0 !important; box-sizing:border-box !important; line-height:1 !important; }
.lar-cbtn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.lar-cbtn:disabled { opacity:0.3; pointer-events:none; }

/* ABOUT */
#lar-about { background:var(--white); border-top:1px solid var(--border); }
.lar-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.lar-about-body { font-size: 18px; color: #333; line-height: 1.85; }

/* CONTACT */
#lar-contact { background:var(--cream); border-top:1px solid var(--border); padding:120px 52px; text-align:center; position:relative; overflow:hidden; }
.lar-contact-blob { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:400px; background:radial-gradient(ellipse, rgba(0,102,255,0.07) 0%, transparent 70%); pointer-events:none; }
.lar-contact-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.lar-contact-h2 { font-size:clamp(44px,6.5vw,84px); font-weight:800; letter-spacing:-0.04em; line-height:0.93; color:var(--ink); margin-bottom:28px; }
.lar-contact-h2 em { font-style:normal; color:var(--electric); }
.lar-contact-sub { font-size:20px; color:#333; line-height:1.75; margin-bottom:48px; }
.lar-contact-btns { display:flex; justify-content:center; gap:12px; }

/* FOOTER */
#lar-footer { background:var(--ink); padding:28px 52px; display:flex; justify-content:space-between; align-items:center; }
.lar-flogo { display:flex; align-items:center; gap:0; }
.lar-flogo-text { font-size:17px; font-weight:800; color:#fff; letter-spacing:-0.04em; margin-right:4px; }
.lar-flogo-sq { width:7px; height:7px; border-radius:1px; background:var(--electric); flex-shrink:0; margin-right:10px; }
.lar-flogo-parent { font-size:13px; color:rgba(255,255,255,0.35); }
.lar-fcopy { font-size:12px; color:rgba(255,255,255,0.3); }
.ast-scroll-to-top-right { bottom: 50px !important; }

/* RESPONSIVE */
@media(max-width:900px){
  #lar-nav,#lar-nav.stuck{padding:18px 24px;}
  .lar-links{display:none;}
  #lar-hero{margin-top:-23px;padding-top:23px;padding-left:24px;padding-right:24px;}
  .lar-foot{flex-direction:column!important;align-items:flex-start!important;gap:24px!important;}
  .lar-actions{flex-direction:column!important;align-items:flex-start!important;}
  .lar-sub{font-size:18px;max-width:100%;}
  .lar-section{padding:72px 24px;}
  #lar-contact{padding:90px 24px;}
  #lar-footer{padding:24px;flex-direction:column;gap:12px;text-align:center;}
  .lar-flogo{justify-content:center;}
  .lar-svc-grid{grid-template-columns:1fr 1fr;border-radius:12px;}
  .lar-svc{border-right:none;border-bottom:1px solid var(--border);}
  
  .lar-svc:last-child{border-bottom:none;}
  .lar-about-grid{grid-template-columns:1fr;gap:36px;}
  .lar-carousel{overflow:hidden;}
  .lar-track{gap:12px;}
  .lar-contact-btns{flex-direction:column;align-items:center;}
}
@media(max-width:600px){
  .lar-svc-grid{grid-template-columns:1fr;}
  .lar-svc{border-right:none!important;}
}

/* Coral accents */
#lar-services .lar-label::before,
#lar-about .lar-label::before { background:var(--coral) !important; }
#lar-services .lar-label,
#lar-about .lar-label { color:var(--coral) !important; }
#lar-services .lar-svc-n { color:var(--coral) !important; }
#lar-services .lar-svc::before { background:var(--coral) !important; }

/* Section reveal animation */
.section-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.section-reveal.visible { opacity:1; transform:none; }

/* Word-by-word text animation */
.word-animate .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.word-animate.visible .word { opacity:1; transform:none; }

/* Hero h1 letter animation */
.lar-h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.lar-h1.animated .char { opacity:1; transform:none; }

/* Contact h2 coral em */
.lar-contact-h2 em { color:var(--coral) !important; }

/* Stat-u coral in about */
#lar-work .lar-stat-u { color:var(--coral); }


/* ── Marquee carousel ── */
.lar-marquee-wrap {
  overflow: hidden;
  cursor: grab;
  padding-bottom: 60px;
}
.lar-marquee-wrap:active { cursor: grabbing; }

.lar-marquee-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
.lar-marquee-track.animating { /* JS controlled */ }
.lar-marquee-track.paused,
.lar-marquee-wrap:hover .lar-marquee-track { animation-play-state: paused; }



.lar-mcard {
  width: 360px;
  flex-shrink: 0;
  background: var(--white);
}

.lar-mcard .lar-vis {
  height: 300px;
  overflow: hidden;
  border-radius: 0;
  display: flex;
  align-items: flex-end;
}
.lar-mcard .lar-vis img {
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.lar-mcard .lar-body {
  padding: 20px 0 0 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

@media(max-width:768px) {
  .lar-mcard { width: 260px; }
  .lar-mcard .lar-vis { height: 200px; }
}

/* ── Marquee ── */
.lar-marquee-outer {
  overflow: hidden;
  cursor: none !important;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.lar-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  width: max-content;
  /* animation handled by JS */
  will-change: transform;
}



.lar-marquee-track .lar-card {
  width: 380px !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

@media(max-width: 768px) {
  .lar-marquee-outer { margin: 0 -24px; }
  .lar-marquee-track .lar-card { width: 320px !important; }
}

/* ── Drag cursor ── */
.lar-drag-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: var(--electric) !important;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 10px 18px;
  border-radius: 100px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.25s;
  opacity: 0;
  white-space: nowrap;
}
.lar-drag-cursor.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.lar-drag-cursor.active {
  background: #0066FF !important;
}

/* 5-card services grid — 3 top, 2 bottom centered */



/* Services grid borders for 5-card layout */






/* 5-card services grid — clean */
.lar-svc:nth-child(1),
.lar-svc:nth-child(2),
.lar-svc:nth-child(3) { grid-column: span 2; border-bottom: 1px solid var(--border); }
.lar-svc:nth-child(4),
.lar-svc:nth-child(5) { grid-column: span 3; border-bottom: none; }
.lar-svc:nth-child(1),
.lar-svc:nth-child(2),
.lar-svc:nth-child(4) { border-right: 1px solid var(--border); }
.lar-svc:nth-child(3),
.lar-svc:nth-child(5) { border-right: none; }















#lar-hero.lar-draft-hero {
  background: #0a0a2e !important;
}

#lar-hero.lar-draft-hero .lar-blob {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: none !important;
  animation: none !important;
  overflow: hidden !important;
}

#lar-hero.lar-draft-hero .lar-blob .mesh-1,
#lar-hero.lar-draft-hero .lar-blob .mesh-2,
#lar-hero.lar-draft-hero .lar-blob .mesh-3 {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
}

#lar-hero.lar-draft-hero .lar-blob .mesh-1 {
  width: 70vw !important;
  height: 70vw !important;
  background: rgba(0, 60, 255, 0.8) !important;
  top: -20% !important;
  left: -10% !important;
  animation: mesh1 12s ease-in-out infinite alternate !important;
}

#lar-hero.lar-draft-hero .lar-blob .mesh-2 {
  width: 60vw !important;
  height: 60vw !important;
  background: rgba(220, 80, 255, 0.7) !important;
  top: -30% !important;
  right: -10% !important;
  animation: mesh2 15s ease-in-out infinite alternate !important;
}

#lar-hero.lar-draft-hero .lar-blob .mesh-3 {
  width: 50vw !important;
  height: 50vw !important;
  background: rgba(255, 100, 200, 0.5) !important;
  bottom: -20% !important;
  left: 30% !important;
  animation: mesh3 10s ease-in-out infinite alternate !important;
}
@keyframes mesh1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(25%, 30%) scale(1.2); }
}

@keyframes mesh2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30%, 25%) scale(0.85); }
}

@keyframes mesh3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-25%, -30%) scale(1.25); }
}
#lar-hero.lar-draft-hero .lar-ring,
#lar-hero.lar-draft-hero .lar-dot {
  display: none !important;
}

#lar-hero.lar-draft-hero .lar-h1,
#lar-hero.lar-draft-hero .lar-tag,
#lar-hero.lar-draft-hero .lar-sub {
  color: #ffffff !important;
}

#lar-hero.lar-draft-hero .lar-hero-content {
  position: relative !important;
  z-index: 1 !important;
}