/* "Our work" page redesign: tighter spacing, medium headings, client projects as a swipeable row,
   clearer locks on team projects. Content and fonts unchanged. Writes both colour states by hand. */
.work-page.connected-site { --wk-pad: clamp(56px, 6vw, 96px); }

/* ---------- medium headings ---------- */
.work-page.connected-site .projects-intro h1 { font-size: clamp(2.3rem, 3.6vw, 3.7rem) !important; line-height: 1.06 !important; }
.work-page.connected-site main section h2:not(.project-card h2) { font-size: clamp(1.9rem, 3vw, 3rem) !important; line-height: 1.08 !important; letter-spacing: -.035em; }
.work-page.connected-site .project-gallery .project-card h2 { font-size: clamp(1.15rem, 1.4vw, 1.4rem) !important; line-height: 1.2 !important; }
.work-page.connected-site .research-section h3, .work-page.connected-site .blog-preview h3 { font-size: clamp(1rem, 1.25vw, 1.2rem) !important; }
.work-page.connected-site .projects-intro-wordmark { font-size: clamp(5rem, 13vw, 12rem) !important; }
.work-page.connected-site .row-index { font-size: clamp(2.4rem, 4vw, 3.6rem) !important; }

/* ---------- spacing ---------- */
.work-page.connected-site .projects-intro { padding-top: clamp(28px, 3.5vw, 52px) !important; padding-bottom: clamp(28px, 3vw, 44px) !important; min-height: 0 !important; }
.work-page.connected-site .projects-intro > p:last-child { margin-top: 16px !important; }
.work-page.connected-site main > section.work-row,
.work-page.connected-site main > section.blog-preview,
.work-page.connected-site main > section.research-section,
.work-page.connected-site main > section.work-cta { padding-top: var(--wk-pad) !important; padding-bottom: var(--wk-pad) !important; }
.work-page .project-gallery + .work-row { margin-top: 0 !important; }
.work-page.connected-site main .connected-heading { margin-bottom: clamp(26px, 3vw, 42px) !important; }

/* =========================================================
   Client projects — one swipeable row
   ========================================================= */
.work-page.connected-site.projects-page .project-gallery {
  display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
  grid-auto-columns: clamp(270px, 29vw, 380px); gap: clamp(14px, 1.6vw, 22px) !important; align-items: stretch !important;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px var(--gutter) 10px !important; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 70px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 70px), transparent);
}
.work-page.connected-site.projects-page .project-gallery.at-end { -webkit-mask: none; mask: none; }
.work-page.connected-site.projects-page .project-gallery::-webkit-scrollbar { display: none; }
.work-page.connected-site.projects-page .project-gallery.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.work-page .project-gallery .project-card.project-card, .work-page .project-gallery #maisan-sale {
  display: flex !important; flex-direction: column; grid-column: auto !important; scroll-snap-align: start;
  margin: 0 !important; padding: 0 !important; border: 1px solid !important; border-radius: 16px !important; overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.work-page .project-gallery #maisan-sale { grid-column: span 1 !important; }
@media (min-width: 900px) { .work-page.connected-site.projects-page .project-gallery > #maisan-sale { width: calc(clamp(270px, 29vw, 380px) * 1.6); } .work-page.connected-site.projects-page .project-gallery { grid-auto-columns: auto; } .work-page .project-gallery .project-card:not(#maisan-sale) { width: clamp(270px, 29vw, 380px); } }
.work-page .project-gallery .project-card:hover { transform: translateY(-4px); }
.work-page .project-gallery .project-visual { aspect-ratio: 16 / 10 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; }
.work-page .project-gallery #maisan-sale .project-visual { aspect-ratio: 16 / 9.5 !important; }
.work-page .project-gallery .project-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px !important; margin: 0 !important; }
.work-page .project-gallery .project-meta > p { font-size: .88rem !important; line-height: 1.6 !important; margin: 4px 0 6px !important; }
.work-page .project-gallery .project-meta > span { font-size: .6rem !important; }
.work-page .project-gallery .project-context { margin-top: auto !important; }
.work-page .project-gallery .project-context summary { min-height: 40px !important; padding-block: 8px !important; }

