/* PROTOTYPE: recreation of bobcat.com chrome + tokens. Header, breadcrumb, CTA band and footer are
   rebuilt from computed styles and bounding boxes measured on the live site at 1280px (2026-09-24). */
@font-face { font-family: "BobcatMain-Roman"; src: url("fonts/HelveticaNeue.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "BobcatMain-BoldCondensed"; src: url("fonts/HelveticaNeue-CondensedBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "BobcatIcons"; src: url("fonts/BobcatIcons.36245b2.woff2") format("woff2"); font-display: block; }

:root {
  --orange: #FF3600;
  --orange-dark: #E03000;
  --ink: #212529;
  --black: #000000;
  --gray-900: #333333;
  --gray-700: #555B61;
  --gray-600: #6C757D;
  --gray-500: #777777;
  --gray-400: #ADB5BD;
  --gray-300: #D5DEE3;
  --gray-200: #E9ECEF;
  --gray-150: #F1F1F1;
  --gray-100: #F4F5F6;
  --white: #FFFFFF;
  --body: "BobcatMain-Roman", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cond: "BobcatMain-BoldCondensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --shadow-header: rgba(0,0,0,.15) 0 1.6px 7.2px 1.6px;
  --shadow-card: 0 .5rem 1rem rgba(0,0,0,.15);
  --container: 1140px;
  --header-h: 121px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--white); }
h1, h2, h3, h4, h5 { font-family: var(--cond); font-weight: 500; margin: 0; line-height: 1.2; }
h1 { font-size: 56px; line-height: 84px; }
h2 { font-size: 40px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; line-height: 36px; }
p { margin: 0 0 16px; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 10px; }
.cond { font-family: var(--cond); }
.upper { text-transform: uppercase; }
.muted { color: var(--gray-600); }
.small { font-size: 14px; line-height: 20px; }
.hidden { display: none !important; }

/* Icon font (glyph codes read from the live site) */
.bi { font-family: "BobcatIcons"; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; speak: never; }
.bi-settings::before { content: "\f14a"; }
.bi-inventory-search::before { content: "\f128"; }
.bi-pin::before { content: "\f13e"; }
.bi-globe::before { content: "\f122"; }
.bi-search::before { content: "\f147"; }
.bi-arrow-right::before { content: "\f103"; }
.bi-sort-down::before { content: "\f153"; }
.bi-chevron-right::before { content: "\f10d"; }
.bi-facebook::before { content: "\f14d"; }
.bi-instagram::before { content: "\f14e"; }
.bi-tiktok::before { content: "\f150"; }
.bi-youtube::before { content: "\f152"; }
.bi-linkedin::before { content: "\f14f"; }
.bi-twitter::before { content: "\f151"; }
.bi-start-quote::before { content: "\f156"; }
.bi-end-quote::before { content: "\f117"; }
.bi-machine-iq::before { content: "\f131"; }
.bi-engine::before { content: "\f118"; }
.bi-maintenance::before { content: "\f133"; }
.bi-fault-code::before { content: "\f11e"; }
.bi-attachments::before { content: "\f104"; }
.bi-loader::before { content: "\f12f"; }
.bi-location::before { content: "\f130"; }
.bi-share::before { content: "\f14b"; }
.bi-email::before { content: "\f116"; }
.bi-phone::before { content: "\f13d"; }
.bi-info::before { content: "\f125"; }
.bi-check::before { content: "\f157"; }
.bi-warn::before { content: "\f160"; }
.bi-external::before { content: "\f11c"; }
.bi-comment::before { content: "\f10f"; }
.bi-megaphone::before { content: "\f136"; }
.bi-user::before { content: "\f15e"; }
.bi-users::before { content: "\f101"; }
.bi-play::before { content: "\f13f"; }
.bi-video::before { content: "\f15f"; }
.bi-close::before { content: "\f10e"; }
.bi-plus::before { content: "\f140"; }
.bi-list::before { content: "\f12e"; }
.bi-filter::before { content: "\f121"; }
.bi-send::before { content: "\f148"; }
.bi-notifications::before { content: "\f139"; }
.bi-home::before { content: "\f123"; }
.bi-performance::before { content: "\f13c"; }
.bi-manual::before { content: "\f134"; }
.bi-reload::before { content: "\f144"; }
.bi-show::before { content: "\f14c"; }

