/*
 * Yous & Co. — Colour finish 20
 * Load after studio-finish.css. This is a surface-only finishing layer.
 * Citron is the signature; lavender and rose distinguish the human chapters.
 * Project cards, case-study pages, the hero and the metro are deliberately unscoped.
 * No typography, content, motion timing, grid or navigation geometry is replaced.
 */
:root {
  --studio-citron: #C8FF2E;
  --studio-ink: #1B1B1F;
  --studio-paper: #FBF8F4;
  --studio-nude: #EDE7DE;
  --studio-lavender: #D8D0EB;
  --studio-rose: #E8C5C2;
  --studio-rule: #1B1B1F42;
}

/* Flat colour replaces the faint full-page photograph, including between sections. */
body.page-mode { background: var(--studio-nude); }
body.page-mode::before { content: none; }
body.page-mode #main { background: transparent; }

/* HOME — the existing text column stays aligned while colour reaches both edges.
 * A clipped shadow on a non-interactive pseudo-element paints the outer gutters
 * without changing the section width, creating horizontal overflow, or clipping text.
 */
.premium-portfolio .folio-intro,
.editorial-portfolio #about,
.editorial-portfolio #connect {
  position: relative;
  isolation: isolate;
  border-color: var(--studio-rule);
}
.premium-portfolio .folio-intro::before,
.editorial-portfolio #about::before,
.editorial-portfolio #connect::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--chapter-colour);
  box-shadow: 0 0 0 100vmax var(--chapter-colour);
  clip-path: inset(0 -100vmax);
}
.premium-portfolio .folio-intro {
  --chapter-colour: var(--studio-citron);
  background: var(--chapter-colour);
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
  border-bottom-color: var(--studio-ink);
}
body.page-mode #main .premium-portfolio .folio-intro :is(h2,p,a) {
  color: var(--studio-ink);
}
.premium-portfolio .folio-intro .folio-link { border-color: var(--studio-ink); }

/* Library: a deliberate ink interval, with large citron type and light body copy. */
.premium-portfolio #the-library {
  background: var(--studio-ink);
  color: var(--studio-paper);
  border-block: 1px solid var(--studio-ink);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}
.premium-portfolio #the-library::before { content: none; }
body.page-mode #main .premium-portfolio #the-library :is(h2,.folio-overline) {
  color: var(--studio-citron);
}
body.page-mode #main .premium-portfolio #the-library :is(p,a,li) {
  color: var(--studio-paper);
}
body.page-mode #main .premium-portfolio #the-library .folio-overline {
  color: var(--studio-citron);
}
.premium-portfolio #the-library .premium-process li { border-color: #C8FF2E80; }
.premium-portfolio #the-library .premium-process li>span { color: var(--studio-citron); }
.premium-portfolio #the-library .folio-link { border-color: var(--studio-citron); }
.premium-portfolio #the-library .folio-link:hover { color: var(--studio-citron)!important; }
.premium-portfolio #the-library :is(a,button):focus-visible {
  outline-color: var(--studio-citron);
}

/* Expertise has a lavender stage. The three reading cards are opaque, never glass. */
.editorial-portfolio #expertise,
.editorial-portfolio #expertise .cinema-story {
  background: var(--studio-lavender);
  color: var(--studio-ink);
  border-color: var(--studio-rule);
}
body.page-mode #main #expertise :is(h2,h3,p,a,.folio-overline,.cinema-story-label,.cinema-story-footer) {
  color: var(--studio-ink);
}
#expertise .cinema-step-card {
  background: var(--studio-paper)!important;
  border-top-color: var(--studio-ink);
}
#expertise .cinema-scroll-step:nth-child(2) .cinema-step-card {
  background: var(--studio-rose)!important;
}
#expertise .cinema-scroll-step:nth-child(3) .cinema-step-card {
  background: var(--studio-citron)!important;
}
#expertise .cinema-step-card .cinema-ai-note { border-color: var(--studio-ink); }
#expertise .cinema-pose-controls button {
  background: var(--studio-paper);
  color: var(--studio-ink);
  border-color: var(--studio-ink);
}
#expertise .cinema-pose-controls button[aria-pressed=true] {
  background: var(--studio-ink);
  color: var(--studio-paper);
}

