/* Styles added for the cubicle family of pages: the Cubicles hub, Used cubicles and
   Remanufactured cubicles. Loaded after service.css. Same tokens, same type, same
   colours. Nothing here introduces a new font or a new colour. Meant to move into
   the theme beside service.css when the pages ship. */

/* ---------- hero on a full-width photo (the hub) ---------- */
.svc-hero--photo{position:relative;padding:0;background:var(--cub-ink);color:#fff;overflow:hidden}
.svc-hero--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.svc-hero--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,21,.88) 0%,rgba(5,8,21,.72) 45%,rgba(5,8,21,.25) 100%)}
.svc-hero--photo .cub-wrap{position:relative;z-index:1;display:block;min-height:clamp(440px,52vw,600px);padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.svc-hero--photo h1{color:#fff;max-width:14em}
.svc-hero--photo .svc-hero__kicker{color:var(--cub-orange)}
.svc-hero--photo .svc-hero__lead{color:#fff;opacity:.92;max-width:32em}
.svc-hero--photo .svc-hero__note{color:var(--cub-on-ink-muted)}
.svc-hero--photo .svc-btn--ghost{color:#fff!important;border-color:#fff}
.svc-hero--photo .svc-btn--ghost:hover{background:#fff;color:var(--cub-ink)!important}

/* ---------- hero on ink, text beside a photo (used cubicles) ---------- */

/* ---------- three ways to buy: photo-topped route cards ---------- */
.svc-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cub-space-5)}
.svc-route{display:flex;flex-direction:column;background:var(--cub-surface);border:1px solid var(--cub-line);border-radius:var(--cub-radius);overflow:hidden;color:var(--cub-ink);text-decoration:none;transition:border-color var(--cub-ease),box-shadow var(--cub-ease),transform var(--cub-ease)}
.svc-route:hover{border-color:var(--cub-orange);box-shadow:var(--cub-shadow);transform:translateY(-2px);color:var(--cub-ink)}
.svc-route img{width:100%;aspect-ratio:16/10;object-fit:cover}
.svc-route__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.svc .svc-route__kind{font:600 12px/1 var(--cub-font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--cub-orange-text);margin:0 0 10px}
.svc-route h3{font-size:1.375rem;margin-bottom:8px}
.svc .svc-route p{font-size:1rem;color:var(--cub-ink-soft);margin:0 0 14px}
.svc-route__facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px;font-size:.9375rem}
.svc-route__facts li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--cub-line)}
.svc-route__facts li span:first-child{color:var(--cub-muted)}
.svc-route__facts li span:last-child{font-weight:600;text-align:right}
.svc .svc-route .svc-more{margin-top:auto;align-self:flex-start}
.svc-route--lead{border-color:var(--cub-orange);border-width:1.5px}
.svc-routes--4{grid-template-columns:1fr 1fr}
.svc-routes--4 .svc-route img{aspect-ratio:16/9}

/* ---------- panel heights with pictures ---------- */

/* ---------- directory of cubicle types ---------- */
.svc-dir{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.svc-dir a{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;padding:18px 4px 18px 0;border-bottom:1px solid var(--cub-line);color:var(--cub-ink);text-decoration:none;transition:padding var(--cub-ease)}
.svc-dir a:hover{color:var(--cub-ink);padding-left:8px;border-color:var(--cub-orange)}
.svc-dir b{grid-column:1;grid-row:1;font:var(--cub-weight-head) 1.1875rem/1.25 var(--cub-font-head)}
.svc-dir span{grid-column:1;grid-row:2;font-size:.9375rem;color:var(--cub-muted)}
.svc-dir i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font:600 1.25rem/1 var(--cub-font-head);color:var(--cub-orange-text)}
.svc-dir i::after{content:"\2192"}
.svc-dir a:hover i{color:var(--cub-ink)}

