:root {
  --navy: #07182a;
  --navy2: #0b2138;
  --navy3: #0d2744;
  --gold: #c99a3d;
  --gold2: #e0b85c;
  --cream: #f8f5ee;
  --paper: #fffdf9;
  --ink: #0c1b30;
  --muted: #6e7580;
  --line: #e9e2d6;
  --white: #fff;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif
}

a {
  text-decoration: none;
  color: inherit
}

img {
  display: block;
  max-width: 100%
}

.container{
  width:min(1240px,calc(100% - 64px));
  margin-inline:auto;
}

.site-header {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(30px, calc((100vw - 1160px)/2));
  background: linear-gradient(90deg, #061426, #091a2c);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand-mark {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  overflow: hidden
}

.brand-mark:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .25)
}

.brand-mark .b {
  font-size: 32px;
  line-height: 1
}

.brand-mark .j {
  font-size: 21px;
  margin-left: -7px;
  margin-top: 11px
}

.brand-mark i {
  position: absolute;
  left: 1px;
  bottom: 1px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 13px solid var(--gold)
}

.brand-copy {
  display: flex;
  flex-direction: column
}

.brand-copy strong {
  font: 400 21px/1 Georgia, serif;
  letter-spacing: .1em
}

.brand-copy small {
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-top: 5px
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em
}

.nav a:not(.btn) {
  padding: 39px 0 34px;
  border-bottom: 2px solid transparent
}

.nav a.active,
.nav a:not(.btn):hover {
  color: var(--gold);
  border-color: var(--gold)
}

.nav-toggle {
  display: none;
  color: #fff;
  background: none;
  border: 0;
  font-size: 28px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 22px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  border-radius: 2px
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold2), #c69032);
  color: #07182a;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .12)
}

.header-cta {
  min-width: 155px
}

.hero {
  position: relative;
  min-height: 392px;
  background: linear-gradient(105deg, #071727 0%, #081b30 58%, #102941 100%);
  overflow: hidden;
  color: #fff
}

.hero-office {
  position: absolute;
  right: 0;
  top: 0;
  width: 43%;
  height: 100%;
  background: url('assets/hero-office.png') center/cover no-repeat;
  filter: saturate(.75) brightness(.62)
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 18, 32, .99) 0%, rgba(5, 18, 32, .95) 45%, rgba(5, 18, 32, .45) 73%, rgba(5, 18, 32, .16) 100%)
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  min-height: 392px;
  gap: 30px
}

.hero-copy {
  padding: 55px 0
}

.hero-copy h1 {
  font: 400 37px/1.18 Georgia, serif;
  margin: 0 0 17px
}

.hero-copy h1 span {
  color: var(--gold2)
}

.gold-rule,
.heading-rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 18px 0
}

.hero-copy p {
  max-width: 430px;
  color: #f4f5f6;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 28px
}

.hero-lockup {
  text-align: center;
  transform: translateY(4px)
}

.lockup-mark {
  width: 135px;
  height: 135px;
  border: 2px solid #fff;
  margin: 0 auto 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif
}

.lockup-mark:after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, .22)
}

.lockup-mark>span {
  font-size: 88px
}

.lockup-mark>small {
  font-size: 45px;
  margin-left: -18px;
  margin-top: 27px
}

.lockup-mark i,
.lockup-mark b {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid
}

.lockup-mark i {
  left: 4px;
  bottom: 4px;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent var(--gold) transparent;
  transform: rotate(0deg)
}

.lockup-mark b {
  right: 4px;
  top: 4px;
  border-width: 20px 20px 0 0;
  border-color: var(--gold) transparent transparent transparent
}

.lockup-title {
  font: 400 40px/1 Georgia, serif;
  letter-spacing: .11em
}

.lockup-sub {
  margin-top: 9px;
  color: var(--gold2);
  font-size: 13px;
  letter-spacing: .18em;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center
}

.lockup-sub span {
  width: 34px;
  height: 2px;
  background: var(--gold)
}

.intro {
  text-align: center;
  padding: 38px 0 16px
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em
}

.intro h2,
.about h2 {
  font: 400 28px/1.2 Georgia, serif;
  margin: 9px 0
}

.lead {
  max-width: 610px;
  margin: 0 auto;
  color: #495362;
  font-size: 12px;
  line-height: 1.55
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 12px 0 95px;
}

.brand-card {
    min-height: 280px;
    padding: 20px 18px 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 18px rgba(29, 35, 45, .07);
}

.brand-card.studio {
  background: #080808;
  color: #fff
}

