/* Page-specific styles extracted from HTML */
*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--color-bg-light);
  font-family:'Barlow',sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 3.5rem;
  background:var(--color-nav-bg);
  backdrop-filter:blur(10px);
}
.logo-full{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:28px;height:28px}
.logo-wordmark{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-text-primary)}
.nav-right{display:flex;align-items:center;gap:1.25rem;position:relative}
.burger-wrap{position:relative}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;cursor:pointer;padding:6px;border:1px solid transparent;transition:border-color 0.2s}
.burger:hover{border-color:var(--color-line)}
.burger span{display:block;height:1px;background:var(--color-text-primary)}
.burger span:nth-child(2){width:70%}
.burger-wrap .dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown a{display:block;font-size:1.02rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-text-secondary);text-decoration:none;padding:0.9rem 1.25rem;border-bottom:1px solid var(--color-line);transition:color 0.2s,background 0.2s}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{color:var(--color-text-primary);background:rgba(184,151,90,0.08)}
.nav-cta{font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;border:1px solid var(--color-text-primary);padding:0.5rem 1.4rem;text-decoration:none;color:var(--color-text-primary);transition:background 0.25s,color 0.25s;font-weight:400}
.nav-cta:hover{background:var(--color-text-primary);color:var(--color-bg-light)}

/* ── INTRO ── */
.intro{
  padding:10rem 3.5rem 6rem;
  background:var(--color-text-primary);
  color:var(--color-bg-light);
  min-height:55vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-bottom:1px solid rgba(253,253,252,0.08);
  position:relative;overflow:hidden;
}
.intro-inner{
  position:relative;z-index:2;
}
.intro-left{}
.intro-eyebrow{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-accent-gold);margin-bottom:1.25rem;font-weight:500}
.intro-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(2.8rem,4.5vw,5rem);font-weight:700;
  line-height:1.05;letter-spacing:-0.03em;color:var(--color-bg-light);
}
.intro-title span{color:var(--color-accent-blue);font-weight:400}
.intro-right{
  display:none;
}
.intro-anim-placeholder{
  position:absolute;inset:0;
}
.intro-anim-placeholder svg{
  width:100%;height:100%;
}

/* grid bg on intro */
.intro-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.4}

/* ── GRID SECTION ── */
.grid-section{padding:5rem 3.5rem;border-bottom:1px solid var(--color-line)}
.grid-label{font-size:1.35rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:1.25rem}
.grid-subtitle{margin-bottom:2.5rem}
.grid-sub-text{font-size:1.35rem;line-height:1.85;color:var(--color-text-secondary);max-width:60ch;font-weight:300}
.squares{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--color-line);
}
.sq{
  position:relative;overflow:hidden;
  border-right:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  min-height:280px;
  padding:2.5rem;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;
  transition:background 0.35s;
  text-decoration:none;color:var(--color-text-primary);
}
.sq:nth-child(3n){border-right:none}
.sq:nth-child(1),.sq:nth-child(2),.sq:nth-child(3){border-bottom:none}
.sq:hover{background:var(--color-text-primary)}
.sq:hover .sq-num{color:var(--color-accent-gold)}
.sq:hover .sq-title{color:var(--color-bg-light)}
.sq:hover .sq-body{color:rgba(253,253,252,0.45)}
.sq:hover .sq-arrow{color:var(--color-accent-gold)}
.sq:hover .sq-grid{opacity:1}

/* grid texture inside each square */
.sq-grid{
  position:absolute;inset:0;
  pointer-events:none;opacity:0;
  transition:opacity 0.35s;
}

.sq-top{display:flex;flex-direction:column;gap:1.5rem}
.sq-num{font-size:0.82rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-accent-gold);transition:color 0.35s;font-weight:500}
.sq-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.35rem;font-weight:700;line-height:1.2;
  letter-spacing:-0.01em;transition:color 0.35s;
}
.sq-body{font-size:1.35rem;line-height:1.8;color:var(--color-text-secondary);max-width:28ch;transition:color 0.35s}
.sq-arrow{font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(12,11,9,0.3);transition:color 0.35s;align-self:flex-end}

/* ── FOOTER ── */
footer{
  padding:2rem 3.5rem;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--color-bg-light);
  border-top:1px solid var(--color-line-strong);
}
.footer-right{display:flex;gap:2rem;align-items:center}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-text-secondary);text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--color-text-primary)}.footer-copy{font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-secondary)}
/* Logo: arrow paths use var(--color-bg-light) to stay visible on light bg */
footer .logo-full svg ellipse{fill:var(--color-text-primary)}@media(max-width:768px){
  nav{padding:1rem 1.25rem}
  .nav-cta{display:none}
  .intro-inner{grid-template-columns:1fr !important;display:block !important;padding:0 1.25rem 3rem;min-height:auto}
  .intro-title{font-size:clamp(2rem,9vw,3rem) !important;word-break:break-word}
  .intro-right{display:none}
  .grid-section{padding:3rem 1.25rem}
  .squares{grid-template-columns:1fr !important;display:block !important}
  .sq{border-right:none;min-height:auto}
  footer{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.5rem 1.25rem}
  .footer-right{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .footer-links{flex-wrap:wrap;gap:1rem}
}