/* Device mockups showing a Cirracloud skip hire site, built from real skip photography. All inner
   sizes in container units so it scales cleanly. */
[data-demo]{--b:#f2b705;--b-ink:#141414;--b-tint:#fdf6dc;--m-ink:#1b2227;--m-steel:#5e6a73;--m-line:#e3e5e1}
.devices{position:relative;max-width:1000px;margin:64px auto 0;padding-bottom:6%;text-align:left}
.devices .glow{position:absolute;inset:8% 6% -4%;background:radial-gradient(60% 60% at 50% 45%,var(--b) 0%,transparent 70%);opacity:.28;filter:blur(40px);z-index:0;transition:background .5s}
.browser{position:relative;z-index:1;container-type:inline-size;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 40px 90px -30px rgba(0,0,0,.45),0 18px 36px -18px rgba(0,0,0,.3)}
.stage .browser{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 120px -30px rgba(0,0,0,.9)}
.bar{display:flex;align-items:center;gap:1.4cqw;height:4.2cqw;min-height:22px;padding:0 1.6cqw;background:#ececee;border-bottom:1px solid #dcdce0}
.bar i{width:1.2cqw;height:1.2cqw;min-width:7px;min-height:7px;border-radius:50%;background:#ff5f57}
.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar .url{margin:0 auto;transform:translateX(-3cqw);background:#fff;border-radius:.8cqw;padding:.45cqw 2.4cqw;font-size:max(1.25cqw,9px);color:#6e6e73;letter-spacing:0;display:flex;align-items:center;gap:.6cqw;white-space:nowrap;max-width:60%;overflow:hidden}
.bar .url svg{width:1.1cqw;height:1.1cqw;min-width:7px}

.ms{font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;color:var(--m-ink);letter-spacing:0;line-height:1.35;font-stretch:condensed}
.ms *{transition:background-color .45s,color .45s,fill .45s,opacity .45s,filter .45s}
.ms img{display:block}

.ms-head{display:flex;align-items:center;gap:1.4cqw;padding:1.6cqw 3.4cqw;border-bottom:1px solid var(--m-line);background:#fff}
.ms-logo{width:4.2cqw;height:4.2cqw;border-radius:1cqw;background:var(--b);color:var(--b-ink);display:grid;place-items:center;font-weight:900;font-size:1.9cqw;letter-spacing:-.02em;font-family:var(--font)}
.ms-name{font-weight:800;font-size:1.9cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34cqw;font-family:var(--font);letter-spacing:-.02em;text-transform:uppercase}
.ms-nav{display:flex;gap:2.2cqw;margin-left:auto;font-size:1.3cqw;color:var(--m-steel);font-family:var(--font)}
.ms-call{background:var(--b);color:var(--b-ink);font-weight:800;font-size:1.4cqw;padding:1cqw 1.8cqw;border-radius:.7cqw;margin-left:2.2cqw;white-space:nowrap;font-family:var(--font)}

/* trust strip: rating, coverage, phone - matches the live product's slim dark bar */
.ms-trust{background:var(--m-ink);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:.6cqw 2.4cqw;padding:1cqw 3.4cqw;font-size:1.2cqw;font-weight:700;font-family:var(--font)}
.ms-trust i{color:#f5a623;font-style:normal;letter-spacing:.06em;margin-right:.4cqw}
.ms-trust b{color:var(--b);font-weight:800}

/* hero: dark, real photo fading to charcoal on the left so the headline stays readable */
.ms-hero{position:relative;background:var(--m-ink);overflow:hidden}
.ms-hero-bg{position:absolute;inset:0}
.ms-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:82% 46%}
.ms-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,28,.97) 0%,rgba(20,24,28,.94) 40%,rgba(20,24,28,.6) 56%,rgba(20,24,28,.12) 70%,transparent 80%)}
.ms-hero-copy{position:relative;z-index:1;max-width:58%;padding:4cqw 3.4cqw 4.4cqw;color:#fff}
.ms-hero-copy h1{font-family:var(--font);font-size:3.5cqw;line-height:1.02;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.ms-hero-copy h1 em,.ms-hero-copy h1 span{font-style:normal;color:var(--b);filter:saturate(1.1)}
.ms-hero-copy p{margin-top:1.7cqw;font-size:1.4cqw;color:#c7ccd0;max-width:42ch;font-family:var(--font);letter-spacing:-.01em}
.ms-btns{display:flex;gap:1.1cqw;margin-top:2.3cqw;font-family:var(--font)}
.ms-btns b{background:var(--b);color:var(--b-ink);font-size:1.4cqw;padding:1.25cqw 2.1cqw;border-radius:.7cqw;text-transform:uppercase;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.ms-btns span{box-shadow:inset 0 0 0 2px #fff;color:#fff;font-size:1.4cqw;font-weight:800;padding:1.25cqw 2.1cqw;border-radius:.7cqw;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}

/* popular jobs: a compact two-card glimpse */
.ms-jobs{padding:2.8cqw 3.4cqw 2.2cqw;background:#fff}
.ms-jobs h2{font-family:var(--font);font-size:2cqw;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.ms-job-row{display:flex;gap:1.4cqw;margin-top:1.5cqw}
.ms-job-row figure{flex:1;margin:0;border-radius:.8cqw;overflow:hidden;box-shadow:0 0 0 1px var(--m-line)}
.ms-job-row img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.ms-job-row figcaption{padding:.9cqw 1.1cqw;font-size:1.2cqw;font-weight:700;font-family:var(--font)}

/* which skip do you need: real photo cut-outs, all 5 sharing one crop height so they sit
   bottom-aligned at true relative scale; dimmed (not washed out) when not selected */
.ms-sizes{background:var(--b-tint);padding:2.6cqw 3.4cqw 3cqw}
.ms-sizes h2{font-family:var(--font);font-size:2.3cqw;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.ms-row{display:flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;gap:1.4cqw;margin-top:2.1cqw;overflow:hidden}
.ms-row .sz{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.7cqw;font-size:1.25cqw;font-weight:700;
  font-family:var(--font);padding:.8cqw .6cqw;border-radius:.7cqw;min-width:0;opacity:.6;transition:opacity .3s,background .3s,box-shadow .3s}
.ms-row .sz img{height:6.4cqw;width:auto;max-width:none;display:block;flex:0 0 auto;object-fit:contain}
.ms-row .sz.on{background:#fff;opacity:1;font-weight:800;box-shadow:0 .3cqw 0 rgba(0,0,0,.12)}
.ms-detail{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:1.3cqw;background:#fff;border-left:.5cqw solid var(--b);border-radius:0 .8cqw .8cqw 0;padding:1.3cqw 1.9cqw;font-family:var(--font);min-width:24cqw}
.ms-detail img{width:6.8cqw;height:5.1cqw;object-fit:contain;flex:0 0 auto}
.ms-detail b{display:block;font-size:1.7cqw}
.ms-detail small{display:block;font-size:1.2cqw;color:var(--m-steel);margin-top:.4cqw}

.ms-quote{background:var(--m-ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 3.4cqw;font-family:var(--font)}
.ms-quote b{font-size:2.3cqw;letter-spacing:-.03em;text-transform:uppercase}
.ms-quote span{font-size:2.5cqw;font-weight:900;border-bottom:.4cqw solid var(--b);letter-spacing:-.02em}

/* phone */
.phone{position:absolute;z-index:2;right:-3%;bottom:0;width:25%;container-type:inline-size}
.phone .frame{border-radius:13cqw;background:#111;padding:3.4cqw;box-shadow:0 0 0 1.2cqw #2a2a2c inset,0 30px 70px -20px rgba(0,0,0,.6)}
.phone .scr{border-radius:10cqw;display:block;overflow:hidden;background:#fff;aspect-ratio:9/19.2;position:relative}
.phone .isl{position:absolute;top:3cqw;left:50%;transform:translateX(-50%);width:30cqw;height:8.5cqw;background:#000;border-radius:6cqw;z-index:3}
.phone .ms-head{padding:15cqw 6cqw 3.4cqw;gap:3cqw}
.phone .ms-logo{width:11.5cqw;height:11.5cqw;border-radius:3cqw;font-size:4.8cqw}
.phone .ms-name{font-size:5.2cqw;max-width:58cqw}
.phone .ph-photo{position:relative;overflow:hidden;aspect-ratio:16/9}
.phone .ph-photo img{width:100%;height:100%;object-fit:cover;object-position:82% 46%}
.phone .ph-hero{background:var(--m-ink);color:#fff;padding:6cqw 6cqw 5.5cqw}
.phone .ph-hero h1{font-family:var(--font);font-size:9.6cqw;line-height:1.02;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.phone .ph-hero h1 em{font-style:normal;color:var(--b)}
.phone .ph-hero p{font-family:var(--font);font-size:4.3cqw;color:#c7ccd0;margin-top:3cqw;letter-spacing:-.01em;line-height:1.3}
.phone .ph-call{display:block;margin:5.5cqw 0 0;background:var(--b);color:var(--b-ink);text-align:center;font-family:var(--font);font-weight:800;font-size:5.2cqw;padding:4.4cqw;border-radius:3cqw;text-transform:uppercase}
.phone .ph-quote{display:block;margin:3cqw 0 0;box-shadow:inset 0 0 0 .6cqw #fff;color:#fff;text-align:center;font-family:var(--font);font-weight:700;font-size:4.8cqw;padding:4cqw;border-radius:3cqw;text-transform:uppercase}
.phone .ph-bar{position:absolute;left:0;right:0;bottom:0;background:#fff;color:var(--m-ink);font-family:var(--font);font-size:4.2cqw;font-weight:700;display:flex;justify-content:space-between;padding:4.5cqw 6cqw 6.5cqw;box-shadow:0 -1px 0 var(--m-line)}
.phone .ph-bar span{color:var(--b);font-weight:800}

@media(max-width:734px){
  .devices{margin-top:44px;padding-bottom:18%}
  .phone{width:34%;right:-1%;bottom:0}
  .ms-nav{display:none}
}

/* configurator */
.config{position:relative;z-index:3;max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.band .config,.light .config{background:#fff;box-shadow:0 10px 40px -16px rgba(0,0,0,.25),inset 0 0 0 1px var(--line)}
.config label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--stage-2nd)}
.band .config label,.light .config label{color:var(--secondary)}
.config input[type=text]{font:400 15px/1.2 var(--font);letter-spacing:-.01em;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;width:170px}
.band .config input[type=text],.light .config input[type=text]{background:#fff;border-color:#d2d2d7;color:var(--ink)}
.config input[type=text]:focus{outline:none;border-color:#2997ff;box-shadow:0 0 0 3px rgba(41,151,255,.3)}
.swatches{display:flex;gap:8px;align-items:center}
.swatch{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:transform .15s}
.swatch:hover{transform:scale(1.1)}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #000,0 0 0 4px #fff}
.band .swatch[aria-pressed=true],.light .swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.picker-c{position:relative;width:26px;height:26px;border-radius:50%;overflow:hidden;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.picker-c input{position:absolute;inset:-6px;opacity:0;cursor:pointer;width:40px;height:40px}
@media(max-width:600px){.config input[type=text]{width:100%}.config label{flex:1 1 100%}}

/* live size picker tile: real skip photo cut-outs, all 5 sharing one crop height so they're to
   true relative scale; dimmed (not washed out) until picked, one row at every width */
/* container-type so the row sizes off its OWN (often half-width, grid-column) box, not the
   viewport - a vw-based height here previously ignored how narrow the actual column is, so the
   row's flex-shrink squashed the images' width without shrinking their height to match. */
.sizer{margin-top:28px;container-type:inline-size}
.sizer .row{display:flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;gap:clamp(4px,2cqw,16px);overflow:hidden;padding-bottom:4px}
.sizer button{border:2px solid transparent;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:8px;padding:8px 8px 6px;border-radius:12px;font:600 13px/1 var(--font);color:var(--ink);
  flex:0 1 auto;min-width:0;opacity:.6;transition:opacity .2s,transform .2s,background .2s,box-shadow .2s}
.sizer button img{height:clamp(40px,13cqw,110px);width:auto;max-width:none;display:block;flex:0 0 auto;object-fit:contain}
.sizer button:hover{opacity:.85}
.sizer button[aria-pressed=true]{opacity:1;background:#fff;border-color:var(--ink,#1d1d1f);box-shadow:0 3px 0 rgba(0,0,0,.15);transform:translateY(-2px)}
.sizer button[aria-pressed=true]:hover{opacity:1}
.sizer .out{margin-top:16px;border-left:4px solid #f2b705;padding:4px 0 4px 16px}
.sizer .out b{display:block;font-size:19px;font-weight:600}
.sizer .out span{display:block;color:var(--secondary);font-size:15px}
@media(max-width:480px){
  .sizer .row{gap:4px}
  .sizer button{padding:6px 3px 5px}
}