/* ═══════════════════════════════════════════
   GRINELY — Main Stylesheet
   ═══════════════════════════════════════════ */

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f0eeeb;
  --fg:#1a1a1a;
  --fg2:#999;
  --border:rgba(0,0,0,.08);
  --dark:#0a0a0a;
  --white:#fff;
  --font:'Plus Jakarta Sans',sans-serif;
  --mono:'Space Mono',monospace;
  --gutter:clamp(1rem,3vw,2.5rem);
  --nav-h:3.5rem;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);background:var(--bg);color:var(--fg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
img{display:block;max-width:100%}


/* ═══════════════ NAVIGATION ═══════════════ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);height:var(--nav-h);
  background:transparent;
  transition:background .3s,box-shadow .3s;
}
.nav.scrolled{
  background:rgba(240,238,235,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--border);
}
.nav.is-menu-open{background:var(--dark)!important}

.nav-logo{
  font-weight:800;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.nav-logo span{opacity:.35;font-weight:400;margin-right:.3em}
.nav.is-menu-open .nav-logo{color:var(--white)}

.nav-links{
  display:flex;gap:1.8rem;list-style:none;
  font-family:var(--mono);font-size:.65rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.nav-links a{
  padding:.35em .8em;
  border:1px solid var(--border);border-radius:1px;
  transition:border-color .2s;
}
.nav-links a:hover{border-color:var(--fg)}

/* Burger */
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  width:22px;padding:4px 0;z-index:101;
}
.nav-burger span{
  display:block;width:100%;height:1.5px;
  background:var(--fg);
  transition:transform .35s cubic-bezier(.77,0,.18,1),opacity .2s;
}
.nav-burger.is-open span{background:var(--white)}
.nav-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile overlay */
.nav-mobile{
  position:fixed;inset:0;background:var(--dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:2rem var(--gutter);z-index:99;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.nav-mobile.is-open{opacity:1;pointer-events:auto}
.nav-mobile a{
  display:block;font-weight:700;
  font-size:clamp(2rem,8vw,4rem);
  padding:.3em 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--white);transition:opacity .2s;
}
.nav-mobile a:hover{opacity:.5}
.nav-mobile .idx-m{
  font-family:var(--mono);font-size:.65rem;
  opacity:.3;margin-right:.6em;
}

@media(max-width:768px){
  .nav-links{display:none}
  .footer-top{flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:.8rem}
  .footer-bottom a{margin:0}
  .nav-burger{display:flex}
}


/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;width:100%;height:100vh;height:100svh;
  min-height:500px;
  background:var(--bg);
  overflow:hidden;
}

.hero-bg-text{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-weight:800;
  font-size:clamp(8rem,22vw,28rem);
  letter-spacing:-.04em;line-height:.85;
  color:rgba(0,0,0,.04);
  white-space:nowrap;pointer-events:none;user-select:none;
}

.hero-logo-wrap{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(220px,32vw,440px);
  height:clamp(220px,32vw,440px);
  z-index:2;
}
.hero-logo-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  opacity:0;transition:none;
}
.hero-logo-img.is-active{opacity:1}

.hero-keywords{
  position:absolute;z-index:3;
  font-weight:700;font-family:var(--mono);
  font-size:clamp(.55rem,.9vw,.75rem);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg);transition:none;white-space:nowrap;
}
.hero-kw-tl{top:-12%;left:-55%}
.hero-kw-tr{top:-12%;right:-55%}
.hero-kw-bl{bottom:-12%;left:-55%}
.hero-kw-br{bottom:-12%;right:-55%}
.hero-keywords::before{
  content:'■';display:inline-block;margin-right:.4em;
  font-size:.45em;vertical-align:middle;opacity:.45;
}

.hero-tagline{
  position:absolute;
  top:calc(50% + clamp(130px,18vw,250px));
  left:50%;transform:translateX(-50%);
  z-index:2;font-weight:500;
  font-size:clamp(.75rem,1vw,.9rem);
  color:var(--fg2);text-align:center;
  max-width:500px;line-height:1.6;
  white-space:nowrap;
}

