:root {
  --cols: 24; /* number of columns */
  --rows: 3; /* number of rows */
  /* 🎨 Color Variables */
  --color-main: #919191;
  --color-text: #000000;
  --color-outline-hover: rgb(255, 0, 0);

  --color-box-primary: rgb(0, 26, 255);
  --color-box-secondary: rgba(2, 14, 232, 0.626);

  --color-bottom-text: #FF6B6B;
  --color-header: #00eaff;
  --color-header-text: #FF2F2F;

}
@font-face {
  font-family: 'Rochester';
  src: url('../fonts/Rochester-Regular.ttf') format('woff2'),
       url('../fonts/Rochester-Regular.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'muhaq';
  src: url('../fonts/muhaq.ttf') format('woff2'),
       url('../fonts/muhaq.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'playfair';
  src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('woff2'),
       url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Base */
* {
  box-sizing: border-box;
}
html, body { cursor: none; }
*,
*:hover,
*:active,
*:focus {
  cursor: none !important;
}
body {
  margin: 0;
  padding: 0;
  background: var(--color-main);
  color: var(--color-text);
  font-family: sans-serif;
  height: 100svh;
  scroll-behavior: smooth;
}
/* ==== NAV + ICONS — FIXED, CONSISTENT, NO SHRINK ==== */

/* Grid shell */
.nav-grid{
  position: fixed;
  display: grid;
  grid-template-rows: 10svh 1fr 20svh 1fr 10svh;
  grid-template-columns: repeat(var(--cols), 1fr);
  height: 100svh;
  width: 100svw;
  align-content: center;
  z-index: 99;
  /* allow clicks to pass through the grid except for the interactive anchors */
  pointer-events: none;
}

/* Origin list behaves as grid items; stable measuring box */
.nav-grid ul{ display: contents; }
.nav-grid li{
  list-style: none;
  display: grid;
  place-items: center;
  contain: layout paint;
}
.nav-grid li > a{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: auto; /* make the anchors clickable even though parent ignores pointer events */
}

/* Icon visuals — apply everywhere, not scoped to .nav-grid */
li .icon{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3.5px solid #00C0C4;
  border-radius: 0;
  box-sizing: border-box;
}
li .icon svg{
  width: 24px;
  height: 24px;
  display: block;
  fill: #00C0C4;
}

/* Origin positions (grid-safe keywords only) */
.home     { grid-column:  2; grid-row: 2; justify-self: start; align-self: start;}
.projects { grid-column:  2; grid-row: 3; justify-self: start; align-self: start;}
.about    { grid-column: -3; grid-row: 3; justify-self: end; align-self: end; }
.contact  { grid-column: -3; grid-row: 4; justify-self: end; align-self: end; }

/* ==== TARGET COLUMN BOXES ==== */

.icon-column{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  align-self: center;
}
.icon-column > div{
  position: relative;       /* anchor for absolute fill */
  width: 90%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  isolation: isolate;       /* keep z-index local */
}

/* When latched, the <li> fully occupies the red box */
.icon-column > div > li.locked-in-target{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: none !important;
  z-index: 1;
}
.icon-column > div > li.locked-in-target > a{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* Icon fills the target box when latched */
.icon-column > div > li.locked-in-target .icon{
  width: 100%;
  height: 100%;
}

/* Optional: pointer comfort while animating */
.nav-grid li{ pointer-events: auto; }
.icon-column > div > li.locked-in-target{ pointer-events: auto; }

.nav-grid ul.about-active li svg path,
.nav-grid ul.about-active li,
.nav-grid ul.about-active li .icon svg,
.nav-grid ul.about-active li .icon svg * {
  fill: #012094 !important;
  color: #012094 !important;
  transition: fill 0.18s, color 0.18s;
}

/* Ensure the target box border also matches when the UL is flagged as about-active */
.nav-grid ul.about-active li .icon,
.icon-column > div > li.locked-in-target.about-active .icon {
  border-color: #012094 !important;
}


/* Grid container */
.container {
  display: grid;
  grid-template-rows: 10svh 1fr auto 1fr 10svh;
  grid-template-columns: repeat(var(--cols), 1fr);
  background: #4c0303;
  height: 100svh;
  width: 100svw;
  position: relative;
  align-content: center;
  overflow: hidden;
    isolation:isolate;        /* defines the backdrop for blends */

}

.container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\<filter id='n'>\<feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='1'/>\<feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 1 1 -2.0 0'/>\</filter>\<rect width='160' height='160' fill='black' filter='url(%23n)'/>\</svg>");background-size: 160px 160px;background-repeat: repeat;opacity: 0.63; /* same as Figma */
}

.container > * {
  position: relative;
  z-index: 1;            /* ensures content is above the noise */
}

.top-right-text {
grid-column: 18 / -2;
    grid-row: 2;
    justify-self: end;
    max-width: 220px;
    text-align: right;
    font-family: 'Arial', sans-serif;
    color: var(--color-bottom-text);
    font-weight: 500;
    letter-spacing: 1px;
    z-index: 4;
}
.top-right-text p {
    margin: 0;
    padding: 0;

}

.bottom-text {
grid-column: 7 / -7;
    grid-row: 4;
    color: var(--color-bottom-text);
    justify-self: center;
    align-self: flex-end;
    max-width: 100%;
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    z-index: 4;
}
.bottom-text p {
    margin: 0;
    padding: 0;
    font-size: clamp(11px, 1.2vw, 36px);
    white-space: wrap;


}

.header {
  grid-column: 8 / -8;
  grid-row: 3;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: difference;
  z-index: 5;

}

.header svg  {
    padding: 0;
    margin: 0;
  width: 100%;      /* ✅ fills container width */
  height: 100%;     /* ✅ keeps aspect ratio */
  display: block;
}

.header-top-container {
 grid-column: 8 / -8;
  grid-row: 2;
  display: flex;
  justify-content: left;
  align-items: flex-end;
  margin-bottom: -12px;
  z-index: 4;

}
.header-top-shadow, .header-bottom-shadow {
  position: absolute;
    font-family: Rochester;
  font-size: 3.2vw;
  filter: blur(2px);
  opacity: 1;
   z-index: 0;
   color: #000000;
}
.header-top {
  color: var(--color-header-text);
  font-family: Rochester;
  font-size: 3.2vw;
  filter: url(#innerShadow);
  z-index: 1;

}

.header-bottom-container {
 grid-column: 8 / -8;
  grid-row: 4;
  align-self: stretch;
  display: flex;
  justify-content: right;
  margin-top: -12px;
  z-index: 4;

}

.header-bottom {
  color: var(--color-header-text);
  font-family: Rochester;
  font-size: 3.2vw;
  filter: url(#innerShadow);
  z-index: 1;

}

.img-bg {
  position: absolute;
   inset:0;
  background-image: url('../img/bg-hand.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100svw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  pointer-events:none;       
}




section {
  margin: 0;
  padding: 0;
  height: 100vh ;
  width: 100%;
  overflow: hidden;
  position: relative;
  color: #91898A;
}

#stage {
  position: absolute;
  height: 200vh;
}

#blackout{
      position:fixed;
    left:0; right:0; top:100% - 50px; height:130vh;
    background:#000;
    pointer-events:none;
    transition:none;
    z-index:1;
}
#blackout::after{
  content:"";
  position:absolute; inset:-100px;   /* extend so blur doesn’t reveal edges */
  background:#000;
  /* feather edges via mask, base stays opaque */

  opacity:1; /* optional */
  filter: blur(50px);
}

.spacer{  
  height: 200vh;
}
.quote {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:4vw;
}

.quote h1 {
  font-family: playfair;
  font-weight:300;
  text-transform:uppercase;
  font-size:clamp(2rem,8vw,8rem);
  letter-spacing: 1px;
  line-height:0.9;
  margin:0;
  text-align:justify;
  text-align-last:justify;
}

.quote h1::after {
  content:"";
  display:inline-block;
  width:100%;
}

.quote p {
  margin-top:1rem;
  font-size:clamp(2rem,4vw,4rem);
  text-align:right;
  opacity:0.7;
  letter-spacing:0.05em;
}

#info {
  height: 100vh;
  background: #8b8991;
  position: relative;
  overflow: hidden;
  color: white;
  font-size: 7vh;
  
}


  .cursor-trail.hidden { opacity: 0; }
  .cursor-dot.hidden{opacity:0;}

/* No transform here */
.cursor-wrap,.cursor-dot,.cursor-trail{position:fixed;top:0;left:0;pointer-events:none;z-index:9999}
  .cursor-wrap{transform:translate3d(-50%,-50%,0);will-change:transform;transform-style:preserve-3d;backface-visibility:hidden;}
  .cursor-dot{width:10px;height:10px;border-radius:50%;background:#ff0000;transform:translate3d(-50%,-50%,0);will-change:transform;backface-visibility:hidden;}
  .cursor-trail{
    width:32px;height:32px;border-radius:50%;
    background:rgba(255, 255, 255, 0);
    border: 2px solid #ffffff;
    mix-blend-mode: difference;
    will-change:transform;
    transform-style:preserve-3d;
    backface-visibility:hidden;
  }

  .cursor-ring{
    width:32px;height:32px;border-radius:50%;
    background:#980A0A;
    display:grid;place-items:center;
    font:500 15px/1 Inter,muhaq;letter-spacing:.4px;color:#fff;
    opacity:0; transform:scale(.6);
    transition:opacity .12s ease, transform .2s cubic-bezier(.2,.7,.2,1);
    transform:translate3d(-50%,-50%,0);
    will-change:transform,opacity; backface-visibility:hidden;
  }
  .cursor-ring.active{opacity:1; z-index:9999;transform:scale(3);    font-family: muhaq; transform:translate(-50%,-50%) scale(3);}




.tv3d-section {
  height: 200vh;
  background: #2a0000;
  position: relative;
  overflow: hidden;
}
#tvCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

#home{
  background: none !important;
  height: 0px !important;
  z-index: -10;
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: 15svh 1fr 15svh;
  height: 100svh;
}
  /* shrink-wrap to widest child */
  .stack{
    grid-column: 12 / -2;
    grid-row: 2;
    display:inline-block;     /* shrink to content width */
    height:100%;           /* full viewport height */
    padding:0;
    line-height:0;            /* kill gaps between rows */
  }
  .line{
    height:25%;              /* each row = 1/4 viewport height */
    display:block;
  }
  .line svg{
    height:100%;              /* scale by height */
    width:100%;               /* let width follow aspect ratio */
    display:block;
  }

  .about-text{
    grid-column: 2 / 9;
    grid-row: 2;
    width: 100%;
    height: 100%;
  }
  .about-text h1{
    font-size: clamp(16px, 1.6vw, 36px);
    color: black;
  }
    .about-text p{
    font-size: clamp(16px, 1.6vw, 36px);
    color: black;
  }

  .seperation-line{
    grid-column: 9 / 10;
    grid-row: 2;
    width: 3px;
    height: 100%;
    justify-self: center;
    background-color: rgb(0, 0, 0);
  }
  .icon-column{
    grid-column: 10 / 11;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    align-self: center;
    z-index: 100;
  }
  .icon-column div {
    width: 90%;
    aspect-ratio: 1 / 1;
  }



  
  .nav-grid li.in-spacer-quote {
  background-color: #000000;
}

  .nav-grid li.in-info {
  background-color: #898a91;
}
/* By section token via class */
.nav-grid li.in-info .icon,
.icon-column > div > li.locked-in-target.in-info .icon {
  border-color: #012094 !important;   /* border */
  background: transparent;             /* if you want no box fill */
}

.nav-grid li.in-info .icon svg,
.nav-grid li.in-info .icon svg * ,
.icon-column > div > li.locked-in-target.in-info .icon svg,
.icon-column > div > li.locked-in-target.in-info .icon svg * {
  fill: #012094 !important;            /* icon fill */
}

/* Example for 'spacer-quote' token */
.nav-grid li.in-spacer-quote .icon,
.icon-column > div > li.locked-in-target.in-spacer-quote .icon {
  border-color: #00C0C4 !important;
}
.nav-grid li.in-spacer-quote .icon svg,
.nav-grid li.in-spacer-quote .icon svg * {
  fill: #00C0C4 !important;
}


#contact{
  height: fit-content !important;
}

/* Footer styles */
.site-footer{
  background: linear-gradient(180deg, rgba(1,32,148,0.98), rgba(1,32,148,0.95));
  color: #ffffff;
  padding: 36px 20px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size: 14px;
}
.site-footer .footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-left .footer-brand{font-weight:800;letter-spacing:1px}
.footer-left .footer-sub{opacity:0.9;font-size:13px;margin-top:4px}
.footer-nav{display:flex;gap:18px;align-items:center}
.footer-nav a{color:rgba(255,255,255,0.95);text-decoration:none;opacity:0.95}
.footer-nav a:hover{text-decoration:underline}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.footer-link{color:#e6f0ff;text-decoration:none}
.footer-copy{font-size:12px;opacity:0.9}

@media (max-width:768px){
  .site-footer .footer-inner{padding:0 8px;gap:12px}
  .footer-right{align-items:flex-start}
  .footer-nav{width:100%;justify-content:flex-start;order:3}
}

/* ---- Styles moved from index.php (contact section) ---- */

/* Scoped contact styles for #contact (variables declared on the section to avoid global overrides) */
/* Updated palette to match inspiration: bluish-gray background and deep blue accents */
#contact{--cream:#9597a7;--charcoal:#0b2b8f;--muted-tint:rgba(11,43,143,0.06);--card-odd:rgba(11,43,143,0.04);--card-even:rgba(11,43,143,0.08);}

#contact{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:var(--cream);min-height:100vh;color:var(--charcoal);padding:0}

#contact .contact-container{max-width:100%;padding:0}
#contact .contact-container > div:nth-child(even){background:var(--muted-tint)}

#contact .header-section{background:var(--cream);padding:40px 60px;border:none;border-radius:8px;box-shadow:0 8px 20px rgba(11,43,143,0.04)}
#contact .header-title{font-size:4.4rem;font-weight:900;color:var(--charcoal);font-family:'Times New Roman', Times, serif;letter-spacing:1px;line-height:1;margin-bottom:6px;text-transform:uppercase}

#contact .about-section{background:transparent;padding:30px 60px;border:none;border-radius:8px;box-shadow:0 6px 18px rgba(11,43,143,0.03)}
#contact .about-label{color:var(--charcoal);margin-bottom:15px;text-transform:uppercase;border-bottom:2px solid var(--charcoal);padding-bottom:8px;font-family:'Times New Roman', Times, serif}
#contact .radio-group{display:flex;gap:24px;padding-top:5px;flex-wrap:wrap;align-items:center}
#contact .radio-item{display:flex;align-items:center;gap:12px;min-width:0}
#contact .radio-item input[type="radio"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;background:transparent;border:2px solid var(--charcoal);border-radius:50%;cursor:pointer;position:relative;transition:all .18s}
#contact .radio-item input[type="radio"]:checked::after{content:'';position:absolute;left:3px;top:3px;right:3px;bottom:3px;background:var(--charcoal);border-radius:50%}
#contact .radio-item label{font-size:1.1rem;cursor:pointer;color:var(--charcoal);white-space:normal;flex:0 1 auto}

#contact .who-section{background:transparent;padding:40px 60px;border:none;border-radius:8px;box-shadow:0 6px 18px rgba(11,43,143,0.03)}
#contact .who-label{font-size:.85rem;font-weight:700;color:var(--charcoal);margin-bottom:25px;letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid var(--charcoal);padding-bottom:8px;font-family:'Times New Roman', Times, serif}

#contact .form-fields{display:grid;grid-template-columns:1fr 1fr;gap:40px}
#contact .form-group{display:flex;flex-direction:column}
#contact .form-group.full-width{grid-column:1/-1}
#contact .form-label{font-size:1.1rem;font-weight:700;margin-bottom:10px;font-family:'Times New Roman', Times, serif;color:var(--charcoal)}
/* Inputs as a single bottom line (no boxed background) */
#contact .form-input,#contact .form-textarea{padding:12px 6px 8px 6px;font-size:1rem;border:none;border-bottom:3px solid var(--charcoal);background:transparent;color:var(--charcoal);border-radius:0;font-family:inherit;box-shadow:none}
#contact .form-input::placeholder,#contact .form-textarea::placeholder{color:#000}
#contact .form-input:focus,#contact .form-textarea:focus{outline:none;background:transparent;border-bottom-color:var(--charcoal);box-shadow:none}
#contact .form-textarea{resize:vertical;min-height:100px}

#contact .needs-section{background:transparent;padding:40px 60px;border:none;border-radius:8px;box-shadow:0 6px 18px rgba(11,43,143,0.03)}
#contact .needs-label{font-size:.85rem;font-weight:700;color:var(--charcoal);margin-bottom:25px;letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid var(--charcoal);padding-bottom:8px;font-family:'Times New Roman', Times, serif}
#contact .needs-title{font-size:1.2rem;font-weight:700;color:var(--charcoal);margin-bottom:30px;font-family:'Times New Roman', Times, serif}

#contact .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#contact .service-category{background:transparent;padding:20px;border:none;transition:all .3s;border-radius:10px;box-shadow:0 6px 18px rgba(11,43,143,0.03)}
#contact .service-category:nth-child(odd){background:var(--card-odd)}
#contact .service-category:nth-child(even){background:var(--card-even)}
#contact .category-header{font-size:.9rem;font-weight:700;color:var(--charcoal);margin-bottom:15px;text-transform:uppercase;letter-spacing:1px;padding-bottom:10px;border-bottom:2px solid var(--charcoal);font-family:'Times New Roman', Times, serif}
#contact .service-options{display:flex;flex-direction:column;gap:8px}
#contact .service-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:6px}
#contact .service-checkbox input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;background:transparent;border:2px solid var(--charcoal);cursor:pointer;position:relative;border-radius:4px}
#contact .service-checkbox input[type="checkbox"]:checked::after{content:'';position:absolute;left:3px;top:3px;right:3px;bottom:3px;background:var(--charcoal)}
#contact .service-checkbox label{font-size:.95rem;color:var(--charcoal);flex:1}

#contact .submit-btn{margin-top:40px;padding:14px 48px;background:var(--charcoal);color:#fff;border:1px solid rgba(255,255,255,0.06);font-size:1.05rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;font-family:'Times New Roman', Times, serif;border-radius:8px;box-shadow:0 10px 0 rgba(0,0,0,0.06), inset 0 -6px 0 rgba(255,255,255,0.03);text-shadow:0 1px 0 rgba(0,0,0,0.45);transition:transform .18s ease}
#contact .submit-btn:hover{transform:translateY(-3px);box-shadow:0 14px 0 rgba(0,0,0,0.08), inset 0 -4px 0 rgba(255,255,255,0.02)}

@media (max-width:768px){
  #contact .header-section,#contact .about-section,#contact .who-section,#contact .needs-section{padding:30px 25px}
  #contact .header-title{font-size:3rem}
  #contact .form-fields{grid-template-columns:1fr}
  #contact .services-grid{grid-template-columns:1fr;gap:15px}
  #contact .service-category{padding:15px}
  #contact .contact-container > div:nth-child(even){background:transparent}
  #contact .header-section,#contact .about-section,#contact .who-section,#contact .needs-section{box-shadow:none;border-radius:6px}
  #contact .service-category{background:transparent!important;box-shadow:none!important;border:1px solid rgba(11,43,143,0.04);padding:14px;border-radius:6px}
  #contact .service-checkbox{padding:12px;gap:14px;border-radius:6px}
  #contact .service-checkbox input[type="checkbox"]{width:20px;height:20px}
  #contact .radio-item input[type="radio"]{width:20px;height:20px}
  #contact .submit-btn{width:100%;padding:16px;font-size:1.05rem}
  #contact .form-fields{gap:24px}
  #contact{min-height:auto}
  #contact .contact-container{padding-bottom:48px}
}

/* Header inner styles moved from index.php */
.header-section { text-align: left; padding: 2rem 1rem 2rem 60px; }
/* shared content box so svg and text have identical width */
/* slightly smaller starting size - no border around svg/text box */
.header-content { width: min(90vw, 460px); margin: 0; }
.header-svg-wrapper { width: 100%; margin-top: 30px;}
.header-svg-wrapper svg { width: 100%; height: auto; display: block; }
/* reduce gap between svg and text, add bottom spacing under the subtext */
.header-text-block { width: 100%; margin: 0.15rem 0 0; padding-bottom: 30px; }
.header-subtext { margin: 0; font-size: clamp(16px, 3vw, 22px); line-height: 1.2; color: #222; }

@media (max-width: 768px) {
  /* center the shared box on mobile, svg inside can be centered while text stays left */
  .header-section { padding-left: 25px; padding-right: 25px; }
  .header-content { width: min(75vw, 380px); margin: 0 auto; }
  .header-text-block { margin-top: 0.45rem; padding-bottom: 30px; }
}

/* End moved styles */