/* Buttons (btn-primary measured: condensed 16/22, radius 2px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cond); font-size: 16px; line-height: 22px; padding: 8px 16px; border-radius: 2px; border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-outline { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-dark:hover { background: #000; }
.btn-sm { padding: 6px 14px; font-size: 14px; line-height: 20px; }
.btn-lg { padding: 14px 32px; font-size: 18px; }
.btn-ghost { background: transparent; border-color: var(--white); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.15); }
.section-text .btn { padding: 10px 24px; }

/* ===== Header (fixed on the live site; sticky here, same 121px) ===== */
.bc-header { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: var(--shadow-header); }
.bc-topbar { background: var(--orange); color: var(--white); height: 57px; }
.bc-topbar .container { display: flex; align-items: center; height: 100%; }
.bc-burger { display: none; background: none; border: 0; color: var(--white); font-size: 22px; padding: 0 12px 0 4px; height: 40px; }
.bc-logo-col { width: 170px; flex: 0 0 170px; display: flex; align-items: center; padding-left: 14px; }
.bc-logo { display: flex; margin-top: -8px; }
.bc-logo img { height: 38px; width: 143px; max-width: none; }
.bc-util { display: flex; align-items: center; flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; }
.bc-util li { display: flex; align-items: center; margin: 0 4px; color: var(--white); }
.bc-util li .bi { font-size: 14px; }
.bc-util a { color: var(--white); font-family: var(--cond); font-size: 18px; line-height: 16px; padding: 4px 8px; white-space: nowrap; }
.bc-util a:hover { text-decoration: underline; }
.bc-search-col { width: 309px; flex: 0 0 309px; margin-left: auto; display: flex; }
.bc-search { display: flex; align-items: center; justify-content: space-between; background: var(--white); border: 1px solid var(--gray-600); border-radius: 2px; height: 40px; width: 100%; }
.bc-search .ico { display: flex; align-items: center; padding-left: 8px; margin-left: 4px; color: rgba(0,0,0,.5); font-size: 16px; }
.bc-search input { flex: 1; min-width: 0; border: 0; outline: 0; height: 38px; padding: 6px 12px; font-size: 16px; color: var(--gray-900); background: transparent; }
.bc-search input::placeholder { color: rgba(0,0,0,.5); }
.bc-search button { background: none; border: 0; padding: 0 8px 0 0; color: var(--gray-900); font-size: 16px; display: flex; align-items: center; }

.bc-nav { height: 64px; background: var(--white); }
.bc-nav .container { display: flex; justify-content: center; height: 100%; padding: 0; }
.bc-nav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; height: 100%; }
.bc-nav li { position: relative; display: flex; align-items: center; height: 100%; color: var(--black); transition: background .2s; }
.bc-nav li > button { display: flex; align-items: center; height: 100%; padding: 16px; background: none; border: 0; color: inherit; }
.bc-nav li > button span { font-family: var(--cond); font-size: 16px; line-height: 24px; text-transform: uppercase; padding: 4px 8px 4px 0; white-space: nowrap; }
.bc-nav li > button .bi { font-size: 9px; transition: transform .2s; }
.bc-nav li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--orange); transform: scaleX(0); transition: .2s; }
.bc-nav li.active::after { transform: scaleX(1); }
.bc-nav li:hover > button, .bc-nav li.opened > button { color: var(--orange); }
.bc-nav li.opened { background: var(--gray-150); }
.bc-nav li.opened > button .bi { transform: rotate(180deg); }

/* Mega list (first column only; measured 282px wide, full height, white, right border) */
.bc-nav .bc-mega { position: absolute; top: 64px; left: -10px; width: 282px; height: auto; background: var(--white); border-right: 1px solid var(--gray-300); list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; align-items: stretch; max-height: calc(100vh - var(--header-h)); overflow: auto; text-align: left; box-shadow: 0 8px 16px rgba(0,0,0,.15); }
.bc-nav li.opened .bc-mega { display: flex; }
.bc-mega li { display: flex; align-items: center; padding: 12px 16px; height: auto; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 24px; cursor: pointer; }
.bc-mega li::after { display: none; }
.bc-mega li:hover { background: var(--gray-100); }
.bc-mega li.view-all { padding: 16px; }
.bc-mega li.view-all a { font-family: var(--cond); color: var(--orange); display: inline-flex; align-items: center; }
.bc-mega li.view-all a .bi { font-size: 11px; margin-left: 4px; }
.bc-mega li .row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bc-mega li .right { display: flex; align-items: center; }
.bc-mega li .right .bi { font-size: 9px; margin-left: 8px; transform: rotate(-90deg); }
.bc-mega .new { font-family: var(--cond); font-size: 14px; line-height: 16px; color: var(--orange); background: var(--white); border: 1px solid var(--orange); padding: 2px 6px; margin: 0 8px; border-radius: 2px; }
.bc-overlay { position: fixed; inset: 0; background: rgba(51,51,51,.65); z-index: 40; display: none; }
.bc-overlay.on { display: block; }

