/* ===============================
   Fort.Forge-iv.co
================================ */
@font-face{
    font-family:'DIN Pro';
    src:url('../fonts/DINPro.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
}
@font-face{
    font-family:'DIN Pro';
    src:url('../fonts/DINPro-Light.ttf') format('truetype');
    font-weight:300;
    font-style:normal;
}
@font-face{
    font-family:'DIN Pro';
    src:url('../fonts/DINPro-Medium.ttf') format('truetype');
    font-weight:500;
    font-style:normal;
}
@font-face{
    font-family:'DIN Pro';
    src:url('../fonts/DINPro-Bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
}
@font-face{
    font-family:'DIN Pro';
    src:url('../fonts/DINPro-Black.ttf') format('truetype');
    font-weight:900;
    font-style:normal;
}
*{
    font-family:'DIN Pro', Arial, Helvetica, sans-serif;
}
:root{
  --red:#e2231a;
  --red-dark:#b81c14;
  --gold:#cf9b2e;
  --gold-light:#e8c874;
  --black:#1a1a1a;
  --grey-bg:#f4f4f4;
  --grey-text:#4d4d4d;
  --white:#ffffff;
  --maxw:1200px;
  --maxw-wide:1320px;
  --header-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{
  overflow-x:hidden;
  max-width:100%;
}
body{
  font-family:'DIN Next','DIN Pro','Segoe UI', Arial, Helvetica, sans-serif;
  color:var(--black);
  background:var(--white);
  overflow-x:hidden;
  width:100%;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section[id]{scroll-margin-top:var(--header-h);}

/* ---------- CUSTOM SCROLLBAR ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--red) var(--grey-bg);}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--grey-bg);}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--red),var(--red-dark));
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

.btn{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:0.5px;
  padding:10px 22px;
  border:none;
  border-radius:3px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{background:var(--red-dark); transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.18);}

/* Locate button (with pin icon) */
.btn-locate{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 30px;
  border-radius:30px;
  font-size:0.78rem;
}
.btn-locate svg{width:14px;height:14px;flex-shrink:0;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i, 0) * 0.08s);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:200;
  background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,0.08);
  border-bottom:3px solid var(--red);
  transition:box-shadow .3s ease;
}
header.scrolled{
  box-shadow:0 4px 18px rgba(0,0,0,0.14);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--maxw);margin:0 auto;
}
.logo-group{display:flex;align-items:center;gap:10px;font-weight:800;}
.logo-group img{height:36px;}

nav ul{display:flex;gap:34px;font-size:0.92rem;font-weight:600;color:#333;}
nav ul li{position:relative;}
nav ul li a{position:relative;padding:6px 0;transition:color .2s;display:inline-flex;align-items:center;gap:5px;}
nav ul li a:hover, nav ul li a.active{color:var(--gold);}
nav ul li a.active::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
}
nav ul li a .caret{width:9px;height:9px;transition:transform .25s ease;}
nav ul li.has-dropdown:hover .caret,
nav ul li.has-dropdown.open .caret{transform:rotate(180deg);}

/* Dropdown — card style panel */
.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translate(-50%,10px);
  background:#fff;
  width:520px;
  max-width:90vw;
  border-radius:10px;
  box-shadow:0 22px 46px rgba(0,0,0,0.18);
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  opacity:0;visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:50;
}
/* little arrow pointer on top of the card */
.dropdown-menu::before{
  content:"";
  position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;background:#fff;
  box-shadow:-3px -3px 6px rgba(0,0,0,0.04);
}
nav ul li.has-dropdown:hover .dropdown-menu,
nav ul li.has-dropdown.open .dropdown-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.dropdown-menu li{list-style:none;}
.dropdown-menu li a{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:16px;border-radius:8px;font-size:0.9rem;color:#222;font-weight:700;
  background:var(--grey-bg);
  border:1px solid transparent;
  min-height:64px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.dropdown-menu li a::after{
  content:"View details →";
  font-size:0.72rem;font-weight:500;color:var(--grey-text);
  transition:color .18s ease;
}
.dropdown-menu li a:hover{
  background:#fff;color:var(--red);border-color:var(--gold-light);
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,0.1);
}
.dropdown-menu li a:hover::after{color:var(--gold);}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.burger span{width:26px;height:3px;background:var(--black);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  width:100%;
  max-width:100%;
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img,.hero-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.hero-media img.hero-poster{
  z-index:1;
  transition:opacity 1.1s ease;
  opacity:1;
}
.hero-media video.hero-video{
  z-index:0;
  opacity:0;
  transition:opacity 1.1s ease;
}
.hero-media video.hero-video.is-playing{opacity:1;}
.hero-media img.hero-poster.is-hidden{opacity:0;}

/* Fine dot-grid texture, shown only over the looping video (not the
   static poster). Replace the background-image below with your own
   tiled PNG (e.g. assets/images/hero-texture.png) for an exact match
   to the original pattern if you have that file. */
.hero-video-pattern{
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
  background-image:radial-gradient(rgba(255,255,255,0.55) 0.6px, transparent 0.6px);
  background-size:6px 6px;
  mix-blend-mode:overlay;
}
.hero-media.video-active .hero-video-pattern{opacity:0.5;}

.hero-fallback{
  background:linear-gradient(120deg,#3a3a3a,#1a1a1a 60%);
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.28) 65%);
  z-index:1;
}
.hero-content{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
    text-align:left;
    padding:90px clamp(20px,6vw,110px) 50px;
    width:100%;
}

