/* Quirky Corridor - Gallery Spotlight (premium dark direction)
   Styling layer only: drop in after the main stylesheet.
   No wording, artwork, layout or functionality changes. */
:root{
 --qc-bg:#FFFFFF;--qc-bg-deep:#FAFAFA;--qc-card:#ffffff;--qc-card-2:#FAFAFA;
 --qc-line:#e6e6e4;--qc-ink:#17161a;--qc-ink-2:#55535c;
 --qc-red:#c10a17;--qc-red-soft:#c10a17;
}
.qc-hero{background:radial-gradient(940px 520px at 50% 44%,rgba(193,10,23,.08),transparent 66%)}
.qc-hero h1{letter-spacing:-.035em}
.qc-section h2{letter-spacing:-.028em}
.qc-rotate-col span{color:var(--qc-red-soft);text-shadow:none}
.qc-nav{background:rgba(252,252,251,.88);border-bottom:1px solid #e6e6e4}
.qc-btn-red{box-shadow:0 10px 26px rgba(193,10,23,.25)}
.qc-btn-ghost{border-color:#d5d0cb}
.qc-problem-v2{background:#fff;border:1px solid #e6e6e4;border-radius:18px;box-shadow:0 14px 36px rgba(23,22,26,.07)}
.qc-service,.qc-step,.qc-working{background:#fff;border-color:#e6e6e4;border-radius:18px}
.qc-chips span{border-color:#d5d0cb}
.qc-soon{background:#FAFAFA;border:1px dashed #d5d0cb}
.qc-service-thumb,.qc-step-thumb,.qc-working-thumb{box-shadow:0 8px 22px rgba(23,22,26,.14)}
.qc-step.qc-lit,.qc-working.qc-lit,.qc-problem.qc-lit,.qc-service.qc-lit{border-color:var(--qc-red);box-shadow:0 0 0 1px rgba(193,10,23,.30),0 16px 38px rgba(193,10,23,.14)}
#problems,#approach,#working{--band:#FAFAFA}
#services,#industries,#notes{--band:#FFFFFF;--qc-card:#ffffff}

/* Opened service cards, phones: every card opens at the same height; the
   illustration, heading and body start at the same position on every card,
   and the prev/next arrows anchor to the card's bottom edge (sticky keeps
   them visible if longer text scrolls inside the card). Illustration size
   scales with the screen. Text, artwork and functions unchanged. */
@media (max-width:759px){
 .qc-modal-card{box-sizing:border-box;height:calc(100dvh - 60px);align-content:start;gap:18px;padding:20px 22px;grid-template-rows:auto 1fr}
 .qc-modal-card .qc-sketch.tilt-l,.qc-modal-card .qc-sketch.tilt-r{transform:none}
 .qc-modal-card .qc-sketch{max-width:min(300px, 36dvh)}
 .qc-modal-text{display:flex;flex-direction:column;align-self:stretch}
 .qc-modal-text h3{min-height:2.12em}
 .qc-modal-nav{position:sticky;bottom:0;z-index:3;background:var(--qc-card);padding:10px 0 4px;margin-top:auto}
}
/* Opened service cards, desktop: larger card and illustration. */
@media (min-width:760px){
 .qc-modal-card{max-width:1160px;grid-template-columns:420px 1fr;gap:52px;padding:52px}
 .qc-modal-card .qc-sketch{max-width:100%}
}

/* Brand red #db0b1a, one step darker (approved 2026-11-07, base #c10a17 / highlight #c10a17).
   The rules below retint the red accents the main stylesheet hardcodes
   (tape, sketch shadow, hover/focus glows) so every red on the site comes
   from the same family. Layout, wording, artwork and functions unchanged. */
.qc-tape{background:#c10a17d1}
.qc-sketch{box-shadow:6px 6px #c10a17d9}
.qc-btn-red:hover{background:var(--qc-red-soft);box-shadow:0 10px 26px rgba(193,10,23,.38)}
.qc-form input:focus,.qc-form textarea:focus{box-shadow:0 0 0 3px rgba(193,10,23,.12)}
.qc-service.rv-in:hover,.qc-service.rv-in:focus-visible,.qc-service.rv-in:active,.qc-step.rv-in:hover,.qc-step.rv-in:active,.qc-working.rv-in:hover,.qc-working.rv-in:active{box-shadow:0 12px 28px rgba(193,10,23,.25)}
.qc-service.qc-tap,.qc-step.qc-tap,.qc-working.qc-tap{box-shadow:0 12px 28px rgba(193,10,23,.25)}
.qc-demo-bar{color:var(--qc-red-soft)}

/* Services as an image-tile mosaic with the description opening inside the page (no pop-up). */
.qc-tiles{margin-top:36px;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.qc-tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.qc-tiles{grid-template-columns:repeat(3,1fr)}}
.qc-tile{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:#FAFAFA;text-align:left;font:inherit;color:#fff;transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease}
.qc-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.qc-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,22,26,.78) 0%,rgba(23,22,26,.38) 34%,rgba(23,22,26,0) 62%)}
.qc-tile-label{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:4px}
.qc-tile-n{font-family:"Space Grotesk",monospace;font-size:12px;letter-spacing:.16em;font-weight:600;color:#fff;opacity:.85}
.qc-tile-title{font-size:clamp(18px,2vw,23px);font-weight:800;line-height:1.1;letter-spacing:-.015em;color:#fff}
.qc-tile:hover .qc-tile-img,.qc-tile:focus-visible .qc-tile-img{transform:scale(1.04)}
.qc-tile:hover,.qc-tile:focus-visible{border-color:var(--qc-red);box-shadow:0 12px 28px rgba(193,10,23,.22)}
.qc-tile.is-on{border-color:var(--qc-red);box-shadow:0 0 0 1px rgba(193,10,23,.3),0 14px 32px rgba(193,10,23,.2)}
.qc-tile-panel{grid-column:1/-1;position:relative;background:#fff;border:1px solid var(--qc-line);border-left:4px solid var(--qc-red);border-radius:16px;padding:30px 34px;box-shadow:0 14px 36px rgba(23,22,26,.07);scroll-margin-top:92px;animation:qc-panel-in .3s ease}
.qc-tile-panel h3{font-size:clamp(22px,3vw,32px);margin-bottom:12px;color:var(--qc-ink);font-weight:800;letter-spacing:-.02em;line-height:1.06;padding-right:48px}
.qc-tile-panel .qc-slide-blurb{max-width:70ch}
.qc-panel-close{position:absolute;top:14px;right:14px}
@keyframes qc-panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qc-tile-panel{animation:none}.qc-tile-img{transition:none}}

/* mosaic v2: borderless, varied sizes */
.qc-tiles{display:flex!important;flex-direction:column;gap:0!important;grid-template-columns:none!important}
.qc-trow{display:flex;gap:0;width:100%}
.qc-tile{border:0!important;border-radius:0!important;aspect-ratio:auto!important;min-width:0;height:100%}
.qc-tile:hover,.qc-tile:focus-visible{border:0!important;box-shadow:none!important}
.qc-tile.is-on{border:0!important;box-shadow:inset 0 -5px 0 var(--qc-red)!important}
.qc-tile:focus-visible{outline:3px solid var(--qc-red);outline-offset:-3px}
.qc-tile-panel{border:0!important;border-left:5px solid var(--qc-red)!important;border-radius:0!important;box-shadow:none!important;background:#fff}

/* alternating service rows */
.qc-alt{margin-top:36px;display:flex;flex-direction:column}
.qc-alt-row{display:grid;grid-template-columns:1fr;background:#fff}
.qc-alt-row:nth-child(even){background:#FAFAFA}
.qc-alt-img{position:relative;min-height:260px;aspect-ratio:4/3;overflow:hidden}
.qc-alt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qc-alt-text{padding:28px 22px 34px;display:flex;flex-direction:column;justify-content:center}
.qc-alt-text h3{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.06;color:var(--qc-ink);margin:0 0 14px}
.qc-alt-text .qc-slide-blurb{max-width:52ch}
@media (min-width:860px){
.qc-alt-row{grid-template-columns:1fr 1fr;min-height:420px}
.qc-alt-img{aspect-ratio:auto;min-height:420px}
.qc-alt-row.is-flip .qc-alt-img{order:2}
.qc-alt-text{padding:48px clamp(32px,5vw,72px)}
}
/* alternating rows: edge to edge */
html,body{overflow-x:clip}
.qc-alt{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:0}
.qc-alt-text{padding-left:clamp(22px,5vw,72px);padding-right:clamp(22px,5vw,72px)}
@media (min-width:860px){.qc-alt-text{padding:48px clamp(32px,6vw,96px)}}
/* keep subjects in frame on wide screens */
@media (min-width:860px){
.qc-alt-row{min-height:0}
.qc-alt-img{aspect-ratio:4/3;min-height:0;max-height:720px}
.qc-alt-img img{object-position:center 30%}
}
@media (min-width:860px){.qc-alt-img{max-height:none;width:100%}}
#services{padding-bottom:0!important;margin-bottom:0!important}#services .qc-alt{margin-bottom:0}
.qc-alt-img{position:relative;overflow:hidden}
.qc-alt-img::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s ease;box-shadow:inset 0 0 0 3px rgba(193,10,23,.55),inset 0 0 60px 6px rgba(193,10,23,.38)}
.qc-alt-img::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:3;pointer-events:none;opacity:0;transform:skewX(-20deg);background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%)}
@media (hover:hover){.qc-alt-img:hover::before{opacity:1}.qc-alt-img:hover::after{opacity:1;animation:qc-sheen .9s ease-out 1}}
@keyframes qc-sheen{from{left:-60%}to{left:130%}}
@media (prefers-reduced-motion:reduce){.qc-alt-img::before{transition:none}.qc-alt-img:hover::after{animation:none;opacity:0}}
/* work-with-us: open columns, illustration above text */
#working .qc-working-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 40px;align-items:start;margin-top:44px}
#working .qc-working,#working .qc-working.rv-in:hover,#working .qc-working.qc-tap,#working .qc-working.rv-in:active{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0;padding:0;transform:none}
#working .qc-working-head{flex-direction:column;align-items:center;gap:20px;text-align:center}
#working .qc-working-thumb{width:min(100%,210px);height:auto;aspect-ratio:1/1;border:0;box-shadow:none;border-radius:0;background:transparent;object-fit:contain}
#working .qc-working-text{width:100%;text-align:center}
#working .qc-working-text h3,#working .qc-working-head h3{font-size:clamp(19px,1.7vw,24px);line-height:1.2;color:var(--qc-ink)}
#working .qc-working-text p{text-align:center;hyphens:none;font-size:15.5px;line-height:1.65;color:var(--qc-muted,#5b5860);margin-top:12px}
#working .qc-working.rv-in:hover h3,#working .qc-working.qc-tap h3{color:var(--qc-ink)}
#working .qc-working.rv-in:hover p,#working .qc-working.qc-tap p{color:var(--qc-muted,#5b5860)}
@media (max-width:1000px){#working .qc-working-grid{grid-template-columns:repeat(2,1fr);gap:44px 32px}}
@media (max-width:560px){#working .qc-working-grid{grid-template-columns:1fr;gap:40px}#working .qc-working-thumb{width:min(60%,200px)}#working .qc-working-text h3{font-size:21px}#working .qc-working-text p{font-size:15.5px}}
#working .qc-working-thumb{mix-blend-mode:multiply}
/* work columns: one-line titles, aligned justified descriptions */
#working .qc-working{container-type:inline-size}
#working .qc-working-text h3,#working .qc-working-head h3{font-size:clamp(13px,6.5cqw,22px);white-space:nowrap;line-height:1.25;margin:0}
#working .qc-working-text p{text-align:justify;text-align-last:left;hyphens:none;margin-top:14px}
#working .qc-working-head{justify-content:flex-start}
@media (min-width:561px) and (max-width:1279px){#working .qc-working-grid{grid-template-columns:repeat(2,1fr);gap:48px 48px}}
/* work-with-us: no fade-in (multiply blend needs opacity 1 from first paint) */
#working .qc-working,#working .qc-working.rv{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}