.hero-scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.5rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg2);
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  z-index:2;
}
.hero-scroll .scroll-line{
  width:1px;height:28px;
  background:linear-gradient(to bottom,var(--fg2),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{opacity:.3;transform:scaleY(1)}
  50%{opacity:1;transform:scaleY(1.2)}
}

@media(max-width:768px){
  .hero-logo-wrap{width:clamp(180px,50vw,280px);height:clamp(180px,50vw,280px)}
  .hero-kw-tl{top:-15%;left:-40%}.hero-kw-tr{top:-15%;right:-40%}
  .hero-kw-bl{bottom:-15%;left:-40%}.hero-kw-br{bottom:-15%;right:-40%}
  .hero-keywords{font-size:.55rem}
  .hero-tagline{top:auto;bottom:clamp(6rem,14vh,9rem);white-space:normal;max-width:85vw}
}
@media(max-width:480px){
  .hero-logo-wrap{width:55vw;height:55vw}
  .hero-kw-tl{top:-18%;left:-25%}.hero-kw-tr{top:-18%;right:-25%}
  .hero-kw-bl{bottom:-18%;left:-25%}.hero-kw-br{bottom:-18%;right:-25%}
  .hero-keywords{font-size:.5rem;letter-spacing:.04em}
  .hero-tagline{top:auto;bottom:clamp(5rem,12vh,8rem);font-size:.7rem}
  .hero-bg-text{font-size:clamp(4rem,20vw,8rem)}
}


/* ═══════════════ MARQUEE ═══════════════ */
.hero-marquee{
  width:100%;
  border-top:1px dotted var(--border);
  border-bottom:1px dotted var(--border);
  overflow:hidden;padding:.55rem 0;
  background:var(--bg);
}
.hero-marquee-track{
  display:flex;width:max-content;
  animation:marquee 30s linear infinite;
}
.hero-marquee-track span{
  font-weight:800;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg);opacity:.1;
  white-space:nowrap;padding:0 1.8rem;
}
.hero-marquee-track .dot{
  opacity:.25;color:var(--fg2);
  font-size:.45rem;line-height:1.8;
}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}


/* ═══════════════ VIDEO GRID ═══════════════ */
.video-grid{background:var(--dark)}

.vg-row{display:grid;gap:0}
.vg-row[data-layout="1x16-9"]{grid-template-columns:1fr}
.vg-row[data-layout="1x4-3"]{grid-template-columns:1fr}
.vg-row[data-layout="1x9-16"]{grid-template-columns:1fr}
.vg-row[data-layout="2x16-9"]{grid-template-columns:1fr 1fr}
.vg-row[data-layout="3x16-9"]{grid-template-columns:repeat(3,1fr)}
.vg-row[data-layout="2x4-3"]{grid-template-columns:1fr 1fr}
.vg-row[data-layout="3x4-3"]{grid-template-columns:repeat(3,1fr)}
.vg-row[data-layout="2x9-16"]{grid-template-columns:1fr 1fr}
.vg-row[data-layout="3x9-16"]{grid-template-columns:repeat(3,1fr)}
/* Mixed: exact proportions so both cells share the same height (no black gaps) */
/* Math: for height H, cell width = H × (w/h ratio). Column ratio = ratio1 : ratio2 */
.vg-row[data-layout="16-9+9-16"]{grid-template-columns:75.96fr 24.04fr}
.vg-row[data-layout="9-16+16-9"]{grid-template-columns:24.04fr 75.96fr}
.vg-row[data-layout="4-3+9-16"]{grid-template-columns:70.33fr 29.67fr}
.vg-row[data-layout="9-16+4-3"]{grid-template-columns:29.67fr 70.33fr}
.vg-row[data-layout="4-3+16-9"]{grid-template-columns:42.86fr 57.14fr}
.vg-row[data-layout="16-9+4-3"]{grid-template-columns:57.14fr 42.86fr}

/* In mixed layouts, cells must NOT enforce their own aspect-ratio.
   They fill the row height set by the tallest cell. Poster covers via object-fit. */
.vg-row[data-layout="16-9+9-16"] .vg-cell,
.vg-row[data-layout="9-16+16-9"] .vg-cell,
.vg-row[data-layout="4-3+9-16"] .vg-cell,
.vg-row[data-layout="9-16+4-3"] .vg-cell,
.vg-row[data-layout="4-3+16-9"] .vg-cell,
.vg-row[data-layout="16-9+4-3"] .vg-cell{
  aspect-ratio:unset !important;
}
/* The first cell sets the row height via its own ratio */
.vg-row[data-layout="16-9+9-16"] .vg-cell:first-child{aspect-ratio:16/9 !important}
.vg-row[data-layout="9-16+16-9"] .vg-cell:first-child{aspect-ratio:9/16 !important}
.vg-row[data-layout="4-3+9-16"] .vg-cell:first-child{aspect-ratio:4/3 !important}
.vg-row[data-layout="9-16+4-3"] .vg-cell:first-child{aspect-ratio:9/16 !important}
.vg-row[data-layout="4-3+16-9"] .vg-cell:first-child{aspect-ratio:4/3 !important}
.vg-row[data-layout="16-9+4-3"] .vg-cell:first-child{aspect-ratio:16/9 !important}