.hero-partners{
    margin-bottom:32px;
    text-align:left;
}

.hero-partners img{
    width:min(550px,85vw);
    height:auto;
    margin:0;
}

.hero-brand{
    margin-bottom:26px;
    text-align:left;
}

.hero-brand img{
    width:min(700px,88vw);
    height:auto;
    margin:0;
}

.hero-text{
    max-width:1000px;
    text-align:left;
}

.hero-text p{
    color:#fff;
    font-size:clamp(26px,2.6vw,52px);
    line-height:1.18;
    font-weight:700;
    text-shadow:0 4px 20px rgba(0,0,0,.45);
    text-align:left;
}

.hero-scroll{
    margin:32px 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    align-self:center;
    width:fit-content;
    color:var(--red);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-align:center;
    text-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 14px rgba(255,255,255,.35);
    opacity:1;
    transition:opacity .5s ease;
}
.hero-scroll.is-hidden{opacity:0;pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .hero-scroll{transition:none;}
}

.scroll-mouse{
    width:28px;
    height:48px;
    border:2px solid var(--red);
    border-radius:30px;
    margin-top:12px;
    position:relative;
    box-shadow:0 2px 10px rgba(0,0,0,.4);
}

.scroll-mouse span{
    position:absolute;
    left:50%;
    top:8px;
    width:5px;
    height:10px;
    background:var(--red);
    border-radius:20px;
    transform:translateX(-50%);
    animation:scrollWheel 1.8s infinite;
}

@keyframes scrollWheel{

0%{
    opacity:0;
    transform:translate(-50%,0);
}
50%{
    opacity:1;
}

100%{
    opacity:0;
    transform:translate(-50%,16px);
}
}

/* ---------- FORT + PRIMER SECTION ---------- */
.about-section{
  background:var(--red);
  color:#fff;
  padding:70px 0;
}
.about-grid{
  display:grid;grid-template-columns:46% 54%;gap:60px;align-items:start;
}
.about-col{max-width:520px;}
.about-heading-row{
  display:flex;align-items:center;flex-wrap:wrap;
  column-gap:14px;row-gap:2px;
  margin-bottom:22px;
}
.about-heading-row #aboutHeading{
  font-size:3.2rem;font-weight:800;line-height:1;letter-spacing:2px;
}
.about-heading-row #aboutSubheading{
  font-size:0.85rem;font-weight:400;letter-spacing:0.5px;
  color:#f9d9d7;line-height:1.3;
}
.about-grid p{
  font-size:0.95rem;line-height:1.9;margin-bottom:14px;color:#1a1a1a;
  max-width:46ch;text-align:justify;text-justify:inter-word;
}
.forge-logo-block{
  display:flex;align-items:center;gap:12px;margin-top:46px;
}
.forge-logo-block img{
  height:156px;width:auto;
  padding:14px 20px;
}
.forge-logo-block .forge-text-fallback{display:none;}

.primer-col{max-width:600px;}
#primerHeading{
  font-size:2.1rem;font-weight:800;letter-spacing:6px;margin-bottom:22px;
}
.video-frame{border-radius:8px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,0.3);}
.yt-embed-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#0d0d0d;}
.yt-embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.yt-embed-fallback{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;background:#0d0d0d;color:var(--gold-light);
  font-weight:700;letter-spacing:0.5px;
}

/* ---------- LOCATIONS ---------- */
.section-pad{padding:80px 0;}
.section-title{
  color:var(--red);font-size:1.9rem;font-weight:800;margin-bottom:40px;
}

/* Wider container just for Locations + Centers of Excellence,
   per the reference layout supplied. */
#locations .container,
#coe .container{
  max-width:var(--maxw-wide);
}

