:root{
  --font: "Cause", "DynaPuff", Arial, Helvetica, sans-serif;
  --heading-font: "Road Rage", "DynaPuff", Arial, Helvetica, sans-serif;
  --text-color: #ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text-color);
  background-color:#111;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.video-background{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index: -2;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 100% 100%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0.38) 30%, transparent 48%),
    linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.16) 46%, rgba(0,0,0,0.74) 100%),
    linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08));
  z-index:-1;
  pointer-events:none;
}

.site-header{position:relative; padding:18px 12px 0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; background:transparent; min-height:60px}
.header-inner{display:flex; justify-content:center; width:100%;}
.site-logo{height:230px; width:auto; display:block; max-width:min(88vw, 360px); background:transparent}

.banner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--heading-font);
  padding:12px 0 6px;
  padding-inline:0;
  border-radius:8px 8px 0 0;
  color:#111706;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:clamp(1.35rem,3.1vw,3.5rem);
  white-space:nowrap;
  background:linear-gradient(180deg, #b6d221, #7fa20d);
  border:2px solid rgba(13,18,4,0.86);
  border-bottom:0;
  box-shadow:inset 0 3px 0 rgba(255,255,255,0.18);
}

.banner-group{
  margin:0 -34px 20px;
  background:linear-gradient(180deg, #b6d221, #7fa20d);
  border-radius:8px 8px 4px 4px;
  box-shadow:0 8px 22px rgba(0,0,0,0.42);
}

.banner-group::after{
  content:"";
  display:block;
  height:12px;
  background:
    repeating-linear-gradient(135deg, rgba(13,18,4,0.82) 0 9px, rgba(13,18,4,0.82) 9px 18px, transparent 18px, transparent 31px),
    #9bbd15;
  border:2px solid rgba(13,18,4,0.86);
  border-top:0;
  border-radius:0 0 4px 4px;
}

.hero{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:24px 20px 18px}
.hero-narrow{
  max-width:470px;
  width:100%;
  text-align:center;
  padding:0 34px 24px;
  border-radius:24px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.06), transparent 12%),
    radial-gradient(circle at 82% 76%, rgba(151,204,0,0.12), transparent 18%),
    linear-gradient(180deg, rgba(18,18,13,0.94), rgba(8,8,6,0.96));
  border:0px solid rgba(151,204,0,0.68);
  box-shadow:0 20px 44px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
  position:relative;
  overflow:hidden;
}

.hero-title{
  margin:0;
  font-family:var(--heading-font);
  font-weight:400;
  font-size:clamp(1.35rem,6vw,2.9rem);
  line-height:0.86;
  color:#f4ead8;
  text-transform:uppercase;
  text-shadow:0 4px 0 rgba(0,0,0,0.52), 0 12px 30px rgba(0,0,0,0.75);
}

.hero-title span{
  display:block;
}

.hero-accent{
  color:#9bd000;
  text-shadow:0 4px 0 rgba(0,0,0,0.62), 0 0 18px rgba(151,204,0,0.22);
}

.hero-sub{
  max-width:560px;
  margin:18px auto 0;
  padding-top:12px;
  border-top:0px solid rgba(151,204,0,0.48);
  font-size:clamp(0.95rem,1.9vw,1.16rem);
  line-height:1.35;
  font-weight:600;
  color:rgba(244,234,216,0.96);
  text-shadow:0 3px 15px rgba(0,0,0,0.72);
}

.coming-soon{
  margin:0 auto;
  width:100%;
  padding:0 0 9px;
  padding-inline:0;
  border-radius:0;
  color:#17110c;
  background:transparent;
  font-size:clamp(0.8rem,1.5vw,1rem);
  font-weight:700;
  font-style:italic;
  text-transform:none;
  border:2px solid rgba(13,18,4,0.86);
  border-top:0;
  border-bottom:0;
  box-shadow:none;
}

.site-header{background:transparent}

.site-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 18px 20px;
  background:transparent;
}

.brother-label{
  display:block;
  margin:0 0 10px;
  padding:0;
  color:black;
  background:transparent;
  border:0;
  box-shadow:none;
  font-family:var(--heading-font);
  font-size:clamp(1.35rem,3.4vw,1.95rem);
  line-height:0.9;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
}