/* ---------- already have cubicles: five short entries on ink ---------- */
.svc-own{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(28px,5vw,72px);align-items:start}
.svc-own__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.svc-own__list a{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:var(--cub-radius);color:#fff;text-decoration:none;transition:border-color var(--cub-ease),background var(--cub-ease)}
.svc-own__list a:hover{border-color:var(--cub-orange);background:rgba(255,255,255,.04);color:#fff}
.svc-own__list .svc-ico{margin:0;background:rgba(255,255,255,.08);color:var(--cub-orange)}
.svc-own__list b{display:block;font:var(--cub-weight-head) 1.0625rem/1.3 var(--cub-font-head);margin-bottom:3px}
.svc-own__list span{font-size:.9063rem;color:var(--cub-on-ink-muted)}

/* ---------- compare the routes: a table with a highlighted column ---------- */
.svc-compare{width:100%;border-collapse:separate;border-spacing:0;background:var(--cub-surface);border:1px solid var(--cub-line);border-radius:var(--cub-radius);overflow:hidden;font-size:.9688rem}
.svc-compare th,.svc-compare td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--cub-line)}
.svc-compare thead th{font:var(--cub-weight-head) 1.125rem/1.25 var(--cub-font-head);background:var(--cub-surface-alt);border-bottom:2px solid var(--cub-line)}
.svc-compare thead th small{display:block;font:400 .8125rem/1.4 var(--cub-font-body);color:var(--cub-muted);margin-top:4px}
.svc-compare tbody th{font:600 .8125rem/1.4 var(--cub-font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--cub-muted);width:17%}
.svc-compare tr:last-child td,.svc-compare tr:last-child th{border-bottom:0}
.svc-compare .is-lead{background:#FDECE4}
.svc-compare thead .is-lead{background:var(--cub-orange);color:var(--cub-ink)}
.svc-compare thead .is-lead small{color:var(--cub-ink)}
.svc-compare td b{font-weight:600}

/* ---------- a process told in order, with a photo for each step ---------- */
.svc-process{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:clamp(28px,4vw,56px)}
.svc-process li{counter-increment:p;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.svc-process li:nth-child(even)>div:first-child{order:2}
.svc-process img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--cub-radius)}
.svc-process__num{display:block;font:var(--cub-weight-head) clamp(2.5rem,2rem + 2vw,3.75rem)/1 var(--cub-font-head);color:var(--cub-orange);margin-bottom:10px}
.svc-process__num::before{content:"0" counter(p)}
.svc-process li:nth-child(n+10) .svc-process__num::before{content:counter(p)}
.svc-process h3{font-size:var(--cub-h3);margin-bottom:10px}
.svc .svc-process p{color:var(--cub-ink-soft);margin:0 0 10px}
.svc-process__text{position:relative;padding-left:22px;border-left:2px solid var(--cub-line)}

/* ---------- specifications: a grid of definitions ---------- */
.svc-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cub-space-5);margin:0}
.svc-spec>div{border-top:3px solid var(--cub-orange);padding-top:16px}
.svc-spec dt{font:var(--cub-weight-head) 1.125rem/1.25 var(--cub-font-head);color:var(--cub-ink);margin-bottom:6px}
.svc-spec dd{margin:0;font-size:.9688rem;color:var(--cub-ink-soft)}

