/* ===== Bloom Skip Bins · Mini skip hire ("The tape measure") ===== */
.mk{
  --forest:#1F3B26; --forest-2:#2C5236; --forest-ink:#142A1B;
  --yellow:#F5C400; --yellow-ink:#7A6100;
  --cream:#FAF6EC; --cream-2:#F1EBDC; --paper:#FFFDF7;
  --concrete:#D8D4C8; --concrete-2:#C9C4B5;
  --char:#2B2B2B; --stone:#57544B;
  --line:rgba(31,59,38,.16); --line-dark:rgba(250,246,236,.18);
  --f-head:"Poppins",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:8px;
  /* tape measure pattern */
  --tape:
    repeating-linear-gradient(90deg, var(--char) 0 1.5px, transparent 1.5px 100%) 0 100%/10px 7px repeat-x,
    repeating-linear-gradient(90deg, var(--char) 0 2px, transparent 2px 100%) 0 100%/50px 13px repeat-x,
    var(--yellow);
  display:block; padding-top:100px; background:var(--cream); color:var(--char);
  font:400 1rem/1.65 var(--f-body); overflow-x:clip; -webkit-font-smoothing:antialiased;
}
.mk *,.mk *::before,.mk *::after{box-sizing:border-box}
.mk img{display:block; max-width:100%; height:auto}
.mk h1,.mk h2,.mk h3{font-family:var(--f-head); margin:0; text-wrap:balance}
:where(.mk) p{margin:0}
:where(.mk) a{color:inherit}
.mk :focus-visible{outline:3px solid var(--forest); outline-offset:3px; border-radius:4px}
.mk .is-dark :focus-visible{outline-color:var(--yellow)}
.mk section{scroll-margin-top:110px}
.mk-wrap{width:min(100% - 32px, 1240px); margin-inline:auto}
.mk-label{display:inline-flex; align-items:center; gap:10px; font:600 .75rem/1.2 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--forest)}
.mk-label::before{content:""; width:26px; height:10px; background:var(--tape); border-radius:2px}
.is-dark .mk-label{color:var(--yellow)}
.mk-h2{font-size:clamp(1.85rem,4.4vw,3.1rem); font-weight:800; line-height:1.06; letter-spacing:-.02em; color:var(--forest)}
.is-dark .mk-h2{color:var(--cream)}
.mk-lede{font-size:1.0625rem; color:var(--stone); max-width:58ch}
.is-dark .mk-lede{color:rgba(250,246,236,.82)}
.tbc{background:rgba(245,196,0,.3); outline:1px dashed var(--yellow-ink); outline-offset:1px; border-radius:2px; padding:0 .15em}
.is-dark .tbc{background:rgba(245,196,0,.16); outline-color:var(--yellow)}
.mk-unit{font-family:var(--f-mono); font-weight:600}

.mk-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:6px; font:700 1rem/1 var(--f-body); text-decoration:none; border:2px solid transparent; transition:transform .2s ease; white-space:nowrap}
.mk-btn svg{width:18px; height:18px; flex:none}
.mk-btn:hover{transform:translateY(-2px)}
.mk-btn--yellow{background:var(--yellow); color:var(--char)}
.mk-btn--forest{background:var(--forest); color:var(--cream)}
.mk-btn--line{border-color:var(--forest); color:var(--forest)}
.mk-btn--ghost{border-color:rgba(250,246,236,.6); color:var(--cream)}
.mk-actions{display:flex; flex-wrap:wrap; gap:10px}