.brand-card.books {
  background: linear-gradient(145deg, #07162a, #0a2947);
  color: #fff
}

.brand-card.estavo {
  background: #fff;
  color: var(--ink);
  border: 1px solid #eee7da
}

.brand-logo {
  height: 128px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2
}

.brand-logo img {
  max-height: 115px;
  max-width: 88%;
  object-fit: contain
}

.books-logo img {
  max-width: 100%;
  max-height: 94px
}

.estavo-logo img {
  max-width: 100%;
  max-height: 93px
}

.brand-card h3 {
  font: 400 20px/1.1 Georgia, serif;
  margin: 10px 0 7px;
  position: relative;
  z-index: 2
}

.brand-card .mini {
  font-size: 8px;
  letter-spacing: .03em;
  font-weight: 700;
  color: var(--gold2);
  position: relative;
  z-index: 2
}

.mini-rule {
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin: 11px auto 14px;
  position: relative;
  z-index: 2
}

.brand-card>p:not(.mini) {
  font-size: 10.5px;
  line-height: 1.6;
  max-width: 235px;
  position: relative;
  z-index: 2
}

.card-btn {
  margin-top: auto;
  border: 1px solid var(--gold);
  color: #fff;
  width: 100%;
  padding: 12px 14px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .05em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2
}

.card-btn.light {
  color: var(--navy)
}

.studio-wave {
  position: absolute;
  right: -20px;
  bottom: -18px;
  width: 135px;
  height: 150px;
  opacity: .7;
  background: repeating-radial-gradient(ellipse at 100% 100%, transparent 0 8px, rgba(201, 154, 61, .95) 9px 10px, transparent 11px 17px)
}

.about {
  display: grid;
  grid-template-columns: 35% 65%;
  min-height: 310px;
  padding: 0 0 12px
}

.about-photo {
  background: url('assets/about-desk.png') center/cover no-repeat;
  min-height: 310px
}

.about-copy {
  background: var(--paper);
  padding: 18px 35px
}

.eyebrow.left {
  text-align: left
}

.about-copy h2 {
  font-size: 29px;
  margin-bottom: 0
}

.heading-rule {
  margin: 10px 0 12px;
  width: 32px
}

.about-copy>p:not(.eyebrow) {
  font-size: 11px;
  line-height: 1.55;
  margin: 0 0 8px
}

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid transparent;
  margin-top: 10px
}

.value {
  padding: 3px 14px 0;
  text-align: center;
  border-right: 1px solid var(--line)
}

.value:last-child {
  border-right: 0
}

.value-icon {
  width: 43px;
  height: 43px;
  margin: 0 auto 4px
}

.value-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.value strong {
  display: block;
  text-transform: uppercase;
  font-size: 8px
}

.value span {
  display: block;
  color: #4f5864;
  font-size: 8.5px;
  line-height: 1.35;
  margin-top: 5px
}