.vg-cell{
  position:relative;overflow:hidden;
  background:#111;cursor:pointer;
}
.vg-cell[data-ratio="16:9"]{aspect-ratio:16/9}
.vg-cell[data-ratio="9:16"]{aspect-ratio:9/16}
.vg-cell[data-ratio="4:3"]{aspect-ratio:4/3}
.vg-cell[data-ratio="1:1"]{aspect-ratio:1}

.vg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;
}

.vg-cell::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(to top,rgba(0,0,0,.55)0%,transparent 45%);
  opacity:.6;transition:opacity .3s;
}
.vg-cell:hover::after{opacity:.85}

.vg-caption{
  position:absolute;left:1rem;bottom:1rem;z-index:4;
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.6);line-height:1.5;
  transition:color .2s;
}
.vg-cell:hover .vg-caption{color:var(--white)}

/* Corner brackets on hover - see end of file */

/* Responsive */
@media(max-width:768px){
  .vg-row[data-layout="2x16-9"],
  .vg-row[data-layout="2x4-3"],
  .vg-row[data-layout="2x9-16"],
  .vg-row[data-layout="16-9+9-16"],
  .vg-row[data-layout="9-16+16-9"],
  .vg-row[data-layout="4-3+9-16"],
  .vg-row[data-layout="9-16+4-3"],
  .vg-row[data-layout="4-3+16-9"],
  .vg-row[data-layout="16-9+4-3"]{grid-template-columns:1fr}
}
@media(max-width:640px){
  .vg-row[data-layout="3x9-16"],
  .vg-row[data-layout="3x4-3"],
  .vg-row[data-layout="3x16-9"]{grid-template-columns:1fr}
}


/* ═══════════════ FOOTER ═══════════════ */
.footer{
  background:var(--dark);color:var(--white);
  padding:clamp(3rem,6vh,5rem) var(--gutter) clamp(1.5rem,3vh,2rem);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{
  display:flex;justify-content:space-between;
  align-items:flex-end;margin-bottom:3rem;
}
.footer-brand{
  font-weight:800;
  font-size:clamp(2rem,5vw,4rem);
  letter-spacing:-.02em;line-height:1;
}
.footer-social{
  display:flex;gap:1.5rem;
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.footer-social a{color:rgba(255,255,255,.35);transition:color .2s}
.footer-social a:hover{color:var(--white)}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:1.2rem;
  font-family:var(--mono);font-size:.5rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
}
.footer-geo{display:flex;gap:1.5rem}

@media(max-width:768px){
  .footer-top{flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
  .footer-bottom{flex-direction:column;gap:.8rem;text-align:center;align-items:center}
}


/* ═══════════════ VIDEO MODAL ═══════════════ */
.video-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.video-modal.is-open{opacity:1;pointer-events:auto}
.video-modal iframe{
  width:min(92vw,1280px);
  aspect-ratio:16/9;border:0;background:#000;
}
.modal-close{
  position:absolute;top:1.2rem;right:1.5rem;
  color:#fff;font-size:1.8rem;line-height:1;
  opacity:.6;transition:opacity .2s;z-index:10000;
}
.modal-close:hover{opacity:1}

@media(max-width:640px){
  .video-modal iframe{width:100vw;height:100vh;aspect-ratio:auto}
  .modal-close{
    top:calc(env(safe-area-inset-top,0)+12px);
    right:calc(env(safe-area-inset-right,0)+16px);
  }
}


/* ═══════════════ REDUCED MOTION ═══════════════ */
@media(prefers-reduced-motion:reduce){
  .hero-logo-img{transition:opacity .2s!important}
  .hero-marquee-track{animation:none!important}
  .hero-scroll .scroll-line{animation:none!important}
}

/* Corner brackets on hover (home grid) */
.vg-corners{
  position:absolute;inset:10px;z-index:5;
  pointer-events:none;opacity:0;
  transition:opacity .3s cubic-bezier(.25,.46,.45,.94);
}
.vg-cell:hover .vg-corners{opacity:1}
.vg-corner{position:absolute;width:28px;height:28px}
.vg-corner-tl{top:0;left:0;border-top:1.5px solid rgba(255,255,255,.45);border-left:1.5px solid rgba(255,255,255,.45)}
.vg-corner-br{bottom:0;right:0;border-bottom:1.5px solid rgba(255,255,255,.45);border-right:1.5px solid rgba(255,255,255,.45)}

/* Nav handled by .scrolled class */

/* Language toggle */
.lang-toggle{
  font-family:var(--mono) !important;
  font-size:.55rem !important;
  letter-spacing:.12em !important;
  font-weight:700 !important;
  color:#000 !important;
  border-color:transparent !important;
  opacity:.6;
  transition:opacity .2s !important;
}
.lang-toggle:hover{opacity:1 !important}
/* Dark pages */
body.page-work .lang-toggle,
body.page-vision .lang-toggle,
body.page-contact .lang-toggle{color:#fff !important}