/* ===== 1. Hero ===== */
.mk-hero{padding:24px 0 80px}
.mk-crumbs ol{list-style:none; margin:0 0 22px; padding:0; display:flex; gap:8px; font:500 .8125rem/1.4 var(--f-mono); color:var(--stone)}
.mk-crumbs li+li::before{content:"/"; margin-right:8px; opacity:.5}
.mk-crumbs a{text-decoration:none; border-bottom:1px solid var(--line)}
.mk-crumbs [aria-current]{color:var(--forest); font-weight:700}
.mk-hero__grid{display:grid; gap:40px}
.mk-h1{margin-top:16px !important; font-size:clamp(2.4rem,7vw,4.9rem); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--forest)}
.mk-h1 span{display:block; color:var(--char)}
.mk-hero__lede{margin-top:22px; font-size:1.125rem; color:var(--stone); max-width:48ch}
.mk-hero .mk-actions{margin-top:28px}
.mk-hero__note{margin-top:18px; font-size:.875rem; color:var(--stone)}
.mk-read{margin:30px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.mk-read div{background:var(--paper); padding:14px 16px}
.mk-read dt{font:600 .68rem/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stone)}
.mk-read dd{margin:4px 0 0; font:800 1.375rem/1.1 var(--f-head); color:var(--forest)}
.mk-read dd small{font:600 .8125rem var(--f-mono); color:var(--stone); margin-left:2px}
.mk-hero__media{position:relative; margin:0}
.mk-hero__photo{border-radius:var(--r); overflow:hidden; background:var(--concrete)}
.mk-hero__photo img{width:100%; aspect-ratio:4/3; object-fit:cover}
.mk-hero__tape{position:absolute; left:-10px; right:22%; bottom:-18px; height:44px; background:var(--tape); border-radius:4px 2px 2px 4px; box-shadow:0 14px 26px -14px rgba(0,0,0,.45); transform-origin:left center; display:flex; align-items:center; padding-left:18px; font:700 .78rem/1 var(--f-mono); letter-spacing:.08em; color:var(--char)}
.mk-hero__tape::after{content:""; position:absolute; right:-14px; top:-4px; bottom:-4px; width:16px; background:#2B2B2B; border-radius:2px 4px 4px 2px}
.mk-hero__tag{position:absolute; top:16px; right:16px; background:var(--forest); color:var(--cream); font:600 .72rem/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:9px 12px; border-radius:4px}
.mk-hero__tag b{color:var(--yellow)}
.mk.js .mk-hero__tape{transform:scaleX(.08); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.mk.js.is-ready .mk-hero__tape{transform:none}
@media (min-width:600px){ .mk-read{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){
  .mk-hero{padding:32px 0 120px}
  .mk-hero__grid{grid-template-columns:5fr 6fr; gap:64px; align-items:center}
  .mk-hero__photo img{aspect-ratio:5/4}
}

/* ===== 2. The two minis ===== */
.mk-pair{padding:96px 0; background:var(--paper); border-block:1px solid var(--line)}
.mk-pair__head{display:grid; gap:18px; margin-bottom:40px}
.mk-pair__head .mk-h2{margin-top:14px}
.mk-cards{display:grid; gap:20px}
.mk-card{background:var(--cream); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.mk-card__photo{margin:0; position:relative}
.mk-card__photo img{width:100%; aspect-ratio:4/3; object-fit:cover}
.mk-card__badge{position:absolute; left:16px; bottom:16px; font:800 1.75rem/1 var(--f-head); background:var(--yellow); color:var(--char); padding:10px 14px; border-radius:6px}
.mk-card__badge small{font:600 .7rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; margin-left:6px; vertical-align:middle}
.mk-card__body{padding:24px; display:flex; flex-direction:column; gap:18px; flex:1}
.mk-card h3{font-size:1.375rem; font-weight:800; color:var(--forest)}
.mk-card__sub{color:var(--stone); margin-top:4px}
.mk-spec{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px}
.mk-spec dt{font:600 .68rem/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stone)}
.mk-spec dd{margin:3px 0 0; font-weight:700; color:var(--char)}
.mk-load{display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:var(--r); background:var(--cream-2)}
.mk-load svg{width:56px; height:44px; flex:none; color:var(--forest)}
.mk-load b{display:block; color:var(--forest)}
.mk-load p{font-size:.9375rem; color:var(--stone)}
.mk-card .mk-btn{align-self:flex-start; margin-top:auto}
.mk-scale{margin-top:36px; padding:24px 20px 20px; border-radius:12px; background:var(--cream); border:1px solid var(--line)}
.mk-scale__title{font:600 .72rem/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:16px}
.mk-scale__track{position:relative; height:26px; background:var(--tape); border-radius:3px}
.mk-scale__nums{position:relative; height:18px; margin-top:6px; font:600 .72rem/1 var(--f-mono); color:var(--stone)}
.mk-scale__nums span{position:absolute; transform:translateX(-50%)}
.mk-scale__nums span:first-child{transform:none}
.mk-bar{position:relative; height:34px; margin-top:12px; border-radius:4px; background:var(--forest); color:var(--cream); display:flex; align-items:center; padding:0 12px; font:700 .8125rem/1 var(--f-body); white-space:nowrap}
.mk-bar--3{background:var(--forest-2)}
.mk-bar b{color:var(--yellow); margin-left:auto; font-family:var(--f-mono)}
@media (min-width:860px){
  .mk-pair{padding:136px 0}
  .mk-pair__head{grid-template-columns:7fr 5fr; align-items:end}
  .mk-cards{grid-template-columns:1fr 1fr; gap:28px}
}

/* ===== 3. Fit check (signature) ===== */
.mk-fit{padding:96px 0; background:var(--forest); color:var(--cream)}
.mk-fit__grid{display:grid; gap:40px}
.mk-fit .mk-h2{margin:14px 0 18px}
.mk-need{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px}
.mk-need li{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line-dark); font-size:.9375rem}
.mk-need li:last-child{border-bottom:1px solid var(--line-dark)}
.mk-need b{font-family:var(--f-mono); color:var(--yellow); white-space:nowrap}
.mk-tool{background:var(--paper); color:var(--char); border-radius:16px; padding:20px; display:grid; gap:20px}
.mk-tool__controls{display:grid; gap:14px}
.mk-field label{display:block; font:600 .72rem/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:8px}
.mk-step{display:grid; grid-template-columns:48px 1fr 48px; border:2px solid var(--forest); border-radius:8px; overflow:hidden; background:#fff}
.mk-step button{border:0; background:var(--cream-2); color:var(--forest); font:700 1.375rem/1 var(--f-body); cursor:pointer; min-height:52px}
.mk-step button:hover{background:var(--yellow)}
.mk-step input{min-width:0; border:0; text-align:center; font:800 1.375rem/1 var(--f-head); color:var(--forest); background:#fff; -moz-appearance:textfield}
.mk-step input::-webkit-outer-spin-button,.mk-step input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mk-step input:focus-visible{outline:3px solid var(--yellow); outline-offset:-3px}
.mk-show{border:0; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap}
.mk-show legend{font:600 .72rem/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; padding:0}
.mk-show label{position:relative; cursor:pointer}
.mk-show input{position:absolute; opacity:0; width:1px; height:1px}
.mk-show span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:2px solid var(--forest); font:700 .9375rem/1 var(--f-body); color:var(--forest)}
.mk-show input:checked + span{background:var(--forest); color:var(--cream)}
.mk-show input:focus-visible + span{outline:3px solid var(--yellow); outline-offset:2px}
.mk-plan{margin:0; border-radius:12px; background:var(--concrete); overflow:hidden}
.mk-plan svg{display:block; width:100%; height:auto}
.mk-verdicts{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.mk-verdict{display:grid; grid-template-columns:40px 1fr; gap:4px 12px; align-items:start; padding:14px; border-radius:10px; background:var(--cream-2)}
.mk-verdict__icon{grid-row:span 2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--forest); color:var(--cream)}
.mk-verdict__icon svg{width:20px; height:20px}
.mk-verdict b{font:800 1rem/1.25 var(--f-head); color:var(--forest)}
.mk-verdict span.txt{font-size:.875rem; color:var(--stone)}
.mk-verdict.is-snug .mk-verdict__icon{background:var(--yellow); color:var(--char)}
.mk-verdict.is-no{background:#ECE7DA}
.mk-verdict.is-no .mk-verdict__icon{background:var(--char); color:var(--cream)}
.mk-caveat{font-size:.8125rem; color:var(--stone); line-height:1.5}
.mk-tool .tbc{background:rgba(245,196,0,.3); outline-color:var(--yellow-ink)}
@media (min-width:720px){
  .mk-tool{padding:28px; gap:24px}
  .mk-tool__controls{grid-template-columns:1fr 1fr auto; align-items:end; gap:16px}
  .mk-tool__out{display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:start}
}
@media (min-width:1100px){
  .mk-fit{padding:136px 0}
  .mk-fit__grid{grid-template-columns:4fr 8fr; gap:56px; align-items:start}
  .mk-fit__copy{position:sticky; top:120px}
}

/* ===== 4. Small jobs ===== */
.mk-jobs{padding:96px 0}
.mk-jobs__grid{display:grid; gap:40px}
.mk-jobs__fig{margin:0; position:relative}
.mk-jobs__fig img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.mk-jobs__fig figcaption{position:absolute; left:16px; bottom:16px; right:16px; background:rgba(20,42,27,.9); color:var(--cream); font:500 .8125rem/1.4 var(--f-mono); padding:10px 12px; border-radius:4px}
.mk-jobs .mk-h2{margin:14px 0 18px}
.mk-joblist{list-style:none; margin:30px 0 0; padding:0}
.mk-job{display:grid; grid-template-columns:1fr auto; gap:6px 20px; padding:24px 0; border-top:1px solid var(--line)}
.mk-job:last-child{border-bottom:1px solid var(--line)}
.mk-job h3{font-size:1.25rem; font-weight:700; color:var(--forest)}
.mk-job p{grid-column:1/-1; color:var(--stone)}
.mk-job p a{color:var(--forest); font-weight:700}
.mk-job__fit{align-self:start; font:700 .75rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; padding:8px 10px; border-radius:4px; background:var(--yellow); color:var(--char); white-space:nowrap}
.mk-jobs__foot{margin-top:22px; font-size:.9375rem; color:var(--stone)}
.mk-jobs__foot a{color:var(--forest); font-weight:700}
@media (min-width:1024px){
  .mk-jobs{padding:136px 0}
  .mk-jobs__grid{grid-template-columns:5fr 7fr; gap:72px; align-items:center}
}

/* ===== 5. Size up ===== */
.mk-up{padding:0 0 96px}
.mk-up__panel{border-radius:16px; background:var(--cream-2); padding:32px 22px; display:grid; gap:32px}
.mk-up .mk-h2{margin:14px 0 14px}
.mk-ladder{list-style:none; margin:24px 0 0; padding:0; display:flex; align-items:flex-end; gap:8px}
.mk-ladder li{flex:1}
.mk-ladder a{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; text-decoration:none; color:var(--forest); font:800 .9375rem/1 var(--f-head)}
.mk-ladder a span.bar{display:block; width:100%; border-radius:4px 4px 0 0; background:var(--concrete-2)}
.mk-ladder a:hover span.bar{background:var(--forest-2)}
.mk-ladder li.is-mini span.bar{background:var(--forest)}
.mk-ladder small{font:600 .62rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--stone)}
.mk-reasons{display:grid; gap:12px}
.mk-reason{padding:22px; border-radius:12px; background:var(--paper); border:1px solid var(--line)}
.mk-reason h3{font-size:1.125rem; font-weight:700; color:var(--forest); display:flex; gap:10px; align-items:center}
.mk-reason h3 svg{width:22px; height:22px; flex:none; color:var(--yellow-ink)}
.mk-reason p{margin-top:8px; color:var(--stone); font-size:.9375rem}
.mk-reason a{color:var(--forest); font-weight:700}
.mk-reason--heavy{background:var(--forest); border-color:var(--forest)}
.mk-reason--heavy h3{color:var(--cream)}
.mk-reason--heavy h3 svg{color:var(--yellow)}
.mk-reason--heavy p{color:rgba(250,246,236,.85)}
.mk-reason--heavy a{color:var(--yellow)}
@media (min-width:1024px){
  .mk-up{padding:0 0 136px}
  .mk-up__panel{grid-template-columns:5fr 7fr; gap:56px; padding:56px; align-items:center}
}

/* ===== 6. FAQ: measured answers ===== */
.mk-faq{padding:96px 0; background:var(--paper); border-top:1px solid var(--line)}
.mk-faq__head{margin-bottom:40px}
.mk-faq__head .mk-h2{margin-top:14px}
.mk-qa{list-style:none; margin:0; padding:0; display:grid; gap:20px}
.mk-qa li{position:relative; padding:34px 24px 24px; background:var(--cream); border-radius:12px; overflow:hidden}
.mk-qa li::before{content:""; position:absolute; left:0; right:0; top:0; height:12px; background:var(--tape)}
.mk-qa h3{font-size:1.1875rem; font-weight:700; color:var(--forest); line-height:1.3}
.mk-qa p{margin-top:10px; color:var(--stone)}
@media (min-width:860px){ .mk-faq{padding:136px 0} .mk-qa{grid-template-columns:1fr 1fr; gap:24px} }

/* ===== 7. Close ===== */
.mk-close{padding:96px 0 104px; background:var(--forest-ink); color:var(--cream)}
.mk-close__head{max-width:760px}
.mk-close .mk-h2{margin:14px 0 14px; font-size:clamp(2.1rem,5.6vw,3.75rem)}
.mk-tickets{margin-top:40px; display:grid; gap:16px}
.mk-ticket{display:grid; gap:14px; padding:26px; border-radius:14px; background:var(--forest); border:1px solid var(--line-dark); text-decoration:none; color:var(--cream); transition:transform .25s ease, border-color .25s ease}
.mk-ticket:hover{transform:translateY(-3px); border-color:var(--yellow)}
.mk-ticket__size{font:800 2.75rem/1 var(--f-head); color:var(--yellow)}
.mk-ticket__spec{font:500 .875rem/1.5 var(--f-mono); color:rgba(250,246,236,.8)}
.mk-ticket__go{display:inline-flex; align-items:center; gap:10px; justify-self:start; background:var(--yellow); color:var(--char); padding:14px 20px; border-radius:6px; font:700 1rem/1 var(--f-body)}
.mk-ticket__go svg{width:18px; height:18px}
.mk-close__call{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; color:rgba(250,246,236,.85)}
@media (min-width:760px){ .mk-tickets{grid-template-columns:1fr 1fr} .mk-close{padding:136px 0 144px} }

/* Reveal */
.mk.js .mk-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.mk.js .mk-reveal.is-in{opacity:1; transform:none}
.mk-plan .bin{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{animation:none !important; transition:none !important}
  .mk.js .mk-reveal,.mk.js .mk-hero__tape{opacity:1; transform:none}
  .mk-btn:hover,.mk-ticket:hover{transform:none}
}