/* =========================================
   Event Factor — styles.css (FINAL)
   Brand: #3D0F7A • #ABABAB • #000000 • #FFFFFF
   Font: Barlow
========================================= */

:root{
  --bg:#000000;
  --fg:#FFFFFF;
  --muted:#ABABAB;
  --primary:#3D0F7A;

  --card:#0B0B0F;
  --border:rgba(255,255,255,.10);

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --radius:18px;
  --radius-sm:14px;

  --container:1180px;
}

/* -------- Reset -------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Barlow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(61,15,122,.55)}

/* -------- Layout -------- */
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.section{padding:78px 0}
.section.tight{padding:56px 0}

.row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

/* -------- Typography -------- */
h1,h2,h3{
  margin:0;
  letter-spacing:-0.02em;
}
h1{font-weight:800}
h2{
  font-weight:800;
  font-size:40px;
  line-height:1.12;
}
h3{
  font-weight:700;
  font-size:22px;
  line-height:1.2;
}

p{
  margin:0;
  line-height:1.7;
  color:rgba(255,255,255,.88);
}
.small{
  font-size:15px;
  color:rgba(255,255,255,.80);
}
.kicker{
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
  margin-bottom:10px;
}
.badge{
  display:inline-flex;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  font-size:13px;
}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  font-weight:700;
  font-size:14px;
  transition:.18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
}
.btn.primary{
  background:var(--primary);
}
.btn.primary:hover{
  background:#4A1590;
}

/* -------- Cards -------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.pad{padding:28px}

/* -------- NAV -------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand img{
  height:56px;
  object-fit:contain;
}
.nav-links{
  display:flex;
  gap:10px;
}
.nav-links a{
  font-weight:700;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(255,255,255,.85);
}
.nav-links a:hover{
  background:rgba(255,255,255,.06);
}
.nav-links a.active{
  background:rgba(61,15,122,.22);
  border-color:rgba(61,15,122,.40);
}

/* ==================================================
   HERO — VIDEO BACKGROUND (FINAL TUNED)
================================================== */

.hero{padding:0}

.hero-video-bg{
  position:relative;
  min-height:calc(100vh - 90px);
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:
    saturate(1.03)
    contrast(1.02)
    brightness(0.92);
}

/* 🔥 PERFECT CONTRAST OVERLAY */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.75) 0%,
      rgba(0,0,0,.55) 30%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.70) 100%
    ),
    radial-gradient(
      900px 500px at 25% 20%,
      rgba(61,15,122,.22),
      transparent 60%
    ),
    radial-gradient(
      120% 90% at 50% 50%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.55) 100%
    );
}

.hero-content{
  position:relative;
  z-index:2;
  padding:80px 0 64px;
}
.hero-content h1{
  font-size:56px;
  line-height:1.03;
  max-width:18ch;
  margin:14px 0;
}
.hero-content p{max-width:72ch}

/* Text readability boost */
.hero-content h1,
.hero-content p,
.hero-content .badge{
  text-shadow:
    0 2px 12px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.85);
}

/* -------- HOMEPAGE IMAGE STRIP -------- */
.media-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  margin-top:32px;
}
.media-tile{
  height:260px;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  transition:.6s ease;
}
.media-tile:nth-child(2),
.media-tile:nth-child(5){height:300px}
.media-tile:nth-child(3),
.media-tile:nth-child(6){height:240px}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:.8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* -------- FOOTER -------- */
.footer{
  padding:38px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.70);
  font-size:13px;
}

/* -------- RESPONSIVE -------- */
@media (max-width:980px){
  .nav-links{display:none}
  .hero-content h1{font-size:38px}
  .section{padding:60px 0}
  .media-strip{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .media-tile,
  .media-tile:nth-child(2),
  .media-tile:nth-child(3),
  .media-tile:nth-child(5),
  .media-tile:nth-child(6){
    height:200px;
  }
}

/* Mobile contrast safety */
@media (max-width:768px){
  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,.75)
      );
  }
}

/* ==================================================
   PROJECTS PAGE LAYOUT (Event Factor)
   Paste at END of styles.css
================================================== */

/* ---------- Projects Hero ---------- */
.projects-hero{
  position:relative;
  padding:62px 0 34px;
  overflow:hidden;
}

