/* WordPress integration and restrained enhancements of the original design. */
.br-homepage { --br-feedback: 180ms; --br-ease: cubic-bezier(.22,1,.36,1); }
.br-homepage .br-main { display: block; }
.br-homepage .br-main > .wp-block-html { margin: 0; }
.br-homepage img { height: auto; }
.br-homepage .hero-image { object-fit: contain; }
.br-homepage .brand-logo { width: 100%; height: 100%; object-fit: contain; }
.br-homepage .about-photo img { width: 100%; height: 100%; object-fit: cover; }
.br-homepage .laptop-viewport img, .br-homepage .phone-viewport img { height: auto; }
.br-homepage .site-header { top: 0; }
.br-homepage.admin-bar .site-header { top: 32px; }
.br-homepage :where(a,button,summary):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.br-homepage :where(section,[id]) { scroll-margin-top: 7rem; }
.br-homepage :where(.button,.header-cta) { transition: background-color var(--br-feedback), color var(--br-feedback), border-color var(--br-feedback); }
.br-homepage :where(.button,.header-cta):active { transform: translateY(1px); }
.br-homepage .carousel-dots button { width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.br-homepage .carousel-dots button::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #a0a0a0; }
.br-homepage .carousel-dots button[aria-pressed="true"]::after { background: #111; }
.br-homepage .carousel-stage { touch-action: pan-y; }
.br-homepage .faq-home-toggle { transition: transform var(--br-feedback) var(--br-ease); }
.br-homepage .faq-home-item[open] .faq-home-toggle { transform: rotate(45deg); }
.br-homepage .br-menu-toggle { display: none; }
.br-homepage .br-page-content { width: min(calc(100% - 3rem), 75rem); min-height: 60svh; margin: 5rem auto; }
.br-homepage .br-page-content > h1 { font-size: clamp(2.5rem,6vw,5rem); line-height: 1.1; }
.br-homepage .nav-links a::after { transition: transform var(--br-feedback) var(--br-ease); }

/* An ordinary complete project list when scripting is unavailable. */
.br-homepage .work-carousel:not(.br-carousel-ready) .carousel-stage { display: grid; gap: 3rem; height: auto; min-height: 0; padding-inline: var(--page-gutter); overflow: visible; }
.br-homepage .work-carousel:not(.br-carousel-ready) .project-slide { position: relative; inset: auto; margin: 0 auto; transform: none; opacity: 1; filter: none; pointer-events: auto; visibility: visible; }
.br-homepage .work-carousel:not(.br-carousel-ready) :where(.carousel-arrows,.carousel-dots) { display: none; }
.br-homepage .work-carousel:not(.br-carousel-ready) :where(.project-description,.project-copy a,.phone-mockup) { opacity: 1; visibility: visible; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .br-homepage .project-slide-active .laptop-viewport img { transition: transform 350ms var(--br-ease); }
  .br-homepage .project-slide-active:hover .laptop-viewport img { transform: scale(1.025); transform-origin: top center; }
}

@media (max-width: 67.99rem) {
  .br-homepage .site-header { padding: .65rem max(1rem,env(safe-area-inset-right)) .65rem max(1rem,env(safe-area-inset-left)); }
  .br-homepage .site-header .nav-shell { display: flex; flex-wrap: wrap; gap: .65rem; padding: .65rem .8rem; border-radius: 16px; }
  .br-homepage .site-header .brand { flex: 1 1 auto; gap: .6rem; }
  .br-homepage .site-header .brand-mark { flex: 0 0 2.8rem; width: 2.8rem; height: 2rem; }
  .br-homepage .site-header .brand-copy { max-width: none; }
  .br-homepage .site-header .brand-copy strong { font-size: .84rem; }
  .br-homepage .site-header .brand-copy span { font-size: .68rem; }
  .br-homepage .site-header .header-cta { order: 2; flex: 0 0 auto; width: auto; min-width: 0; max-width: none; min-height: 44px; font-size: .75rem; white-space: nowrap; padding: .75rem 1rem; }
  .br-homepage .site-header .br-menu-toggle { order: 3; flex: 0 0 auto; align-items: center; gap: .35rem; min-height: 44px; min-width: 44px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #111; padding: .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
  .br-homepage .site-header.br-menu-ready .br-menu-toggle { display: inline-flex; }
  .br-homepage .br-menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .br-homepage .site-header .nav-links { order: 4; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; width: 100%; overflow: visible; padding: .75rem 0 .25rem; }
  .br-homepage .site-header .nav-links a { min-height: 52px; font-size: .8rem; padding: .6rem; }
  .br-homepage .site-header.br-menu-ready:not(.br-menu-open) .nav-links { display: none; }
  .br-homepage .site-header.br-menu-open .nav-links { max-height: calc(100svh - 8rem); overflow-y: auto; overscroll-behavior: contain; }
  .br-homepage .hero { padding-top: 8.5rem; }
}

@media (max-width: 782px) { .br-homepage.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) {
  .br-homepage.admin-bar .site-header { position: sticky; }
  .br-homepage .site-header .header-cta { display: none; }
  .br-homepage .site-header .brand-copy strong { font-size: .9rem; }
  .br-homepage .site-header .brand-copy span { font-size: .7rem; }
  .br-homepage .hero-description { font-size: 1rem; line-height: 1.55; }
  .br-homepage .hero-actions { gap: .65rem; }
  .br-homepage .hero-actions .button { min-height: 48px; font-size: .84rem; padding: .85rem 1rem; }
  .br-homepage .trust-copy strong { font-size: .72rem; }
  .br-homepage .trust-copy > span { font-size: .8rem; line-height: 1.4; }
  .br-homepage .project-slide { transition: opacity 220ms var(--br-ease); }
}

@media (max-width: 640px) {
  .br-homepage .br-carousel-ready .carousel-stage { height: auto; min-height: 0; }
  .br-homepage .br-carousel-ready .project-slide { display: none; }
  .br-homepage .br-carousel-ready .project-slide-active { display: grid; position: relative; top: auto; left: auto; margin-inline: auto; transform: none; }
  .br-homepage .project-copy a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; }
  .br-homepage .project-description { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .br-homepage *, .br-homepage *::before, .br-homepage *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .br-homepage :where(.button,.header-cta):active { transform: none; }
}