/* Public Art Lab – main stylesheet */
@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo.woff2") format("woff2-variations"),url("/assets/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/sourceserif4.woff2") format("woff2-variations"),url("/assets/fonts/sourceserif4.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --ink:#000000; --paper:#FFFFFF; --stone:#5E5E5A; --concrete:#ECEBE7; --line:#000000;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --wrap:min(1200px,92vw);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#FFFFFF;--paper:#000000;--stone:#A6A6A0;--concrete:#161616;--line:#FFFFFF;color-scheme:dark}
  .logo{filter:invert(1)}
  .invert .logo{filter:none}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:99}

/* Header */
header.site{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:76px}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.brand .logo{height:44px;width:auto}
nav.main ul{display:flex;gap:1.9rem;list-style:none;align-items:center}
nav.main a{font-family:var(--display);font-stretch:100%;font-size:.98rem;font-weight:450;text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
nav.main a[aria-current="page"]{border-bottom-color:var(--ink)}
nav.main a:hover{border-bottom-color:var(--stone)}
.us{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-size:.78rem;color:var(--stone)}
.flag{width:20px;height:auto;border:1px solid rgba(127,127,127,.35);flex:none}
.menu-btn{display:none;background:none;border:1px solid var(--ink);color:var(--ink);font-family:var(--display);font-size:.9rem;padding:.4rem .8rem;cursor:pointer}

/* Type */
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.01em}
h1{font-size:clamp(2.7rem,7vw,6.2rem);font-stretch:112%;font-weight:400}
h2{font-size:clamp(2rem,4.2vw,3.4rem);font-stretch:108%;font-weight:400}
h3{font-size:1.45rem;font-stretch:100%;font-weight:550;line-height:1.2}
.lead{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.5;max-width:36ch}
.prose p{max-width:62ch}
.prose p+p{margin-top:1.1em}
.muted{color:var(--stone)}

/* Buttons */
/*btn*/.btn{will-change:transform;display:inline-block;font-family:var(--display);font-size:1rem;font-weight:500;text-decoration:none;padding:.95rem 1.6rem;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;border-radius:999px;transition:background .2s,color .2s,transform .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.invert .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.invert .btn:hover{background:transparent;color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

section{padding-block:clamp(4rem,9vw,7.5rem)}
.rule{border-top:1px solid var(--line)}
.invert{background:var(--ink);color:var(--paper)}
.invert .muted{color:color-mix(in srgb,var(--paper) 65%,var(--ink))}

/* Hero with the ring */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.ring-wrap{position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:end}
.ring-wrap svg{width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke:var(--ink);stroke-width:46}
.dot{fill:var(--ink);transition:cx 1.1s cubic-bezier(.65,0,.25,1),cy 1.1s cubic-bezier(.65,0,.25,1)}
.page-hero{padding-block:clamp(3rem,6vw,5rem)}
.page-hero .hero-grid{grid-template-columns:1.4fr .6fr}
.page-hero .ring-wrap{max-width:260px}
.page-hero .ring{stroke-width:52}

/* Statement */
.statement{display:grid;grid-template-columns:.35fr 1fr;gap:3rem}
.statement .big{font-family:var(--body);font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.35;font-weight:300;max-width:30ch}

/* Two doors */
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,5vw,4.5rem);display:flex;flex-direction:column;gap:1.4rem;min-height:30rem}
.door p{max-width:40ch}
.door .btn{align-self:flex-start;margin-top:auto}
.door.light{border-right:1px solid var(--line)}

/* Services list */
.svc{list-style:none;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc h3{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:400;font-stretch:110%}
.svc p{max-width:46ch}

/* Discretion */
.nda{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end}
.nda h2{font-size:clamp(2.4rem,6vw,5rem)}

/* Steps (real sequence) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--line)}
.steps li{counter-increment:s;padding:1.8rem 1.4rem 2rem 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.6rem;font-weight:300;display:block;margin-bottom:.8rem}
.steps h3{font-size:1.15rem;margin-bottom:.4rem}
.steps p{font-size:1rem}

/* Two-column text blocks */
.cols{display:grid;grid-template-columns:.4fr 1fr;gap:3rem}
.cols+.cols{margin-top:4.5rem}

/* Contact */
form{display:grid;gap:1.3rem;max-width:640px}
label{font-family:var(--display);font-size:.95rem;font-weight:500;display:block;margin-bottom:.4rem}
input,select,textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--paper);border:0;border-bottom:1.5px solid var(--ink);padding:.6rem 0;border-radius:0}
textarea{min-height:9rem;resize:vertical;border:1.5px solid var(--ink);padding:.8rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.check input{width:auto;margin-top:.35rem;accent-color:var(--ink)}
.note{font-family:var(--display);font-size:.95rem;padding:1rem 1.2rem;border:1.5px solid var(--ink);display:none}
.note.show{display:block}
.contact-grid{display:grid;grid-template-columns:1fr .6fr;gap:4rem}
.aside p+p{margin-top:1rem}
.ph{background:var(--concrete);padding:0 .3em}

/* Why */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.why div{padding:2.2rem 2.5rem 2.4rem 0;border-bottom:1px solid var(--line)}
.why div:nth-child(odd){border-right:1px solid var(--line)}
.why div:nth-child(even){padding-left:2.5rem}
.why h3{margin-bottom:.6rem}
.why p{max-width:44ch}
/* Legal */
.legal-doc{max-width:72ch}
.legal-doc h2{font-size:1.5rem;font-stretch:100%;font-weight:550;margin:2.6rem 0 .8rem;line-height:1.25}
.legal-doc p,.legal-doc li{font-size:1.05rem}
.legal-doc p+p{margin-top:.9em}
.legal-doc ul{margin:.8rem 0 0 1.2rem}
.legal-doc li+li{margin-top:.4rem}
.legal-doc ul+p{margin-top:.9em}
.updated{font-family:var(--display);font-size:.95rem;color:var(--stone);margin-top:1rem}
/* Footer */
footer.site{border-top:1px solid var(--line);padding-block:3.5rem 2rem}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem}
.foot .logo{height:70px;width:auto}
.foot ul{list-style:none;display:grid;align-content:start;gap:.5rem;font-family:var(--display);font-size:.95rem}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.legal{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-family:var(--display);font-size:.85rem;color:var(--stone)}

