/* BREME Customer Year: the locked signature element (see DESIGN.md).
   Scoped under .by so it sits inside the site's existing stylesheet without collisions. */
.by{--by-label:116px;--by-ease:cubic-bezier(.16,1,.3,1);position:relative;min-width:0;border-top:1px solid var(--ink);padding-top:16px}
.by-tabs{display:flex;flex-wrap:wrap;gap:0 28px;margin:-4px 0 18px;border-bottom:1px solid var(--hair)}
.by-tabs button{font:inherit;font-size:15px;font-weight:600;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0 12px;color:var(--ink-soft);cursor:pointer;transition:color .2s,border-color .2s}
.by-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.by-tabs button:hover{color:var(--ink)}
.by-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px}
.by-toggle{display:inline-flex;border:1px solid var(--ink)}
.by-toggle button{font:inherit;font-size:14px;border:0;background:transparent;color:var(--ink);padding:10px 16px;cursor:pointer;transition:background .2s var(--by-ease),color .2s var(--by-ease)}
.by-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.by-toggle button:not([aria-pressed="true"]):hover{background:var(--cream)}
.by-count{font-size:14px;color:var(--brown)}
.by-count strong{font-weight:700;color:var(--ink);font-size:20px;margin-right:4px;font-variant-numeric:tabular-nums}
.by-scroll{overflow-x:auto;margin-top:14px;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.by-scroll::-webkit-scrollbar{height:6px}
.by-scroll::-webkit-scrollbar-thumb{background:var(--hair)}
.by-cal{position:relative;min-width:640px;display:grid;grid-template-columns:var(--by-label) 1fr}
.by-middle{grid-column:2;position:relative;height:30px}
.by-middle span{position:absolute;bottom:6px;height:10px;border:1px solid var(--blue-deep);border-bottom:0;left:calc(100% / 13 * 1);right:calc(100% / 13 * .6)}
.by-middle em{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--bg,#fff);padding:0 10px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.sec.cream .by-middle em{background:var(--cream)}
.by-months{grid-column:2;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));border-bottom:1px solid var(--ink)}
.by-months span{display:flex;flex-direction:column;padding:4px 0 8px 6px;border-left:1px solid var(--hair);overflow:hidden;white-space:nowrap;font-size:16px;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.by-months small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.by-months span:first-child,.by-months span:first-child small{color:var(--blue-deep)}
.by-lanes{grid-column:1 / -1;display:grid;grid-template-columns:var(--by-label) 1fr}
.by-lab{font-size:13px;font-weight:600;color:var(--ink);padding:0 12px 0 0;display:flex;align-items:center;border-bottom:1px solid var(--hair);min-height:54px;position:sticky;left:0;background:var(--by-bg,#fff);z-index:2;line-height:1.25}
.sec.cream .by-lab{--by-bg:var(--cream)}
.by-lane{position:relative;border-bottom:1px solid var(--hair);min-height:54px;background-image:linear-gradient(to right,var(--hair) 1px,transparent 1px);background-size:calc(100% / 13) 100%}
.by-quiet{position:absolute;top:50%;height:0;border-top:2px dashed var(--ink-soft);transform:translateY(-1px)}
.by-quiet em{position:absolute;top:6px;left:8px;font-style:normal;font-size:13px;font-weight:600;color:var(--blue-deep);white-space:nowrap}
.by-dot{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--blue);background:#fff;padding:0;cursor:pointer;transition:left .45s var(--by-ease),transform .45s var(--by-ease),opacity .45s var(--by-ease),background .2s,border-color .2s;z-index:1}
.by-dot.on{background:var(--blue)}
.by-dot:hover{transform:scale(1.25)}
.by-dot[aria-pressed="true"]{background:var(--blue-deep);border-color:var(--blue-deep);box-shadow:0 0 0 6px rgba(75,114,181,.16)}
.by-dot.enter{opacity:0;transform:scale(.3)}
.by-dot.leave{opacity:0;transform:scale(.3);pointer-events:none}
.by-dot:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.by-sweep{position:absolute;top:0;bottom:0;width:2px;background:var(--blue-deep);left:var(--by-label);opacity:0;pointer-events:none;z-index:3}
.by-note{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.by-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--hair)}
.by-detail > div{padding:16px 20px 18px 0;border-bottom:1px solid var(--hair)}
.by-detail > div:nth-child(even){padding-left:20px;border-left:1px solid var(--hair)}
.by-detail h3{font-size:22px;line-height:1.2;font-weight:400;letter-spacing:-.01em}
.by-detail .when{font-size:13px;color:var(--blue-deep);font-weight:600;margin-top:6px}
.by-detail .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:700}
.by-detail p{font-size:15px;line-height:1.55;margin-top:8px;color:var(--ink)}
.by-detail .dim p{color:var(--ink-soft)}
.by-tip{position:absolute;z-index:30;pointer-events:none;white-space:nowrap;font-size:13px;color:#fff;background:var(--ink);padding:5px 10px;opacity:0;transform:translateY(4px);transition:opacity .15s var(--by-ease),transform .15s var(--by-ease)}
.by-tip.show{opacity:1;transform:none}

/* stage by stage */
.by-stages{margin-top:56px;border-top:1px solid var(--ink)}
.by-srow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(20px,3vw,48px);padding:28px 0 30px;border-bottom:1px solid var(--hair);align-items:start}
.by-srow h3{font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-.01em}
.by-srow .when{font-size:13px;color:var(--brown);margin-top:6px}
.by-strip{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;margin-top:16px;max-width:300px}
.by-strip i{height:8px;background:var(--hair)}
.by-strip i.on{background:var(--blue)}
.by-scale{display:flex;justify-content:space-between;max-width:300px;margin-top:6px;font-size:11px;color:var(--brown);font-variant-numeric:tabular-nums}
.by-srow .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:700;margin-bottom:6px}
.by-srow p{font-size:16px;color:var(--ink-mid)}

