.ots-trails { --ots-orange:#FF8200; --ots-dark:#212224; --ots-black:#000; --ots-cream:#EAE0C3;
  --ots-light:#E6E7E8; --ots-white:#fff; --ots-font:"Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-family:var(--ots-font); color:var(--ots-dark); margin:0; }
.ots-trails *, .ots-trails *::before, .ots-trails *::after { box-sizing:border-box; }
.ots-trails .ots-wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.ots-trails .ots-eyebrow { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--ots-orange); margin:0 0 14px; }
.ots-trails h1, .ots-trails h2 { text-transform:uppercase; margin:0 0 18px; line-height:.95; }
.ots-trails h1 { font-size:clamp(46px,7.5vw,100px); font-weight:700; letter-spacing:-.015em; color:var(--ots-white); }
.ots-trails h2 { font-size:clamp(28px,4vw,41px); font-weight:900; }
.ots-trails p { font-size:17px; font-weight:300; line-height:1.65; margin:0 0 18px; }
.ots-trails .ots-btn { display:inline-block; background:var(--ots-orange); color:var(--ots-black);
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:13px 24px;
  border-radius:2px; text-decoration:none; transition:all .2s; }
.ots-trails .ots-btn:hover { background:var(--ots-white); }
.ots-trails .ots-btn--ghost { background:transparent; border:1px solid currentColor; color:inherit; }
.ots-trails .ots-btn--ghost:hover { background:var(--ots-orange); border-color:var(--ots-orange); color:var(--ots-black); }
.ots-trails .ots-link { color:var(--ots-orange); font-weight:700; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; text-decoration:none; }
.ots-trails .ots-link:hover { text-decoration:underline; }

/* hero */
.ots-hero { position:relative; background:var(--ots-black); min-height:66vh; display:flex; align-items:flex-end; }
.ots-hero__bg { position:absolute; inset:0; background:url('https://dev.outset.bike/wp-content/uploads/2026/06/treadmarkhero-scaled-1.jpg') center/cover no-repeat; opacity:.55; }
.ots-hero__inner { position:relative; padding:140px 24px 70px; width:100%; }
.ots-hero p { color:rgba(255,255,255,.9); max-width:560px; font-size:18px; }
.ots-hero .ots-accent { color:var(--ots-orange); }

