@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
/* Headlines: Neue Haas Grotesk Display 65 Medium via the Adobe Fonts web project (link in every page head).
   'SOSSEGO Display' only picks up a locally installed copy, e.g. in previews that cannot load Adobe Fonts. */
@font-face{font-family:'SOSSEGO Display';src:local('Neue Haas Grotesk Display Pro 65 Medium'),local('NeueHaasGroteskDisp Pro Md'),local('NeueHaasDisplay-Medium'),local('NeueHaasDisplay-Mediu');font-weight:400;font-style:normal;font-display:swap}
:root{--font-display:'neue-haas-grotesk-display','SOSSEGO Display','DM Sans',Arial,Helvetica,sans-serif;--bg:#f7f7f5;--ink:#1a1a18;--muted:#8a8a88;--line:#d8d8d5;--placeholder:#e8e8e5;--placeholder-text:#858581;color-scheme:light}
:root[data-theme="dark"]{--bg:#050505;--ink:#efefeb;--muted:#8a8a88;--line:#3a3a37;--placeholder:#222220;--placeholder-text:#82827e;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .45s,color .45s}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;width:100%}h1,h2,h3,p,figure{margin:0}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,.gallery-viewport:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.page{min-height:100vh}
.cursor-bracket{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;user-select:none;color:var(--ink);font-size:14px;font-weight:400;line-height:20px;opacity:0;visibility:hidden;transition:opacity .15s ease-in,visibility 0s linear .15s}.cursor-bracket.is-visible{opacity:1;visibility:visible;transition:opacity .3s ease-out,visibility 0s}
.site-header{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:39px 40px 0;align-items:start;line-height:1.5;letter-spacing:.01em;text-transform:uppercase}.main-nav{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.main-nav a{position:relative;white-space:nowrap;will-change:transform}.main-nav .nav-badge{position:absolute;top:0;left:calc(100% + 4px)}.main-nav a,.theme-toggle,.brand{transition:color .25s}.main-nav a:hover,.theme-toggle:hover,.brand:hover{color:var(--muted)}.nav-badge{display:inline-block;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}.main-nav a:hover .nav-badge,.main-nav a:focus-visible .nav-badge{opacity:1;transform:translateY(0)}.theme-toggle{display:flex;align-items:center;gap:6px;align-self:start;width:max-content;padding:0;border:0;background:none;color:var(--ink);text-transform:uppercase;cursor:pointer}.theme-toggle .slash{color:var(--muted)}:root[data-theme="dark"] .theme-toggle span:first-child{color:var(--muted)}:root:not([data-theme="dark"]) .theme-toggle span:last-child{color:var(--muted)}.brand-column{max-width:310px}.brand{display:block;width:max-content;font-weight:600;letter-spacing:.025em}.brand-intro{max-width:305px;margin-top:14px;color:var(--muted);line-height:1.55;letter-spacing:0;text-transform:none}.header-right{display:block;justify-self:end;width:min(100%,243px)}.header-right img{display:block;width:100%;height:auto}
.home-stage{height:calc(100svh - 39px);min-height:650px;position:relative;overflow:hidden}.gallery-viewport{position:absolute;bottom:40px;left:0;width:100%;overflow:hidden;touch-action:pan-x}.gallery-track{display:flex;align-items:flex-end;gap:12px;will-change:transform;width:max-content}.gallery-item{flex:0 0 min(27vw,368px);display:block;min-width:0;cursor:pointer;transition:flex-basis .6s cubic-bezier(.2,.75,.25,1)}.gallery-item:hover,.gallery-item:focus-visible{flex-basis:min(33.5vw,456px)}.gallery-meta{display:flex;justify-content:space-between;gap:16px;min-height:24px;padding-bottom:8px;color:var(--ink);line-height:1.2;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:opacity .28s ease .14s,transform .35s ease .12s}.gallery-meta span:last-child{color:var(--muted);text-align:right}.gallery-item:hover .gallery-meta,.gallery-item:focus-visible .gallery-meta{opacity:1;transform:translateY(0)}.case-media{position:relative;overflow:hidden;background:var(--placeholder);aspect-ratio:368/469}.case-media img{height:100%;width:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.75,.25,1)}.gallery-item:hover .case-media img,.gallery-item:focus-visible .case-media img{transform:scale(1.035)}.media-pending{display:grid;place-items:center;padding:24px;color:var(--placeholder-text);text-align:center}.media-pending span{max-width:90%;font-size:clamp(20px,2.7vw,42px);font-weight:500;line-height:1.06;letter-spacing:-.05em}.gallery-instruction{position:absolute;right:40px;bottom:12px;color:var(--muted);letter-spacing:.04em}.gallery-instruction span{padding:0 12px}
.eyebrow{line-height:1.4;text-transform:uppercase}.work-intro{padding:165px 40px 90px;min-height:440px}.work-title{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:end;margin-top:42px}.work-title h1{font-weight:400;line-height:.94;letter-spacing:-.075em}.work-title p{max-width:310px;margin:0 0 8px auto;color:var(--muted);line-height:1.4}.work-section{padding:0 40px 110px}.work-filters{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:32px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.work-filters button{padding:0;border:0;background:none;color:var(--muted);line-height:1.5;text-align:left;text-transform:uppercase;cursor:pointer;transition:color .2s}.work-filters button:hover,.work-filters button[aria-pressed="true"]{color:var(--ink)}.work-filters button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}.work-filters span{margin-left:5px}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 28px;align-items:start}.work-card{display:block;min-width:0}.work-card .case-media{aspect-ratio:4/5}.work-card:hover img,.work-card:focus-visible img{transform:scale(1.05)}.work-card-info{display:flex;justify-content:space-between;gap:16px;padding-top:11px;line-height:1.45;text-transform:uppercase;transition:transform .35s}.work-card:hover .work-card-info,.work-card:focus-visible .work-card-info{transform:translateY(4px)}.work-card-info>div{display:flex;flex-direction:column;align-items:flex-start}.work-card-category,.work-card-info>span{color:var(--muted)}.work-empty{padding:80px 0;color:var(--muted)}
.about-lead{padding:170px 40px 140px;min-height:70vh}.about-lead h1{max-width:1250px;margin-top:50px;font-weight:400;line-height:1.02;letter-spacing:-.06em}.about-columns{display:grid;grid-template-columns:1.45fr 1fr .8fr;gap:50px;padding:25px 40px 125px;border-top:1px solid var(--line)}.about-column h2{margin-bottom:40px;font-weight:400;line-height:1.4}.about-column p,.about-column li{max-width:430px;line-height:1.55}.about-column ul{padding:0;margin:0;list-style:none}.about-column li+li{margin-top:8px}
.project-heading{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:45px;align-items:end;min-height:560px;padding:165px 40px 50px}.project-heading h1{max-width:850px;margin-top:46px;font-weight:400;line-height:.94;letter-spacing:-.075em}.project-fields{display:grid;grid-template-columns:1fr 1fr;gap:25px}.project-fields span{color:var(--muted)}.project-fields p{margin-top:9px;text-transform:uppercase}.project-hero{margin:0 40px}.project-hero .case-media{aspect-ratio:16/9}.project-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 40px 0}.project-gallery .case-media{aspect-ratio:4/3}.project-gallery .case-media:nth-child(3n){grid-column:span 2;aspect-ratio:16/9}
.project-story{display:grid;grid-template-columns:1fr 2fr;gap:45px;margin:0 40px;padding:78px 0 84px;border-bottom:1px solid var(--line)}.project-story-body{max-width:920px}.project-summary{line-height:1.17;letter-spacing:-.045em}.project-summary+.project-summary{margin-top:1em}.inline-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:color .2s}.inline-link:hover,.inline-link:focus-visible{color:var(--muted)}.project-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:70px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}.project-figures dt{color:var(--muted);line-height:1.4;text-transform:uppercase}.project-figures dd{margin:9px 0 0;letter-spacing:-.05em}.project-testimonial{margin:65px 0 0;padding:23px 0 0;border-top:1px solid var(--line)}.project-testimonial p{max-width:670px;line-height:1.3;letter-spacing:-.025em}.project-testimonial cite{display:block;margin-top:20px;color:var(--muted);font-style:normal;text-transform:uppercase}

