/* The choices Prashand makes in the editor (cms.js, 25 Oct 2026), as visitors see them: section backgrounds, the top banner layout,
   the sections he adds, photos he puts in place of the drawings. The editor's own look is in edit.css (loaded only while editing). */
.exh .bg-white{background:#fff}
.exh .bg-tint{background:var(--ground)}
.exh .bg-accent{background:var(--yellow)}
.exh .bg-dark{background:var(--black);color:#fff}
.exh .bg-dark :is(.hm-head h2,.hm-head p,.hm-eyebrow,.hm-kick,.hm-lead,.hm-login,.hm-acc h2,.hm-checks li,.hm-join-grid h2,.hm-join-grid p,.cms-ti h2,.cms-body),
.exh .bg-dark.hm-hero h1{color:#fff}
.exh .bg-dark .hm-login a{color:var(--yellow)}
.exh .bg-dark .btn.dark{background:var(--yellow);color:var(--black)}
.exh .bg-dark .btn.line{color:#fff;border-color:#fff}
.exh .hm-facts.bg-white,.exh .hm-facts.bg-tint,.exh .hm-facts.bg-accent{color:var(--ink)}
.exh .hm-facts:is(.bg-white,.bg-tint,.bg-accent) :is(b,span){color:var(--ink)}

/* a text mark (site.js K) looks exactly like the text it wraps, whatever the page's span rules say */
.cmsk{display:inline!important;margin:0!important;padding:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;
  max-width:none!important;background:none!important;border:0!important;text-transform:inherit!important}

/* top banner: photos left, or text only */
.exh .lay-left .hm-hero-grid>:first-child{order:2}
.exh .lay-text .hm-shelf{display:none}
.exh .lay-text .hm-hero-grid{grid-template-columns:1fr;max-width:820px}

/* a photo in place of one of the three hub drawings */
.exh .cms-svg{display:block}
.exh .cms-svg svg{width:100%;height:auto;display:block}
.exh .cms-hubimg{display:block;width:100%;aspect-ratio:320/170;object-fit:cover;border-radius:10px}

/* sections Prashand adds */
.exh .cms-ti{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.exh .cms-ti h2{font:800 clamp(30px,4vw,46px)/1.04 var(--cond);margin:10px 0 14px;color:var(--ink)}
.exh .cms-body{font:500 18px/1.55 var(--body);color:var(--muted);margin:0 0 24px;max-width:56ch}
.exh .cms-ti-pic{border-radius:16px;overflow:hidden;background:var(--yellow-s);aspect-ratio:4/3;display:grid;place-items:center}
.exh .cms-ti-pic{position:relative}
.exh .cms-ti-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;padding:18px;box-sizing:border-box}
.exh .cms-three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){
  .exh .cms-ti{grid-template-columns:1fr;gap:28px}
  .exh .cms-three{grid-template-columns:1fr}
  .exh .lay-left .hm-hero-grid>:first-child{order:0}
}

/* only while editing: a hidden section and a hidden product stay visible, marked */
.cms-hidden{padding:14px 0;background:repeating-linear-gradient(45deg,#f1efe9 0 10px,#e9e6de 10px 20px);border-block:1px dashed #b9b4a8}
.cms-hidden .hm-wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;font:600 15px/1.3 var(--body);color:#454c55}
.cms-hidden button{font:600 14px/1 var(--body);padding:10px 14px;border-radius:8px;border:1px solid #14181d;background:#fff;cursor:pointer}
.cms-hid{position:absolute;left:8px;bottom:8px;background:#14181d;color:#fff;font:600 12px/1 var(--body);padding:6px 8px;border-radius:6px}

/* brands we carry (26 Oct): a tile per brand, the name as a wordmark until a logo is put in */
.exh .cms-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.exh .cms-brand{display:grid;place-items:center;min-height:120px;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);text-align:center}
.exh .cms-brand b{font:800 26px/1.05 var(--cond);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.exh .cms-brand img{max-width:100%;max-height:72px;object-fit:contain}
/* who we sell to (26 Oct): icon or photo, name, one line */
.exh .cms-sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.exh .cms-sector{padding:22px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.exh .cms-sector-pic{margin-bottom:14px}
.exh .cms-sector-pic img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
.exh .cms-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--black)}
.exh .cms-ico svg{width:28px;height:28px;fill:none;stroke:var(--yellow);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.exh .cms-sector h3{font:800 24px/1.1 var(--cond);margin:0 0 6px;color:var(--ink);text-transform:uppercase}
.exh .cms-sector p{font:500 16px/1.45 var(--body);color:var(--muted);margin:0}
.exh .bg-dark .cms-brand,.exh .bg-dark .cms-sector{border-color:transparent}
@media (max-width:860px){.exh .cms-brands{grid-template-columns:repeat(2,1fr)}.exh .cms-sectors{grid-template-columns:1fr}.exh .cms-brand b{font-size:22px}}

/* only while editing: the "+ Add a section here" line between sections */
.cms-add{position:relative;height:0;z-index:5;display:flex;justify-content:flex-start;padding-left:max(16px,calc((100vw - 1152px) / 2))}   /* on the left: the section bar sits on the right */
.cms-add button{transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;height:auto;min-height:46px;line-height:1.2;white-space:nowrap;font:700 15px/1 Barlow,"Segoe UI",sans-serif;color:#fff;background:#2f6fde;border:3px solid #fff;border-radius:999px;
  padding:12px 20px;cursor:pointer;box-shadow:0 8px 20px -8px rgba(20,24,29,.5)}
.cms-add button:hover,.cms-add button:focus-visible{background:#14181d;outline:none}

/* the A-brands strip in place of the numbers band (26 Oct): packshots on white cards, scrolling slowly; still for reduced motion and while editing */
.exh .cms-ab{padding:44px 0 48px;overflow:hidden}
.exh .cms-ab-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:24px}
.exh .cms-ab-head h2{font:800 clamp(24px,3vw,34px)/1.05 var(--cond);margin:0;color:#fff;text-transform:uppercase}
.exh .cms-ab .hm-eyebrow{color:var(--yellow)}
.exh .cms-ab-track{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.exh .cms-ab-row{display:flex;gap:16px;width:max-content;animation:cmsab 60s linear infinite}
.exh .cms-ab-track:hover .cms-ab-row{animation-play-state:paused}
.exh .cms-ab-item{margin:0;width:150px;height:150px;flex:none;display:grid;place-items:center;background:#fff;border-radius:14px;padding:14px;box-sizing:border-box}
.exh .cms-ab-item img{width:122px;height:122px;object-fit:contain;display:block}
@keyframes cmsab{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.exh .cms-ab-track{mask-image:none}.exh .cms-ab-row{animation:none;flex-wrap:wrap;width:auto;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}.exh .cms-ab-item[aria-hidden]{display:none}}
body.gx-edit .exh .cms-ab-row{animation:none;flex-wrap:wrap;width:auto;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
body.gx-edit .exh .cms-ab-track{mask-image:none}
body.gx-edit .exh .cms-ab-item[aria-hidden]{display:none}
.exh .cms-ab:is(.bg-white,.bg-tint,.bg-accent) .cms-ab-head h2{color:var(--ink)}
.exh .cms-ab:is(.bg-white,.bg-tint) .cms-ab-item{border:1px solid var(--line)}
@media (max-width:860px){.exh .cms-ab-item{width:116px;height:116px;padding:10px}.exh .cms-ab-item img{width:96px;height:96px}}
.exh .cms-ab-empty{background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.45);cursor:pointer}
.exh .cms-ab-empty span{font:700 15px/1.2 var(--body);color:#fff;text-align:center}
.exh .cms-ab-credit{margin:16px 0 0;font:500 12px/1.4 var(--body);color:rgba(255,255,255,.6)}
.exh .cms-ab:is(.bg-white,.bg-tint,.bg-accent) .cms-ab-credit{color:var(--muted)}