.locations-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;
}
.location-card{
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:8px;
  padding:28px 28px 32px;
  text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.04);
  overflow:hidden;
  transition:box-shadow .3s ease, transform .3s ease;
}
.location-card:hover{box-shadow:0 8px 22px rgba(0,0,0,0.08);transform:translateY(-2px);}
.location-card h3{color:var(--red);font-size:1.25rem;margin-bottom:18px;text-align:center;}
.location-map{
  position:relative;
  width:100%;height:340px;border-radius:4px;overflow:hidden;margin-bottom:20px;
  background:#e9e9e9;
}
.location-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.location-map a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--red);font-size:0.85rem;font-weight:700;
}
.location-card p{font-size:0.92rem;line-height:1.8;color:var(--grey-text);margin-bottom:10px;text-align:left;}
.location-card .btn{margin-top:20px;}

/* ---------- CENTERS OF EXCELLENCE / CAROUSEL ---------- */
.coe-section{background:#fff;}
.carousel{
  position:relative;border-radius:6px;overflow:hidden;
  min-height:460px;display:flex;align-items:center;
}
.carousel-slide{
  position:relative;width:100%;min-height:460px;
  display:flex;align-items:center;
}
.carousel-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:opacity .7s ease, transform 6s ease;
  transform:scale(1.03);
}
.carousel-slide::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.25));z-index:1;
}
.carousel-text{position:relative;z-index:2;color:#fff;padding:60px 70px;max-width:680px;transition:opacity .55s ease, transform .55s ease;}
.carousel-text h3{font-size:2.15rem;font-weight:800;letter-spacing:0.3px;margin-bottom:18px;}
.carousel-text p{font-size:1rem;line-height:1.8;color:#eee;}
.carousel-text.fading{opacity:0;transform:translateY(10px);}
.carousel-slide img.fading{opacity:0;transform:scale(1);}

.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,0.15);color:#fff;border:none;
  width:42px;height:42px;border-radius:50%;font-size:1.3rem;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;transition:background .2s, color .2s;
}
.carousel-arrow:hover{background:var(--gold);color:#1a1a1a;}
.carousel-arrow.left{left:16px;}
.carousel-arrow.right{right:16px;}
.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;}
.carousel-dots span{
  width:9px;height:9px;border-radius:50%;background:#ccc;cursor:pointer;transition:background .2s, transform .2s;
}
.carousel-dots span.active{background:var(--red);transform:scale(1.25);}