@media(max-width:800px){.site-header{grid-template-columns:1fr 1fr;padding:23px 20px 0;gap:18px 12px}.main-nav{grid-column:1;grid-row:1}.header-right{grid-column:2;grid-row:1;width:min(100%,180px)}.theme-toggle{grid-column:2;grid-row:2;justify-self:end}.brand-column{grid-column:1/-1;grid-row:3;max-width:unset}.brand-intro{max-width:420px}.home-stage{height:calc(100svh - 200px);min-height:490px}.gallery-viewport{bottom:48px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}.gallery-track{transform:none!important;padding-left:20px;padding-right:20px}.gallery-item,.gallery-item:hover,.gallery-item:focus-visible{flex-basis:68vw}.gallery-meta{opacity:1;transform:none}.gallery-instruction{right:20px;bottom:15px}.work-intro{padding:100px 20px 70px;min-height:390px}.work-title{display:block}.work-title p{margin:25px 0 0}.work-section{padding:0 20px 80px}.work-filters{gap:12px 20px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}.about-lead{padding:115px 20px 100px;min-height:0}.about-columns{grid-template-columns:1fr 1fr;gap:65px 25px;padding:22px 20px 90px}.project-heading{grid-template-columns:1fr;min-height:480px;padding:120px 20px 40px}.project-fields{max-width:480px}.project-hero{margin:0 20px}.project-story{grid-template-columns:1fr;gap:30px;margin:0 20px;padding:55px 0 65px}.project-figures{margin-top:45px}.project-testimonial{margin-top:45px}.project-gallery{margin:16px 20px 0}}
@media(max-width:560px){.home-stage{min-height:420px}.gallery-item,.gallery-item:hover,.gallery-item:focus-visible{flex-basis:74vw}.work-grid{grid-template-columns:1fr;gap:32px}.work-card .case-media{aspect-ratio:4/5}.about-columns{grid-template-columns:1fr;gap:55px}.about-column h2{margin-bottom:22px}.project-fields{grid-template-columns:1fr 1fr}.project-hero .case-media{aspect-ratio:4/5}.project-gallery{grid-template-columns:1fr}.project-gallery .case-media:nth-child(3n){grid-column:auto;aspect-ratio:4/3}}
@media(max-width:560px){.project-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body[data-page="home"] .page{height:100svh;overflow:hidden}body[data-page="home"] .site-header{position:absolute;top:0;left:0;width:100%}body[data-page="home"] .home-stage{height:100svh}.work-card[hidden]{display:none}

/* Fixed header with a quieter, compact state during vertical scrolling. */
:root{--header-surface:rgba(247,247,245,.78)}
:root[data-theme="dark"]{--header-surface:rgba(5,5,5,.78)}
.site-header{position:fixed;top:0;left:0;width:100%;z-index:50;grid-template-columns:repeat(4,minmax(0,1fr));padding:28px 40px 20px;background:var(--header-surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:padding .3s ease,background-color .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.main-nav{grid-column:1;grid-row:1}
.brand-column{grid-column:2/span 2;grid-row:1;max-width:330px;max-height:140px;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,visibility .25s ease}
.brand-intro{margin-top:0;color:var(--ink)}
.logo-controls{grid-column:4;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
.header-right{width:min(100%,var(--logo-size,243px))}
.header-right img{filter:none;transition:filter .3s ease}
:root[data-theme="dark"] .header-right img{filter:invert(1)}
.logo-controls .theme-toggle{align-self:flex-end;max-height:25px;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,visibility .25s ease}
.site-header.is-scrolled{padding-top:12px;padding-bottom:12px;border-bottom-color:var(--line)}
.site-header.is-scrolled .brand-column,.site-header.is-scrolled .theme-toggle{max-height:0;opacity:0;visibility:hidden;pointer-events:none}
.site-header.is-scrolled .logo-controls{gap:0}
body[data-page="home"] .site-header{position:fixed;top:0;left:0;width:100%}
body:not([data-page="home"]) main{padding-top:170px}
.work-intro{padding-top:65px}
.about-lead{padding-top:65px}
.project-heading{padding-top:65px}
@media(max-width:800px){
  .site-header{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:20px 20px 15px}
  .main-nav{grid-column:1;grid-row:1}
  .logo-controls{grid-column:2;grid-row:1}
  .brand-column{grid-column:1/-1;grid-row:2;max-width:420px;max-height:150px}
  .header-right{width:min(100%,var(--logo-size,170px))}
  body:not([data-page="home"]) main{padding-top:225px}
  .work-intro,.about-lead,.project-heading{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){.site-header,.brand-column,.logo-controls .theme-toggle,.header-right img{transition:none}}

/* Expanded logo scales against the navigation height. */
.header-right{width:var(--logo-size,360px)}
@media(max-width:800px){
  .header-right{width:var(--logo-size,220px)}
  body:not([data-page="home"]) main{padding-top:225px}
  .work-intro,.about-lead,.project-heading{padding-top:40px}
}

/* V2: make the project's contribution readable before opening a case. */
.gallery-meta{opacity:1;transform:none;align-items:baseline}
.gallery-service{max-width:55%}
.work-card-info{transform:none}
.work-card:hover .work-card-info,.work-card:focus-visible .work-card-info{transform:none}
.work-card-name{font-weight:500}
.work-card-category{margin-top:5px;color:var(--ink)}
.work-card-place{margin-top:4px;color:var(--muted)}

/* Case reports follow the same editorial grid as Work. */
.project-heading{min-height:0;align-items:end;padding-bottom:54px}
.project-back{display:inline-block;margin-bottom:56px;border-bottom:1px solid var(--line);padding-bottom:7px;color:var(--muted);text-transform:uppercase}
.project-back:hover{color:var(--ink)}
.project-heading h1{margin-top:26px}
.project-headline-service{margin-top:27px;line-height:1.2}
.project-fields{margin:0;align-self:end}
.project-fields div{border-top:1px solid var(--line);padding-top:10px}
.project-fields>div{grid-column:1/-1}
.project-fields dt{color:var(--muted);line-height:1.3;text-transform:uppercase}
.project-fields dd{margin:10px 0 0;line-height:1.4;text-transform:uppercase}
.project-placeholder{color:var(--muted)}
.project-gallery-section{padding-top:76px}
.project-image{margin:0;min-width:0}
.project-image figcaption{display:flex;justify-content:space-between;gap:20px;padding:9px 0 16px;color:var(--muted);line-height:1.3;text-transform:uppercase}
.project-gallery .project-image:nth-child(3n){grid-column:1/-1}
.project-gallery .project-image:nth-child(3n) .case-media{aspect-ratio:16/9}
@media(max-width:800px){
  .project-heading{padding-bottom:35px}
  .project-back{margin-bottom:32px}
  .project-gallery-section{padding-top:55px}
}
@media(max-width:560px){
  .gallery-meta{display:block;min-height:36px}
  .gallery-meta span{display:block;max-width:none;text-align:left!important}
  .gallery-meta span:last-child{padding-top:3px}
  .project-fields{grid-template-columns:1fr 1fr}
  .project-image{grid-column:auto!important}
  .project-gallery .project-image:nth-child(3n) .case-media{aspect-ratio:4/3}
  .project-image figcaption{display:block}
  .project-image figcaption span{display:block;margin-top:3px}
}

/* Services: buyer-facing offers, concrete formats and a longer-term programme. */
.text-link{display:inline-block;margin-top:17px;border-bottom:1px solid var(--line);padding-bottom:3px;color:var(--ink);line-height:1.4;text-transform:uppercase}
.text-link:hover{border-color:var(--ink)}
.services-lead{padding:65px 40px 110px}
.services-lead-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:45px;align-items:end;min-height:340px;margin-top:35px}
.services-lead h1{font-weight:400;line-height:.9;letter-spacing:-.08em}
.services-deck{max-width:400px;line-height:1.17;letter-spacing:-.045em}
.services-context{max-width:350px;margin-top:28px;color:var(--muted);line-height:1.45}
.service-paths,.service-formats,.service-programme,.service-method{padding:30px 40px 110px;border-top:1px solid var(--line)}
.services-section-head{display:grid;grid-template-columns:1fr 2fr;gap:45px;align-items:start;margin-bottom:72px}
.services-section-head h2{max-width:950px;font-weight:400;line-height:1;letter-spacing:-.065em}
.services-section-head>div>p{max-width:520px;margin-top:22px;color:var(--muted);line-height:1.45}
.service-path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.service-path{display:flex;min-height:400px;flex-direction:column;align-items:flex-start;border-top:1px solid var(--ink);padding:14px 26px 26px 0}
.service-path-number,.service-format-top,.service-wellbeing-content>span{line-height:1.3;text-transform:uppercase}
.service-path h3{max-width:680px;margin-top:55px;font-weight:400;line-height:.97;letter-spacing:-.07em}
.service-path>p{max-width:560px;margin-top:32px;line-height:1.4}
.service-path .service-path-detail{max-width:440px;margin-top:25px;color:var(--muted);line-height:1.5;text-transform:uppercase}
.service-path>a,.service-format>a,.service-method>a{display:inline-block;margin-top:auto;border-bottom:1px solid var(--line);padding-bottom:6px;text-transform:uppercase}
.service-path>a:hover,.service-format>a:hover,.service-method>a:hover{border-color:var(--ink)}
.service-format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-format{display:flex;min-height:290px;flex-direction:column;align-items:flex-start;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 22px 23px}
.service-format-top{display:flex;width:100%;justify-content:space-between;gap:16px;color:var(--muted)}
.service-format-top span:last-child{text-align:right}
.service-format h3{margin-top:60px;font-weight:400;line-height:1;letter-spacing:-.06em}
.service-format p{max-width:410px;margin-top:20px;color:var(--muted);line-height:1.45}
.service-format>a{margin-top:auto;padding-top:28px}
.service-wellbeing{display:grid;grid-template-columns:1fr 2fr;gap:45px;margin:0 40px 110px;padding:27px 0 45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-wellbeing-content{max-width:1100px}
.service-wellbeing h2{font-weight:400;line-height:.98;letter-spacing:-.07em}
.service-wellbeing-content p{max-width:750px;margin-top:35px;line-height:1.42}
.service-wellbeing-content p+p{margin-top:21px;color:var(--muted)}
.service-wellbeing-content>span{display:block;margin-top:45px;color:var(--muted)}
.service-programme{display:grid;grid-template-columns:1fr 2fr;gap:45px}
.service-programme h2{font-weight:400;line-height:.96;letter-spacing:-.075em}
.service-programme p{max-width:690px;margin-top:34px;line-height:1.42}
.service-programme .service-programme-note{margin-top:20px;color:var(--muted)}
.service-method{display:grid;grid-template-columns:1fr 2fr;gap:25px 45px;padding-bottom:140px}
.service-method h2{max-width:1060px;font-weight:400;line-height:1.04;letter-spacing:-.065em}
.service-method p,.service-method>a{grid-column:2}
.service-method p{max-width:560px;margin-top:18px;color:var(--muted);line-height:1.45}
.service-method>a{justify-self:start;margin-top:20px}
@media(max-width:800px){
  .services-lead{padding:40px 20px 80px}
  .services-lead-grid{grid-template-columns:1fr;gap:35px;min-height:0;margin-top:50px}
  .services-deck{max-width:640px}
  .service-paths,.service-formats,.service-programme,.service-method{padding:25px 20px 80px}
  .services-section-head,.service-wellbeing,.service-programme,.service-method{grid-template-columns:1fr;gap:30px}
  .services-section-head{margin-bottom:45px}
  .service-path{min-height:360px}
  .service-format-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-wellbeing{margin:0 20px 75px;padding-bottom:55px}
  .service-method p,.service-method>a{grid-column:1}
}
@media(max-width:560px){
  .service-path-grid,.service-format-grid{grid-template-columns:1fr}
  .service-path{min-height:0;padding-right:0;padding-bottom:45px}
  .service-path+.service-path{margin-top:20px}
  .service-path h3{margin-top:40px}
  .service-path>a{margin-top:45px}
  .service-format{min-height:250px}
  .service-format h3{margin-top:40px}
}

/* About tells the team's story and gives the existing O MATO work a place. */
.about-lead{min-height:0;padding:65px 40px 120px}
.about-lead h1{max-width:1180px;margin-top:70px;line-height:.96;letter-spacing:-.073em}
.about-deck{max-width:760px;margin:80px 0 0 auto;line-height:1.35;letter-spacing:-.025em}
.about-origin{margin:0 40px;padding-top:25px;border-top:1px solid var(--line)}
.about-origin-copy{display:grid;grid-template-columns:1fr 2fr;gap:45px;padding-bottom:85px}
.about-origin-copy>div{max-width:950px}
.about-origin h2,.about-approach h2,.about-network h2{font-weight:400;line-height:.99;letter-spacing:-.07em}
.about-origin-copy p:not(.eyebrow){max-width:760px;margin-top:36px;line-height:1.45}
.about-origin-copy a{display:inline-block;margin-top:35px;border-bottom:1px solid var(--ink);padding-bottom:5px;text-transform:uppercase}
.about-origin-image img{width:100%;aspect-ratio:16/9;object-fit:cover}
.about-origin-image figcaption{padding:12px 0 0;color:var(--muted);text-transform:uppercase}
.about-approach{margin:130px 40px 0;padding:25px 0 120px;border-top:1px solid var(--line)}
.about-approach-head{display:grid;grid-template-columns:1fr 2fr;gap:45px}
.about-approach h2{max-width:950px}
.about-approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:100px}
.about-approach-grid>div{min-height:220px;border-top:1px solid var(--line);padding-top:13px}
.about-approach-grid span{color:var(--muted);text-transform:uppercase}
.about-approach-grid p{max-width:350px;margin-top:65px;line-height:1.35;letter-spacing:-.02em}
.about-network{display:grid;grid-template-columns:1fr 2fr;gap:45px;margin:0 40px 130px;padding-top:25px;border-top:1px solid var(--line)}
.about-network h2{max-width:800px}
.about-network p:not(.eyebrow){max-width:700px;margin-top:38px;line-height:1.45}
.about-next-links{display:flex;flex-wrap:wrap;gap:35px;margin-top:55px}
.about-next-links a{border-bottom:1px solid var(--ink);padding-bottom:6px;text-transform:uppercase}
.about-origin-copy a:hover,.about-next-links a:hover{color:var(--muted);border-color:var(--muted)}
@media(max-width:800px){
  .about-lead{padding:40px 20px 100px}
  .about-lead h1{margin-top:55px}
  .about-deck{margin-top:65px}
  .about-origin,.about-approach,.about-network{margin-left:20px;margin-right:20px}
  .about-origin-copy,.about-approach-head,.about-network{grid-template-columns:1fr;gap:30px}
  .about-origin-copy{padding-bottom:60px}
  .about-approach{margin-top:100px;padding-bottom:95px}
  .about-approach-grid{margin-top:65px}
  .about-approach-grid p{margin-top:45px}
  .about-network{margin-bottom:100px}
}
@media(max-width:560px){
  .about-lead{padding-bottom:80px}
  .about-deck{margin-top:50px}
  .about-origin-image img{aspect-ratio:4/5}
  .about-approach-grid{grid-template-columns:1fr;gap:25px}
  .about-approach-grid>div{min-height:0;padding-bottom:22px}
  .about-approach-grid p{margin-top:30px}
  .about-next-links{gap:25px}
}

/* Network: a text-first index until partner photography and artist credits are ready. */
.network-lead{padding:65px 40px 0}
.network-lead-grid{display:grid;grid-template-columns:2fr 1fr;gap:45px;align-items:end;margin-top:55px}
.network-lead h1{font-weight:400;line-height:.94;letter-spacing:-.075em}
.network-lead-grid>p{max-width:390px;margin:0 0 8px auto;color:var(--muted);line-height:1.4}
.network-jump-links{display:flex;gap:35px;margin-top:105px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-transform:uppercase}
.network-jump-links a:hover{color:var(--muted)}
.network-partners{padding:120px 40px 135px;scroll-margin-top:130px}
.network-section-head{display:grid;grid-template-columns:1fr 2fr;gap:45px}
.network-section-head h2,.network-artists h2{max-width:1000px;font-weight:400;line-height:.98;letter-spacing:-.07em}
.network-section-head p:not(.eyebrow){max-width:580px;margin-top:30px;color:var(--muted);line-height:1.45}
.network-filters{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:85px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.network-filters button{border:0;padding:0;background:none;color:var(--muted);text-transform:uppercase;cursor:pointer}
.network-filters button:hover,.network-filters button[aria-pressed="true"]{color:var(--ink)}
.network-filters button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.network-filters span{margin-left:5px}
.network-partner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.network-partner{display:flex;min-height:250px;flex-direction:column;align-items:flex-start;padding:20px 0 26px;border-bottom:1px solid var(--line)}
.network-partner[hidden]{display:none}
.network-partner-top{display:flex;justify-content:space-between;gap:20px;width:100%;color:var(--muted);line-height:1.35;text-transform:uppercase}
.network-partner-top span:last-child{text-align:right}
.network-partner-body{margin-top:auto;padding:50px 0 35px}
.network-partner h3{font-weight:400;line-height:1;letter-spacing:-.07em}
.network-partner p{max-width:500px;margin-top:16px;color:var(--muted);line-height:1.4}
.network-partner>a{border-bottom:1px solid var(--ink);padding-bottom:5px;text-transform:uppercase}
.network-partner>a:hover{color:var(--muted);border-color:var(--muted)}
.network-artists{display:grid;grid-template-columns:1fr 2fr;gap:45px;margin:0 40px 120px;padding:35px 40px 65px;background:var(--ink);color:var(--bg);scroll-margin-top:130px}
.network-artists>div{max-width:1150px}
.network-artists p:not(.eyebrow){max-width:610px;margin-top:32px;color:var(--bg);line-height:1.45;opacity:.75}
.network-artist-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin:75px 0 0;padding:0;list-style:none}
.network-artist-list li{display:flex;align-items:baseline;gap:14px;min-width:0;padding:16px 0;border-top:1px solid color-mix(in srgb,currentColor 34%,transparent)}
.network-artist-number{flex:none;width:20px;opacity:.55}
.network-artist-name{min-width:0;line-height:1.1;letter-spacing:-.045em}
.network-artist-list>li>a{flex:none;margin-left:auto;border-bottom:1px solid currentColor;padding-bottom:2px;text-transform:uppercase;white-space:nowrap}
.network-artist-list>li>a:hover{opacity:.6}
@media(max-width:800px){
  .network-lead{padding:40px 20px 0}
  .network-lead-grid,.network-section-head,.network-artists{grid-template-columns:1fr;gap:35px}
  .network-lead-grid>p{margin:0;max-width:600px}
  .network-jump-links{margin-top:70px}
  .network-partners{padding:90px 20px 100px}
  .network-filters{margin-top:65px}
  .network-artists{margin:0 20px 90px;padding:30px 25px 45px}
  .network-artist-list{margin-top:55px;column-gap:25px}
}
@media(max-width:560px){
  .network-jump-links{flex-direction:column;gap:13px}
  .network-partner-grid{grid-template-columns:1fr}
  .network-partner{min-height:220px}
  .network-artist-list{grid-template-columns:1fr}
}
.project-gallery.project-gallery-portrait .project-image{grid-column:auto}
.project-gallery.project-gallery-portrait .project-image .case-media{aspect-ratio:4/5}
.project-gallery.project-gallery-portrait .project-image img{object-position:center bottom}
@media(max-width:560px){.project-gallery.project-gallery-portrait{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.project-gallery.project-gallery-grid .project-image{grid-column:auto}
.project-gallery.project-gallery-grid .project-image .case-media{aspect-ratio:4/3}
.project-embed{margin-top:45px;background:var(--placeholder)}.project-embed+.project-embed{margin-top:16px}
.project-embed-youtube{aspect-ratio:16/9}
.project-embed-soundcloud{height:166px}
.project-embed-spotify{height:352px;border-radius:12px;overflow:hidden}
.project-embed iframe{display:block;width:100%;height:100%;border:0}

/* Row-based case galleries: each row sets its column count and image ratio inline. */
.project-gallery.project-gallery-rows{display:flex;flex-direction:column;gap:0}
.project-gallery-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:16px}
.project-gallery.project-gallery-rows .project-image:nth-child(n){grid-column:auto}
.project-gallery.project-gallery-rows .project-image:nth-child(n) .case-media{aspect-ratio:var(--ratio)}
.case-media video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.project-gallery-row[style*="--cols:3"]{grid-template-columns:1fr}.project-gallery-row{gap:12px}}

/* Lineup block on case pages reuses the Network artist list. */
.network-artists.project-lineup{margin-top:110px;margin-bottom:0}
.project-lineup .network-artist-list{margin-top:55px}
.project-lineup .network-artist-name a{flex:initial;margin:0;padding:0;border:0;text-transform:none;white-space:normal;transition:opacity .2s}
.project-lineup .network-artist-name a span{font-size:.6em;opacity:.55}
.project-lineup .network-artist-name a:hover,.project-lineup .network-artist-name a:focus-visible{opacity:.6}
.project-gallery-rows .network-artists.project-lineup{margin:0 0 16px}
@media(max-width:800px){.network-artists.project-lineup{margin-top:70px}.project-gallery-rows .network-artists.project-lineup{margin:0 0 12px}}

/* Similar projects at the end of each case. */
.project-related{display:grid;grid-template-columns:1fr 2fr;gap:45px;margin:110px 40px 0;padding:26px 0 110px;border-top:1px solid var(--line)}
.project-related h2{margin:0}
.project-related .text-link{margin-top:22px}
.project-related-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:10px}
.related-card{display:block;min-width:0}
.related-card .case-media{aspect-ratio:4/5}
.related-name{display:block;padding-top:11px;text-transform:uppercase;transition:color .2s}
.related-card:hover .related-name,.related-card:focus-visible .related-name{color:var(--muted)}
.related-card:hover .case-media img,.related-card:focus-visible .case-media img{transform:scale(1.035)}
@media(max-width:800px){.project-related{grid-template-columns:1fr;gap:20px;margin:70px 20px 0;padding-bottom:80px}.project-related-grid{display:flex;overflow-x:auto;margin:20px -20px 0;padding:0 20px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}.related-card{flex:0 0 68vw;scroll-snap-align:start}}

/* Footer: olive block with the start-a-project form and the SOSSEGO wordmark. */
:root{--footer-bg:#5b683c;--footer-ink:#f7f7f5;--footer-muted:rgba(247,247,245,.76);--footer-line:rgba(247,247,245,.3)}
.site-footer{margin-top:40px;padding:56px 40px 28px;background:var(--footer-bg);color:var(--footer-ink)}
.footer-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px}
.footer-wordmark{width:clamp(240px,30vw,440px);aspect-ratio:472.5/95.5;background:var(--footer-ink);-webkit-mask:url(sossego-wordmark.svg) left center/contain no-repeat;mask:url(sossego-wordmark.svg) left center/contain no-repeat}
.footer-cta{margin-top:64px}
.footer-cta h2{max-width:420px;margin:0;text-wrap:balance}
.footer-cta>p{max-width:380px;margin:12px 0 0;color:var(--footer-muted)}
.footer-form{display:flex;max-width:400px;margin-top:22px;border:1px solid var(--footer-line);border-radius:999px;transition:border-color .2s}
.footer-form:focus-within{border-color:var(--footer-ink)}
.footer-form input{flex:1;min-width:0;padding:11px 18px;border:0;background:none;color:var(--footer-ink);font:inherit}
.footer-form input::placeholder{color:var(--footer-muted)}
.footer-form input:focus{outline:none}
.footer-form button{flex:none;margin:3px;padding:0 16px;border:0;border-radius:999px;background:var(--footer-ink);color:var(--footer-bg);text-transform:uppercase;cursor:pointer;transition:opacity .2s}
.footer-form button:hover{opacity:.85}
.footer-form button:focus-visible{outline:1px solid var(--footer-ink);outline-offset:3px}
.footer-form-status{margin:12px 0 0;color:var(--footer-muted)}
.footer-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-content:start}
.footer-column h2{margin:0 0 16px;color:var(--footer-muted);font-weight:400;text-transform:uppercase}
.footer-column ul{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.footer-column a,.footer-column li>span{transition:color .2s}
.footer-column a:hover,.footer-column a:focus-visible{color:var(--footer-muted)}
.footer-legal{text-transform:uppercase;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:64px;padding-top:16px;border-top:1px solid var(--footer-line);color:var(--footer-muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legal-page{padding:0 40px 120px}
.legal-page h1{margin-top:42px}
.legal-page>p:last-child{max-width:620px;margin-top:32px}
@media(max-width:1000px){.footer-top{grid-template-columns:1fr;gap:56px}}
@media(max-width:800px){.site-footer{padding:44px 20px 24px}.legal-page{padding:0 20px 90px}}
@media(max-width:560px){.footer-columns{grid-template-columns:1fr 1fr;row-gap:36px}}

/* Type scale: every text style on the site maps to one of these steps. */
:root{
  --fs-h1:clamp(44px,5.6vw,88px);
  --fs-h2:clamp(30px,3.4vw,52px);
  --fs-h3:clamp(21px,1.8vw,28px);
  --fs-lead:clamp(18px,1.5vw,22px);
  --fs-body:15px;
  --fs-small:12px;
  --fs-label:10.5px;
}
body{font-size:var(--fs-body);line-height:1.5}
.work-title h1,.project-heading h1,.services-lead h1,.about-lead h1,.network-lead h1,.legal-page h1{font-size:var(--fs-h1);font-family:var(--font-display);font-weight:500;font-synthesis:none;line-height:.95;letter-spacing:-.03em}
.services-section-head h2,.service-wellbeing h2,.service-programme h2,.service-method h2,.about-origin h2,.about-approach h2,.about-network h2,.network-section-head h2,.network-artists h2,.project-related h2{font-size:var(--fs-h2);font-family:var(--font-display);font-weight:500;font-synthesis:none;line-height:1;letter-spacing:-.025em}.service-path h3,.service-format h3,.network-partner h3,.network-artist-name,.project-figures dd,.footer-cta h2{font-size:var(--fs-h3);font-family:var(--font-display);font-weight:500;font-synthesis:none;line-height:1.12;letter-spacing:-.015em}
.project-summary,.project-headline-service,.project-testimonial p,.services-deck,.about-deck,.about-approach-grid p,.network-lead-grid>p,.service-programme p,.service-wellbeing-content p,.legal-page>p:last-child{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.015em}
.work-title p,.work-empty,.about-column p,.about-column li,.services-section-head>div>p,.service-path>p,.service-wellbeing-content p+p,.service-method p,.about-origin-copy p:not(.eyebrow),.about-network p:not(.eyebrow),.network-section-head p:not(.eyebrow),.network-partner p,.network-artists p:not(.eyebrow){font-size:var(--fs-body);line-height:1.5;letter-spacing:0}
.brand-intro,.project-fields p,.project-fields dd,.services-context,.service-format p,.service-programme .service-programme-note,.footer-cta>p,.footer-column ul,.footer-form input{font-size:var(--fs-small);line-height:1.5;letter-spacing:0}
.site-header,.gallery-meta,.gallery-instruction,.eyebrow,.work-filters button,.work-card-info,.work-card-place,.about-column h2,.project-back,.project-fields span,.project-fields dt,.project-figures dt,.project-testimonial cite,.project-image figcaption,.text-link,.service-path-number,.service-format-top,.service-wellbeing-content>span,.service-path .service-path-detail,.service-path>a,.service-format>a,.service-method>a,.about-origin-copy a,.about-origin-image figcaption,.about-approach-grid span,.about-next-links a,.network-jump-links,.network-filters button,.network-partner-top,.network-partner>a,.network-artist-number,.network-artist-list>li>a,.footer-form button,.footer-form-status,.footer-column h2,.footer-legal,p.eyebrow,.related-name{font-size:var(--fs-label);line-height:1.4;letter-spacing:.03em}
.project-gallery-rows .project-gallery-embed{margin:0 0 16px;aspect-ratio:16/9}

/* Sound-wave cursor (cursorStyle 'waves' in app.js) */
.has-wave-cursor,.has-wave-cursor *{cursor:none!important}
.has-wave-cursor :is(input,textarea){cursor:text!important}
.cursor-waves{position:fixed;inset:0;z-index:9998;width:100%;height:100%;pointer-events:none;mix-blend-mode:difference}
.cursor-dot{position:fixed;top:0;left:0;z-index:9999;width:40px;height:40px;margin:-20px 0 0 -20px;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .2s}
.cursor-dot::before{content:"";position:absolute;inset:0;border:1px solid #fff;border-radius:50%;background:#fff;transform:scale(.2);transition:transform .35s cubic-bezier(.2,.75,.25,1),background-color .25s}
.cursor-dot.is-visible{opacity:1}
.cursor-dot.is-hover::before{background:transparent;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.cursor-dot::before{transition:none}}

/* Grid system: one 12-column grid for every page.
   Page margin --margin, column gap --gutter. Layout blocks use 2, 3 or 4 equal tracks with that gap,
   so every column edge lands on the same 12-column lines (thirds = 4 columns, halves = 6, quarters = 3). */
:root{--margin:40px;--gutter:16px}
@media(max-width:800px){:root{--margin:20px;--gutter:12px}}
.site-header,.work-grid,.project-fields,.project-gallery,.project-gallery-row,.project-related-grid,.project-figures,.service-path-grid,.service-format-grid,.about-approach-grid,.network-partner-grid,.network-artist-list,.footer-columns{column-gap:var(--gutter)}
/* Service formats: top rules like the other card grids instead of a boxed table */
.service-format-grid{border:0}
.service-format{border:0;border-top:1px solid var(--line);padding:18px 0 23px}
/* Dark artist panels run edge to edge, so their content sits on the page grid */
.network-artists{margin-left:0;margin-right:0;padding-left:var(--margin);padding-right:var(--margin)}
.project-gallery-rows .network-artists.project-lineup{margin-left:calc(-1 * var(--margin));margin-right:calc(-1 * var(--margin))}
@media(min-width:801px){
  /* Lead: headline over 8 columns, side text from column 9 */
  .work-title,.services-lead-grid,.network-lead-grid,.project-heading{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
  .work-title>:first-child,.services-lead-grid>:first-child,.network-lead-grid>:first-child,.project-heading>:first-child{grid-column:span 2}
  .work-title p,.network-lead-grid>p{margin-left:0}
  /* Split: label over columns 1-4, content from column 5 */
  .services-section-head,.service-wellbeing,.service-programme,.service-method,.network-section-head,.network-artists,.about-origin-copy,.about-approach-head,.about-network,.project-story,.project-related{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
  :is(.services-section-head,.service-wellbeing,.service-programme,.service-method,.network-section-head,.network-artists,.about-origin-copy,.about-approach-head,.about-network,.project-story,.project-related)>:not(:first-child){grid-column:2/-1}
  .service-method>.eyebrow{grid-column:1}
  .project-related>.project-related-grid{grid-column:1/-1}
  /* About intro text: same 8-column content area as the split sections */
  .about-deck{width:calc((100% - 2 * var(--gutter)) * 2 / 3 + var(--gutter));max-width:none}
}
@media(min-width:1001px){
  /* Footer: wordmark and form over columns 1-6, link columns from column 7 */
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
}

/* Vertical rhythm: four spacing steps for the whole site.
   --space-section  between sections and before the footer
   --space-head     from a section heading or page title to its content
   --space-block    between blocks inside a section, and from the page label to the page title
   --space-line     from a section's top rule to its first line of text */
:root{--space-section:120px;--space-head:72px;--space-block:48px;--space-line:24px}
@media(max-width:800px){:root{--space-section:80px;--space-head:48px;--space-block:32px;--space-line:20px}}
/* Page intro */
.work-title,.services-lead-grid,.network-lead-grid,.about-lead h1,.legal-page h1,.project-heading h1{margin-top:var(--space-block)}
.work-intro,.services-lead,.about-lead{padding-bottom:var(--space-section)}
.network-jump-links{margin-top:var(--space-section)}
.about-deck{margin-top:var(--space-head)}
/* Sections */
.service-paths,.service-formats,.service-wellbeing,.service-programme,.service-method,.about-origin,.about-approach,.about-network,.project-related{padding-top:var(--space-line)}
.work-section,.service-paths,.service-formats,.service-programme,.service-method,.about-approach,.project-related,.legal-page{padding-bottom:var(--space-section)}
.network-partners{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.service-wellbeing{padding-bottom:0;margin-bottom:var(--space-section)}
.about-approach,.project-related{margin-top:var(--space-section)}
.about-network{margin-bottom:var(--space-section)}
.services-section-head{margin-bottom:var(--space-head)}
.network-filters,.about-approach-grid,.project-related-grid,.network-artist-list,.project-lineup .network-artist-list{margin-top:var(--space-head)}
.about-origin-copy{padding-bottom:var(--space-head)}
/* Case pages */
.project-heading{padding-bottom:var(--space-head)}
.project-story{padding-top:var(--space-head);padding-bottom:var(--space-head)}
.project-gallery-section{padding-top:0}
.project-gallery{margin-top:0}
.project-figures,.project-testimonial,.project-embed{margin-top:var(--space-block)}
.project-embed+.project-embed{margin-top:var(--gutter)}
/* Dark artist panels */
.network-artists{margin-bottom:var(--space-section);padding-top:var(--space-line);padding-bottom:var(--space-head)}
.network-artists.project-lineup{margin-top:var(--space-section);margin-bottom:0}
.work-filters{margin-bottom:var(--space-block)}

/* Rounded corners for tiles, images and players */
:root{--radius:6px;--tile:#ececea}
:root[data-theme="dark"]{--tile:#1a1a18}
.case-media,.about-origin-image img,.project-embed,.project-embed-spotify{border-radius:var(--radius)}
.project-embed{overflow:hidden}

/* Services: the four disciplines */
.service-disciplines{padding:var(--space-line) var(--margin) var(--space-section);border-top:1px solid var(--line)}
.service-discipline-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter)}
.service-discipline{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border-radius:var(--radius);background:var(--tile)}
.service-discipline svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.service-discipline h3{margin-top:var(--space-block);font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;font-synthesis:none;line-height:1.12;letter-spacing:-.015em}
.service-discipline p{max-width:34ch;margin-top:12px;color:var(--muted);line-height:1.45}
@media(max-width:1000px){.service-discipline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.service-discipline-grid{grid-template-columns:1fr}.service-discipline{padding:20px}}

/* Split sections: label and content share one top line; long sections keep their label in view */
:is(.services-section-head,.service-wellbeing,.service-programme,.service-method,.network-section-head,.network-artists,.about-origin-copy,.about-approach-head,.about-network,.project-story,.project-related)>.eyebrow{margin-top:0;align-self:start}
@media(min-width:801px){.eyebrow.is-sticky{position:sticky;top:calc(var(--header-h,72px) + var(--space-line))}}

/* Services: three ways to work together, directly below the disciplines */
.service-paths{padding-top:0;border-top:0}
.service-path-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.service-path-grid{grid-template-columns:1fr}}

/* Footer: olive at 25% over the page background, text in the page ink (works in light and dark) */
:root{--footer-bg:color-mix(in srgb,#5b683c 25%,var(--bg));--footer-ink:var(--ink);--footer-line:color-mix(in srgb,var(--ink) 22%,transparent);--footer-muted:color-mix(in srgb,var(--ink) 64%,transparent)}

/* Accent: the SOSSEGO olive as a quiet function colour for current, active, hover and focus states.
   Light mode uses a more saturated olive so it reads as colour next to the ink (4.65:1);
   dark mode a lighter olive for contrast on black (8.8:1). */
:root{--accent:#587a16}
:root[data-theme="dark"]{--accent:#a3b07a}
::selection{background:var(--accent);color:var(--bg)}
a:focus-visible,button:focus-visible,input:focus-visible,.gallery-viewport:focus-visible{outline-color:var(--accent)}
.main-nav a[aria-current="page"]{color:var(--accent)}
.work-filters button[aria-pressed="true"],.network-filters button[aria-pressed="true"]{color:var(--accent);text-decoration-color:var(--accent)}
.main-nav a:hover,.theme-toggle:hover,.inline-link:hover,.inline-link:focus-visible,.project-back:hover,.network-jump-links a:hover,.related-card:hover .related-name,.related-card:focus-visible .related-name,.footer-column a:hover,.footer-column a:focus-visible{color:var(--accent)}
.text-link:hover,.service-path>a:hover,.service-format>a:hover,.service-method>a:hover,.about-origin-copy a:hover,.about-next-links a:hover,.network-partner>a:hover{color:var(--accent);border-color:var(--accent)}
.footer-form:focus-within{border-color:var(--accent)}
.footer-form button:hover{background:var(--accent);color:var(--bg);opacity:1}
/* Current page and active filters also carry an olive underline, so the state does not rely on colour alone */
.main-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
.work-filters button[aria-pressed="true"],.network-filters button[aria-pressed="true"]{text-decoration-thickness:2px}

/* Footer as a tile: grey surface inside the page margins with the shared corner radius */
:root{--footer-bg:var(--tile)}
.site-footer{margin:0 var(--margin) var(--margin);padding-left:var(--margin);padding-right:var(--margin);border-radius:var(--radius)}

/* Network: artist names centred and numbered, a few per row; hovering a name shows the artist's photo */
.network-artists>.network-artist-cloud{grid-column:1/-1}
.network-artist-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em .7em;max-width:1180px;margin:var(--space-head) auto 0;padding:0;list-style:none;font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;font-synthesis:none;line-height:1.12;letter-spacing:-.025em;text-align:center}
.network-artist-cloud li{display:flex}
.network-artist-item{display:inline-flex;align-items:flex-start;gap:.18em;color:inherit;transition:opacity .25s}
.network-artist-cloud .network-artist-number{width:auto;margin-top:.45em;font-family:var(--sans);font-weight:400;letter-spacing:.03em;opacity:.55}
.network-artist-cloud .network-artist-name{font-size:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit}
.network-artist-arrow{margin-left:.08em;font-size:.5em;opacity:.7}
@media(hover:hover){.network-artist-cloud:hover .network-artist-item{opacity:.35}.network-artist-cloud .network-artist-item:hover{opacity:1}}
@media(max-width:800px){.network-artist-cloud{font-size:var(--fs-h3);gap:.25em .6em}}

/* Network artists: label, headline and intro centred above the names */
.network-artists-centred{display:block;text-align:center}
.network-artists-centred>.eyebrow,.network-artists-centred>.eyebrow.is-sticky{position:static}
.network-artists-centred>div{max-width:none;margin-top:var(--space-block)}
.network-artists-centred h2{margin-inline:auto}
.network-artists-centred p:not(.eyebrow){margin-inline:auto}
/* Tighter, symmetric spacing: label close to the headline, names one block below */
.network-artists-centred{padding-top:var(--space-head);padding-bottom:var(--space-head)}
.network-artists-centred>div{margin-top:var(--space-line)}
.network-artists-centred>.network-artist-cloud{margin-top:var(--space-block)}

/* Tablet (561-800px): smaller home gallery items and a three-up similar-projects row instead of the phone scroller */
@media(min-width:561px) and (max-width:800px){
  .gallery-item,.gallery-item:hover,.gallery-item:focus-visible{flex-basis:40vw}
  .project-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-left:0;margin-right:0;padding:0}
  .related-card{flex:none}
}

/* Galleries without captions keep the same rhythm between rows */
.project-gallery-plain .project-gallery-row{margin-bottom:var(--gutter)}

/* Artists marquee (About): names run continuously; hovering or focusing pauses it */
.artist-marquee{display:flex;overflow:hidden;margin:var(--space-block) calc(-1 * var(--margin)) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.artist-marquee-track{display:flex;flex:none;margin:0;padding:0;list-style:none;animation:artist-marquee 50s linear infinite}
.artist-marquee:hover .artist-marquee-track,.artist-marquee:focus-within .artist-marquee-track{animation-play-state:paused}
.artist-marquee li{flex:none;padding-right:.9em;font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;font-synthesis:none;line-height:1.05;letter-spacing:-.025em;white-space:nowrap}
.artist-marquee li>*{display:inline-flex;align-items:flex-start;gap:.18em;color:inherit}
.artist-marquee .network-artist-number{width:auto;margin-top:.45em;font-family:var(--sans);font-weight:400;letter-spacing:.03em;opacity:.55}
.artist-marquee .network-artist-name{font-size:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit}
.artist-marquee a .network-artist-name{text-decoration:none}

@keyframes artist-marquee{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.artist-marquee{overflow-x:auto}.artist-marquee-track{animation:none}.artist-marquee-track[aria-hidden]{display:none}}
/* Project partners as a regular About section: top rule, page margins, shared rhythm */
.network-partners{margin:0 var(--margin);padding:var(--space-line) 0 var(--space-section);border-top:1px solid var(--line)}

/* Project partners as category rows: on hover or focus the text opens under the title and the thumbnail grows in its column */
.partner-rows{margin-top:var(--space-head);border-top:1px solid var(--line)}
.partner-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:center;padding:16px 0;border-bottom:1px solid var(--line);outline:none}
.partner-number{grid-column:1/2;font-size:var(--fs-label);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.partner-text{grid-column:2/5;transition:transform .35s cubic-bezier(.2,.75,.25,1)}
.partner-text h3{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:500;font-synthesis:none;line-height:1;letter-spacing:-.025em;transition:color .2s}
.partner-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.75,.25,1)}
.partner-more>div{overflow:hidden;transition:padding .45s}
.partner-more p{margin:0;max-width:40ch;color:var(--muted);font-size:var(--fs-body);line-height:1.5}
.partner-more .partner-names{margin-top:8px;color:var(--ink)}
.partner-thumb{grid-column:5/13;justify-self:end;width:24%;height:auto;aspect-ratio:3/2;transition:width .6s cubic-bezier(.25,.8,.25,1)}
.partner-row:hover .partner-more,.partner-row:focus-visible .partner-more{grid-template-rows:1fr}
.partner-row:hover .partner-more>div,.partner-row:focus-visible .partner-more>div{padding-top:12px}
.partner-row:hover h3,.partner-row:focus-visible h3{color:var(--accent)}
.partner-row:hover .partner-text,.partner-row:focus-visible .partner-text{transform:translateX(10px)}
.partner-row:hover .partner-thumb,.partner-row:focus-visible .partner-thumb{width:49.5%}
@media(hover:none),(max-width:800px){.partner-more{grid-template-rows:1fr}.partner-more>div{padding-top:8px}}
@media(max-width:800px){.partner-row{grid-template-columns:auto minmax(0,1fr);row-gap:12px;align-items:start}.partner-number{grid-column:auto;padding-top:.4em}.partner-text{grid-column:auto}.partner-text h3{font-size:var(--fs-h3)}.partner-thumb,.partner-row:hover .partner-thumb{grid-column:1/-1;order:-1;width:100%;height:auto;aspect-ratio:16/9;justify-self:stretch}}
@media(prefers-reduced-motion:reduce){.partner-text,.partner-text h3,.partner-more,.partner-more>div,.partner-thumb{transition:none}}

/* Accent inside the dark artist panels: the panel inverts the page colours, so it takes the other theme's olive
   (light olive on the dark panel in light mode, deep olive on the light panel in dark mode) */
.network-artists{--panel-accent:#a3b07a}
:root[data-theme="dark"] .network-artists{--panel-accent:#587a16}
.artist-marquee a{transition:color .2s}
.artist-marquee a:hover,.artist-marquee a:focus-visible,.project-lineup .network-artist-name a:hover,.project-lineup .network-artist-name a:focus-visible{color:var(--panel-accent);opacity:1}

.project-lineup .network-artist-name a{transition:color .2s}
/* Second artist row runs the other way */
.artist-marquee-reverse{margin-top:0}
.artist-marquee-reverse .artist-marquee-track{animation-direction:reverse}

/* Press module in case galleries: a full-width tile with quotes and outlet logos */
.project-press{display:flex;flex-direction:column;gap:var(--space-block);margin-bottom:var(--gutter);padding:var(--margin);border-radius:var(--radius);background:var(--tile)}
.project-press .eyebrow{margin:0}
.project-press-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-block) var(--gutter)}
.project-press blockquote{display:flex;flex-direction:column;align-items:flex-start;margin:0}
.project-press blockquote>p:not(.project-press-translation){margin:24px 0 0;max-width:22ch;font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;font-synthesis:none;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.project-press-translation{margin:12px 0 0;max-width:46ch;color:var(--muted);font-size:var(--fs-small);line-height:1.45}
.project-press cite{margin-top:14px;font-style:normal;font-size:var(--fs-label);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.project-press-featured{padding-top:var(--space-line);border-top:1px solid var(--line)}
.project-press-featured>p{margin:0 0 20px;color:var(--muted);font-size:var(--fs-label);letter-spacing:.03em;text-transform:uppercase}
.project-press-featured>div{display:grid;grid-template-columns:repeat(5,auto);justify-content:start;align-items:center;gap:20px clamp(20px,3.5vw,48px)}
.press-logo{display:block;width:auto;max-width:100%;height:var(--logo-h,28px);object-fit:contain;object-position:left center}
.press-logo--vice{--logo-h:40px}.press-logo--sueddeutsche{--logo-h:26px}.press-logo--resident-advisor{--logo-h:30px}.press-logo--trommel{--logo-h:26px}.press-logo--xlr8r{--logo-h:22px}.press-logo--hostelworld{--logo-h:26px}.press-logo--vogue{--logo-h:30px}
/* Outlet logos: one row from tablet up (shrinking if tight), an even three-column grid on phones */
@media(max-width:800px){.project-press-featured .press-logo{height:calc(var(--logo-h) * .8)}}
@media(max-width:560px){.project-press-featured>div{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:24px var(--gutter)}}
@media(max-width:420px){.project-press-featured .press-logo{height:calc(var(--logo-h) * .65)}}
:root[data-theme="dark"] .press-logo{filter:invert(1)}
@media(max-width:800px){.project-press-quotes{grid-template-columns:1fr}}

/* Footer call to action: label, headline, text and a pill button (contact from services.json) */
.footer-button{display:inline-block;margin-top:22px;padding:12px 20px;border-radius:999px;background:var(--footer-ink);color:var(--footer-bg);font-size:var(--fs-label);letter-spacing:.03em;line-height:1.4;text-transform:uppercase;transition:background-color .2s,color .2s}
.footer-button:hover,.footer-button:focus-visible{background:var(--accent);color:var(--bg)}

/* Phone and tablet home: the header sits in the flow and the gallery fills the space below it.
   Item width follows the remaining height (container units), so titles never slide under the header
   on short screens or with browser bars showing. */
@media(max-width:800px){
  body[data-page="home"] .page{display:flex;flex-direction:column;height:100svh}
  body[data-page="home"] .site-header{position:relative;flex:none}
  body[data-page="home"] main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:0}
  body[data-page="home"] .home-stage{flex:1 1 auto;height:auto;min-height:0;container-type:size}
  body[data-page="home"] .gallery-item,body[data-page="home"] .gallery-item:hover,body[data-page="home"] .gallery-item:focus-visible{flex-basis:min(var(--home-item,74vw),calc((100cqh - 120px) * .8))}
}
@media(min-width:561px) and (max-width:800px){body[data-page="home"]{--home-item:40vw}}

/* Work introduction: headline followed by the services link. */
.work-title.work-title-stacked{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.work-title.work-title-stacked p{margin:0;max-width:none}

/* About: partner introduction uses the main text colour. */
body[data-page="about"] .network-section-head p:not(.eyebrow){color:var(--ink)}

/* Legal documents use a readable column in both site themes. */
.legal-page{max-width:1200px;margin:0 auto;padding:0 var(--margin) 90px}
.legal-page h1{overflow-wrap:anywhere}
.legal-draft{max-width:760px;margin:32px 0;padding:20px;border:1px solid var(--ink);border-radius:var(--radius)}
.legal-draft p{margin-top:8px}
.legal-copy{max-width:760px;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
.legal-copy section{margin-top:36px}
.legal-copy h2{font-family:var(--font-display);font-size:24px;line-height:1.25;margin:0 0 16px}
.legal-copy p+p,.legal-copy>p:last-child{margin-top:16px}
.legal-copy a{text-decoration:underline;text-underline-offset:.18em}
.legal-pending{padding-left:16px;border-left:3px solid var(--ink)}
.home-legal{display:flex;justify-content:flex-end;gap:24px;padding:12px var(--margin) 20px;font-size:13px}
.home-legal a{text-decoration:underline;text-underline-offset:.18em}

.project-embed:has(.media-consent:not([hidden])){aspect-ratio:auto;min-height:240px}
.media-consent{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:clamp(20px,4vw,48px);min-height:240px;background:var(--tile);border:1px solid var(--line);border-radius:var(--radius)}
.media-consent[hidden],.media-revoke[hidden]{display:none}
.media-consent h3{font-size:22px;line-height:1.25}
.media-consent p{max-width:650px;font-size:15px;line-height:1.55;letter-spacing:0}
.media-consent button,.media-revoke{padding:10px 16px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;cursor:pointer;font-size:14px}
.media-consent a{text-decoration:underline;font-size:14px}
.project-embed:has(iframe){margin-bottom:52px}
.media-revoke{display:block;margin-top:10px}
/* Keep the withdrawal control outside the frame's fixed media dimensions. */
.project-embed[data-external-media]{height:auto;aspect-ratio:auto;overflow:visible;background:transparent}
.project-embed[data-external-media] iframe{border-radius:var(--radius)}
.project-embed-youtube[data-external-media] iframe{height:auto;aspect-ratio:16/9}
.project-embed-soundcloud[data-external-media] iframe{height:166px}
.project-embed-spotify[data-external-media] iframe{height:352px}

.legal-copy address{font-style:normal;line-height:1.65;margin:16px 0}

/* Photo credits remain visible independently of editorial captions. */
.image-credit{display:block;margin-top:8px;text-align:right;color:var(--muted);font-size:var(--fs-label);font-weight:400;line-height:1.4;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}