/* Responsive */
@media (max-width:900px){
  .hero-grid,.page-hero .hero-grid,.statement,.doors,.nda,.cols,.contact-grid,.foot,.svc li{grid-template-columns:1fr}
  .ring-wrap{justify-self:start;max-width:320px;order:-1}
  .page-hero .ring-wrap{max-width:150px}
  .door.light{border-right:0;border-bottom:1px solid var(--line)}
  .door{min-height:auto}
  .why{grid-template-columns:1fr}
  .why div,.why div:nth-child(even){padding:1.8rem 0;border-right:0}
  .menu-btn{display:block}
  nav.main{position:absolute;top:76px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);display:none}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:flex-start;gap:0;padding:1rem 4vw 1.5rem}
  nav.main li{width:100%}
  nav.main a{display:block;padding:.8rem 0;font-size:1.1rem}
  .bar .us span{display:none}
  .bar .us{margin-left:auto;margin-right:-.6rem}
  .hero .ring-wrap{max-width:220px}
}

/* ===== Motion & generative backgrounds ===== */
.hero,.page-hero{position:relative;overflow:hidden;isolation:isolate}
.field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.ring-wrap .ringg{transform-origin:0 0;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dotg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}

/* Headline word reveal */
.reveal .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.reveal .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.75,.15,1)}
.reveal.in .w>span{transform:none}


/* Ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:1.6rem;white-space:nowrap}
.ticker .track{display:inline-flex;align-items:center;gap:2.4rem;animation:tick 48s linear infinite;padding-right:2.4rem}
.ticker:hover .track{animation-play-state:paused}
.ticker span{font-family:var(--display);font-size:clamp(1.8rem,4vw,3.2rem);font-stretch:118%;font-weight:300}
.ticker svg{width:.9em;height:.9em;flex:none;font-size:clamp(1.8rem,4vw,3.2rem)}
.ticker .outline{color:transparent;-webkit-text-stroke:1px var(--ink)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Services rows: ink sweep */
.svc li{position:relative;isolation:isolate;transition:color .45s;padding-inline:0;cursor:default}
.svc li::before{content:"";position:absolute;inset:0 -4vw;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.65,0,.25,1);z-index:-1}
.svc li:hover{color:var(--paper)}
.svc li:hover::before{transform:scaleX(1)}

/* Doors: drifting dot grid on the light one, ripples on the dark one */
.door{position:relative;overflow:hidden;isolation:isolate}
.door.light::before{content:"";position:absolute;inset:-40px;z-index:-1;opacity:0;transition:opacity .6s;
  background-image:radial-gradient(var(--ink) 1.3px,transparent 1.6px);background-size:26px 26px;animation:drift 18s linear infinite}
.door.light:hover::before{opacity:.22}
@keyframes drift{to{transform:translate(26px,26px)}}

/* Ripples (dark bands) */
.ripples{position:absolute;right:-14vw;top:50%;width:min(70vw,760px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;z-index:0}
.ripples i{position:absolute;inset:0;border:1px solid var(--paper);border-radius:50%;opacity:0;animation:ripple 9s cubic-bezier(.2,.6,.3,1) infinite}
.ripples i:nth-child(2){animation-delay:2.25s}.ripples i:nth-child(3){animation-delay:4.5s}.ripples i:nth-child(4){animation-delay:6.75s}
.ripples b{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--paper)}
@keyframes ripple{0%{transform:scale(.04);opacity:.0}15%{opacity:.55}100%{transform:scale(1);opacity:0}}
.invert,.door.invert{position:relative;overflow:hidden;isolation:isolate}
.invert>.wrap{position:relative;z-index:1}
.invert::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.09;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){.invert::after{mix-blend-mode:multiply}}

/* Scroll-linked: lines draw across */
.draw{position:relative}
.draw::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
.draw.seen::before{transform:scaleX(1)}
.rule.draw{border-top-color:transparent}

/* Steps fill on hover */
.steps li{transition:padding .4s}
.steps li::before{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.steps li:hover::before{transform:translateX(.4rem)}

/* Cursor companion */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;border-radius:50%;pointer-events:none;z-index:100;mix-blend-mode:difference;transition:width .3s,height .3s,margin .3s,background .3s,opacity .3s;opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:#fff}
@media (pointer:coarse){.cursor{display:none}}

/* Buttons: a dot that travels */
.btn{position:relative;overflow:hidden;isolation:isolate}

@media (prefers-reduced-motion:reduce){
  .ringg,.ticker .track,.ripples i,.door.light::before{animation:none!important}
  .reveal .w>span{transform:none!important}
  .draw::before{transform:scaleX(1)!important}
  .cursor{display:none}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Page transitions between pages (Chrome, Edge, Safari 18.2+; others load normally) */
@view-transition{navigation:auto}
header.site{view-transition-name:site-header}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:pal-iris .8s cubic-bezier(.65,0,.35,1) both}
@keyframes pal-iris{from{clip-path:circle(0 at var(--ix,50%) var(--iy,50%))}to{clip-path:circle(150vmax at var(--ix,50%) var(--iy,50%))}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Form extras */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.note.error{border-style:dashed}
button[disabled]{opacity:.55;cursor:progress}