.wk-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px var(--gutter) 0; }
.wk-dots { display: flex; align-items: center; gap: 7px; }
.wk-dots button { flex: none; width: 8px; height: 8px !important; min-height: 0 !important; min-width: 0 !important; padding: 0; border: 0; border-radius: 99px; cursor: pointer; transition: width .35s cubic-bezier(.2, .8, .2, 1), background .35s; }
.wk-dots button[aria-current="true"] { width: 26px; }
.wk-arrows { display: flex; gap: 10px; }
.wk-arrows button { display: grid; place-items: center; width: 42px; height: 42px; min-height: 0 !important; border-radius: 50%; border: 1px solid; background: transparent; cursor: pointer; transition: background .25s, opacity .25s, transform .25s; }
.wk-arrows button:hover:not(:disabled) { transform: translateY(-1px); }
.wk-arrows button:disabled { opacity: .3; cursor: default; }
.wk-arrows svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wk-controls button:focus-visible { outline: 2px solid #c9a3bd; outline-offset: 3px; }

/* default colours: light gallery area */
html:not([data-theme="inverted"]) .work-page .project-gallery .project-card.project-card { border-color: rgba(96, 67, 91, .14) !important; background: #fffdfc !important; box-shadow: 0 18px 40px -32px rgba(96, 67, 91, .6); }
html:not([data-theme="inverted"]) .work-page .project-gallery .project-card:hover { border-color: rgba(96, 67, 91, .32) !important; box-shadow: 0 26px 48px -30px rgba(96, 67, 91, .65); }
html:not([data-theme="inverted"]) .wk-dots button { background: rgba(96, 67, 91, .2); }
html:not([data-theme="inverted"]) .wk-dots button[aria-current="true"] { background: #60435b; }
html:not([data-theme="inverted"]) .wk-arrows button { border-color: rgba(96, 67, 91, .35); color: #211d1b; }
html:not([data-theme="inverted"]) .wk-arrows button:hover:not(:disabled) { background: rgba(96, 67, 91, .07); }
/* flipped */
html[data-theme="inverted"] .work-page .project-gallery .project-card.project-card { border-color: rgba(201, 163, 189, .2) !important; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)) !important; }
html[data-theme="inverted"] .work-page .project-gallery .project-card:hover { border-color: rgba(201, 163, 189, .45) !important; box-shadow: 0 0 30px -10px rgba(201, 163, 189, .4); }
html[data-theme="inverted"] .wk-dots button { background: rgba(201, 163, 189, .22); }
html[data-theme="inverted"] .wk-dots button[aria-current="true"] { background: #d3bdcd; }
html[data-theme="inverted"] .wk-arrows button { border-color: rgba(201, 163, 189, .4); color: #f4eee6; }
html[data-theme="inverted"] .wk-arrows button:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }

/* =========================================================
   Locked team projects — make the lock obvious
   ========================================================= */
body:not(.has-work-access) .work-page-lock-hint, body:not(.has-work-access) .sq-action::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.work-page .ps-lock:not(.is-open) { box-shadow: 0 0 0 4px rgba(201, 163, 189, .18), 0 0 18px rgba(201, 163, 189, .55) !important; }

@media (max-width: 899px) {
  .work-page.connected-site.projects-page .project-gallery { grid-auto-columns: 78% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .work-page.connected-site.projects-page .project-gallery { scroll-behavior: auto; }
  .work-page .project-gallery .project-card, .wk-dots button, .wk-arrows button { transition: none !important; }
}
.work-page .project-gallery #maisan-sale .project-meta { padding: 16px 18px 18px !important; margin: 0 !important; max-width: none !important; width: auto !important; }
.work-page .project-gallery #maisan-sale .project-visual { padding: 14px 18px !important; }
html:not([data-theme="inverted"]) .work-page .project-gallery #maisan-sale { border-color: rgba(96, 67, 91, .14) !important; }
html[data-theme="inverted"] .work-page .project-gallery #maisan-sale { border-color: rgba(201, 163, 189, .2) !important; }
.work-page.connected-site.projects-page .project-gallery { padding-top: 22px !important; }

/* research: five cards — the newest one runs full width */
.work-page .research-grid > .research-card:nth-child(5):last-child { grid-column: 1 / -1; }
/* blog: three side stories stay compact */
.work-page .blog-side-stories { gap: 12px !important; }
.work-page .blog-side-stories .blog-short { padding-block: 18px !important; min-height: 0 !important; }
html:not([data-theme="inverted"]) .work-page .blog-published .blog-entry-footer { color: #6b5f66 !important; border-color: rgba(96, 67, 91, .15) !important; }
html[data-theme="inverted"] .work-page .blog-published .blog-entry-footer { color: #b9adb5 !important; border-color: rgba(201, 163, 189, .2) !important; }
.work-page .blog-published .blog-entry-footer { margin-top: 12px; font-size: .8rem; }

/* =========================================================
   Blog — four small, equal cards in one row
   ========================================================= */
.work-page .blog-editorial { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; min-height: 0 !important; }
.work-page .blog-side-stories { display: contents !important; }
.work-page .blog-editorial .blog-feature, .work-page .blog-editorial .blog-short {
  display: flex !important; flex-direction: column; gap: 10px; min-height: 0 !important; height: auto !important; margin: 0 !important;
  padding: 18px 18px 16px !important; border-radius: 14px !important; overflow: hidden; grid-column: auto !important; grid-row: auto !important;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.work-page .blog-editorial :is(.blog-feature, .blog-short):hover { transform: translateY(-3px); }
.work-page .blog-editorial .blog-feature::before, .work-page .blog-editorial .blog-feature::after { opacity: .35 !important; transform: scale(.45) !important; transform-origin: top right !important; }
.work-page .blog-editorial .blog-feature-body { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0 !important; min-height: 0 !important; flex: 1; }
.work-page .blog-editorial .blog-entry-meta { margin: 0 0 4px !important; padding: 0 !important; font-size: .58rem !important; gap: 8px; }
.work-page .blog-editorial .blog-feature-label { margin: 0 !important; font-size: .58rem !important; }
.work-page .blog-editorial h3 { margin: 0 !important; font-size: 1.02rem !important; line-height: 1.3 !important; max-width: none !important; }
.work-page .blog-editorial h3 br { display: none; }
.work-page .blog-editorial .blog-title-button { display: block; font: inherit !important; text-align: left; }
.work-page .blog-editorial .blog-open-hint { display: inline-block; margin-top: 8px !important; font-size: .74rem !important; }
.work-page .blog-editorial :is(.blog-feature-body, .blog-short) > p { margin: 0 !important; font-size: .84rem !important; line-height: 1.6 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.work-page .blog-editorial .blog-entry-footer { margin: auto 0 0 !important; padding-top: 10px !important; font-size: .72rem !important; }
@media (max-width: 1000px) { .work-page .blog-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) {
  .work-page .blog-editorial { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 2px 20px 10px; scrollbar-width: none; }
  .work-page .blog-editorial > *, .work-page .blog-editorial .blog-short { scroll-snap-align: start; }
}
.work-page .blog-editorial .blog-open-hint { display: table !important; margin-top: 8px !important; }
.work-page .blog-editorial .blog-feature-label { font-size: .56rem !important; letter-spacing: .14em !important; }
.work-page .blog-editorial h3 a, .work-page .blog-editorial h3 button { text-decoration: none !important; }