/*
 * BuiltRight theme styles.
 * Every class is prefixed br- so nothing collides with WordPress, Elementor or plugins.
 */
:root {
  --ink: #0b0b0c;
  --paper: #ffffff;
  --cyan: #24b6f6;
  --cyan-press: #0e9ad8;
  --on-ink: #ffffff;
  --on-ink-soft: #b4bac2;
  --on-paper: #0b0b0c;
  --on-paper-soft: #55595f;
  --line-ink: rgba(255, 255, 255, .18);
  --line-paper: rgba(11, 11, 12, .16);
  --ph-ink: #1d1e21;
  --ph-paper: #eceded;
  --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
  --gut: clamp(16px, 4vw, 48px);
  --band: clamp(56px, 8vw, 112px);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--on-ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
:where(.br-band, .br-top, .br-foot, .br-bar) a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
:where(.br-band, .br-top, .br-foot, .br-bar) :is(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.br-band, .br-top, .br-foot, .br-bar) :is(ul, ol) { padding: 0; list-style: none; }

/* ---- bands */
.br-band { padding-block: var(--band); }
.br-band.br-ink { background: var(--ink); color: var(--on-ink); --soft: var(--on-ink-soft); --line: var(--line-ink); --ph: var(--ph-ink); --card: #141517; }
.br-band.br-paper { background: var(--paper); color: var(--on-paper); --soft: var(--on-paper-soft); --line: var(--line-paper); --ph: var(--ph-paper); --card: #ffffff; }
.br-in { max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }
.br-stack { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }

/* ---- type */
.br-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.br-h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); font-weight: 500; line-height: .98; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.br-h1 em { font-style: italic; font-weight: 400; display: block; font-size: .62em; letter-spacing: -.015em; margin-top: .18em; }
.br-h2 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.br-h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.br-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; max-width: 46ch; }
.br-soft { color: var(--soft); }
.br-measure { max-width: 62ch; }
.br-head { display: flex; flex-direction: column; gap: 14px; }

/* ---- actions: the only place cyan lives */
.br-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 4px; font: 700 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.br-btn.br-primary { background: var(--cyan); color: #06121a; }
.br-btn.br-primary:hover { background: var(--cyan-press); }
.br-btn.br-ghost { border-color: currentColor; color: inherit; background: transparent; }
.br-btn.br-ghost:hover { background: var(--cyan); border-color: var(--cyan); color: #06121a; }
.br-btn.br-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.br-link { color: var(--cyan); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.br-band.br-paper .br-link { color: #0a7fb5; }
.br-link:hover { border-bottom-color: currentColor; }
.br-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- header */
.br-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ink); border-bottom: 1px solid var(--line-ink); }
.br-top .br-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.br-brand { font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.br-nav { display: flex; gap: 22px; margin-left: auto; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.br-nav a { text-decoration: none; }
.br-nav a:hover { text-decoration: underline; }
.br-tel { font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
@media (max-width: 900px) { .br-nav { display: none; } .br-tel { margin-left: auto; } }
@media (max-width: 560px) { .br-top .br-btn { display: none; } }

/* ---- hero */
.br-hero { padding-block: clamp(32px, 4vw, 56px) clamp(44px, 5vw, 72px); }
.br-hero .br-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.br-hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.br-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border: 1px solid var(--line-ink); border-radius: 999px; font-size: 13px; font-weight: 700; }
.br-faces { display: flex; }
.br-faces i { width: 26px; height: 26px; border-radius: 50%; background: #3a3c41; border: 2px solid var(--ink); margin-left: -8px; }
.br-faces i:first-child { margin-left: 0; }
.br-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.br-work .br-ph.br-tall { aspect-ratio: 9 / 16; }
.br-work .br-ph.br-mid { margin-top: -18px; margin-bottom: 18px; }
.br-work .br-ph.br-wide { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
@media (max-width: 860px) { .br-hero .br-in { grid-template-columns: 1fr; } .br-work .br-ph.br-mid { margin: 0; } }
@media (max-width: 640px) { .br-work .br-ph.br-tall { aspect-ratio: 4 / 5; } .br-work .br-ph.br-wide { aspect-ratio: 16 / 4; } .br-vids .br-ph { aspect-ratio: 4 / 5; } }

/* ---- placeholders for assets BuiltRight supplies */
.br-ph { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; max-width: 100%;
      background: repeating-linear-gradient(135deg, var(--ph) 0 14px, color-mix(in srgb, var(--ph) 82%, currentColor) 14px 15px);
      border: 1px solid var(--line); color: var(--soft); font: 700 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.br-ph span { background: var(--ph); padding: 4px 6px; }

/* ---- stats */
.br-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.br-stat { padding: 28px 24px 4px 0; border-right: 1px solid var(--line); margin-right: 24px; display: flex; flex-direction: column; gap: 8px; }
.br-stat:last-child { border-right: 0; margin-right: 0; }
.br-stat b { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-stat span { font-size: 14px; color: var(--soft); line-height: 1.4; }
@media (max-width: 900px) { .br-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .br-stat:nth-child(2) { border-right: 0; margin-right: 0; } .br-stat b { white-space: normal; } }
@media (max-width: 520px) { .br-stats { row-gap: 8px; } .br-stat { padding: 20px 12px 4px 0; margin-right: 12px; } .br-stat b { font-size: 1.3rem; white-space: nowrap; } .br-stat span { font-size: 13px; } }
.br-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.br-marquee ul { display: flex; gap: 14px; width: max-content; animation: slide 50s linear infinite; }
.br-marquee:hover ul, .br-marquee:focus-within ul { animation-play-state: paused; }
.br-marquee .br-ph { width: 150px; height: 56px; flex: none; }
@keyframes slide { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .br-marquee { -webkit-mask-image: none; mask-image: none; } .br-marquee ul { animation: none; width: auto; flex-wrap: wrap; } .br-marquee li[aria-hidden] { display: none; } }

/* ---- grids & cards */
.br-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.br-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .br-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .br-grid3, .br-grid2 { grid-template-columns: 1fr; } }
.br-card { background: var(--card); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.br-card p { font-size: 15.5px; }
.br-card .br-kick { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.br-card .br-result { font-size: 15px; font-weight: 700; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
.br-card details { font-size: 14.5px; }
.br-card summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--soft); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.br-card summary::-webkit-details-marker { display: none; }
.br-card summary::before { content: "+"; font-weight: 400; font-size: 18px; line-height: 1; width: 12px; }
.br-card details[open] summary::before { content: "\2212"; }
.br-card .br-ticks { padding-top: 0; padding-bottom: 6px; }
.br-ticks { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.br-ticks li { padding-left: 18px; position: relative; }
.br-ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: currentColor; opacity: .6; }

/* ---- proof */
.br-case { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 22px; padding: 22px; }
.br-case .br-ph { aspect-ratio: 4 / 5; }
.br-case .br-body { display: flex; flex-direction: column; gap: 10px; }
.br-case .br-big { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.05; }
.br-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.br-tags li { font: 700 10.5px/1 var(--sans); letter-spacing: .1em; border: 1px solid var(--line); padding: 5px 7px; }
@media (max-width: 520px) { .br-case { grid-template-columns: 1fr; } .br-case .br-ph { aspect-ratio: 16 / 9; } }
.br-mini b { font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; }

/* ---- testimonials */
.br-tgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.br-tside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px + 28px); display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); }
.br-vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.br-vids .br-ph { aspect-ratio: 9 / 16; }
.br-quotes { display: flex; flex-direction: column; gap: 26px; }
.br-quotes blockquote { padding-left: 20px; border-left: 2px solid var(--on-paper); font-size: 16px; }
.br-quotes cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: 14px; }
.br-quotes .br-slot { border-left-style: dashed; color: var(--soft); min-height: 120px; }
@media (max-width: 860px) { .br-tgrid { grid-template-columns: 1fr; } .br-tside { position: static; } }

/* ---- process */
.br-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.br-steps li { border-top: 2px solid currentColor; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.br-steps li::before { counter-increment: s; content: "Step " counter(s); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.br-steps p { font-size: 15.5px; color: var(--soft); }
@media (max-width: 860px) { .br-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .br-steps { grid-template-columns: 1fr; } }

/* ---- founder */
.br-founder { display: grid; grid-template-columns: minmax(200px, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.br-founder .br-ph { aspect-ratio: 4 / 5; }
.br-founder .br-body { display: flex; flex-direction: column; gap: 18px; }
.br-founder .br-promise { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; max-width: 58ch; }
@media (max-width: 760px) { .br-founder { grid-template-columns: 1fr; } .br-founder .br-ph { aspect-ratio: 16 / 10; } }

.br-yt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.br-yt .br-ph { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .br-yt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- faq */
.br-faq { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.br-faq details { background: var(--ink); color: var(--on-ink); }
.br-faq summary { cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 16.5px; list-style: none; display: flex; gap: 14px; }
.br-faq summary::-webkit-details-marker { display: none; }
.br-faq summary::before { content: "+"; font-weight: 400; width: 14px; }
.br-faq details[open] summary::before { content: "\2212"; }
.br-faq .br-ans { padding: 0 22px 22px 50px; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; color: var(--on-ink-soft); }
.br-faq .br-ans b { color: var(--on-ink); }

.br-cta { text-align: left; }
.br-cta .br-stack { gap: 22px; align-items: flex-start; }
.br-foot { border-top: 1px solid var(--line-ink); padding-block: 40px 56px; font-size: 14.5px; }
.br-foot .br-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
.br-foot ul { display: flex; flex-direction: column; gap: 6px; }
.br-foot a { text-decoration: none; } .br-foot a:hover { text-decoration: underline; }
@media (max-width: 700px) { .br-foot .br-in { grid-template-columns: 1fr; } }

/* ---- mobile sticky bar */
.br-bar { display: none; }
@media (max-width: 640px) {
  body { padding-bottom: 76px; }
  .br-bar { display: grid; grid-template-columns: 1fr 2.2fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #141517; border-top: 1px solid var(--line-ink);
         padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .br-bar .br-btn { min-height: 48px; padding: 0 10px; font-size: 14px; }
}

/* ==========================================================================
   Theme additions (everything above is the approved homepage design)
   ========================================================================== */

html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- tone helpers: --fg is the strong text colour of the current band */
.br-band.br-ink { --fg: var(--on-ink); }
.br-band.br-paper { --fg: var(--on-paper); }
.br-ink .br-faq details { background: var(--card); border: 1px solid var(--line); }
.br-quotes blockquote { border-left-color: var(--fg); }

/* ---- band spacing variants */
.br-band.br-band-stats { padding-block: clamp(36px, 5vw, 64px); }
.br-band.br-band-content { padding-block: clamp(40px, 5vw, 72px); }
.br-band.br-pt-0 { padding-top: 0; }
.br-band.br-pb-0 { padding-bottom: 0; }

/* ---- small utilities that were inline styles in the prototype */
.br-eyebrow.br-mb { margin-bottom: 14px; }
.br-h2.br-h2-sm { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.br-h3.br-caps { text-transform: uppercase; letter-spacing: .04em; }
.br-stack.br-gap-sm { gap: 22px; }
.br-row.br-between { justify-content: space-between; }
.br-note { font-size: 14px; }
.br-sig b { color: var(--fg); }

/* ---- rich text coming from the editor */
.br-founder .br-promise { display: flex; flex-direction: column; gap: 18px; }
.br-rich { display: flex; flex-direction: column; gap: 10px; }
.br-rich b, .br-rich strong { color: var(--fg); }
.br-faq .br-ans strong { color: var(--on-ink); }
.br-ans ul, .br-ans ol, .br-rich ul, .br-rich ol, .br-promise ul, .br-promise ol { list-style: disc; padding-left: 1.2em; }
.br-ans ol, .br-rich ol, .br-promise ol { list-style: decimal; }

/* ---- real media inside the hatched placeholders */
.br-ph.br-has-media { padding: 0; overflow: hidden; background: var(--ph); }
.br-ph.br-has-media > img,
.br-ph.br-has-media > video,
.br-ph.br-has-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; display: block; }
.br-marquee .br-ph.br-has-media { background: transparent; border-color: transparent; }
.br-marquee .br-ph.br-has-media > img { object-fit: contain; }
.br-marquee a.br-ph { text-decoration: none; }
.br-faces i { background-size: cover; background-position: center; }
.br-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.br-play::before { content: ""; width: 56px; height: 56px; border-radius: 50%; background: rgba(11, 11, 12, .72); border: 2px solid #fff; }
.br-play::after { content: ""; position: absolute; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.br-play:hover::before { background: var(--cyan); border-color: var(--cyan); }
.br-play:hover::after { border-left-color: #06121a; }

/* ---- header: logo image, WordPress admin bar, mobile menu */
.br-brand img { display: block; max-height: 40px; width: auto; }
.admin-bar .br-top { top: 32px; }
.admin-bar .br-tside { top: calc(32px + 68px + 28px); }
@media (max-width: 782px) { .admin-bar .br-top { top: 46px; } }
@media (max-width: 600px) { .admin-bar .br-top { top: 0; } }
.br-burger { display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-ink); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.br-burger span { display: block; width: 18px; height: 2px; background: currentColor; }
@media (max-width: 900px) {
  .br-burger { display: inline-flex; }
  .br-top.br-open .br-nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; padding: 4px var(--gut) 16px; background: var(--ink); border-bottom: 1px solid var(--line-ink); }
  .br-top.br-open .br-nav a { padding: 14px 0; font-size: 14px; border-bottom: 1px solid var(--line-ink); }
  .br-top.br-open .br-nav a:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .br-top .br-in { gap: 14px; }
  .br-top .br-brand { white-space: normal; line-height: 1.05; max-width: 7.5em; }
}

/* ---- footer pieces that were inline styles */
.br-foot .br-brand-lg { font-size: 1.5rem; line-height: 1; white-space: normal; display: block; }
.br-foot-copy { margin-top: 14px; color: var(--on-ink-soft); }
.br-foot-info { color: var(--on-ink-soft); }
.br-foot-info b { color: var(--on-ink); }
.br-foot-info p + p { margin-top: 10px; }

/* ---- Elementor: BuiltRight sections always run edge to edge */
.elementor-widget.br-w { width: 100%; max-width: 100%; margin: 0 !important; }
.e-con:has(> .br-w),
.e-con:has(> .e-con-inner > .br-w) { padding: 0 !important; gap: 0 !important; max-width: none !important; }
.e-con:has(> .e-con-inner > .br-w) > .e-con-inner { max-width: none !important; padding: 0 !important; gap: 0 !important; }
.elementor-section:has(.br-w) > .elementor-container { max-width: none !important; }
.elementor-column:has(.br-w) > .elementor-widget-wrap { padding: 0 !important; }

/* ---- ordinary pages and posts (not built with Elementor) */
.br-prose { max-width: 760px; }
.br-prose > * + * { margin-top: 1.1em; }
.br-prose h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 500; line-height: 1; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.br-prose h2 { font-size: 1.7rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; margin-top: 1.8em; }
.br-prose h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.6em; }
.br-prose ul, .br-prose ol { list-style: disc; padding-left: 1.3em; }
.br-prose ol { list-style: decimal; }
.br-prose a { color: #0a7fb5; font-weight: 700; }
.br-prose img { max-width: 100%; height: auto; }
.br-prose blockquote { padding-left: 20px; border-left: 2px solid var(--on-paper); }
.br-meta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.br-postlist { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.br-postlist .br-card h2 a { text-decoration: none; }
.br-postlist .br-card h2 a:hover { text-decoration: underline; }
.br-pager { display: flex; gap: 16px; margin-top: 32px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---- sections switched to the other background still read correctly */
.br-paper .br-pill { border-color: var(--line); }
.br-paper .br-faces i { border-color: var(--paper); background-color: #c9cbce; }

/* ---- process: fewer than four steps fill the row on desktop */
@media (min-width: 861px) { .br-steps[style] { grid-template-columns: repeat(var(--br-cols), minmax(0, 1fr)); } }

/* ---- sticky mobile bar switched off in the Customizer */
@media (max-width: 640px) { body.br-no-bar { padding-bottom: 0; } }

/* ---- very narrow phones: the sticky bar already carries the Call button */
@media (max-width: 345px) { .br-top .br-tel { display: none; } .br-top .br-burger { margin-left: auto; } }