.office-card{
  width:min(100%, 470px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:18px 28px;
  border-radius:8px;
  color:#1b1b1b;
  text-decoration:none;
  background:#ffffff;
  border:2px solid rgba(255,255,255,0.92);
  box-shadow:0 18px 34px rgba(0,0,0,0.34);
}

.office-content{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:100%;
}

.office-logo{
  height:96px;
  width:auto;
  flex:0 0 auto;
  display:block;
  background:transparent;
}

.office-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}

.office-name{
  color:#b43821;
  font-family:var(--heading-font);
  font-size:1.95rem;
  font-weight:400;
}

.office-tagline{
  max-width:420px;
  color:#1b1b1b;
  font-size:1rem;
  line-height:1.22;
  font-weight:600;
}

/* ── NAV ── */
.site-nav{
  position:absolute;
  top:22px;
  right:22px;
  display:flex;
  gap:10px;
  z-index:10;
}

.nav-btn{
  font-family:var(--heading-font);
  font-size:clamp(1.28rem,2.4vw,1.65rem);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(10,12,6,0.72);
  border:2px solid rgba(151,204,0,0.82);
  border-radius:6px;
  padding:7px 18px;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background 0.18s, border-color 0.18s, color 0.18s;
  white-space:nowrap;
}

.nav-btn:hover,
.nav-btn:focus-visible{
  background:rgba(151,204,0,0.18);
  border-color:#9bd000;
  color:#9bd000;
  outline:none;
}

/* ── MODAL SYSTEM ── */
.modal-open{ overflow:hidden; }

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(6,8,4,0);
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
  transition:background 0.15s ease, backdrop-filter 0.15s ease, -webkit-backdrop-filter 0.15s ease;
}