.projects-hero:before{
  content:"";
  position:absolute;
  inset:-220px -220px auto auto;
  width:520px;
  height:520px;
  background:radial-gradient(circle at 30% 30%, rgba(61,15,122,.35), transparent 62%);
  filter:blur(2px);
  pointer-events:none;
}

.projects-hero h1{
  font-size:52px;
  line-height:1.05;
  margin:10px 0 12px;
  max-width:22ch;
}

.projects-hero .lead{
  max-width:85ch;
  color:rgba(255,255,255,.82);
}

/* ---------- Filter Bar ---------- */
.projects-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:13px;
  transition:.18s ease;
  cursor:pointer;
  user-select:none;
}

.chip:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}

.chip.active{
  background:rgba(61,15,122,.28);
  border-color:rgba(61,15,122,.55);
  color:#fff;
}

/* ---------- Projects Grid ---------- */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:18px;
  margin-top:26px;
}

/* Card sizes (mix for premium rhythm) */
.project-card{
  grid-column:span 4;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  position:relative;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

/* Make first row look premium: one wide + two normal (optional) */
.project-card.wide{ grid-column:span 8; }
.project-card.tall .project-thumb{ height:360px; }

.project-card:hover{
  transform:translateY(-4px);
  border-color:rgba(61,15,122,.55);
  background:linear-gradient(180deg, rgba(61,15,122,.14), rgba(255,255,255,.03));
}

/* Thumbnail */
.project-thumb{
  height:260px;
  background-size:cover;
  background-position:center;
  position:relative;
}

/* Overlay for readability */
.project-thumb:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78));
}

.project-content{
  padding:18px 18px 16px;
}

.project-title{
  font-size:18px;
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:-.01em;
}

.project-sub{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.55;
}

/* Meta tags */
.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.tag{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:700;
}

/* Corner label (optional) */
.corner{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  font-size:12px;
  font-weight:800;
  color:#fff;
}

/* ---------- Empty state ---------- */
.projects-empty{
  margin-top:26px;
  padding:26px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--radius);
  color:rgba(255,255,255,.78);
}

/* ==================================================
   PROJECT DETAIL PAGE (Case Study)
================================================== */

.case-hero{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  min-height:420px;
  background-size:cover;
  background-position:center;
}

.case-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 22% 18%, rgba(61,15,122,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.88));
}

.case-hero .case-hero-inner{
  position:relative;
  z-index:2;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:420px;
}

.case-hero h1{
  font-size:46px;
  line-height:1.05;
  margin:8px 0 10px;
  max-width:24ch;
}

.case-hero .case-lead{
  max-width:85ch;
  color:rgba(255,255,255,.82);
}

/* Case layout: left story + right facts */
.case-grid{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:18px;
  margin-top:22px;
}

.case-panel{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow-soft);
}

.case-panel .pad{ padding:22px; }

.fact{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fact:last-child{ border-bottom:none; }

.fact .label{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  font-weight:800;
}
.fact .value{
  font-size:14px;
  color:rgba(255,255,255,.86);
  font-weight:700;
}

/* Gallery grid */
.case-gallery{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  margin-top:18px;
}

.g-item{
  grid-column:span 4;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow-soft);
}

.g-item.wide{ grid-column:span 8; }
.g-item.full{ grid-column:span 12; }

.g-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width:980px){
  .projects-hero h1{ font-size:38px; }
  .projects-grid{ gap:14px; }
  .project-card{ grid-column:span 12; }
  .project-card.wide{ grid-column:span 12; }
  .project-thumb{ height:240px; }

  .case-grid{ grid-template-columns:1fr; }
  .case-hero h1{ font-size:34px; }

  .case-gallery{ gap:12px; }
  .g-item{ grid-column:span 12; }
  .g-item.wide{ grid-column:span 12; }
}

/* =========================================
   Event Factor — styles.css (UPDATED)
   Fix: "In Action" now clean structured grid (not odd)
   Brand: #3D0F7A • #ABABAB • #000000 • #FFFFFF
   Font: Barlow
========================================= */

