/* Daily call list v2: Stonebridge Builds' own site, after Waida's Trenox. Black ground with a
   hot orange-red light streak, a glass pill nav, a medium-weight Inter headline, a glowing
   dashboard card, an orange-number stats row and dark cards lit orange along the top edge. */
.demo--daily-call-list {
  --bg: #050404; --card: #0e0b0a; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.14);
  --fg: #fff; --muted: #a9a3a0; --orange: #ff5b14; --orange-2: #ff7d3a; --amber: #ffc36b; --up: #5fe3a1; --down: #ff7b7b;
  background: var(--bg); color: var(--fg); font: 400 16px/1.55 Inter, system-ui, sans-serif;
}
.demo--daily-call-list main { overflow-x: clip; }
.sb-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 7vw, 100px); }
.demo--daily-call-list :focus-visible { outline: 2px solid var(--orange-2); outline-offset: 3px; }
.sb-hero a { text-decoration: none; }

.sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 6px; font: 500 18px/1 Inter, sans-serif; letter-spacing: -.02em;
  padding: 19px 30px; text-decoration: none; transition: background .2s, box-shadow .2s; }
.sb-btn--white { background: #fff; color: #0b0b0b; }
.sb-btn--white:hover { background: #f0ece9; }
.sb-btn--orange { background: linear-gradient(180deg, #ff6a22, #e0460a); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -10px rgba(255,91,20,.7); }
.sb-btn--orange:hover { background: linear-gradient(180deg, #ff7a36, #ec5212); }
.sb-btn--sm { padding: 12px 18px; font-size: 15px; }
.sb-btn--line { background: transparent; color: #fff; border: 1px solid rgba(255,125,58,.55); padding: 9px 16px; font-size: 13.5px; border-radius: 6px; }
.sb-btn--line:hover:not(:disabled) { background: rgba(255,91,20,.12); }
.sb-btn:disabled { opacity: .4; cursor: default; }
.sb-play { width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* ---------- hero ---------- */
.sb-hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(60px, 7vw, 110px);
  background: radial-gradient(60% 70% at 70% 45%, rgba(120,30,0,.35), transparent 70%), #050404; }
.sb-hero__photo { position: absolute; z-index: -3; top: 0; right: 0; bottom: 0; width: 62%; }
.sb-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: .55; filter: saturate(1.25) contrast(1.05); }
.sb-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050404 0%, rgba(5,4,4,.55) 35%, rgba(5,4,4,.15) 70%, rgba(5,4,4,.5)), linear-gradient(0deg, #050404, transparent 30%); }
.sb-streak { position: absolute; z-index: -2; left: -10%; right: -10%; top: 76%; height: 3px; transform: rotate(-27deg); transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent 5%, #ff3d00 30%, #ffd2a8 52%, #ff5b14 70%, transparent 95%); box-shadow: 0 0 18px 4px rgba(255,91,20,.75), 0 0 80px 20px rgba(255,60,0,.35); }

.sb-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 32px); margin: 30px auto 0; padding: 8px 8px 8px 22px;
  border-radius: 8px; background: rgba(40,30,28,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -20px rgba(0,0,0,.8); }
.sb-logo { display: grid; place-items: center; margin-right: 14px; }
.sb-nav__links { display: flex; gap: 22px; margin-right: 18px; font-size: 16px; letter-spacing: -.02em; }
.sb-nav__links a { color: rgba(255,255,255,.88); }
.sb-nav__links a:hover { color: var(--orange-2); }
.sb-nav__cta { background: #fff; color: #0b0b0b; border-radius: 5px; padding: 10px 18px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }

.sb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); gap: 40px; align-items: center; padding-top: clamp(60px, 8vw, 110px); }
.sb-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: -.02em; padding: 7px 8px 7px 16px; border-radius: 999px;
  background: rgba(60,30,24,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sb-tag span { display: grid; place-items: center; width: 28px; height: 20px; border-radius: 999px; background: #ffb8a0; color: #7a1d00; font-size: 12px; }
.sb-hero h1 { margin-top: 26px; font: 500 clamp(2.6rem, 5vw, 4.4rem)/1.08 Inter, sans-serif; letter-spacing: -.06em; }
.sb-lede { margin-top: 26px; max-width: 26em; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.72); letter-spacing: -.01em; }
.sb-hero__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

.sb-dash { position: relative; border-radius: 10px; padding: 16px 16px 16px; background: linear-gradient(180deg, rgba(120,20,10,.85), rgba(35,14,12,.92) 40%, rgba(22,14,13,.95));
  box-shadow: inset 0 1px 0 rgba(255,120,80,.9), inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -30px rgba(255,60,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sb-dash__top { display: flex; align-items: center; gap: 12px; }
.sb-dash__top b { display: block; font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.sb-dash__top small { color: rgba(255,255,255,.62); font-size: 13px; }
.sb-dash__logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: linear-gradient(135deg, #ff7a36, #b92d00); font-weight: 700; }
.sb-dash__live { margin-left: auto; font: 500 13px/1 'JetBrains Mono', monospace; border: 1px solid rgba(255,125,58,.7); border-radius: 6px; padding: 8px 10px; }
.sb-dash__big { margin-top: 26px; font: 500 40px/1 Inter, sans-serif; letter-spacing: -.03em; }
.sb-dash__sub { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.7); }
.sb-dash__sub i { font-style: normal; color: var(--up); }
.sb-dash__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.sb-dash__cells div { display: grid; gap: 1px; padding: 12px; border-radius: 8px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sb-dash__cells span { font-size: 11.5px; color: rgba(255,255,255,.55); }
.sb-dash__cells b { font-weight: 500; font-size: 14.5px; }
.sb-dash__cells small { font-size: 11.5px; color: rgba(255,255,255,.55); }
.sb-dash__cells em { font-style: normal; margin-top: 8px; font-size: 20px; letter-spacing: -.02em; color: var(--up); }
.sb-dash__cells em.is-down { color: var(--down); }

/* ---------- stats ---------- */
.sb-stats { padding: 10px 0 clamp(60px, 8vw, 100px); text-align: center; }
.sb-trust { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; padding: 14px 22px; border-radius: 6px; background: #120d0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: 14px; color: var(--muted); margin: 0 16px; }
.sb-trust b { font-weight: 500; font-size: 20px; color: #fff; }
.sb-stars { color: #fff; letter-spacing: 3px; font-size: 16px; background: none; }
.sb-stats__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 50px; }
.sb-stats__row div { display: flex; flex-direction: column-reverse; gap: 12px; padding: 4px 10px; border-left: 1px solid var(--line); }
.sb-stats__row div:first-child { border-left: 0; }
.sb-stats__row dt { font-size: 19px; color: rgba(255,255,255,.72); letter-spacing: -.02em; }
.sb-stats__row dd { margin: 0; font: 500 clamp(2.4rem, 3.6vw, 3.1rem)/1 Inter, sans-serif; letter-spacing: -.04em; color: var(--orange); }

/* ---------- shared section head + card ---------- */
.sb-head { text-align: center; max-width: 900px; margin: 0 auto clamp(40px, 5vw, 60px); }
.sb-head h2 { margin-top: 22px; font: 500 clamp(2.2rem, 4.4vw, 3.6rem)/1.1 Inter, sans-serif; letter-spacing: -.055em; }
.sb-head > p:last-child:not(.sb-tag) { margin: 20px auto 0; max-width: 40em; color: var(--muted); font-size: 17px; }
.sb-card { position: relative; border-radius: 8px; padding: 20px; background: linear-gradient(180deg, rgba(255,80,20,.16), rgba(14,11,10,.0) 180px), var(--card);
  box-shadow: inset 0 1px 0 rgba(255,140,90,.55), inset 0 0 0 1px var(--line); }

/* ---------- demo ---------- */
.sb-demo { padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 9vw, 120px); }
.sb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 16px; padding: 16px 20px; }
.sb-bar .dc-seg { margin-left: auto; }
.dc-bar__clock { display: flex; align-items: baseline; gap: 14px; }
.dc-bar__clock span { font-size: 14.5px; color: var(--muted); }
.dc-bar__clock b { font: 500 34px/1 Inter, sans-serif; letter-spacing: -.04em; color: var(--orange-2); }
.dc-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: #000; box-shadow: inset 0 0 0 1px var(--line-2); }
.dc-seg__label { font-size: 13px; color: var(--muted); padding: 0 10px 0 8px; }
.dc-seg__btn { border: 0; background: transparent; color: var(--fg); padding: 8px 14px; border-radius: 6px; font: 500 14px Inter, sans-serif; }
.dc-seg__btn[aria-pressed="true"] { background: linear-gradient(180deg, #ff6a22, #e0460a); color: #fff; }
.dc-seg__btn:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.08); }

.dc-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
.dc-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.dc-panel__head h3 { font: 500 24px/1.2 Inter, sans-serif; letter-spacing: -.04em; }
.dc-panel__sub { font-size: 13px; color: var(--muted); }
.dc-cols, .dc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 64px 90px; gap: 12px; align-items: center; }
.dc-cols { padding: 0 12px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dc-cols span:nth-child(n+3) { text-align: right; }
.dc-list { display: flex; flex-direction: column; }
.dc-empty { padding: 28px 12px; color: var(--muted); font-size: 15px; }
.dc-empty b { color: var(--fg); font-weight: 500; }
.dc-row { padding: 16px 12px; border-bottom: 1px solid var(--line); animation: sb-in .35s ease both; }
.dc-row:first-child { background: linear-gradient(90deg, rgba(255,91,20,.16), transparent 75%); }
.dc-row.is-moved { animation: sb-flash 1.2s ease; }
.dc-row__n { font-size: 15px; color: rgba(255,255,255,.55); }
.dc-row:first-child .dc-row__n { color: var(--orange-2); }
.dc-row__who { min-width: 0; }
.dc-row__name { font-weight: 500; font-size: 17px; letter-spacing: -.025em; }
.dc-row__type { display: inline-block; margin-left: 8px; vertical-align: 2px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.dc-row__type--quote { color: var(--amber); background: rgba(255,195,107,.1); }
.dc-row__type--enquiry { color: var(--up); background: rgba(95,227,161,.1); }
.dc-row__type--visit { color: #9fc3ff; background: rgba(120,170,255,.12); }
.dc-row__type--past { color: #e0b3ff; background: rgba(200,140,255,.12); }
.dc-row__why { margin-top: 4px; font-size: 14px; color: var(--muted); }
.dc-row__retry { margin-top: 4px; font-size: 12.5px; color: var(--down); }
.dc-row__num { text-align: right; font-size: 15px; letter-spacing: -.02em; }
.dc-row__num--worth { color: var(--orange-2); font-weight: 600; }
.dc-acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dc-act { border: 0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); border-radius: 6px; padding: 7px 12px; font-size: 13px; font-weight: 500; }
.dc-act:hover { box-shadow: inset 0 0 0 1px var(--orange-2); }
.dc-act--won { color: var(--up); box-shadow: inset 0 0 0 1px rgba(95,227,161,.45); }
.dc-act--won:hover { background: rgba(95,227,161,.1); }
.dc-act--no { color: #ffa3a3; }
.dc-help { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.dc-help b { color: var(--fg); font-weight: 500; }
.dc-done { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.dc-done h3 { font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.dc-done li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--muted); }
.dc-done li b { font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.dc-done .is-won b { color: var(--up); } .dc-done .is-lost b { color: var(--down); } .dc-done .is-spoke b { color: var(--amber); }
.dc-row__meta { display: none; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.dc-side { display: flex; flex-direction: column; gap: 16px; }
.dc-stats { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; border-radius: 8px; background: #0b0908; box-shadow: inset 0 0 0 1px var(--line); }
.dc-stats div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 16px 18px; border-top: 1px solid var(--line); }
.dc-stats div:first-child { border-top: 0; }
.dc-stats dt { font-size: 14px; color: rgba(255,255,255,.75); }
.dc-stats dd { margin: 0; grid-row: span 2; align-self: center; font: 500 30px/1 Inter, sans-serif; color: var(--orange); letter-spacing: -.04em; }
.dc-stats small { font-size: 12.5px; color: var(--muted); }
.dc-src { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dc-src li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s; }
.dc-src li.is-on { box-shadow: inset 0 0 0 1px rgba(255,125,58,.6); }
.dc-src span { font-size: 12.5px; color: var(--muted); }
.dc-src b { font: 500 24px/1.1 Inter, sans-serif; letter-spacing: -.03em; }
.dc-src li.is-on b { color: var(--orange-2); }

.dc-log__body { height: 320px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #3a2a24 transparent; }
.rf-log { display: flex; flex-direction: column; }
.rf-log__empty { color: var(--muted); font-size: 14px; }
.rf-log__item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.85);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.rf-log__item.is-in { opacity: 1; transform: none; }
.rf-log__time { font: 500 12px/1.9 'JetBrains Mono', monospace; color: var(--orange-2); }
.rf-log__tag { grid-column: 2; justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: #ffb8a0; color: #6a1a00; }
.rf-log__item.is-hot .rf-log__text { color: var(--amber); font-weight: 500; }
.rf-log__item.is-done .rf-log__text::before { content: "✓ "; color: var(--up); font-weight: 700; }
@keyframes sb-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sb-flash { 0%, 40% { background: rgba(255,91,20,.28); } 100% { background: transparent; } }

/* ---------- work (photo feature cards) ---------- */
.sb-work { padding-bottom: clamp(70px, 9vw, 120px); }
.sb-work__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; }
.sb-feat { padding: 30px 30px 0; overflow: hidden; display: flex; flex-direction: column; }
.sb-feat h3 { font: 500 clamp(1.5rem, 2.2vw, 1.9rem)/1.15 Inter, sans-serif; letter-spacing: -.045em; }
.sb-feat p { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 16px; max-width: 30em; }
.sb-feat__img { margin-top: 30px; flex: 1; min-height: 280px; border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.sb-feat__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- how (why-choose-us rows) ---------- */
.sb-how { padding-bottom: clamp(80px, 10vw, 140px); }
.sb-how__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 40px; margin-bottom: clamp(30px, 5vw, 70px); }
.sb-how__head h2 { font: 500 clamp(2.4rem, 4.4vw, 3.6rem)/1.1 Inter, sans-serif; letter-spacing: -.055em; }
.sb-how__head p { color: var(--muted); font-size: 16px; }
.sb-rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 20px; padding: 40px 0; border-top: 1px solid rgba(255,255,255,.3); }
.sb-rows li:first-child { border-top: 0; }
.sb-rows__n { grid-row: 1 / 3; font-size: 17px; color: rgba(255,255,255,.8); padding-top: 6px; }
.sb-rows h3 { grid-row: 1 / 3; font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 Inter, sans-serif; letter-spacing: -.04em; }
.sb-ico { grid-column: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, #ff6a22, #e0460a); color: #fff; }
.sb-rows p { grid-column: 3; margin-top: 22px; color: rgba(255,255,255,.72); font-size: 17px; max-width: 26em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dc-grid { grid-template-columns: 1fr; }
  .dc-side { display: grid; grid-template-columns: 1fr 1fr; }
  .dc-panel--log { grid-column: 1 / -1; }
  .sb-stats__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .sb-stats__row div:nth-child(4) { border-left: 0; }
}
@media (max-width: 900px) {
  .sb-nav__links { display: none; }
  .sb-nav { width: calc(100% - 32px); justify-content: space-between; }
  .sb-hero__grid { grid-template-columns: 1fr; }
  .sb-hero__photo { width: 100%; }
  .sb-hero__photo img { opacity: .4; }
  .sb-work__grid { grid-template-columns: 1fr; }
  .sb-rows li { grid-template-columns: 44px minmax(0, 1fr); }
  .sb-rows h3 { grid-row: 1; }
  .sb-rows__n { grid-row: 1; }
  .sb-ico { grid-column: 2; margin-top: 20px; }
  .sb-rows p { grid-column: 2; }
}
@media (max-width: 640px) {
  .dc-side { grid-template-columns: 1fr; }
  .sb-card { padding: 16px; }
  .sb-bar .dc-seg { margin-left: 0; width: 100%; }
  .sb-bar .sb-btn { width: 100%; }
  .dc-cols { display: none; }
  .dc-seg__label { width: 100%; padding: 4px 8px; }
  .dc-seg__btn { flex: 1; }
  .dc-row { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 6px; align-items: start; padding: 14px 4px; }
  .dc-row__num--val, .dc-row__num--pc { display: none; }
  .dc-row__num--worth { grid-column: 3; grid-row: 1; }
  .dc-row__meta { display: block; }
  .dc-acts { grid-column: 1 / -1; }
  .sb-stats__row { grid-template-columns: 1fr 1fr; }
  .sb-stats__row div, .sb-stats__row div:nth-child(4) { border-left: 0; }
  .sb-stats__row div:last-child { grid-column: 1 / -1; }
  .sb-stats__row dt { font-size: 15px; }
  .sb-hero__btns .sb-btn { flex: 1 1 100%; }
  .sb-lede { font-size: 17px; }
  .sb-feat { padding: 22px 18px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .demo--daily-call-list *, .demo--daily-call-list *::before, .demo--daily-call-list *::after { animation: none !important; transition: none !important; }
}