.cta {
  background: linear-gradient(90deg, #07182a, #0a2138);
  color: #fff;
  min-height: 85px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 17px;
  padding: 12px 35px;
  margin-bottom: 0
}

.cta-icon {
  width: 43px;
  height: 43px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 18px
}

.cta h3 {
  font: 400 17px/1.2 Georgia, serif;
  margin: 0
}

.cta p {
  color: var(--gold2);
  font-size: 10px;
  margin: 5px 0 0
}

footer {
  background: #051527;
  color: #fff;
  padding: 24px 0 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .75fr .85fr 1.05fr;
  gap: 32px
}

.footer-brand .brand-mark {
  width: 44px;
  height: 44px
}

.footer-brand .brand-copy strong {
  font-size: 18px
}

.footer-brand-col>p {
  font-size: 11px;
  line-height: 1.5;
  color: #f2f2f2
}

.footer-grid h4 {
  color: var(--gold);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  margin: 5px 0 16px
}

.footer-grid a,
.footer-grid p {
  display: block;
  font-size: 10.5px;
  color: #f3f5f7;
  margin: 8px 0
}

.footer-grid a small {
  display: block;
  color: #bcc7d3;
  font-size: 8.5px;
  margin-top: 1px
}

.socials {
  display: flex;
  gap: 8px;
  margin-top: 16px
}

.socials a {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: #061426;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin: 0
}

.legal {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 23px;
  padding: 13px 0 16px;
  color: #aab5c2;
  font-size: 8.5px
}

@media(max-width:900px) {
  .site-header {
    height: auto;
    min-height: 74px;
    padding: 12px 18px
  }

  .nav-toggle {
    display: block
  }

  .nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: #061426;
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px
  }

  .nav.open {
    display: flex
  }

  .nav a:not(.btn) {
    padding: 12px 0
  }

  .hero-inner {
    grid-template-columns: 1fr
  }

  .hero-office {
    width: 100%;
    opacity: .35
  }

  .hero-shade {
    background: rgba(5, 18, 32, .8)
  }

  .hero-lockup {
    display: none
  }

  .brand-grid {
    grid-template-columns: 1fr
  }

  .about {
    grid-template-columns: 1fr
  }

  .about-photo {
    min-height: 280px
  }

  .values {
    grid-template-columns: repeat(2, 1fr)
  }

  .value:nth-child(2) {
    border-right: 0
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .container {
    width: min(100% - 28px, 980px)
  }
}

@media(max-width:560px) {
  .brand-copy strong {
    font-size: 15px
  }

  .brand-copy small {
    font-size: 6.5px
  }

  .brand-mark {
    width: 46px;
    height: 46px
  }

  .hero-copy h1 {
    font-size: 31px
  }

  .hero {
    min-height: 350px
  }

  .hero-inner {
    min-height: 350px
  }

  .intro h2 {
    font-size: 25px
  }

  .about-copy {
    padding: 24px
  }

  .values {
    grid-template-columns: 1fr 1fr
  }

  .cta {
    grid-template-columns: 42px 1fr
  }

  .cta .btn {
    grid-column: 1/-1
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .legal {
    flex-direction: column;
    gap: 5px
  }

  .brand-card {
    min-height: 370px
  }
}

/* v3 refinements */
.brand-mark .j {
  margin-left: -3px;
  margin-top: 12px;
  font-size: 20px
}

.lockup-mark>small {
  margin-left: -10px;
  margin-top: 29px;
  font-size: 43px
}

.hero-office {
  background-position: 58% center;
  filter: saturate(.72) brightness(.56)
}

.studio-wave {
  right: -42px;
  bottom: -48px;
  width: 125px;
  height: 125px;
  opacity: .42
}

.brand-card.studio>p:not(.mini) {
  max-width: 245px;
  margin-bottom: 22px
}

/* v4 refinements: cleaner hero and BJ Studio card */
.hero-office {
  width: 55%;
  background-position: center right;
  filter: saturate(.82) brightness(.68)
}

.hero-shade {
  background: linear-gradient(90deg, rgba(5, 18, 32, .99) 0%, rgba(5, 18, 32, .97) 43%, rgba(5, 18, 32, .55) 62%, rgba(5, 18, 32, .12) 100%)
}

.hero-inner {
  display: block;
  min-height: 392px
}

.hero-copy {
  width: 50%;
  padding: 55px 0
}

.brand-card.studio {
  background: #080808
}

.studio-wave {
  display: none !important
}

@media(max-width:900px) {
  .hero-office {
    width: 100%;
    background-position: center right;
    opacity: .34
  }

  .hero-copy {
    width: 100%
  }
}


/* v5 refinements: BP header identity, compact panoramic hero and legal footer */
.bp-mark .b {
  font-size: 31px;
  transform: translateX(-4px)
}

.bp-mark .p {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1;
  position: absolute;
  left: 25px;
  top: 21px;
  color: var(--gold2)
}

.site-header>.brand .brand-copy strong {
  font-size: 22px;
  letter-spacing: .14em
}

.site-header>.brand .brand-copy small {
  font-size: 7.5px;
  letter-spacing: .22em
}

.hero {
  min-height: 300px
}

.hero-inner {
  min-height: 300px
}

.hero-copy {
  width: 46%;
  padding: 38px 0
}

.hero-copy h1 {
  font-size: 31px;
  margin-bottom: 12px
}

.hero-copy p {
  font-size: 11.5px;
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 390px
}

.hero-copy .gold-rule {
  margin: 13px 0
}

.hero-office {
  width: 64%;
  background-position: center center;
  filter: saturate(.92) brightness(.84)
}

.hero-shade {
  background: linear-gradient(90deg, rgba(5, 18, 32, 1) 0%, rgba(5, 18, 32, .99) 39%, rgba(5, 18, 32, .68) 49%, rgba(5, 18, 32, .12) 67%, rgba(5, 18, 32, .04) 100%)
}

@media(max-width:900px) {
  .hero {
    min-height: 350px
  }

  .hero-inner {
    min-height: 350px
  }

  .hero-copy {
    width: 100%;
    padding: 45px 0
  }

  .hero-office {
    width: 100%;
    opacity: .38
  }

  .hero-shade {
    background: rgba(5, 18, 32, .78)
  }
}


/* v6: approved BJ Precision logo + branded hero artwork */
.brand-image-link {
  display: flex;
  align-items: center;
  min-width: 270px
}

.brand-image {
  width: 310px;
  max-width: 32vw;
  height: 70px;
  object-fit: contain;
  object-position: left center
}

.footer-brand-image {
    width: 65px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.hero-office {
  background-image: url('assets/hero-office.png');
  width: 67%;
  background-position: center center;
  filter: saturate(.98) brightness(.88)
}

.hero-shade {
  background: linear-gradient(90deg, rgba(5, 18, 32, 1) 0%, rgba(5, 18, 32, .99) 37%, rgba(5, 18, 32, .72) 48%, rgba(5, 18, 32, .16) 67%, rgba(5, 18, 32, .03) 100%)
}

@media(max-width:900px) {
  .brand-image-link {
    min-width: 0
  }

  .brand-image {
    width: 245px;
    max-width: 65vw;
    height: 58px
  }

  .hero-office {
    width: 100%;
    background-position: center;
    opacity: .42
  }

  .footer-brand-image {
    width: 235px
  }
}

@media(max-width:560px) {
  .brand-image {
    width: 210px;
    max-width: 70vw;
    height: 52px
  }
}

/* v7: align transparent logo with header and lower hero artwork */
.brand-image {
  height: 64px;
  width: 300px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: normal
}

.hero-office {
  background-position: center 58%;
}

@media(max-width:900px) {
  .hero-office {
    background-position: center 58%;
  }
}

/* v8: lower and right-shift hero artwork to match approved mockup */
.hero-office{
  width:68%;
  right:0;

  background-size:70% auto;
  background-position:right 30%;
  background-repeat:no-repeat;
  background-color:#07182a;
}

.hero-shade {
  background: linear-gradient(90deg, rgba(5, 18, 32, 1) 0%, rgba(5, 18, 32, .99) 36%, rgba(5, 18, 32, .72) 47%, rgba(5, 18, 32, .15) 66%, rgba(5, 18, 32, .02) 100%);
}

@media(max-width:900px) {
  .hero-office {
    width: 100%;
    background-position: 60% 64%;
  }
}


/* Brand cards – premium hover */
.brand-card {
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.brand-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 38px rgba(7, 24, 42, .16);
  z-index: 3;
}

/* Logo gently enlarges */
.brand-card .brand-logo img {
  transition: transform .4s ease;
}

.brand-card:hover .brand-logo img {
  transform: scale(1.045);
}

/* Gold rule */
.brand-card .mini-rule {
  transition: width .35s ease;
}

.brand-card:hover .mini-rule {
  width: 58px;
}

/* CTA */
.brand-card .card-btn {
  transition:
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease;
}

.brand-card:hover .card-btn {
  background: var(--gold);
  color: var(--navy);
}

.brand-grid{
  padding-bottom:40px;
}

.about{
  margin-bottom:28px;
}

/* Footer readability */
.footer{
  font-size:15px;
}

.footer h4{
  font-size:15px;
  letter-spacing:.7px;
}

.footer a,
.footer p{
  font-size:14px;
  line-height:1.55;
}

.footer .brand-desc{
  font-size:14px;
  line-height:1.55;
}

.footer-bottom{
  font-size:12px;
}

/* v10: improved readability */

body{
  font-size:16px;
}

/* Navigation */
.nav{
  font-size:13px;
}

/* Intro */
.eyebrow{
  font-size:12px;
}

.lead{
  font-size:14px;
  line-height:1.65;
}

/* Brand cards */
.brand-card h3{
  font-size:24px;
}

.brand-card .mini{
  font-size:10px;
}

.brand-card > p:not(.mini){
  font-size:13px;
  line-height:1.65;
}

.card-btn{
  font-size:11px;
}

/* About */
.about-copy > p:not(.eyebrow){
  font-size:13px;
  line-height:1.65;
}

.value strong{
  font-size:10px;
}

.value span{
  font-size:10.5px;
  line-height:1.45;
}

/* CTA */
.cta h3{
  font-size:20px;
}

.cta p{
  font-size:12px;
}

/* Footer */
.footer-grid h4{
  font-size:12px;
}

.footer-grid a,
.footer-grid p{
  font-size:12.5px;
}

.footer-grid a small{
  font-size:10px;
}

.legal{
  font-size:10px;
}

/* CTA separation */
.cta{
  margin-top: 38px;
  margin-bottom: 42px;
  border-radius: 4px;
}