.modal-overlay.is-open{
  background:rgba(6,8,4,0.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.modal-overlay[hidden]{ display:none; }

.modal-box{
  position:relative;
  width:100%;
  max-width:952px;
  max-height:90vh;
  overflow-y:auto;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:16px;
  padding:40px 48px 40px;
  box-shadow:0 24px 64px rgba(0,0,0,0.5);
  color:#1a1a0f;
  opacity:0;
  transform:translateY(22px) scale(0.97);
  transition:opacity 0.15s ease, transform 0.15s ease;
}

.modal-overlay.is-open .modal-box{
  opacity:1;
  transform:translateY(0) scale(1);
}

.modal-box--wide{ max-width:1270px; }

.modal-close{
  position:absolute;
  top:14px;
  right:18px;
  font-size:1.7rem;
  line-height:1;
  background:none;
  border:none;
  color:rgba(0,0,0,0.3);
  cursor:pointer;
  padding:4px 8px;
  border-radius:4px;
  transition:color 0.15s;
}
.modal-close:hover{ color:#5a8a00; }

.modal-title{
  font-family:var(--heading-font);
  font-size:clamp(2rem,5vw,3rem);
  font-weight:400;
  color:#5a8a00;
  margin:0 0 18px;
  text-transform:uppercase;
  text-shadow:none;
}

.modal-intro{
  font-size:1.05rem;
  color:rgba(0,0,0,0.55);
  margin:0 0 28px;
  font-style:italic;
  line-height:1.4;
}

.modal-text{
  font-size:0.98rem;
  line-height:1.55;
  color:rgba(0,0,0,0.75);
  margin:0 0 14px;
}

.modal-section{ margin-top:28px; }

.modal-section-title{
  font-family:var(--heading-font);
  font-size:1.4rem;
  font-weight:400;
  color:#1a1a0f;
  text-transform:uppercase;
  margin:0 0 12px;
  letter-spacing:0.5px;
}

/* Ratings */
.ratings-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ratings-list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 14px;
  background:rgba(90,138,0,0.07);
  border-radius:6px;
  border:1px solid rgba(90,138,0,0.15);
  font-size:0.92rem;
}
.rating-label{ color:rgba(0,0,0,0.6); }
.rating-val{ font-weight:700; color:#5a8a00; }

/* Endorsements */
.endorsements{ display:flex; flex-direction:column; gap:14px; }
.endorsement{
  margin:0;
  padding:14px 18px;
  background:rgba(0,0,0,0.03);
  border-left:3px solid rgba(90,138,0,0.5);
  border-radius:0 8px 8px 0;
}
.endorsement p{
  margin:0 0 6px;
  font-size:0.92rem;
  line-height:1.5;
  color:rgba(0,0,0,0.7);
  font-style:italic;
}
.endorsement footer{ font-size:0.82rem; color:rgba(0,0,0,0.4); }
.endorsement footer strong{ color:#5a8a00; }

/* Social links */
.social-links{ display:flex; gap:10px; flex-wrap:wrap; }
.social-link{
  display:inline-block;
  padding:6px 16px;
  border-radius:6px;
  border:1px solid rgba(90,138,0,0.45);
  color:#5a8a00;
  font-size:0.88rem;
  font-weight:700;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.5px;
  transition:background 0.15s;
}
.social-link:hover{ background:rgba(90,138,0,0.1); }

/* Inline link */
.inline-link{ color:#5a8a00; text-decoration:none; border-bottom:1px solid rgba(90,138,0,0.4); }
.inline-link:hover{ border-bottom-color:#5a8a00; }

/* ── CHARACTER CARDS ── */
.char-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
}

.char-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
  transition:transform 0.18s;
}
.char-card:hover{
  transform:translateY(-3px);
}

.char-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}

.char-name{
  font-family:var(--heading-font);
  font-size:1.76rem;
  font-weight:400;
  color:#1a1a0f;
  margin:0;
  text-transform:uppercase;
  line-height:1.1;
  padding:8px 4px 0;
  background:transparent;
}

.char-placeholder{
  width:100%;
  aspect-ratio:1/1;
  background:repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.04) 0px,
    rgba(0,0,0,0.04) 8px,
    transparent 8px,
    transparent 16px
  );
  border-radius:8px;
  border:2px dashed rgba(0,0,0,0.15);
}

.char-name--muted{
  color:rgba(0,0,0,0.3);
  font-style:italic;
}

.char-coming-soon{
  margin:24px 0 0;
  text-align:center;
  font-size:0.88rem;
  font-style:italic;
  color:rgba(0,0,0,0.35);
}

/* ── AUTHOR ── */
.author-layout{
  display:flex;
  gap:28px;
  align-items:flex-start;
}

.author-avatar{
  flex:0 0 120px;
  width:120px;
  height:120px;
}
.author-avatar svg{ width:100%; height:100%; }

.author-bio{ flex:1; min-width:0; }

.author-name{
  font-family:var(--heading-font);
  font-size:2rem;
  font-weight:400;
  color:#1a1a0f;
  margin:0 0 12px;
  text-transform:uppercase;
}

.author-dl{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 14px;
  margin:16px 0 0;
  font-size:0.9rem;
}
.author-dl dt{ color:rgba(0,0,0,0.4); font-weight:700; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.5px; align-self:center; }
.author-dl dd{ margin:0; color:rgba(0,0,0,0.7); }

/* ── responsive tweaks */
@media (max-width:680px){
  .site-header{padding-top:14px}
  .site-logo{height:170px}
  .hero-narrow{padding:0 18px 20px; border-radius:18px}
  .banner-group{margin:0 -18px 20px}
  .hero-title{font-size:clamp(2rem,12vw,3.2rem)}
  .banner{font-size:clamp(1.1rem,7vw,1.5rem)}
  .office-card{padding:14px 18px}
  .office-content{gap:16px}
  .office-logo{height:74px}
  .office-name{font-size:1.45rem}
  .office-tagline{font-size:0.82rem}
  .site-nav{top:14px; right:10px; gap:6px}
  .nav-btn{padding:5px 10px; font-size:1.05rem}
  .modal-box{padding:28px 22px 24px}
  .char-grid{grid-template-columns:repeat(2, 1fr)}
  .author-layout{flex-direction:column; align-items:center; text-align:center}
  .author-dl{text-align:left}
}

@media (max-width:420px){
  .site-logo{height:140px}
  .banner{padding:8px 0}
  .hero{padding:20px 14px 16px}
  .coming-soon{width:100%}
  .office-card{text-align:center}
  .office-content{flex-direction:column}
  .office-copy{align-items:center}
  .site-nav{top:10px; right:6px; gap:4px}
  .nav-btn{padding:4px 8px; font-size:0.9rem}
  .char-grid{grid-template-columns:1fr}
  .modal-box{padding:24px 16px 20px}
}