/* map section */
.ots-map-sec { background:var(--ots-cream); padding:80px 0 90px; }
.ots-map-sec__head { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; margin-bottom:36px; }
.ots-map-sec__head p { max-width:420px; color:#4a4a45; margin:0; }
.ots-legend { display:flex; flex-wrap:wrap; gap:22px; margin:0 0 26px; font-size:12px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:#4a4a45; align-items:center; }
.ots-legend span { display:inline-flex; align-items:center; gap:8px; }
.ots-legend i { display:inline-block; }
.ots-legend .ots-l-dot { width:12px; height:12px; border-radius:50%; background:#000; }
.ots-legend .ots-l-tree { width:13px; height:22px; display:inline-block; }
.ots-legend .ots-l-tree path { fill:#000; stroke:#000; }
.ots-legend .ots-l-line { width:26px; height:0; border-top:3px solid #000; border-radius:2px; }
.ots-map-shell { position:relative; max-width:760px; margin:0 auto; }
.ots-map-shell svg { width:100%; height:auto; display:block; }
.ots-dot-core { fill:#000; transition:fill .15s; transform-box:fill-box; transform-origin:center; transition:fill .15s, transform .15s; }
.ots-dot:hover .ots-dot-core, .ots-dot:focus .ots-dot-core,
.ots-dot.ots-armed .ots-dot-core { fill:var(--ots-orange); transform:scale(1.9); }
.ots-tree-g path { transition:fill .15s; }
.ots-tree:hover .ots-tree-g path, .ots-tree:focus .ots-tree-g path,
.ots-tree.ots-armed .ots-tree-g path { fill:var(--ots-orange); }
.ots-dot, .ots-tree { cursor:pointer; outline:none; }
.ots-tip { position:absolute; pointer-events:none; background:#000; color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; padding:8px 12px; border-radius:2px; white-space:nowrap;
  transform:translate(-50%,-140%); opacity:0; transition:opacity .12s; z-index:5; }
.ots-tip::after { content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#000; }
.ots-tip.on { opacity:1; }
.ots-map-note { text-align:center; font-size:13px; color:#6b6b64; margin-top:22px; }
.ots-map-note a { color:inherit; }

/* trailforks modal */
.ots-modal { position:fixed; inset:0; z-index:99990; display:none; align-items:center; justify-content:center; padding:20px; }
.ots-modal.on { display:flex; }
.ots-modal__back { position:absolute; inset:0; background:rgba(0,0,0,.72); }
.ots-modal__panel { position:relative; width:min(960px,100%); height:min(640px,86vh); background:#fff;
  border-radius:2px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.ots-modal__bar { background:var(--ots-black); color:#fff; display:flex; align-items:center; gap:18px;
  padding:14px 18px; }
.ots-modal__bar strong { font-size:14px; font-weight:900; letter-spacing:1px; text-transform:uppercase; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ots-modal__bar .ots-link { flex-shrink:0; }
.ots-modal__x { flex-shrink:0; background:none; border:0; color:#fff; font-size:26px; line-height:1;
  cursor:pointer; padding:0 2px; font-family:inherit; }
.ots-modal__x:hover { color:var(--ots-orange); }
.ots-modal__frame { flex:1; border:0; width:100%; background:#eee; }

/* trail building */
.ots-build { background:var(--ots-dark); color:var(--ots-white); padding:90px 0; }
.ots-build__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.ots-build__grid img { width:100%; height:100%; object-fit:cover; border-radius:2px; }
.ots-build p { color:rgba(255,255,255,.85); }
.ots-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:64px; background:rgba(255,255,255,.08); }
.ots-stat { background:var(--ots-dark); padding:30px 26px; }
.ots-stat b { display:block; font-size:clamp(26px,3vw,38px); font-weight:900; color:var(--ots-orange); margin-bottom:8px; }
.ots-stat span { font-size:13.5px; font-weight:300; color:rgba(255,255,255,.75); line-height:1.5; display:block; }
.ots-stat a { color:inherit; }

/* builders */
.ots-crews { background:var(--ots-light); padding:90px 0; }
.ots-crews__head { max-width:640px; margin-bottom:46px; }
.ots-crews__head p { color:#4c4c4c; }
.ots-crew-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ots-crew { background:var(--ots-white); padding:30px 28px; border-radius:2px; display:flex; flex-direction:column; gap:10px; }
.ots-crew h3 { margin:0; font-size:17px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.ots-crew em { font-style:normal; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--ots-orange); }
.ots-crew p { font-size:14.5px; margin:0; color:#4c4c4c; flex:1; }
.ots-orgs { margin-top:54px; border-top:1px solid #cfcfcf; padding-top:34px; display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; }
.ots-orgs strong { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }

/* cta */
.ots-cta { background:var(--ots-black); color:var(--ots-white); padding:90px 0; }
.ots-cta__grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.ots-cta p { color:rgba(255,255,255,.8); max-width:600px; margin:0; }
.ots-cta__btns { display:flex; flex-wrap:wrap; gap:14px; }

@media (max-width:900px) {
  .ots-build__grid, .ots-cta__grid { grid-template-columns:1fr; }
  .ots-stats { grid-template-columns:repeat(2,1fr); }
  .ots-crew-grid { grid-template-columns:1fr; }
  .ots-hero__inner { padding:110px 0 50px; }
}
/* full-bleed: let the Bricks content container span the full page width */
body.page article#brx-content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---- Bricks-native compatibility (elements carry .ots- classes) ---- */
.ots-trails .brxe-heading { color: inherit; }
.brxe-section.ots-hero { display: flex; align-items: flex-end; }
.ots-trails .ots-build__grid, .ots-trails .ots-stats, .ots-trails .ots-crew-grid, .ots-trails .ots-cta__grid { display: grid; }
.ots-trails .ots-map-sec__head, .ots-trails .ots-legend, .ots-trails .ots-orgs, .ots-trails .ots-cta__btns { display: flex; }
.ots-trails .ots-crew { display: flex; }
.ots-crew .brxe-text { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ots-crew .brxe-text p { flex: 1; margin: 0; }
.ots-trails.brxe-section { margin: 0; }
.ots-trails .ots-btn, .ots-trails a.brxe-button.ots-btn { background: var(--ots-orange); color: var(--ots-black); border: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 13px 24px; border-radius: 2px; }
.ots-trails .ots-btn:hover, .ots-trails a.brxe-button.ots-btn:hover { background: var(--ots-white); color: var(--ots-black); }
.ots-trails .ots-btn--ghost, .ots-trails a.brxe-button.ots-btn--ghost { background: transparent; border: 1px solid currentColor; color: inherit; }
.ots-trails .ots-btn--ghost:hover, .ots-trails a.brxe-button.ots-btn--ghost:hover { background: var(--ots-orange); border-color: var(--ots-orange); color: var(--ots-black); }
.ots-trails .ots-hero__inner { position: relative; padding: 140px 24px 70px; width: 100%; margin-top: auto; }
.brxe-section.ots-hero { color: var(--ots-white); }
.ots-trails .ots-btn { background: var(--ots-orange) !important; color: var(--ots-black) !important; border: none !important; }
.ots-trails .ots-btn:hover { background: var(--ots-white) !important; color: var(--ots-black) !important; }
.ots-trails .ots-btn--ghost { background: transparent !important; border: 1px solid currentColor !important; color: inherit !important; }
.ots-trails .ots-btn--ghost:hover { background: var(--ots-orange) !important; border-color: var(--ots-orange) !important; color: var(--ots-black) !important; }

/* ---- Bricks layout fixes: container child sizing, legend row, tree icon ---- */
.ots-trails .brxe-container.ots-wrap { align-items: stretch; }
.ots-trails .brxe-container.ots-wrap > *:not(.brxe-button):not(.brxe-text-link) { width: 100%; }
.ots-trails .brxe-container.ots-wrap > .brxe-button, .ots-trails .brxe-container.ots-wrap > .brxe-text-link,
.ots-trails .brxe-block > .brxe-button, .ots-trails .brxe-block > .brxe-text-link { align-self: flex-start; width: auto; }
.ots-legend p { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin: 0; }
.ots-legend .ots-l-tree { content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22433%202960%2059%20164%22%3E%3Cpath%20d%3D%22M464.92%2C3051.53c-1.26-1.26-3.31-1.26-4.57%2C0l-23.91%2C23.91c-1.26%2C1.26-1.26%2C3.31%2C0%2C4.57l6.28%2C6.28c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l7.68-7.68v39.52c0%2C1.78%2C1.45%2C3.23%2C3.23%2C3.23h8.88c1.78%2C0%2C3.23-1.45%2C3.23-3.23v-39.52l7.68%2C7.68c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l6.28-6.28c1.26-1.26%2C1.26-3.31%2C0-4.57l-23.91-23.91Z%22/%3E%3Cpath%20d%3D%22M464.92%2C3022.22c-1.26-1.26-3.31-1.26-4.57%2C0l-23.91%2C23.91c-1.26%2C1.26-1.26%2C3.31%2C0%2C4.57l6.28%2C6.28c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l13.06-13.06c1.26-1.26%2C3.31-1.26%2C4.57%2C0l13.06%2C13.06c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l6.28-6.28c1.26-1.26%2C1.26-3.31%2C0-4.57l-23.91-23.91Z%22/%3E%3Cpath%20d%3D%22M464.92%2C2992.9c-1.26-1.26-3.31-1.26-4.57%2C0l-23.91%2C23.91c-1.26%2C1.26-1.26%2C3.31%2C0%2C4.57l6.28%2C6.28c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l13.06-13.06c1.26-1.26%2C3.31-1.26%2C4.57%2C0l13.06%2C13.06c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l6.28-6.28c1.26-1.26%2C1.26-3.31%2C0-4.57l-23.91-23.91Z%22/%3E%3Cpath%20d%3D%22M442.72%2C2998.35c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l13.06-13.06c1.26-1.26%2C3.31-1.26%2C4.57%2C0l13.06%2C13.06c1.26%2C1.26%2C3.31%2C1.26%2C4.57%2C0l6.28-6.28c1.26-1.26%2C1.26-3.31%2C0-4.57l-23.91-23.91c-1.26-1.26-3.31-1.26-4.57%2C0l-23.91%2C23.91c-1.26%2C1.26-1.26%2C3.31%2C0%2C4.57l6.28%2C6.28Z%22/%3E%3C/svg%3E"); width: auto; height: 24px; }

/* ---- mobile: container side padding (theme strips it at small breakpoints) ---- */
.ots-trails .brxe-container.ots-wrap { padding-left: 24px !important; padding-right: 24px !important; }
/* ---- map pan/zoom viewport ---- */
.ots-map-shell { overflow: hidden; touch-action: pan-y; }
.ots-zoom-hint { position: absolute; top: 24%; left: 5%; z-index: 6; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #8a8676; pointer-events: none;
  transition: opacity .6s; }
.ots-zoom-hint--off { opacity: 0; }
/* modal is attached to <body>, outside .ots-trails — give it its own variable scope */
.ots-modal { --ots-orange:#FF8200; --ots-dark:#212224; --ots-black:#000; --ots-cream:#EAE0C3; --ots-light:#E6E7E8; --ots-white:#fff; --ots-font:"Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; font-family: var(--ots-font); }
.ots-modal .ots-link { color: var(--ots-orange); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.ots-modal .ots-link:hover { text-decoration: underline; }

.ots-tip.ots-tip--tap { pointer-events: auto; cursor: pointer; }
@media (max-width: 640px) {
  .ots-modal { padding: 10px; }
  .ots-modal__bar { flex-wrap: wrap; row-gap: 6px; padding: 12px 46px 12px 14px; position: relative; }
  .ots-modal__bar strong { flex: 1 1 100%; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .ots-modal__x { position: absolute; top: 10px; right: 12px; }
}
.ots-trails .brxe-container.ots-wrap.ots-cta__grid { align-items: center; }
.ots-trails .ots-cta__btns { align-items: center; align-content: center; }
.ots-trails .ots-cta__btns .brxe-button { width: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .ots-trails .ots-orgs { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* orgs row: align label and links on the same baseline */
.ots-trails .ots-orgs { align-items: baseline; }
.ots-trails .ots-orgs p { margin: 0; display: inline; }
.ots-map-updated { text-align: center; font-size: 12px; color: #8a8676; margin: 14px 0 0; letter-spacing: .5px; }