/* A warm portrait chapter, then a citron invitation to make the final action obvious. */
.editorial-portfolio #about {
  --chapter-colour: var(--studio-rose);
  background: var(--chapter-colour);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}
body.page-mode #main #about :is(h2,p,figcaption,.folio-overline,.folio-link) {
  color: var(--studio-ink);
}
#about .motion-flip {
  background: var(--studio-ink);
  color: var(--studio-paper);
}
.editorial-portfolio #connect {
  --chapter-colour: var(--studio-citron);
  background: var(--chapter-colour);
  padding-block: clamp(3.5rem, 6vw, 6rem);
  border-top-color: var(--studio-ink);
}
body.page-mode #main #connect :is(h2,p,.folio-overline,.folio-link) {
  color: var(--studio-ink);
}
/* The runtime normally makes the visible CTA citron. On citron it must stay ink. */
body.page-mode #main #connect .btn-solid,
body.page-mode #main #connect .btn-solid[data-acid-target] {
  background: var(--studio-ink)!important;
  color: var(--studio-paper)!important;
  border-color: var(--studio-ink)!important;
}
body.page-mode #main #connect .btn-solid:hover {
  background: var(--studio-paper)!important;
  color: var(--studio-ink)!important;
}

/* INTERIOR PAGES — route colour is a stable cue across FR, EN and AR.
 * Explicitly exclude individual projects; their own art direction owns the surface.
 */
.page:where([data-page]:not([data-page=home]):not([data-page=project])) {
  --studio-head: var(--studio-citron);
  --studio-wash: #F3EEE6;
}
body.page-mode #main.page[data-page]:not([data-page=home]):not([data-page=project]) {
  background: var(--studio-wash);
}
.page:is([data-page=about],[data-page=events]) {
  --studio-head: var(--studio-rose);
  --studio-wash: #F5E8E5;
}
.page:is([data-page=library],[data-page=lab],[data-page=making-of]) {
  --studio-head: var(--studio-lavender);
  --studio-wash: #EEE9F5;
}
.page[data-page]:not([data-page=home]):not([data-page=project]) .page-head {
  background: var(--studio-head);
  border-bottom-color: var(--studio-ink);
  padding-block: clamp(2rem, 3.5vw, 3.5rem) clamp(3rem, 5vw, 5rem);
}
.page[data-page]:not([data-page=home]):not([data-page=project]) .page-head::before {
  content: '';
  inset: 0;
  background: var(--studio-head);
  box-shadow: 0 0 0 100vmax var(--studio-head);
  clip-path: inset(0 -100vmax);
  opacity: 1;
  transform: none;
  mix-blend-mode: normal;
}
body.page-mode #main.page[data-page]:not([data-page=home]):not([data-page=project]) .page-head :is(h1,p,a,.eyebrow,.lead,.suite-breadcrumb,.suite-signature) {
  color: var(--studio-ink);
}
.page[data-page]:not([data-page=home]):not([data-page=project]) .suite-head-note {
  background: var(--studio-paper);
  border-color: var(--studio-ink);
}
.page[data-page]:not([data-page=home]):not([data-page=project])>.view>.section:not(.band):not(.band-soft) {
  background: var(--studio-paper);
}
.page[data-page]:not([data-page=home]):not([data-page=project]) .band-soft {
  background: var(--studio-head);
  border-color: var(--studio-rule);
}
body.page-mode #main.page[data-page]:not([data-page=home]):not([data-page=project]):not([data-page=events]) .band :is(h2,h3,p,li,.eyebrow) {
  color: var(--studio-paper);
}
body.page-mode #main.page[data-page]:not([data-page=home]):not([data-page=project]) .band-soft :is(h2,h3,p,li,.eyebrow,.suite-number) {
  color: var(--studio-ink);
}
.page[data-page]:not([data-page=home]):not([data-page=project]) .suite-next {
  background: var(--studio-nude);
  border-color: var(--studio-rule);
}

