* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: #0f172a; color: #0f172a; font-family: Inter, Arial, sans-serif; margin: 0; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.br-shell { margin-inline: auto; width: min(1340px, calc(100% - clamp(38px, 9vw, 124px))); }

.br-hero { height: 100svh; inset: 0 0 auto; min-height: 690px; overflow: hidden; position: fixed; z-index: 0; }
.br-hero video { height: 100%; object-fit: cover; width: 100%; }
.br-overlay { background: linear-gradient(to top, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0) 40%); inset: 0; position: absolute; }
.br-hero-copy { bottom: clamp(20px, 4vw, 40px); color: #f5f5ef; left: 0; position: absolute; right: 0; }
.br-hero-copy span, .br-label { color: #d32927; display: block; font-size: 11px; font-weight: 600; letter-spacing: .25em; margin-bottom: 22px; text-transform: uppercase; }
.br-hero-copy span { color: rgba(255,255,255,.73); }
.br-hero-copy h1 { font-size: clamp(26px, 4vw, 54px); font-weight: 600; letter-spacing: -.05em; line-height: .96; margin: 0 0 24px; max-width: 100%; }
.br-hero-copy p { color: rgba(255,255,255,.74); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; margin: 0; max-width: 520px; }
.br-content { background: #ffffff; margin-top: 100svh; position: relative; z-index: 2; }
.br-intro { display: grid; gap: clamp(26px, 6vw, 76px); grid-template-columns: .62fr 1.05fr .8fr; padding: clamp(74px, 11vw, 136px) 0; }
.br-intro h2 { font-size: clamp(37px, 4.4vw, 58px); font-weight: 360; letter-spacing: -.072em; line-height: 1.08; margin: 0; }
.br-intro p { color: #64748b; font-size: 16px; line-height: 1.8; margin: 4px 0 0; }
.br-duo { display: grid; grid-template-columns: 1fr 1fr; }
.br-duo article { background: #fff; }
.br-duo article + article { border-left: 1px solid #e2e8f0; }
.br-duo img { height: clamp(380px, 45vw, 580px); object-fit: cover; width: 100%; }
.br-duo article div { padding: clamp(34px, 6vw, 64px) clamp(30px, 6vw, 70px) clamp(44px, 6vw, 68px); }
.br-duo h3 { font-size: clamp(30px, 3.5vw, 44px); font-weight: 380; letter-spacing: -.065em; line-height: 1.12; margin: 0 0 18px; }
.br-duo p { color: #64748b; line-height: 1.72; margin: 0 0 28px; max-width: 430px; }
.br-duo a { border-bottom: 1px solid #d32927; color:#d32927; display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .2em; padding-bottom: 8px; text-transform: uppercase; }
.br-process { border-bottom: 1px solid #e2e8f0; display: grid; gap: clamp(35px, 7vw, 90px); grid-template-columns: .8fr 1.2fr; padding: clamp(72px, 11vw, 134px) 0; }
.br-process-title h2 { font-size: clamp(37px, 4.4vw, 55px); font-weight: 370; letter-spacing: -.07em; line-height: 1.08; margin: 0; max-width: 420px; }
.br-steps article { border-top: 1px solid #e2e8f0; display: grid; gap: 20px; grid-template-columns: 58px 155px 1fr; padding: 25px 0; }
.br-steps strong { color: #d32927; font-size: 12px; letter-spacing: .22em; }
.br-steps h3 { font-size: 22px; font-weight: 450; letter-spacing: -.035em; margin: 0; }
.br-steps p { color: #64748b; font-size: 14px; line-height: 1.7; margin: 0; }
.br-feature { background: #0f172a; color: #f8fafc; display: grid; grid-template-columns: 1.12fr .88fr; min-height: clamp(500px, 55vw, 680px); }
.br-feature img { height: 100%; object-fit: cover; width: 100%; }
.br-feature div { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 7vw, 76px); }
.br-feature .br-label { color: #f87171; }
.br-feature h2 { font-size: clamp(34px, 4.2vw, 54px); font-weight: 360; letter-spacing: -.07em; line-height: 1.08; margin: 0 0 24px; }
.br-feature p { color: #94a3b8; font-size: 16px; line-height: 1.75; margin: 0; }
.br-gallery { display: grid; gap: 14px; grid-template-columns: 1.34fr .83fr .83fr; padding: clamp(62px, 9vw, 110px) 0; }
.br-gallery figure { margin: 0; }
.br-gallery img { height: clamp(290px, 34vw, 450px); object-fit: cover; width: 100%; }
.br-gallery figcaption { color: #64748b; font-size: 11px; letter-spacing: .22em; margin-top: 14px; text-transform: uppercase; }
.br-services { background: #f1f5f9; border-top:4px solid #d32927; padding: clamp(70px, 10vw, 120px) 0; }
.br-services .br-shell { display: grid; gap: clamp(42px, 7vw, 88px); grid-template-columns: .82fr 1.18fr; }
.br-service-copy h2 { font-size: clamp(37px, 4.4vw, 56px); font-weight: 370; letter-spacing: -.072em; line-height: 1.08; margin: 0 0 25px; }
.br-service-copy p { color: #64748b; line-height: 1.76; margin: 0; }
.br-metrics { display: grid; grid-template-columns: repeat(2, 1fr); }
.br-metrics div { border-left: 1px solid #cbd5e1; border-top: 1px solid #cbd5e1; padding: clamp(24px, 4vw, 35px); }
.br-metrics strong { display: block; font-size: clamp(39px, 4vw, 54px); font-weight: 350; letter-spacing: -.07em; margin-bottom: 11px; }
.br-metrics span { color: #64748b; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.br-contact { background: #ffffff; padding: clamp(74px, 11vw, 128px) 20px; text-align: center; }
.br-contact h2 { font-size: clamp(43px, 6vw, 78px); font-weight: 350; letter-spacing: -.085em; line-height: 1; margin: 0 auto 38px; }
.br-button { background:#d32927; border: 1px solid #d32927; color:#fff; display: inline-flex; font-size: 11px; font-weight: 600; letter-spacing: .2em; padding: 19px 28px; text-transform: uppercase; }
.br-footer { border-top: 1px solid #e2e8f0; color: #64748b; display: flex; font-size: 13px; gap: 20px; justify-content: space-between; padding: 31px 0 43px; }
.br-back { background: rgba(0, 0, 0, 0.5); bottom: 20px; color: #fff; font-size: 10px; font-weight: 400; right: 20px; letter-spacing: .1em; padding: 8px 12px; position: fixed; text-transform: uppercase; z-index: 12; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; }
@media (max-width: 900px) {
  .br-intro, .br-duo, .br-process, .br-feature, .br-services .br-shell { grid-template-columns: 1fr; }
  .br-duo article + article { border-left: 0; border-top: 1px solid #e2e8f0; }
  .br-feature img { height: 440px; }
  .br-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .br-hero { position: relative; inset: auto; height: 85svh; min-height: 520px; }
  .br-content { margin-top: 0; }
}
@media (max-width: 600px) {
  .br-steps article { grid-template-columns: 1fr; gap: 12px; }
  .br-metrics { grid-template-columns: 1fr; }
  .br-footer { flex-direction: column; padding-bottom: 78px; }
}

/* Ruled Footer */
.contact-ruled {
  background: #0f172a;
  color: #fff;
  padding: clamp(26px, 3.5vw, 38px) 0;
}
.contact-ruled-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 3vw, 36px);
  justify-content: space-between;
}
.contact-ruled-row img { flex-shrink: 0; height: 42px; width: auto; }
.contact-ruled-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.contact-ruled-contact a {
  color: #94a3b8;
  font-size: 13px;
  text-decoration: none;
  transition: color .18s;
}
.contact-ruled-contact a:hover { color: #fff; }
.contact-ruled-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.contact-ruled-nav .is-cta { outline: 1px solid rgba(226,232,240,.28); outline-offset: 5px; }
.contact-ruled-nav .is-cta:hover { outline-color: rgba(226,232,240,.55); color: #fff; }
.contact-ruled-nav a {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s;
}
.contact-ruled-nav a:hover { color: #fff; }
.contact-ruled-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.contact-ruled-socials a { align-items: center; color: #475569; display: flex; text-decoration: none; transition: color .18s; }
.contact-ruled-socials a:hover { color: #fff; }
.contact-ruled-socials svg { display: block; height: 17px; width: 17px; }
@media (max-width: 768px) {
  .contact-ruled { padding: 36px 0 40px; }
  .contact-ruled-row {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 22px;
    text-align: center;
  }
  .contact-ruled-row > img   { order: 1; }
  .contact-ruled-nav         { gap: 8px 18px; justify-content: center; order: 2; }
  .contact-ruled-contact     { align-items: center; flex-direction: column; gap: 7px; order: 3; }
  .contact-ruled-contact a   { font-size: 15px; }
  .contact-ruled-socials     { gap: 0 32px; justify-content: center; order: 4; width: 100%; }
  .contact-ruled-socials svg { height: 22px; width: 22px; }
}