:root{
  --bg:#000000;
  --fg:#FFFFFF;
  --muted:#ABABAB;
  --primary:#3D0F7A;

  --card:#0B0B0F;
  --border:rgba(255,255,255,.10);

  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --radius:18px;
  --radius-sm:14px;

  --container:1180px;
}

/* -------- Reset -------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Barlow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(61,15,122,.55)}

/* -------- Layout -------- */
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}
.section{padding:78px 0}
.section.tight{padding:56px 0}
.row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

/* -------- Typography -------- */
h1,h2,h3{
  margin:0;
  letter-spacing:-0.02em;
}
h1{font-weight:800}
h2{
  font-weight:800;
  font-size:40px;
  line-height:1.12;
}
h3{
  font-weight:700;
  font-size:22px;
  line-height:1.2;
}
p{
  margin:0;
  line-height:1.7;
  color:rgba(255,255,255,.88);
}
.small{
  font-size:15px;
  color:rgba(255,255,255,.80);
}
.kicker{
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
  margin-bottom:10px;
}
.badge{
  display:inline-flex;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  font-size:13px;
}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  font-weight:700;
  font-size:14px;
  transition:.18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
}
.btn.primary{
  background:var(--primary);
}
.btn.primary:hover{
  background:#4A1590;
}

/* -------- Cards -------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.pad{padding:28px}

/* -------- Simple Grid Utilities -------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}

/* -------- NAV -------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  height:90px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand img{
  height:56px;
  object-fit:contain;
}
.nav-links{
  display:flex;
  gap:10px;
}
.nav-links a{
  font-weight:700;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color:rgba(255,255,255,.85);
}
.nav-links a:hover{
  background:rgba(255,255,255,.06);
}
.nav-links a.active{
  background:rgba(61,15,122,.22);
  border-color:rgba(61,15,122,.40);
}

/* ==================================================
   HERO — VIDEO BACKGROUND (TUNED)
================================================== */
.hero{padding:0}

.hero-video-bg{
  position:relative;
  min-height:calc(100vh - 90px);
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:
    saturate(1.03)
    contrast(1.02)
    brightness(0.92);
}

/* Perfect contrast overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.75) 0%,
      rgba(0,0,0,.55) 30%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.70) 100%
    ),
    radial-gradient(
      900px 500px at 25% 20%,
      rgba(61,15,122,.22),
      transparent 60%
    ),
    radial-gradient(
      120% 90% at 50% 50%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.55) 100%
    );
}

.hero-content{
  position:relative;
  z-index:2;
  padding:80px 0 64px;
}
.hero-content h1{
  font-size:56px;
  line-height:1.03;
  max-width:18ch;
  margin:14px 0;
}
.hero-content p{max-width:72ch}

/* Text readability boost */
.hero-content h1,
.hero-content p,
.hero-content .badge{
  text-shadow:
    0 2px 12px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.85);
}

/* ==================================================
   IN ACTION — CLEAN STRUCTURED GRID (FIXED)
================================================== */
.media-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:32px;
}

.media-tile{
  position:relative;
  height:280px;
  background-size:cover;
  background-position:center;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .5s ease;
}

.media-tile:hover{
  transform:translateY(-4px);
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:.8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* -------- Footer -------- */
.footer{
  padding:38px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.70);
  font-size:13px;
}

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width:980px){
  .nav-links{display:none}
  .hero-content h1{font-size:38px}
  .section{padding:60px 0}

  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}

  .media-strip{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .media-tile{
    height:200px;
  }
}

@media (max-width:768px){
  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,.75)
      );
  }
}

@media (max-width:520px){
  .container{width:calc(100% - 28px)}
  .hero-content h1{font-size:34px}
  .badge{font-size:12px}
  .btn{width:100%}

  .media-strip{
    grid-template-columns:1fr;
  }
}

/* ===============================
   CTA BUTTON UPGRADE (Primary)
================================ */

.btn{
  padding:12px 18px;
  border-radius:14px;                /* less “pill”, more premium */
}

.btn.primary{
  background:linear-gradient(135deg, #3D0F7A, #4A1590);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 12px 30px rgba(61,15,122,.35),
    0 2px 0 rgba(255,255,255,.06) inset;
}

.btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 42px rgba(61,15,122,.45),
    0 2px 0 rgba(255,255,255,.08) inset;
}