@media (max-width: 991px) {
  .bc-nav { display: none; }
  .bc-burger { display: inline-flex; align-items: center; }
  .bc-logo-col { width: auto; flex: 0 0 auto; padding-left: 0; }
  .bc-util li.region { display: none; }
  .bc-search-col { display: none; }
  :root { --header-h: 57px; }
}
@media (max-width: 767px) { .bc-util { display: none; } .bc-logo-col { flex: 1; justify-content: center; } }

/* Breadcrumb (condensed 14px bold; links orange underlined; orange triangle separators) */
.bc-crumbs-wrap { margin-top: 15px; }
.bc-crumbs { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-family: var(--cond); font-size: 14px; line-height: 21px; }
.bc-crumbs li { display: flex; align-items: center; color: var(--ink); }
.bc-crumbs li + li { padding-left: 8px; }
.bc-crumbs li + li::before { content: ""; display: block; width: 0; height: 0; border-left: 6px solid var(--orange); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: 8px; }
.bc-crumbs a { color: var(--orange); text-decoration: underline; }
.bc-crumbs .current { color: var(--gray-900); }

/* Hero (site: full-bleed 480px, 16px below breadcrumb) */
.bc-hero { position: relative; min-height: 480px; margin-top: 16px; background-size: cover; background-position: center; color: var(--white); display: flex; align-items: center; }
.bc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 100%); }
.bc-hero .container { position: relative; width: 100%; }
.bc-hero h1 { color: var(--white); text-transform: uppercase; font-size: 40px; line-height: 1.1; margin-bottom: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.bc-hero p { font-size: 16px; max-width: 560px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bc-hero .hero-inner { max-width: 640px; padding: 48px 0; }

/* Section text (site pattern: py-5) */
.section-text { padding: 48px 0; }
.section-text h1 { margin-bottom: 8px; }
.section-text p { max-width: 900px; }

/* Cards (product-listing-item) */
.card { background: var(--white); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: box-shadow .2s, transform .2s; position: relative; }
.card.with-hover:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card img { width: 100%; aspect-ratio: 1.5; object-fit: cover; background: var(--gray-200); }
.card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.card-title { font-family: var(--cond); font-size: 24px; line-height: 32px; color: var(--ink); margin: 0; }
.card-text { font-size: 16px; line-height: 24px; color: var(--ink); }
.card .stretched { position: absolute; inset: 0; z-index: 1; }
.card .badges { display: flex; gap: 6px; flex-wrap: wrap; position: absolute; top: 10px; left: 10px; z-index: 2; }
.badge { font-family: var(--cond); font-size: 13px; line-height: 18px; padding: 3px 8px; border-radius: 2px; background: var(--ink); color: var(--white); text-transform: uppercase; letter-spacing: .02em; }
.badge.orange { background: var(--orange); }
.badge.white { background: var(--white); color: var(--ink); }
.badge.video::before { content: "▶ "; font-size: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

/* Horizontal rail */
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 16px; scrollbar-width: thin; }
.rail > * { flex: 0 0 300px; scroll-snap-align: start; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.rail-head h3 { font-size: 30px; }
.rail-head .why { font-size: 14px; color: var(--gray-600); }
.rail-head .why b { color: var(--orange); font-family: var(--cond); font-weight: 500; }

/* Facets (listing sidebar) */
.listing { display: grid; grid-template-columns: 270px 1fr; gap: 30px; padding: 24px 0 48px; }
@media (max-width: 900px) { .listing { grid-template-columns: 1fr; } }
.facets-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--white); border: 1px solid var(--gray-300); border-radius: 2px; padding: 8px; font-size: 16px; }
.facets-toggle b { padding-left: 8px; }
.facets-content { padding: 16px; border: 1px solid var(--gray-300); border-top: 0; display: grid; gap: 6px; }
.facet { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.facet input { accent-color: var(--orange); width: 16px; height: 16px; }
.facet .count { color: var(--gray-600); }
.facets { margin-bottom: 12px; }
.listing-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.listing-tools .sort { display: inline-flex; align-items: center; gap: 8px; }
.listing-tools select { border: 1px solid var(--gray-600); background: var(--white); border-radius: 2px; padding: 6px 12px; }

/* Chips (tune-it) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--gray-400); background: var(--white); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-family: var(--cond); font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip.orange[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }

/* Bands */
.band-dark { background: var(--ink); color: var(--white); padding: 48px 0; }
.band-dark h2, .band-dark h3 { color: var(--white); }
.band-gray { background: var(--gray-100); padding: 48px 0; }
.band-orange { background: var(--orange); color: var(--white); padding: 40px 0; }
.band-orange h2, .band-orange h3 { color: var(--white); }

/* ===== CTA band (site: promotional content over photo, 266px, py-4) ===== */
.cta-story { position: relative; padding: 24px 15px; background: var(--black); background-size: cover; background-position: center; color: var(--white); text-align: center; min-height: 266px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cta-story::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cta-story .container { position: relative; padding: 0; }
.cta-story h2 { font-size: 44px; line-height: 66px; color: var(--white); margin: 0 0 16px; }
.cta-story p { margin: 0 0 16px; color: var(--white); }
.cta-story .btn { margin: 16px 0; }

/* ===== Footer (site: dark band 440px + light legal band 264px) ===== */
.bc-footer { margin-top: 0; font-size: 16px; }
.bc-footer .dark { background: var(--gray-900); color: var(--white); }
.bc-footer .dark .container, .bc-footer .light .container { max-width: 1150px; padding: 0; }
.bc-footer .dark .container { display: flex; flex-wrap: wrap; padding-top: 24px; }
.bc-footer .dark .social a .bi { font-size: 24px; }
.bc-footer .brandcol { flex: 0 0 25%; max-width: 25%; padding: 16px 15px; }
.bc-footer .brandcol img { height: 24px; width: auto; margin-bottom: 16px; }
.bc-footer .social { display: flex; align-items: center; gap: 16px; height: 31px; }
.bc-footer .social a { color: var(--white); font-size: 24px; line-height: 1; }
.bc-footer .social a:hover { color: var(--orange); text-decoration: none; }
.bc-footer .linkcols { flex: 0 0 75%; max-width: 75%; display: flex; flex-wrap: wrap; padding: 16px 0; }
.bc-footer .col { flex: 0 0 25%; max-width: 25%; padding: 0 15px; margin-bottom: 24px; }
.bc-footer h3 { font-family: var(--cond); font-size: 16px; line-height: 24px; text-transform: uppercase; color: var(--white); margin: 0 0 16px; }
.bc-footer ul { list-style: none; margin: 0; padding: 0; }
.bc-footer li { margin: 0 0 16px; }
.bc-footer .dark a { color: var(--white); font-family: var(--cond); font-size: 16px; line-height: 24px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.bc-footer .dark a:hover { text-decoration: underline; }
.bc-footer .dark a .bi { font-size: 16px; }
.bc-footer .light .container { display: flex; flex-wrap: wrap; }
.bc-footer .doosan { flex: 0 0 249px; max-width: 249px; padding: 0 15px; text-align: center; }
.bc-footer .doosan img { height: 70px; width: auto; padding: 16px 0; box-sizing: content-box; margin: 0 auto; }
.bc-footer .legal { flex: 1; min-width: 0; padding: 16px 15px; font-size: 14px; line-height: 21px; color: var(--ink); }
.bc-footer .legal p { margin: 0 0 16px; }
.bc-footer .legal .proto { color: var(--gray-600); }
@media (max-width: 991px) {
  .bc-footer .brandcol, .bc-footer .linkcols { flex: 0 0 100%; max-width: 100%; }
  .bc-footer .col { flex: 0 0 50%; max-width: 50%; }
  .bc-footer .doosan { flex: 0 0 100%; max-width: 100%; }
}

/* Story modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.modal { background: var(--white); max-width: 860px; width: 100%; border-radius: 2px; overflow: hidden; position: relative; }
.modal img.hero { width: 100%; aspect-ratio: 2; object-fit: cover; }
.modal .body { padding: 28px 32px 36px; }
.modal .close { position: absolute; top: 10px; right: 10px; background: var(--ink); color: var(--white); border: 0; width: 36px; height: 36px; border-radius: 2px; font-size: 20px; }
.modal h2 { font-size: 34px; margin-bottom: 6px; }
.modal .meta { color: var(--gray-600); font-size: 14px; margin-bottom: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.modal blockquote { margin: 20px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--orange); font-family: var(--cond); font-size: 24px; line-height: 32px; }
.modal .tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.tag { font-size: 13px; background: var(--gray-100); border: 1px solid var(--gray-300); padding: 2px 8px; border-radius: 2px; }

/* ===== Story article page (site: header/text in col-sm-8 col-lg-7 = 665px, video/quotes col-sm-8 = 760px) ===== */
.art-col { max-width: 665px; margin: 0 auto; }
.art-wide { max-width: 760px; margin: 0 auto; }
.art-head { padding-top: 24px; padding-bottom: 8px; }
.art-head h1 { font-size: 56px; line-height: 84px; margin-bottom: 24px; }
.art-date { font-size: 14px; line-height: 21px; color: var(--gray-900); margin-bottom: 24px; }
.art-head ul { margin: 0 0 16px; padding-left: 20px; }
.art-head li { margin-bottom: 4px; }
.art-share { display: flex; gap: 8px; margin-bottom: 24px; }
.art-share a { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; color: var(--white); font-size: 14px; }
.art-share a:hover { text-decoration: none; opacity: .85; }
.art-body h2 { font-size: 44px; line-height: 66px; margin: 8px 0 16px; }
.art-body p { margin-bottom: 16px; }
.art-video { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; margin: 16px auto 32px; cursor: pointer; }
.art-video::after { content: "\f13f"; font-family: "BobcatIcons"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); font-size: 72px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.art-video.playing::after { display: none; }
.art-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bq { max-width: 760px; margin: 24px auto 40px; text-align: center; padding: 0 16px; }
.bq .bi { font-size: 42px; color: var(--orange); display: block; }
.bq .bi-end-quote { margin-top: 8px; }
.bq h4 { font-size: 24px; line-height: 36px; margin: 16px 0 16px; }
.bq h5 { font-size: 18px; line-height: 27px; margin: 0; }
.bq p { margin: 0; font-size: 16px; }
.more-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid #ccc; margin: 0 0 32px; padding-bottom: 8px; gap: 16px; }
.more-head h2 { font-size: 44px; line-height: 66px; margin: 0; }
.more-head a { font-family: var(--cond); font-size: 18px; white-space: nowrap; }
@media (max-width: 767px) { .art-head h1 { font-size: 36px; line-height: 44px; } .art-body h2, .more-head h2 { font-size: 30px; line-height: 40px; } }

/* Prototype-only controls (deliberately NOT bobcat-styled so they read as scaffolding) */
.sim { display: inline-block; vertical-align: middle; background: #1F2A36; color: #F0B84A; font: 500 10px/14px ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.proto-panel { background: #1F2A36; color: #E6EDF3; border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.proto-panel .lbl { color: #8FB0C8; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; margin-bottom: 6px; }
.proto-panel select, .proto-panel button { font-family: inherit; font-size: 12px; background: #0F1720; color: #E6EDF3; border: 1px solid #3A4A5A; border-radius: 4px; padding: 4px 8px; }
.proto-panel button.on { background: #2E7D32; border-color: #2E7D32; }
.proto-panel .sig { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.proto-panel .sig span { background: #0F1720; border: 1px solid #3A4A5A; border-radius: 4px; padding: 2px 6px; }
.proto-panel .sig span b { color: #F0B84A; font-weight: 500; }
.proto-float { position: fixed; top: 132px; right: 16px; z-index: 60; width: 300px; }
@media (max-width: 900px) { .proto-float { position: static; width: auto; margin: 12px 15px; } }

/* Switcher */
.proto-switcher { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200; background: #111; color: #fff; border-radius: 999px; display: flex; align-items: center; gap: 4px; padding: 6px 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-family: ui-monospace, Consolas, monospace; font-size: 13px; border: 1px solid #444; }
.proto-switcher button { background: transparent; color: #fff; border: 0; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; }
.proto-switcher button:hover { background: #333; }
.proto-switcher .lab { padding: 0 10px; white-space: nowrap; }
.proto-switcher .lab b { color: #F0B84A; font-weight: 500; }
.proto-switcher .dots { display: flex; gap: 5px; padding: 0 8px; }
.proto-switcher .dots i { width: 7px; height: 7px; border-radius: 50%; background: #555; display: block; }
.proto-switcher .dots i.on { background: #F0B84A; }
.proto-switcher .dots i { cursor: pointer; }
.proto-switcher .dots .sep { width: 1px; height: 13px; background: #666; margin: -3px 4px 0; display: block; }

/* Utilities */
.flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .wrap { flex-wrap: wrap; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 48px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 48px; }
.py-4 { padding: 24px 0; } .py-5 { padding: 48px 0; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }