/* Localhosts — restrained, focused visual system */
:root{--paper:#fbfbf9;--soft:#f5f6f3;--ink:#17211f;--muted:#56615c;--quiet:#6f7a74;--line:#e4e8e4;--accent:#147d5c;--accent-dark:#0e6248;--mint:#7fd3b0;--font-body:"DM Sans",sans-serif;--font-display:"Manrope",sans-serif;--content:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-1.4px}
h1 span,h2 span{color:var(--quiet)}
.wrap{width:min(var(--content),calc(100% - 48px));margin-inline:auto}
.block{padding-block:90px}

.site-header{min-height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 17px var(--font-display);letter-spacing:-.7px;white-space:nowrap}
.brand b{color:var(--accent-dark)}
.brand-mark{width:30px;height:30px;border:1.5px solid var(--ink);border-radius:7px;display:grid;place-items:center;font-size:13px;letter-spacing:-2px}
.site-nav{display:flex;align-items:center;gap:28px;font-size:13px;color:#3f4a46}
.site-nav>a:not(.nav-cta):hover,.site-footer nav a:hover{color:var(--accent)}
.nav-cta{padding:11px 16px;background:var(--ink);color:#fff;border-radius:4px;font-weight:600}
.nav-cta:hover{background:var(--accent-dark)}
.nav-cta span{margin-left:8px}
.menu-toggle{display:none}

.eyebrow{margin:0 0 14px;color:var(--accent-dark);font-size:13px;font-weight:700;letter-spacing:.2px}
.eyebrow.muted{color:var(--muted)}
.eyebrow.light{color:var(--mint)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}

.hero{padding-block:80px 72px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
h1{font-size:clamp(42px,5.4vw,68px);line-height:1.06;font-weight:700;letter-spacing:-2px;margin-bottom:24px}
.lede{max-width:500px;color:var(--muted);font-size:17px;line-height:1.75;margin-bottom:32px}
.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.button{min-height:46px;padding:0 20px;display:inline-flex;align-items:center;gap:16px;border-radius:4px;font-size:14px;font-weight:600;transition:transform .2s ease,background .2s ease}
.button:hover{transform:translateY(-2px)}
.button-dark{background:var(--ink);color:#fff}
.button-dark:hover{background:var(--accent-dark)}
.button-light{background:#fff;color:var(--ink)}
.text-link{display:inline-flex;gap:10px;align-items:center;font-size:14px;font-weight:700}
.text-link:hover{color:var(--accent)}

.doors{display:flex;flex-direction:column;gap:14px}
.doors .eyebrow{margin:0}
.door{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:8px;transition:transform .2s ease}
.door:hover{transform:translateX(4px)}
.door small{display:block;color:var(--accent-dark);font-size:13px;font-weight:700}
.door strong{display:block;font:700 20px/1.25 var(--font-display);letter-spacing:-.5px;margin:6px 0 4px}
.door span{font-size:13px;color:var(--muted)}
.door i{font-style:normal;font-size:22px}
.door-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.door-dark small{color:var(--mint)}
.door-dark span{color:#c9d4cf}

.systems{background:var(--soft);border-block:1px solid var(--line)}
.heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px}
h2{font-size:clamp(30px,4vw,44px);line-height:1.15;font-weight:700;margin-bottom:0}
.summary{max-width:400px;color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 3px}
.summary.wide{max-width:480px;margin:16px 0 24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:8px}
.card h3{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.8px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.card ul{margin:0;padding:0;list-style:none;font-size:13px}
.card li{padding:8px 0;border-top:1px solid var(--line)}
.card-featured{border:2px solid var(--accent)}
.tag{position:absolute;top:-12px;left:24px;padding:3px 10px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:99px}

.lab{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lab svg{width:100%;height:auto;display:block;border-radius:10px}

.content-studio{background:var(--ink);color:#fff}
.content-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.content-studio h2 span{color:#9fb0a9}
.content-studio .summary{color:#c9d4cf}
.reel{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#2b3a35;box-shadow:0 12px 32px rgba(0,0,0,0.25)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}

.work small{color:var(--muted);font-size:12px;font-weight:600}
.work h3{font-size:20px}
.work-interactive{cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.work-interactive:hover{transform:translateY(-3px);border-color:#b4c2bc;box-shadow:0 10px 24px -10px rgba(23,33,31,0.12)}
.project-gallery-btn{background:none;border:none;padding:0;font-family:inherit;cursor:pointer;color:inherit;text-align:left}
.art{height:150px;display:grid;place-items:center;border-radius:6px;font:700 20px var(--font-display)}
.art-green{background:#e8f2ec;color:var(--accent-dark)}
.art-blue{background:#eef0f3;color:#33415c}
.art-dark{background:var(--ink);color:var(--mint);font-size:14px}

/* Frameless Immersive Cinema View (Stories / Reels Style) */
dialog.cinema-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
dialog.cinema-dialog:not([open]) {
  display: none;
}
dialog.cinema-dialog::backdrop {
  background: rgba(8, 12, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cinema-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cinema-close-form {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 50;
}
.cinema-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fbfbf9;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cinema-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}
.cinema-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 40;
  transition: all 0.2s ease;
}
.cinema-nav-btn:hover {
  background: var(--accent);
  border-color: var(--mint);
  transform: translateY(-50%) scale(1.1);
}
.cinema-nav-btn.prev { left: 24px; }
.cinema-nav-btn.next { right: 24px; }

/* The Floating Hero Media Stage */
.cinema-stage-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  pointer-events: none;
}
.cinema-stage {
  position: relative;
  pointer-events: auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  max-height: min(86vh, 760px);
}
.cinema-media-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.cinema-media-slot video {
  display: block;
  height: min(86vh, 760px);
  aspect-ratio: 9/16;
  width: auto;
  max-width: 90vw;
  object-fit: cover;
  background: #000;
}
.cinema-media-slot img {
  display: block;
  max-height: min(86vh, 760px);
  max-width: min(86vw, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}

/* Floating Info Pill Overlaid on Top of Media */
.cinema-pill-top {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 15, 13, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 6px 14px;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.cinema-counter-badge {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--mint);
  font-weight: 700;
}
.cinema-pill-divider {
  color: rgba(255, 255, 255, 0.3);
}
.cinema-pill-title {
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Floating Sound Toggle Pill on Bottom of Media */
.cinema-sound-pill {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 15, 13, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 14px;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.cinema-sound-pill.is-unmuted {
  background: rgba(20, 125, 92, 0.85);
  border-color: var(--mint);
  color: #fff;
}
.cinema-sound-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cinema-sound-icon svg {
  display: block;
}

/* Central Ripple Flash when tapping video */
.cinema-sound-flash {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(10, 15, 13, 0.75);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 15;
}
#cinema-flash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#cinema-flash-icon svg {
  display: block;
}
.cinema-sound-flash.flash-active {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 768px) {
  .cinema-stage-wrapper { padding: 12px; }
  .cinema-nav-btn { display: none; }
  .cinema-close-form { top: 16px; right: 16px; }
  .cinema-close-btn { width: 38px; height: 38px; }
  .cinema-media-slot video {
    height: min(82vh, 660px);
  }
  .cinema-pill-top { top: 12px; left: 12px; font-size: 11px; padding: 5px 10px; }
  .cinema-sound-pill { bottom: 12px; left: 12px; font-size: 11px; padding: 6px 12px; }
}

.about{padding-block:30px 20px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about .summary{font-size:15px;line-height:1.85;margin:0}

.contact{padding-block:60px 90px}
.panel{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end;padding:clamp(32px,5vw,64px);background:var(--ink);color:#fff;border-radius:10px}
.panel h2 span{color:#9fb0a9}
.panel p:last-child{margin:16px 0 0;color:#c9d4cf;font-size:14px}
.panel>div{max-width:560px}

.site-footer{border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;padding-block:28px}
.site-footer nav{display:flex;gap:22px;flex-wrap:wrap}

@media (max-width:900px){
  .hero,.lab,.content-inner,.about{grid-template-columns:1fr;gap:40px}
  .grid-3{grid-template-columns:1fr}
  .heading{flex-direction:column;align-items:flex-start;gap:16px}
  .block{padding-block:64px}
  .menu-toggle{display:grid;gap:6px;width:44px;height:44px;place-content:center;background:none;border:0;cursor:pointer}
  .menu-toggle span{display:block;width:22px;height:2px;background:var(--ink)}
  .site-nav{display:none;position:absolute;top:82px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;padding:24px;background:var(--paper);border-bottom:1px solid var(--line);z-index:5}
  .site-nav.is-open{display:flex}
  .site-header{position:relative}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}