/* process timeline */
.by-process{margin-top:clamp(48px,6vw,72px)}
.by-axis{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.by-process ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.by-process ol::before{content:"";position:absolute;left:0;right:0;top:33px;height:2px;background:var(--blue)}
.by-process li{position:relative;padding:22px 24px 0 0}
.by-process .pt{display:block;width:18px;height:18px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-sizing:content-box;margin-left:-4px;position:relative}
.sec.cream .by-process .pt{border-color:var(--cream)}
.by-process h3{font-size:20px;line-height:1.2;font-weight:700;color:var(--brown);margin-top:16px}
.by-process p{font-size:15px;color:var(--ink-soft);margin-top:8px;line-height:1.55}

/* scorecard */
.by-score{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,4vw,64px);align-items:start}
.by-score ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.by-score li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:center}
.by-score .pn{font-size:20px;font-weight:700;color:var(--ink)}
.by-score .pq{font-size:15.5px;color:var(--ink-mid);margin-top:6px;max-width:58ch}
.by-scale5{display:flex;gap:6px}
.by-scale5 button{font:inherit;font-size:15px;width:40px;height:40px;border:1px solid var(--hair);background:#fff;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,color .15s}
.by-scale5 button:hover{border-color:var(--ink)}
.by-scale5 button[aria-pressed="true"]{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.by-total{position:sticky;top:110px;border-top:1px solid var(--ink);padding-top:20px}
.by-total .big{font-size:clamp(56px,6vw,80px);font-weight:400;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:12px 0 4px}
.by-total .big small{font-size:24px;color:var(--ink-soft)}
.by-total .low{font-size:16px;color:var(--ink-mid);margin-top:14px;max-width:34ch}
.by-total .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown);font-weight:700}
.by-total .cta-row{margin-top:26px}

@media (max-width:1100px){
  .by-process ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .by-process ol::before{display:none}
  .by-score{grid-template-columns:minmax(0,1fr)}
  .by-total{position:static}
}
@media (max-width:760px){
  .by{--by-label:96px}
  .by-lab{font-size:12px}
  .by-months span{font-size:14px;padding-left:4px}
  .by-months small{letter-spacing:.02em}
  .by-detail{grid-template-columns:minmax(0,1fr)}
  .by-detail > div:nth-child(even){border-left:0;padding-left:0}
  .by-srow{grid-template-columns:minmax(0,1fr);gap:16px}
  .by-process ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .by-score li{grid-template-columns:minmax(0,1fr)}
  .by-scale5 button{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .by *,.by-process *,.by-score *{transition:none!important;animation:none!important}
}