.btn.primary:active{
  transform:translateY(0px);
  box-shadow:
    0 10px 26px rgba(61,15,122,.28),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.btn.primary{
  letter-spacing:.02em;
  font-weight:800;
}

/* ======================================
   RFQ PAGE — PROFESSIONAL FIX
====================================== */

/* Page container */
.rfq-wrap{
  max-width:1100px;
  margin:0 auto;
}

/* Remove “developer option” feel */
.rfq-options,
.rfq-options-title{
  display:none;
}

/* RFQ card */
.rfq-card{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.03)
  );
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:42px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}

/* Section title */
.rfq-card h3{
  font-size:26px;
  margin-bottom:6px;
}

.rfq-card p{
  color:rgba(255,255,255,.75);
  margin-bottom:28px;
}

/* Form grid */
.rfq-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

/* Full-width rows */
.rfq-form .full{
  grid-column:1 / -1;
}

/* Inputs */
.rfq-form input,
.rfq-form select,
.rfq-form textarea{
  width:100%;
  height:52px;
  padding:0 16px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  color:#fff;
  font-size:15px;
}

.rfq-form textarea{
  height:110px;
  padding:14px 16px;
  resize:vertical;
}

.rfq-form input::placeholder,
.rfq-form textarea::placeholder{
  color:rgba(255,255,255,.45);
}

/* Focus state */
.rfq-form input:focus,
.rfq-form textarea:focus,
.rfq-form select:focus{
  outline:none;
  border-color:#3D0F7A;
  box-shadow:0 0 0 3px rgba(61,15,122,.35);
}

/* CTA alignment */
.rfq-submit{
  margin-top:28px;
  display:flex;
  justify-content:flex-end;
}

/* Button refinement */
.rfq-submit .btn.primary{
  padding:16px 28px;
  font-size:15px;
  font-weight:800;
}

/* Mobile fix */
@media (max-width:768px){
  .rfq-card{
    padding:28px;
  }

  .rfq-form{
    grid-template-columns:1fr;
  }

  .rfq-submit{
    justify-content:stretch;
  }

  .rfq-submit .btn{
    width:100%;
  }
}

/* ===============================
   HEADER LOGO FIX (IMPORTANT)
================================ */

.brand{
  display:flex;
  align-items:center;
}

.brand img{
  height:100px;              /* BIGGER logo */
  width:auto;
  object-fit:contain;
}

@media (max-width:768px){
  .brand img{
    height:56px;
  }
}

/* ======================================
   ABOUT — STRUCTURE + SPACING FIX
====================================== */

.about{
  padding:90px 0;
  position:relative;
}

.about .about-wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:start;
}

.about .about-copy{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:34px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

.about .about-copy h2{
  font-size:42px;
  line-height:1.12;
  margin-bottom:12px;
}

.about .about-copy p{
  max-width:75ch;
  color:rgba(255,255,255,.84);
  font-size:16px;
}

.about .about-proof{
  display:grid;
  gap:14px;
}

.about .proof-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:18px;
}

.about .proof-card strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}

.about .proof-card span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.55;
}

/* Quick stats row (optional if your HTML has it) */
.about .about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}

.about .stat{
  padding:16px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
}

.about .stat .num{
  font-size:22px;
  font-weight:800;
}

.about .stat .lbl{
  font-size:13px;
  color:rgba(255,255,255,.70);
  margin-top:4px;
}

