/* Work page bits that the createco.ca home doesn't have: logo marquee and the websites list. Same gutter and type as eidra.css. */
.s5{padding-top:200px}
.logos{padding:200px 0 0}
.logos-h{padding:0 var(--g);display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;margin-bottom:72px}
.logos-h p{max-width:340px;color:var(--mute)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 90s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-item{flex:none;width:clamp(180px,18vw,260px);height:clamp(160px,15vw,220px);display:grid;place-items:center;padding:28px;border-right:1px solid var(--line)}
.mq-item img{width:auto;max-width:100%;max-height:120px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .35s,opacity .35s}
.mq-item:hover img{filter:none;opacity:1}
@keyframes mq{to{transform:translateX(-50%)}}
.rows{padding:200px var(--g) 200px}
.rows h2{margin-bottom:72px}
.row b.sm{font-weight:400;font-size:15px;color:var(--mute);letter-spacing:0;line-height:1.4;max-width:440px}
@media (max-width:820px){.logos-h{grid-template-columns:1fr}.s5,.logos,.rows{padding-top:120px}.rows{padding-bottom:120px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
.row b{font-size:clamp(28px,3.6vw,56px);overflow-wrap:anywhere}
/* logo tiles, mixed sizes like the old Windows start menu (Kay 2026-10-19): grey rounded tiles, detailed logos big, simple ones small, colour on hover */
.logo-grid{margin:0 var(--g);display:grid;grid-template-columns:repeat(8,1fr);  /* 8 wide on desktop so big tiles don't split it into two mirrored halves (Kay 2026-10-19) */
grid-auto-rows:clamp(96px,9vw,140px);grid-auto-flow:dense;gap:10px}
.logo-grid div{position:relative;background:#fff;border-radius:8px;overflow:hidden}
.logo-grid .b{grid-column:span 2;grid-row:span 2}.logo-grid .w{grid-column:span 2}.logo-grid .t{grid-row:span 2}
/* absolute + inset 0 + margin auto: dead centre in every browser (Safari put them low with grid centring, Kay 2026-10-19) */
.logo-grid img{position:absolute;inset:0;margin:auto;width:66%;height:46%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s,transform .6s cubic-bezier(.16,1,.3,1)}
/* fixed box per tile size, object-fit keeps the shape: small SVGs (Bowlful) no longer sit tiny in a big tile on desktop */
.logo-grid .b img{width:58%;height:50%}.logo-grid .w img{width:60%;height:46%}.logo-grid .t img{width:74%;height:52%}
.logo-grid div:hover img{filter:none;opacity:1;transform:scale(1.04)}
@media (min-width:1101px){.logo-grid div[style]{grid-area:var(--a)}}  /* [style] beats .b/.w/.t spans */
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.logo-grid{grid-auto-rows:84px;gap:8px}}
/* Work list: one project per row, wide photo + number, name, what we did; image side alternates (Kay 2026-10-17: not the same 3 cards as the home) */
.cases{padding:0 var(--g);display:grid;gap:120px}
.case{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end;color:#000}
.case:nth-child(even){grid-template-columns:1fr 1.6fr}.case:nth-child(even) .case-img{order:2}
.case-img{aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#eee}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.case:hover .case-img img{transform:scale(1.03)}
.case-no{display:block;font-size:15px;font-weight:600;color:#888;padding-top:14px;border-top:2px solid #000;margin-bottom:28px}
.case h3{font-size:clamp(40px,4.4vw,64px)}
.case-line{font-size:20px;margin:14px 0 28px}
.case ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.case li{font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:#555}
.case-go{display:inline-flex;font-weight:600;font-size:15px;border-bottom:1px solid #000;padding-bottom:3px}
@media (max-width:820px){.cases{gap:72px}.case,.case:nth-child(even){grid-template-columns:1fr;gap:24px}.case:nth-child(even) .case-img{order:0}}
/* work strip (Kay's reference 2026-10-17): sideways row of landscape cards + progress bar; replaces the one-per-row list */
.wk{padding:200px 0 0}
.wk-h{padding:0 var(--g);display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;margin-bottom:72px}
.wk-h p{max-width:300px;color:var(--mute)}
.wk-row{display:flex;gap:24px;overflow-x:auto;padding:0 var(--g) 8px;scroll-padding:0 var(--g);scrollbar-width:none;outline:0}
.wk-row::-webkit-scrollbar{display:none}
.wk-c{flex:none;width:clamp(300px,30vw,460px);scroll-snap-align:start;color:#000}
.wk-img{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#eee;margin-bottom:22px}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
a.wk-c:hover .wk-img img{transform:scale(1.04)}
.wk-eb{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:10px}
.wk-c h3{font-size:clamp(26px,2.3vw,36px);line-height:1.05}
.wk-c p{margin:10px 0 14px;color:#444;max-width:34ch}
.wk-go{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #000;padding-bottom:2px}
.wk-bar{margin:48px var(--g) 0;height:2px;background:var(--line)}
.wk-bar span{display:block;height:100%;width:18%;background:#000}
/* snap only on phones: on desktop the wheel moves the row a few px at a time and mandatory snap pulled it back to the same card (Kay 2026-10-19: row stuck, page stuck) */
@media (max-width:820px){.wk-row{scroll-snap-type:x mandatory}.wk{padding-top:120px}.wk-h{grid-template-columns:1fr}.wk-c{width:78vw}}

/* client quotes under the logo grid (Kay 2026-10-19): two quotes side by side, small grey label, room before the CTA */
.qt{padding:180px var(--g) 200px}
.qt .eb{display:block;margin-bottom:40px}
.qt-l{display:grid}  /* quotes stack in one cell and fade (slider) */
.qt-l figure{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.qt-l figure.on{opacity:1;visibility:visible}
.qt-d{display:flex;gap:10px;margin-top:36px}
.qt-d button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
.qt-d button.on{background:#000}
.qt blockquote{font-size:clamp(17px,1.3vw,20px);line-height:1.55;font-weight:300;font-style:italic;margin:0;max-width:46ch}  /* Kay 2026-10-19: smaller, italic */
.qt figcaption{margin-top:24px;font-size:14px;font-weight:600;color:var(--mute)}
@media (max-width:820px){.qt{padding:120px var(--g)}}
/* Kind words centred (Kay 2026-10-19) */
.qt{text-align:center}.qt blockquote{margin:0 auto}.qt-d{justify-content:center}
/* Load more under the logo tiles (Kay 2026-10-19) */
.logo-grid:not(.open) .more{display:none}
.lm{text-align:center;margin-top:40px}.lm .pill{border:0;cursor:pointer;font-family:inherit}
@media (max-width:1100px){.logo-grid div[style*="--m"]{grid-area:var(--m)}}  /* first 7 hand-placed on smaller screens too */
/* logo tiles shaped by the logo, text inside (Kay 2026-10-19). Desktop 8 wide hand-placed (--a), smaller screens 4 wide (--m). */
.lg{margin:0 var(--g);display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:210px;gap:16px}
.lg-c{position:relative;margin:0;background:#fff;border-radius:8px;overflow:hidden;grid-area:var(--a)}
.lg-c.hide{display:none!important}
.lg-t{position:absolute;inset:0 0 56px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lg-t img{position:absolute;inset:0;margin:auto;width:62%;height:56%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.lg-c.b .lg-t img{width:52%;height:46%}.lg-c.w .lg-t img{width:66%;height:52%}.lg-c.t .lg-t img{width:70%;height:52%}
.lg-c figcaption{position:absolute;left:18px;right:18px;bottom:14px}
.lg-c .wk-eb{margin:0 0 2px;font-size:10px;letter-spacing:.06em}
.lg-c h3{font-size:15px;line-height:1.2}.lg-c.b h3{font-size:19px}
.lg-c p{margin:0;max-height:0;overflow:hidden;opacity:0;color:#6f6f6f;font-weight:400;font-size:12.5px;line-height:1.45;transition:opacity .4s,max-height .4s,margin .4s}
.lg-c:hover .lg-t img{filter:none;opacity:1}
.lg-c:hover p{opacity:1;margin-top:8px;max-height:9em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.lg-c.b:hover p{-webkit-line-clamp:7;max-height:14em}.lg-c.t:hover p,.lg-c.w:hover p{-webkit-line-clamp:4}
.lg-c:hover .lg-t{transform:translateY(-24%) scale(.8)}.lg-c.s:hover .lg-t{transform:translateY(-34%) scale(.7)}
.fadein{animation:lgin .7s cubic-bezier(.16,1,.3,1) both}@keyframes lgin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:1100px){.lg{grid-template-columns:repeat(4,1fr);grid-auto-rows:180px}.lg-c{grid-area:var(--m)}}
@media (max-width:640px){.lg{grid-auto-rows:96px;gap:8px}.lg-c figcaption{display:none}.lg-t{inset:0}}
.lg-t.set{display:flex;align-items:center;justify-content:center;gap:6%;padding:0 8%}
.lg-t.set img,.lg-c.w .lg-t.set img{position:static;margin:0;width:28%;height:62%}
/* hover fix (Kay: tops of logos got cut): no more sliding up. The card is a column: logo area takes what's left above the text,
   so when the note opens the logo area shrinks and the logo scales down inside it, never past the top edge. */
.lg-c{display:flex;flex-direction:column}
.lg-t,.lg-c:hover .lg-t,.lg-c.s:hover .lg-t{position:relative;inset:auto;flex:1;min-height:0;transform:none}
.lg-c figcaption{position:static;padding:0 18px 14px;flex:none}
.lg-c:hover p{max-height:11em}
@media (max-width:640px){.lg-t{flex:1}}