/* ---------- FORT ADVANTAGE ---------- */
.advantage-section{background:var(--red);color:#fff;padding:110px 0;}
.advantage-section .section-title{color:#fff;margin-bottom:16px;font-size:2.3rem;}
.advantage-section .intro{
  font-size:0.98rem;color:#f9d9d7;max-width:900px;line-height:1.8;margin-bottom:56px;
}
.advantage-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.advantage-card{
  background:#fff;color:var(--black);padding:52px 34px;border-radius:14px;
  min-height:340px;
  display:flex;flex-direction:column;gap:22px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.advantage-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.advantage-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
.advantage-icon img{width:100%;height:100%;object-fit:contain;}
.advantage-card h4{color:var(--red);font-size:1.3rem;font-weight:800;margin-top:4px;}
.advantage-card p{font-size:0.9rem;line-height:1.75;color:var(--grey-text);max-width:34ch;}

/* ---------- CONTACT ---------- */
.contact-section{
  position:relative;padding:90px 0;color:#fff;overflow:hidden;
}
.contact-section img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(0.5);
}
.contact-section::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(180,20,15,0.85), rgba(20,10,10,0.55));
  z-index:1;
}
.contact-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.contact-inner h2{font-size:2.2rem;font-weight:800;}
form.contact-form{
  background:transparent;display:flex;flex-direction:column;gap:14px;
}
form.contact-form input, form.contact-form textarea{
  background:transparent;border:1.5px solid #fff;border-radius:3px;
  padding:12px 14px;color:#fff;font-size:0.9rem;font-family:inherit;
  transition:border-color .2s ease, background .2s ease;
}
form.contact-form input:focus, form.contact-form textarea:focus{
  outline:none;border-color:var(--gold-light);background:rgba(255,255,255,0.06);
}
form.contact-form input::placeholder, form.contact-form textarea::placeholder{color:#f2dedd;}
form.contact-form textarea{min-height:110px;resize:vertical;}
form.contact-form button{
  background:#fff;color:var(--red);font-weight:800;border:none;
  padding:12px 0;border-radius:3px;cursor:pointer;font-size:0.9rem;letter-spacing:0.5px;
  transition:background .2s, color .2s;
}
form.contact-form button:hover{background:var(--gold-light);color:#1a1a1a;}
.form-status{font-size:0.82rem;min-height:18px;color:#ffe9b0;}

/* ---------- FOOTER ---------- */
footer{background:#e9e9e9;padding:56px 0 90px;overflow:hidden;}
.footer-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;
}
.footer-brand{display:flex;flex-direction:row;align-items:center;gap:18px;min-width:0;flex-wrap:wrap;}
.footer-brand img{height:108px;max-width:100%;width:auto;}
.footer-col{min-width:0;}
.footer-col h5{color:var(--red);font-weight:800;font-size:0.85rem;letter-spacing:1px;margin-bottom:14px;}
.footer-col p{font-size:0.82rem;color:#444;line-height:1.6;margin-bottom:10px;word-break:break-word;}
.footer-col .locate{color:var(--red);font-weight:700;font-size:0.78rem;display:inline-flex;align-items:center;gap:5px;transition:color .2s;}
.footer-col .locate:hover{color:var(--gold);}
.footer-col .locate svg{width:12px;height:12px;flex-shrink:0;}
.footer-col .contact-name{font-weight:700;margin-top:14px;font-size:0.8rem;color:#222;word-break:break-word;}
.footer-col .contact-name a{color:#222;transition:color .2s ease;}
.footer-col .contact-name a:hover{color:var(--red);text-decoration:underline;}
.footer-bottom{
  text-align:center;font-size:0.75rem;color:#777;margin-top:40px;padding-top:20px;
  border-top:1px solid #ccc;
}
.footer-bottom-logos{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:14px;
}
.footer-bottom-logos img{height:26px;width:auto;opacity:.75;transition:opacity .2s ease;}
.footer-bottom-logos img:hover{opacity:1;}

/* Fixed "Made by Forge-iv.co" credit, bottom-right corner — plain text only */
.made-by-badge{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:150;
  color:#fff;
  font-size:0.72rem;
  letter-spacing:.2px;
  text-shadow:none;
}
.made-by-badge a{color:var(--gold-light);font-weight:700;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  nav{position:fixed;top:var(--header-h);left:0;right:0;background:#fff;
    flex-direction:column;box-shadow:0 8px 12px rgba(0,0,0,0.08);
    max-height:0;overflow-x:hidden;overflow-y:auto;transition:max-height .35s ease;
    width:100%;box-sizing:border-box;}
  nav.open{max-height:calc(100vh - var(--header-h));}
  nav ul{flex-direction:column;gap:0;padding:10px 24px;width:100%;box-sizing:border-box;min-width:0;}
  nav ul li{min-width:0;width:100%;}
  nav ul li a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;min-width:0;}
  .dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0 0 8px 0;max-height:0;overflow:hidden;
    transition:max-height .3s ease;
    grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;min-width:0;
    box-sizing:border-box;
  }
  .dropdown-menu::before{display:none;}
  .dropdown-menu li{min-width:0;}
  .dropdown-menu li a{min-width:0;width:100%;box-sizing:border-box;word-break:break-word;}
  nav ul li.has-dropdown.open .dropdown-menu{max-height:600px;overflow-y:auto;}
  .burger{display:flex;}
  .hero-fort-title h1{font-size:2.2rem;}
  .hero-tagline{font-size:1.2rem;}
  .hero-panel{padding:26px 24px;}
  .about-grid, .locations-grid, .contact-inner{grid-template-columns:1fr;}
  .about-col, .primer-col{max-width:100%;}
  .about-grid p{max-width:100%;text-align:left;}
  #primerHeading{font-size:1.7rem;letter-spacing:3px;}
  .location-map{height:260px;}
  .advantage-card{min-height:0;padding:38px 26px;}
  .advantage-grid{grid-template-columns:1fr 1fr;}
  .advantage-section{padding:70px 0;}
  .carousel-text{padding:30px;}
  .carousel-text h3{font-size:1.4rem;}
  .footer-grid{grid-template-columns:1fr;gap:36px;text-align:left;}
  footer{padding-bottom:80px;}
  .made-by-badge{font-size:0.64rem;right:10px;bottom:10px;}
}
@media (max-width:520px){
  .advantage-grid{grid-template-columns:1fr;}
  .hero-badge-row{flex-wrap:wrap;}
  .hero-fort-title{flex-wrap:wrap;}
  .advantage-section{padding:56px 0;}
  .advantage-section .section-title{font-size:1.7rem;}
  .hero-content{padding:100px 16px 60px;}
  .about-heading-row #aboutHeading{font-size:2.4rem;}
}
@media (max-width:600px){
  .hero-content{align-items:center;text-align:center;}
  .hero-partners,.hero-brand,.hero-text,.hero-scroll{text-align:center;}
  .hero-partners img,.hero-brand img{margin:0 auto;}
  .hero-text p{text-align:center;}
  .hero-scroll{align-items:center;}
}