/* Responsive */
@media (max-width:980px){
  .about{padding:70px 0}

  .about .about-wrap{
    grid-template-columns:1fr;
  }

  .about .about-copy h2{
    font-size:34px;
  }

  .about .about-stats{
    grid-template-columns:1fr;
  }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>About | Event Factor</title>
  <meta name="description" content="Event Factor is a high-performance hybrid event production company built by practitioners to deliver fast-turnaround execution with in-house capability and disciplined site leadership." />

  <link rel="icon" href="assets/img/brand/favicon.png" />

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;700;800&display=swap" rel="stylesheet">

  <!-- CSS -->
  <link rel="stylesheet" href="assets/css/styles.css" />
</head>

<body>

<!-- NAV -->
<div class="nav">
  <div class="container nav-inner">
    <a class="brand" href="index.html">
      <img src="assets/img/brand/logo.png" alt="Event Factor logo" />
    </a>

    <div class="nav-links">
      <a href="index.html">Home</a>
      <a href="about.html" class="active">About</a>
      <a href="capabilities.html">Capabilities</a>
      <a href="services.html">Services</a>
      <a href="projects.html">Projects</a>
      <a href="safety.html">Safety</a>
      <a href="contact.html" class="btn primary">Contact</a>
    </div>
  </div>
</div>

<!-- HERO -->
<section class="section">
  <div class="container">
    <div class="kicker">About</div>
    <h2>Built by people who execute — not just plan.</h2>
    <p class="small" style="max-width:95ch;margin-top:12px">
      Event Factor was created by practitioners who spent years solving problems on site —
      on cold nights, tight calls, and shifting scopes. We built the company we wished we had:
      a single partner that can design, fabricate, and install with the same level of care.
    </p>

    <div class="row" style="margin-top:18px">
      <a class="btn primary" href="rfq.html">Request a Quote</a>
      <a class="btn" href="projects.html">View Projects</a>
    </div>
  </div>
</section>

<!-- ABOUT (STRUCTURED) -->
<section class="about section">
  <div class="container about-wrap">

    <!-- LEFT: STORY -->
    <div class="about-copy">
      <div class="kicker">Who we are</div>
      <h2>Integrated delivery for high-pressure environments.</h2>

      <p class="small" style="margin-top:12px">
        Event Factor is a high-performance, hybrid event production company specializing in
        fast-turnaround execution, in-house fabrication, steel systems, scaffolding, and top-quality finishing.
        We work like a delivery team — not a broker — with real supervision, disciplined manpower, and clear sequencing.
      </p>

      <p class="small" style="margin-top:14px">
        When timelines are compressed and scopes move fast, we keep control through practical systems:
        on-site leadership, quality checkpoints, safety discipline, and an integrated supply chain mindset.
      </p>

      <!-- STATS -->
      <div class="about-stats">
        <div class="stat">
          <div class="num">24/7</div>
          <div class="lbl">Fast-turnaround execution</div>
        </div>
        <div class="stat">
          <div class="num">In-house</div>
          <div class="lbl">Fabrication + finishing</div>
        </div>
        <div class="stat">
          <div class="num">Safety-first</div>
          <div class="lbl">Supervision-led delivery</div>
        </div>
      </div>
    </div>

    <!-- RIGHT: PROOF / VALUES -->
    <div class="about-proof">
      <div class="proof-card">
        <strong>One accountable partner</strong>
        <span>We reduce handovers and prevent delays by keeping responsibility with one execution-led team.</span>
      </div>

      <div class="proof-card">
        <strong>Precision + speed</strong>
        <span>Built for tight deadlines without compromising finishing or safety standards.</span>
      </div>

      <div class="proof-card">
        <strong>In-house capability</strong>
        <span>Fabrication, steel systems, scaffolding, and finishing coordinated under one roof.</span>
      </div>

      <div class="proof-card">
        <strong>Site problem-solving</strong>
        <span>We resolve real constraints on site — access, sequencing, time windows, and scope changes.</span>
      </div>
    </div>

  </div>
</section>

<!-- HOW WE WORK (MORE DETAILED) -->
<section class="section tight">
  <div class="container">
    <div class="kicker">How we work</div>
    <h2>Disciplined execution, backed by systems.</h2>
    <p class="small" style="max-width:95ch;margin-top:10px">
      We don’t rely on luck. We rely on repeatable processes that protect quality and handover readiness.
    </p>

    <div class="grid-3" style="margin-top:26px">
      <div class="card">
        <div class="pad">
          <h3>01. Assess & Plan</h3>
          <p class="small">Scope review, constraints mapping, safety requirements, and sequencing before mobilization.</p>
        </div>
      </div>

      <div class="card">
        <div class="pad">
          <h3>02. Fabricate & Prepare</h3>
          <p class="small">Critical elements fabricated in-house, with checkpoints to keep fit and finish consistent.</p>
        </div>
      </div>

      <div class="card">
        <div class="pad">
          <h3>03. Execute & Close-out</h3>
          <p class="small">Supervised installation, punch-list closure, and handover readiness under real deadlines.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- WHAT WE DO (SHORT LIST) -->
<section class="section">
  <div class="container">
    <div class="kicker">What we do</div>
    <h2>Capabilities that reduce dependency.</h2>

    <div class="grid-3" style="margin-top:26px">
      <div class="card"><div class="pad">
        <h3>Steel Systems</h3>
        <p class="small">Platforms, frames, temporary structures, and custom structural solutions.</p>
      </div></div>

      <div class="card"><div class="pad">
        <h3>Scaffolding & Access</h3>
        <p class="small">Access systems for complex builds with safety and supervision discipline.</p>
      </div></div>

      <div class="card"><div class="pad">
        <h3>Fabrication & Finishing</h3>
        <p class="small">In-house fabrication and premium finishing aligned with broadcast and VIP standards.</p>
      </div></div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="section">
  <div class="container">
    <div class="card">
      <div class="pad">
        <div class="kicker">Let’s talk</div>
        <h2>Tell us the timeline — we’ll tell you the execution plan.</h2>
        <p class="small">Share drawings, venue constraints, deadlines, and quality expectations.</p>

        <div class="row" style="margin-top:16px">
          <a class="btn primary" href="rfq.html">Request a Quote</a>
          <a class="btn" href="contact.html">Contact Us</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<div class="footer">
  <div class="container">© Event Factor. All rights reserved.</div>
</div>

<script src="assets/js/main.js"></script>
</body>
</html>

/* ======================================
   NAV FIX: DESKTOP + MOBILE DRAWER
====================================== */

/* Make sure desktop nav is visible by default */
.nav-links{display:flex;}

/* Burger button (hidden on desktop) */
.nav-burger{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.nav-burger span{
  display:block;
  width:22px;
  height:2px;
  background:rgba(255,255,255,.92);
  border-radius:2px;
}

/* Drawer hidden by default */
.nav-drawer{
  display:none;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(14px);
}
.nav-drawer-inner{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
  padding:14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-drawer a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:800;
  color:rgba(255,255,255,.88);
}
.nav-drawer a:hover{
  background:rgba(255,255,255,.08);
}

/* Mobile behavior */
@media (max-width:980px){
  .nav-links{display:none;}       /* hide desktop menu */
  .nav-burger{display:flex;}     /* show burger */
  .nav-drawer.open{display:block;}
}

/* ==================================================
   NEW NAV STYLE (Modern Glass + Underline)
================================================== */

/* If old .nav exists, neutralize it safely */
.nav{display:none !important;}

/* Topbar shell */
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* inner layout */
.topbar-inner{
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Logo */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height:72px;
  width:auto;
  object-fit:contain;
}

/* Nav links (desktop) */
.topnav{
  display:flex;
  align-items:center;
  gap:18px;
}

.navlink{
  position:relative;
  padding:10px 2px;
  font-weight:800;
  font-size:14px;
  color:rgba(255,255,255,.82);
  letter-spacing:.01em;
  transition:.18s ease;
}

.navlink:hover{
  color:#fff;
}

/* Modern underline indicator */
.navlink:after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0%;
  height:2px;
  background:rgba(61,15,122,.95);
  border-radius:2px;
  transition:width .22s ease;
}

.navlink:hover:after{width:100%;}
.navlink.active{color:#fff;}
.navlink.active:after{width:100%;}

/* CTA group */
.topbar-cta{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Burger (mobile) */
.burger{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.burger span{
  display:block;
  width:22px;
  height:2px;
  background:rgba(255,255,255,.92);
  border-radius:3px;
  transition:.2s ease;
}

/* Drawer */
.drawer{
  display:none;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(16px);
}

.drawer.open{display:block;}

.drawer-inner{
  padding:14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.drawer a{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-weight:800;
  color:rgba(255,255,255,.88);
}

.drawer a:hover{
  background:rgba(255,255,255,.08);
}

/* Responsive behavior */
@media (max-width:980px){
  .topnav{display:none;}
  .burger{display:flex;}
  .brand img{height:60px;}
}

/* Optional: premium shrink on scroll */
.topbar.shrink .topbar-inner{height:78px;}
.topbar.shrink .brand img{height:58px;}