/* ---------- one large quotation ---------- */
.svc-pull{max-width:900px;margin:0 auto;text-align:center}
.svc .svc-pull blockquote{margin:0;padding:0}
.svc .svc-pull blockquote p{font:var(--cub-weight-head) clamp(1.375rem,1.1rem + 1.4vw,2rem)/1.35 var(--cub-font-head);color:var(--cub-ink);margin:0 0 18px;max-width:none}
.svc .svc-pull cite{font-style:normal;font-size:.9375rem;color:var(--cub-muted)}
.svc-pull::before{content:"";display:block;width:56px;height:4px;background:var(--cub-orange);margin:0 auto 26px}
.svc-sec--ink .svc-pull blockquote p{color:#fff}
.svc-sec--ink .svc-pull cite{color:var(--cub-on-ink-muted)}

/* ---------- a checklist with a heading, in two columns ---------- */
.svc-checks{display:grid;grid-template-columns:1fr 1fr;gap:var(--cub-space-6)}
.svc-checks .svc-check{margin-top:0}
.svc-checks h3{margin-bottom:12px}


@media (max-width:960px){
  .svc-routes,.svc-spec{grid-template-columns:1fr 1fr}
  .svc-own{grid-template-columns:1fr}
  .svc-process li{grid-template-columns:1fr}
  .svc-process li:nth-child(even)>div:first-child{order:0}
  .svc-hero--photo::after{background:linear-gradient(180deg,rgba(5,8,21,.78) 0%,rgba(5,8,21,.86) 100%)}
}
@media (max-width:620px){
  .svc-routes,.svc-spec,.svc-dir,.svc-own__list,.svc-checks{grid-template-columns:1fr}
  .svc-compare{display:block;overflow-x:auto;font-size:.9063rem}
  .svc-compare th,.svc-compare td{padding:12px 14px;min-width:150px}
}

/* ---------- panels and pull quotes on ink ---------- */
.svc-sec--ink .svc-panel{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18)}
.svc-sec--ink .svc-panel p,.svc-sec--ink .svc-panel li{color:var(--cub-on-ink-muted)}
.svc-sec--ink .svc-panel .svc-ico{background:rgba(255,255,255,.08)}
.svc-pull--plain blockquote p::before,.svc-pull--plain blockquote p::after{content:none}

/* pull quotes: balanced lines, and a chosen break on wide screens */
.svc .svc-pull blockquote p{text-wrap:balance}
@media (max-width:620px){.svc-br{display:none}}

/* ---------- the remanufactured hero film ---------- */
.svc-hero__film{margin:0}
.svc-hero__film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:transparent}
.svc-hero__film figcaption{font-size:var(--cub-text-sm);color:var(--cub-muted);text-align:center;margin-top:6px}
.svc .svc-hero__note a{color:var(--cub-orange-text);font-weight:600;text-decoration:none}

/* ---------- the remanufactured hero: the film first, the text centered under it ---------- */
.svc-hero--stack{background:var(--cub-surface);padding-block:clamp(16px,2.5vw,32px) clamp(28px,4vw,56px)}
.svc-hero--stack .cub-wrap{display:block}
.svc-hero--stack .svc-hero__film{margin:0 auto;max-width:720px}
.svc-hero--stack .svc-hero__film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:transparent}
.svc-hero__stacktext{max-width:760px;margin:clamp(8px,2vw,24px) auto 0;text-align:center}
.svc-hero__stacktext .svc-eyebrow{margin-bottom:12px}
.svc-hero--stack h1{margin:0 auto;max-width:14em;text-wrap:balance}
.svc-hero--stack .svc-hero__kicker{color:var(--cub-orange-text)}
.svc-hero--stack .svc-hero__lead{margin-left:auto;margin-right:auto;text-wrap:balance}
.svc-hero--stack .svc-hero__actions{justify-content:center}
.svc-hero--stack + .svc-sec{padding-top:clamp(24px,3vw,40px)}
.svc .svc-hero--stack .svc-hero__note a{color:var(--cub-orange-text);font-weight:600;text-decoration:none}
.svc .svc-hero__stacktext p{margin-left:auto;margin-right:auto}
.svc .svc-hero__stacktext .svc-hero__note{max-width:40em;margin-top:16px}

/* ---------- anatomy: an exploded render beside three numbered points ---------- */
.svc-anatomy-split{align-items:center}
.svc-anatomy-split img{aspect-ratio:4/3;border-radius:0}
.svc-anatomy-split h2{text-wrap:balance}
.svc-anatomy-split + .svc-dir{margin-top:var(--cub-space-7)}
.svc-dir{align-items:stretch}
.svc-dir li{display:flex}
.svc-dir a{flex:1;align-content:center}
.svc-anatomy-split h2{font-size:clamp(1.5rem,1.2rem+1.2vw,2.125rem)}

/* ---------- the ledger, centered: heading above the list ---------- */

.svc-anatomy-split{grid-template-columns:1.2fr 1fr}
@media (max-width:960px){.svc-anatomy-split{grid-template-columns:1fr}}