@font-face {
  font-family: "Anton";
  src: url("/_assets/fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-page: #fff;
  --color-section-alt: #f3f2ef;
  --color-surface-2: #f3f2ef;
  --color-ink: #111;
  --color-muted: #444;
  --color-line: #d9d7d2;
  --color-brand: #ed0924;
  --color-brand-hover: #c5001b;
  --color-brand-dark: #08090a;
  --color-accent: #d90821;
  --color-accent-soft: #ed092414;
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --site-width: 1320px;
  --gutter: clamp(22px, 5.5vw, 88px);
  --section-space: clamp(64px, 7vw, 108px);
  --radius: 0px;
  --button-radius: 0px;
}

body { -webkit-font-smoothing: antialiased; }
::selection { background: #ed0924; color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ed0924;
  outline-offset: 5px;
}
.hero h1, .section h2, .section h3 { font-weight: 400; letter-spacing: -.015em; }
.section h2 { font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1.12; }
.section p { line-height: 1.65; }
.section .section-eyebrow {
  margin: 0 0 16px;
  color: var(--color-accent);
  font-size: .7rem;
  letter-spacing: .22em;
}
.section + .section { border: 0; }
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 50px;
  padding: 15px 25px;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: lowercase;
  box-shadow: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.button[data-cta]::after { content: "\2192"; font-size: 1.3rem; transition: transform .2s ease; }
.button:active { transform: translateY(1px); }

/* Logo and navigation sit over the hero, then gain a solid background. */
#site-header { position: fixed; inset: 0 0 auto; z-index: 50; }
.site-header {
  position: relative;
  padding-top: 15px;
  padding-bottom: 15px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled, .site-header:has(.nav-open) {
  background: rgba(6, 7, 8, .96);
  box-shadow: 0 1px 0 #ffffff1c;
  backdrop-filter: blur(12px);
}
.nav { gap: 30px; }
.brand { color: #fff; gap: 18px; flex-shrink: 0; }
.brand-logo { display: block; width: 86px; height: auto; flex-shrink: 0; transition: transform .3s ease; }
.brand .brand-wordmark { display: grid; gap: 6px; text-align: center; line-height: 1; }
.brand-wordmark strong { font-size: 2.65rem; text-transform: uppercase; letter-spacing: .025em; }
.brand-wordmark span { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; }
.brand-wordmark small { font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: #aaa; }
.nav-links { gap: 26px; flex-wrap: nowrap; }
.nav-links a { position: relative; color: #fff; font-size: .8rem; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; bottom: 3px; left: 0; right: 0; height: 2px; background: #ed0924; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-action .button { padding: 14px 20px; font-size: .85rem; }
.nav-action .button::after { display: none; }
.nav-toggle { color: #fff; border-color: #ffffff50; border-radius: 0; }

/* A full-bleed training image with a quiet, readable area for the copy. */
.home-hero { background: #070809; color: #fff; padding-top: 154px; padding-bottom: 48px; isolation: isolate; }
.hero-scene { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #050607 0%, #050607f5 28%, #050607c9 43%, #05060720 76%), linear-gradient(0deg, #050607f5, transparent 38%, transparent 85%, #05060788); }
.home-hero .inner { padding: 0; }
.hero-copy { max-width: 630px; }
.home-hero p.hero-subtitle { max-width: 620px; color: #c8c8ca; font-size: .68rem; text-transform: uppercase; letter-spacing: .22em; line-height: 1.6; margin-bottom: 18px; }
.home-hero h1 { font-size: clamp(3.5rem, 6.4vw, 6rem); line-height: 1.03; max-width: 680px; margin: 0 0 24px; }
.home-hero h1 .text-accent { color: #ff1530; }
.hero-description { max-width: 500px; }
.home-hero .hero-description p { color: #dedee0; font-size: 1rem; line-height: 1.6; }
.home-hero .hero-description p + p { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ffffff40; }
.hero-actions .button { margin-top: 24px; }
.hero-scroll { display: flex; align-items: center; gap: 12px; width: fit-content; margin-top: 38px; color: #b6b6b9; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.scroll-line { width: 46px; height: 1px; background: #ed0924; transition: width .3s ease; }
.hero-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1120px; margin: 44px 0 0; padding: 0; list-style: none; }
.hero-highlight { display: flex; align-items: center; gap: 17px; min-width: 0; padding: 4px 26px; border-left: 1px solid #ed092460; }
.hero-highlight:first-child { padding-left: 0; border-left: 0; }
.hero-highlight-icon { flex-shrink: 0; color: #ff2440; transition: transform .25s ease; }
.hero-highlight h2 { margin: 0 0 9px; font: 400 1.05rem/1.3 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.home-hero .hero-highlight p { margin: 0; color: #d1d1d4; font-size: .76rem; line-height: 1.6; }

/* An editorial photo collage paired with the complete school story. */
.section.home-intro { background: #fff; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); align-items: stretch; }
.about-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .85fr); gap: 10px; min-width: 0; }
.about-collage { contain: size; min-height: 600px; }
.photo-frame { overflow: hidden; background: #161719; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.65,.3,1), filter .45s ease; }
.collage-main, .collage-team { grid-column: 1 / -1; }
.collage-main img { object-position: center 48%; }
.collage-team img { object-position: center 58%; }
.about-copy { min-width: 0; }
.about-copy h2 { margin-bottom: 24px; }
.about-copy h2 .text-accent { color: inherit; }
.instructor-bio { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid #aaa; }
.instructor-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.instructor-heading .instructor-photo { width: 88px; height: 88px; object-fit: cover; object-position: center 25%; border-radius: 0; }
.instructor-bio h3 { margin: 0; font-family: var(--font-display); font-size: 1.65rem; line-height: 1.2; }
.instructor-bio p { font-size: .92rem; }

/* Numbered photo cards keep the full program descriptions visible. */
.section.home-services { position: relative; background: #08090a; color: #fff; isolation: isolate; overflow: hidden; }
.home-services::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .065; background: url("/_assets/media/images/barrickbjj-logo.png") no-repeat 105% 25%; background-size: 700px; pointer-events: none; }
.home-services .section-eyebrow { color: #ff566a; }
.program-heading { display: flex; align-items: center; gap: 30px; }
.program-heading h2 { flex-shrink: 0; margin: 0; max-width: 100%; }
.program-heading .text-accent { color: inherit; }
.heading-rule { flex: 1; height: 1px; background: #676769; }
.service-list { gap: 24px; margin-top: 34px; }
.program-card { position: relative; padding: 0 0 26px; background: #111214; border: 1px solid #ffffff12; border-radius: 0; box-shadow: none; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.program-card .service-card-media { margin: 0; overflow: hidden; }
.program-card .service-card-media::after { content: ""; position: absolute; inset: 45% 0 -1px; background: linear-gradient(transparent, #111214); pointer-events: none; }
.program-photo { height: clamp(260px, 29vw, 390px); object-fit: cover; aspect-ratio: auto; transition: transform .65s ease, filter .4s ease; }
.program-number { position: absolute; top: 0; left: 18px; z-index: 2; display: grid; place-items: center; width: 46px; height: 50px; background: #ed0924; color: #fff; font-family: var(--font-display); font-size: 1.45rem; }
.program-copy { position: relative; margin-top: -24px; z-index: 1; }
.program-card h3 { font-family: var(--font-display); color: #fff; font-size: 1.8rem; line-height: 1.2; margin: 0 22px 14px; }
.program-card p { color: #c8c8cc; font-size: .95rem; line-height: 1.65; margin: 0 22px; }
.home-services > .inner > .button { margin-top: 34px; }

.section.home-first-class { background: #f3f2ef; }
.first-class-layout { gap: clamp(34px, 7vw, 100px); }
.first-class-layout h2 { margin-bottom: 24px; }
.first-class-frame { max-width: 500px; width: 100%; justify-self: end; position: relative; }
.first-class-frame::after { content: ""; position: absolute; inset: auto 0 0 auto; width: 38%; height: 7px; background: #ed0924; }
.first-class-frame .first-class-photo { max-width: none; width: 100%; height: 530px; object-fit: cover; object-position: center 65%; }
.section.reviews { background: #fff; }
/* Keep the watermark fixed to the viewport and clipped to each light section. */
.section:is(.home-intro, .home-first-class, .reviews) {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}
.section:is(.home-intro, .home-first-class, .reviews)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/_assets/media/images/barrickbjj-logo.png") center / min(84vw, 80svh) auto no-repeat;
  opacity: .065;
  pointer-events: none;
}
.reviews h2 { font-size: clamp(2.4rem, 4vw, 3.8rem); }
.student-review-grid { margin-top: 40px; gap: 0; }
.student-review { position: relative; background: transparent; border: 0; border-left: 1px solid #d9d7d2; border-radius: 0; padding: 12px 32px 8px; gap: 30px; transition: background .25s ease, transform .25s ease; }
.student-review:first-child { border-left: 0; padding-left: 0; }
.student-review::before { content: "\201C"; font: 4rem/.9 var(--font-display); color: #ed0924; }
.student-review blockquote p { font-size: 1.25rem; color: #151515; line-height: 1.5; }
.review-photo { width: 50px; height: 50px; }
.review-avatar { display: grid; place-items: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: #fae7ea; color: #bd0920; font-size: .85rem; font-weight: 700; }
.student-review figcaption { font-size: .85rem; }
.google-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 24px; align-items: start; }
.student-review.google-review { padding: 26px; gap: 18px; border: 1px solid var(--color-line); background: #faf9f7; }
.student-review.google-review::before { content: none; }
.google-review figcaption { margin-top: 0; }
.review-source { display: block; margin-top: 3px; font-size: .73rem; color: #666; }
.review-stars { color: #e99800; font-size: 1.12rem; letter-spacing: .08em; line-height: 1; }
.google-review blockquote p { font-size: .95rem; line-height: 1.65; }
.section.location-contact { background: #101113; color: #fff; }
.location-contact p, .location-contact .contact-details { color: #cbcbce; }
.location-contact .section-eyebrow, .location-contact .text-accent { color: #ff344d; }
.location-contact .contact-card { padding: 24px 0 0; background: transparent; border: 0; border-top: 1px solid #454549; box-shadow: none; margin-top: 28px; }
.contact-details a { color: #fff; text-decoration-color: #ed0924; text-underline-offset: 5px; }
.map-placeholder { border: 1px solid #343437; border-radius: 0; }
.site-footer { background: #070809; color: #fff; border-top: 1px solid #303033; }
.footer-lockup { color: #fff; }
.footer-lockup .brand-logo { width: 65px; }
.footer-lockup strong { font-size: 1.6rem; font-weight: 400; }
.footer-lockup em { font-size: .6rem; color: #ccc; letter-spacing: .1em; }
.footer-brand p, .footer-column h2, .footer-links a, .footer-visit address, .footer-visit a, .footer-bottom { color: #aaa; }
.footer-bottom-wrap { border-color: #29292c; }
.footer-bottom { display: flex; }
.footer-links a, .footer-visit a { width: fit-content; transition: color .2s ease, transform .2s ease; }
.lead-modal-panel { border-top: 4px solid #ed0924; border-radius: 0; }

/* Reveal movement is enabled only after the observer is ready. */
[data-reveal] { transition: opacity .65s ease, translate .65s cubic-bezier(.2,.65,.3,1); }
[data-reveal].reveal-pending { opacity: 0; translate: 0 28px; }
[data-reveal].is-revealed { opacity: 1; translate: 0 0; transition-delay: var(--reveal-delay, 0ms); }
.program-card[data-reveal], .student-review[data-reveal] { transition: opacity .65s ease, translate .65s ease, transform .3s ease, border-color .3s ease, background .3s ease; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #c9001d; transform: translateY(-3px); box-shadow: 0 8px 24px #ed092430; }
  .button:hover::after { transform: translateX(5px); }
  .nav-links a:hover { color: #fff; }
  .nav-links a:hover::after { transform: scaleX(1); }
  .brand:hover .brand-logo { transform: rotate(-5deg); }
  .photo-frame:hover img { transform: scale(1.045); }
  .program-card:hover { transform: translateY(-7px); border-color: #ed0924; }
  .program-card:hover .program-photo { transform: scale(1.055); }
  .student-review:hover { transform: translateY(-4px); background: #f6f5f3; }
  .hero-scroll:hover { color: #fff; }
  .hero-scroll:hover .scroll-line { width: 65px; }
  .hero-highlight:hover .hero-highlight-icon { transform: translateY(-4px) scale(1.06); }
  .footer-links a:hover, .footer-visit a:hover { color: #fff; transform: translateX(4px); }
}

@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .brand-logo { width: 65px; }
  .brand-wordmark strong { font-size: 2rem; }
  .brand-wordmark span { font-size: .52rem; }
  .nav-links { gap: 18px; }
  .nav-action .button { font-size: .75rem; padding: 12px 16px; }
  .program-heading h2 { flex-shrink: 1; }
  .about-layout { gap: 30px; }
  .program-card h3 { font-size: 1.5rem; }
  .footer-content { gap: 30px; grid-template-columns: 1.2fr .7fr 1fr; }
}

@media (max-width: 900px) {
  .hero-highlight { padding-right: 15px; padding-left: 15px; gap: 12px; }
  .hero-highlight-icon { width: 32px; height: 32px; }
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; }
  .nav-toggle { display: grid; grid-column: 3; grid-row: 1; }
  .nav-action { grid-column: 2; grid-row: 1; }
  .nav-links { display: none; grid-column: 1 / -1; width: 100%; padding-top: 16px; border-top: 1px solid #ffffff30; margin: 0; }
  .nav.nav-open .nav-links { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; }
  .home-hero { padding-top: 140px; }
  .home-hero h1 { font-size: clamp(3.8rem, 9vw, 5.4rem); }
  .hero-scene { width: 100%; }
  .hero-shade { background: linear-gradient(90deg, #050607ed, #050607b8 58%, #05060755); }
  .about-layout { grid-template-columns: 1fr; }
  .about-collage { grid-template-rows: 260px 180px; contain: none; min-height: 0; }
  .collage-main { grid-column: 1; grid-row: 1 / 3; }
  .collage-team { display: none; }
  .about-copy h2 { max-width: 680px; }
  .service-list { grid-template-columns: 1fr; gap: 28px; }
  .program-card { display: grid; grid-template-columns: 1fr 1.1fr; padding: 0; }
  .program-card .service-card-media::after { inset: 0; background: linear-gradient(90deg, transparent 65%, #111214); }
  .program-photo { height: 100%; min-height: 340px; }
  .program-copy { margin: 0; padding: 28px 0; align-self: center; }
  .program-card h3 { font-size: 1.8rem; }
  .first-class-frame .first-class-photo { height: 460px; }
  .student-review-grid { grid-template-columns: 1fr; gap: 24px; }
  .student-review, .student-review:first-child { border-left: 0; border-top: 1px solid #d9d7d2; padding: 28px 0 0; }
  .student-review { gap: 20px; }
}

@media (max-width: 600px) {
  .hero-highlights { grid-template-columns: 1fr; margin-top: 34px; }
  .hero-highlight, .hero-highlight:first-child { padding: 20px 0; border-left: 0; border-top: 1px solid #ffffff25; gap: 17px; }
  .hero-highlight:last-child { padding-bottom: 0; }
  .hero-highlight h2 { margin-bottom: 6px; }
  :root { --gutter: 22px; --section-space: 62px; }
  html { scroll-padding-top: 88px; }
  .site-header { padding-top: 12px; padding-bottom: 12px; }
  .nav { gap: 10px; }
  .brand { gap: 8px; }
  .brand-logo { width: 48px; }
  .brand .brand-wordmark { display: grid; gap: 4px; }
  .brand-wordmark strong { font-size: 1.2rem; }
  .brand .brand-wordmark span { display: block; font-size: .34rem; letter-spacing: .12em; }
  .brand-wordmark small { display: none; }
  .nav-action .button { min-height: 42px; padding: 10px 12px; font-size: .66rem; max-width: 115px; line-height: 1.35; }
  .nav-toggle { width: 36px; height: 40px; }
  .nav.nav-open .nav-links { grid-template-columns: repeat(2, 1fr); justify-items: start; }
  .nav-links a { justify-content: flex-start; min-height: 44px; }
  .home-hero { padding-top: 126px; padding-bottom: 34px; }
  .home-hero h1 { font-size: clamp(3.35rem, 12.4vw, 4.5rem); margin-bottom: 24px; }
  .home-hero p.hero-subtitle { max-width: 330px; font-size: .59rem; letter-spacing: .15em; }
  .home-hero h1 .text-accent { font-size: clamp(2.3rem, 10.4vw, 3.4rem); }
  .hero-scene { object-position: 61% center; }
  .hero-shade { background: linear-gradient(90deg, #050607df, #05060799), linear-gradient(0deg, #050607, transparent 85%); }
  .home-hero .hero-description p { font-size: .94rem; line-height: 1.65; }
  .hero-scroll { margin-top: 30px; }
  .section h2, .reviews h2 { font-size: clamp(2.2rem, 8.8vw, 3rem); }
  .about-collage { grid-template-rows: 250px 145px; gap: 7px; }
  .collage-main { grid-column: 1 / -1; grid-row: auto; }
  .about-copy { margin-top: 6px; }
  .instructor-heading { gap: 16px; }
  .instructor-bio h3 { font-size: 1.5rem; }
  .instructor-heading .instructor-photo { width: 74px; height: 80px; }
  .program-heading { gap: 18px; }
  .heading-rule { display: none; }
  .program-card { display: block; }
  .program-card .service-card-media::after { inset: 50% 0 -1px; background: linear-gradient(transparent, #111214); }
  .program-photo { height: 310px; min-height: 0; }
  .program-copy { margin-top: -22px; padding: 0 0 28px; }
  .first-class-frame { max-width: none; }
  .first-class-frame .first-class-photo { height: 420px; }
  .map-placeholder { min-height: 330px; }
  .map-placeholder iframe { height: 330px; }
  .footer-content { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { padding: 20px 0; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-highlight:hover .hero-highlight-icon { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal].reveal-pending { opacity: 1; translate: none; }
  .button:hover, .program-card:hover, .student-review:hover, .photo-frame:hover img, .program-card:hover .program-photo, .brand:hover .brand-logo { transform: none; }
}