/* Useful surfaces repeat the palette: outputs, selected options and the human edit. */
.page[data-page=method] .step .get { background: var(--studio-lavender); }
.page[data-page=method] .step:nth-child(2n) .get { background: var(--studio-rose); }
.page[data-page=about] .suite-brand-mark { background: var(--studio-citron); }
.page[data-page=menu] .menu-preview { background: var(--studio-lavender); }
.page[data-page=menu] .menu-item.on,
.page[data-page=contact] .opt[aria-pressed=true] {
  background: var(--studio-citron);
  color: var(--studio-ink);
  border-color: var(--studio-ink);
}
.page[data-page=offers] .service-edition.featured { border-top-color: var(--studio-ink); }
.page[data-page=offers] .service-edition.featured .tag {
  background: var(--studio-citron);
  color: var(--studio-ink);
}
.page[data-page=making-of] .studio-review article { background: var(--studio-rose); }
.page[data-page=making-of] .studio-review article+article {
  background: var(--studio-citron);
  border-color: var(--studio-ink);
}
.page[data-page=making-of] .build-inspector { border-color: var(--studio-ink); }
.page[data-page=events] .band { background: var(--studio-rose); }
body.page-mode #main.page[data-page=events] .band :is(h2,h3,p,li,.eyebrow,.num) {
  color: var(--studio-ink);
}
.page[data-page=events] .poster:nth-child(3n+1) { background: var(--studio-citron); }
.page[data-page=events] .poster:nth-child(3n+2) { background: var(--studio-lavender); }
.page[data-page=events] .poster:nth-child(3n) { background: var(--studio-paper); }

/* The Library page keeps its interactive workbench light and fully readable. */
.page[data-page=library] .suite-library-lab { background: var(--studio-lavender); }
.page[data-page=library] .library-tabs { background: var(--studio-nude); }
.page[data-page=library] .library-tabs button { color: var(--studio-ink); border-color: var(--studio-rule); }
.page[data-page=library] .library-tabs button[aria-selected=true] {
  background: var(--studio-citron);
  color: var(--studio-ink);
}
.page[data-page=library] .library-panel { background: var(--studio-paper); }
.page[data-page=library] .suite-library-lab :is(a,button):focus-visible { outline-color: var(--studio-ink); }
.page[data-page=library] .library-panel blockquote { background: var(--studio-rose); }
.page[data-page=library]>.view>.studio-catalogue { background: var(--studio-nude); }
.page[data-page=library] .studio-pack-list details[open] { background: var(--studio-citron); }
.page[data-page=library] .studio-pack-list :is(summary,li) { color: var(--studio-ink); }

/* The closing frame echoes the signature colour without sacrificing small-text contrast. */
body.page-mode .footer {
  background: var(--studio-ink);
  color: var(--studio-paper);
  border: 0;
  box-shadow: inset 0 8px 0 var(--studio-citron);
}
body.page-mode .footer :is(p,a) { color: var(--studio-paper); }
body.page-mode .footer .wordmark-name,
body.page-mode .footer .wordmark-name i,
body.page-mode .footer #footer-mail { color: var(--studio-citron); }
body.page-mode .footer a:hover { color: var(--studio-citron); }
body.page-mode .footer :is(a,button):focus-visible { outline-color: var(--studio-citron); }

/* Logical properties and colour-only overrides make the same surfaces work in RTL. */
@media (max-width:700px) {
  .page[data-page]:not([data-page=home]):not([data-page=project]) .suite-head-note {
    background: transparent;
    border-color: var(--studio-ink);
  }
}
@media (forced-colors:active) {
  .premium-portfolio .folio-intro::before,
  .editorial-portfolio #about::before,
  .editorial-portfolio #connect::before,
  .page[data-page]:not([data-page=home]):not([data-page=project]) .page-head::before { display: none; }
}