/* Brawnd premium type scale v1
   Referenced against Halo Lab's restrained hierarchy:
   the homepage hero remains the only deliberately oversized headline.
   All interior and section headings are reduced for a calmer, more premium rhythm. */

/* Homepage section headings */
.b2-section-head h2 {
  max-width: 900px !important;
  font-size: clamp(36px, 3.7vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

.b2-faq h2 {
  font-size: clamp(36px, 3.6vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

/* Homepage supporting card headings */
.b2-strength-item h3 {
  font-size: clamp(27px, 2.35vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.032em !important;
}

.b2-service-row h3 {
  font-size: clamp(25px, 2.15vw, 34px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.032em !important;
}

.b2-engagement h3,
.b2-engagement:nth-child(2) h3,
.b2-engagement:nth-child(3) h3 {
  max-width: 620px;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.01 !important;
  letter-spacing: -.035em !important;
}

.b2-process-summary h3 {
  font-size: 24px !important;
}

/* Interior page hero headings.
   Intentionally smaller than the homepage hero. */
.studio-hero h1,
.studio-contact-page h1,
.legal-hero h1 {
  max-width: 900px !important;
  font-size: clamp(46px, 5vw, 72px) !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
}

/* Interior page section headings */
.studio-section-head h2 {
  max-width: 860px !important;
  font-size: clamp(35px, 3.5vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

.studio-block h3 {
  font-size: clamp(25px, 2.35vw, 34px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.032em !important;
}

.studio-process-row strong {
  font-size: clamp(23px, 2vw, 28px) !important;
  line-height: 1.08 !important;
}

.studio-cta h2 {
  max-width: 760px !important;
  font-size: clamp(38px, 3.9vw, 58px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

/* Legacy/secondary large statements */
.b2-statement {
  font-size: clamp(40px, 4.4vw, 64px) !important;
  line-height: .99 !important;
}

.legal-section h2 {
  font-size: clamp(25px, 2.1vw, 32px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

/* Body copy stays composed and readable instead of scaling with the headlines. */
.studio-hero-lead {
  max-width: 720px !important;
  font-size: clamp(16px, 1.15vw, 18px) !important;
}

/* Homepage hero hierarchy ------------------------------------------------
   "Build a website / that gives you" remains the dominant lead message.
   "The" stays on the same third line as "competitive edge" and keeps the larger
   lead scale. Competitive edge and its hand-drawn circle are both slightly
   reduced while preserving the same baseline relationship and overall styling. */
.b2-hero .b2-hero-copy .hero-headline {
  font-size: clamp(44px, 3.55vw, 56px) !important;
  line-height: .94 !important;
  letter-spacing: -.052em !important;
  font-weight: 700 !important;
}

.b2-hero .hero-headline-line {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: #F1EEE7 !important;
  -webkit-text-fill-color: #F1EEE7 !important;
  white-space: nowrap;
}

.b2-hero .hero-headline-line--lead {
  font-size: clamp(56px, 4.6vw, 72px) !important;
  line-height: .88 !important;
  letter-spacing: -.058em !important;
}

.b2-hero .hero-headline-line--edge {
  font-size: inherit !important;
  margin-top: .16em;
}

.b2-hero .hero-edge-prefix {
  display: inline-block;
  font-size: clamp(56px, 4.6vw, 72px) !important;
  line-height: .88 !important;
  letter-spacing: -.058em !important;
  vertical-align: baseline;
}

.b2-hero .hero-edge-accent {
  position: relative;
  display: inline-block;
  z-index: 0;
  isolation: isolate;
  margin-left: .06em;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: #F1EEE7 !important;
  -webkit-text-fill-color: #F1EEE7 !important;
  background: none !important;
  vertical-align: baseline;
}

.b2-hero .hero-edge-text {
  display: inline-block;
  transform: scale(.88);
  transform-origin: left bottom;
}

.b2-hero .hero-edge-accent::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: -5.5%;
  top: -.14em;
  width: 106%;
  height: 1.26em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 170' preserveAspectRatio='none'%3E%3Cpath d='M430 31 C510 31 590 49 632 78 C668 102 667 127 640 145 C604 169 514 174 399 169 C280 164 161 166 87 154 C40 147 21 133 27 113 C34 87 65 67 111 52 C174 31 262 22 338 24 C374 25 404 27 430 31' fill='none' stroke='%23F1EEE7' stroke-width='7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M300 20 C340 18 377 21 408 28 C432 34 451 42 466 51' fill='none' stroke='%23F1EEE7' stroke-width='7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: rotate(-.6deg);
}

/* Homepage hero CTAs ------------------------------------------------------
   Compact, rectangular and restrained: primary action in botanical moss and a
   clearly boxed transparent secondary action for visitors who want proof first. */
.b2-hero .hero-actions--dual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: 32px !important;
}

.b2-hero .hero-actions--dual .hero-cta {
  min-height: 48px !important;
  padding: 0 19px !important;
  gap: 19px;
  border-radius: 9px !important;
  font-size: 13px;
  font-weight: 690;
  letter-spacing: -.012em;
  line-height: 1;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .24s ease, background .24s ease, border-color .24s ease, color .24s ease !important;
}

.b2-hero .hero-actions--dual .hero-cta::before {
  display: none !important;
}

.b2-hero .hero-actions--dual .hero-cta--primary {
  background: var(--brawnd-moss-button) !important;
  border: 1px solid rgba(165, 187, 151, .36) !important;
  color: #20171A !important;
  box-shadow:
    inset 0 1px 0 rgba(231, 242, 220, .2),
    inset 0 -1px 0 rgba(20, 36, 23, .24),
    0 12px 28px rgba(0, 0, 0, .22) !important;
}

.b2-hero .hero-actions--dual .hero-cta--primary:hover,
.b2-hero .hero-actions--dual .hero-cta--primary:focus-visible {
  background: var(--brawnd-moss-button-hover) !important;
  border-color: rgba(165, 187, 151, .52) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(231, 242, 220, .26),
    inset 0 -1px 0 rgba(20, 36, 23, .21),
    0 16px 32px rgba(0, 0, 0, .27) !important;
}

.b2-hero .hero-actions--dual .hero-cta--primary:hover span {
  transform: translateX(3px) !important;
}

.b2-hero .hero-actions--dual .hero-cta--secondary {
  background: rgba(255,255,255,.018) !important;
  border: 1px solid rgba(243,239,233,.28) !important;
  color: #ded8d3 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.b2-hero .hero-actions--dual .hero-cta--secondary:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(243,239,233,.42) !important;
  color: #F1EEE7 !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.b2-hero .hero-actions--dual .hero-cta--secondary:hover span {
  transform: translate(2px, -2px) !important;
}

.b2-hero .hero-actions--dual .hero-cta:focus-visible {
  outline: 2px solid rgba(169, 167, 161, .72);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .b2-section-head h2,
  .b2-faq h2 {
    font-size: clamp(34px, 9.8vw, 46px) !important;
    line-height: 1.03 !important;
  }

  .b2-strength-item h3,
  .b2-service-row h3 {
    font-size: clamp(26px, 7.2vw, 32px) !important;
  }

  .b2-engagement h3,
  .b2-engagement:nth-child(2) h3,
  .b2-engagement:nth-child(3) h3 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
  }

  .studio-hero h1,
  .studio-contact-page h1,
  .legal-hero h1 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: 1 !important;
  }

  .studio-section-head h2 {
    font-size: clamp(33px, 9.2vw, 44px) !important;
  }

  .studio-block h3 {
    font-size: clamp(25px, 7.4vw, 32px) !important;
  }

  .studio-process-row strong {
    font-size: 24px !important;
  }

  .studio-cta h2 {
    font-size: clamp(35px, 9.8vw, 48px) !important;
  }

  .b2-statement {
    font-size: clamp(38px, 10vw, 52px) !important;
  }

  .legal-section h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .b2-hero .b2-hero-copy .hero-headline {
    font-size: clamp(30px, 8.6vw, 42px) !important;
    line-height: .98 !important;
  }

  .b2-hero .hero-headline-line--lead,
  .b2-hero .hero-edge-prefix {
    font-size: clamp(38px, 10.8vw, 52px) !important;
    line-height: .9 !important;
  }

  .b2-hero .hero-headline-line--edge {
    margin-top: .18em;
  }

  .b2-hero .hero-edge-accent {
    margin-left: .055em;
  }

  .b2-hero .hero-edge-accent::after {
    left: -5%;
    top: -.10em;
    width: 105%;
    height: 1.23em;
  }

  .b2-hero .hero-actions--dual {
    gap: 10px !important;
    margin-top: 28px !important;
  }

  .b2-hero .hero-actions--dual .hero-cta {
    min-height: 46px !important;
    padding: 0 16px !important;
    gap: 14px;
    font-size: 12px;
  }
}

/* Homepage hero social proof ---------------------------------------------
   Replaces the old belief card with three compact, verifiable proof points.
   The open treatment keeps the lower-left hero area light and architectural. */
.b2-hero .b2-hero-proof {
  width: min(100%, 410px);
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(243,239,233,.16);
  border-bottom: 1px solid rgba(243,239,233,.10);
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.b2-hero .b2-hero-proof-item {
  min-width: 0;
  padding: 18px 13px 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.b2-hero .b2-hero-proof-item + .b2-hero-proof-item {
  border-left: 1px solid rgba(243,239,233,.11);
}

.b2-hero .b2-hero-proof-item strong {
  display: block;
  font-family: var(--headline, var(--display));
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: .95;
  color: #F1EEE7;
}

.b2-hero .b2-hero-proof-item span {
  display: block;
  max-width: 13ch;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #A9A7A1;
}

@media (max-width: 1100px) {
  .b2-hero .b2-hero-proof {
    width: min(100%, 420px);
    margin-top: 44px;
  }
}

@media (max-width: 760px) {
  .b2-hero .b2-hero-proof {
    order: 4;
    width: 100%;
    margin-top: 30px;
  }

  .b2-hero .b2-hero-proof-item {
    padding: 15px 8px 14px;
  }

  .b2-hero .b2-hero-proof-item strong {
    font-size: clamp(22px, 7vw, 28px);
  }

  .b2-hero .b2-hero-proof-item span {
    max-width: 12ch;
    margin-top: 7px;
    font-size: 7px;
    letter-spacing: .08em;
  }
}