/* ADA Universal Profi Bau — concept (AVINII, October 2026).
   The casavanamilos.com house system, re-implemented with ADA's own identity: the logo's concrete grey
   (#AAAAAA) on a graphite ground, lime-white text, Archivo (the logo is a heavy grotesk; its subline is
   set wide, so the micro-caps are Archivo's expanded width) and IBM Plex Mono for every measurement.
   One proposed accent, "Signal", for rules, the compare handle and the call to action only.
   The site is built around one object: the before/after pair (.ba). No vh outside act I. */

/* ---------- fonts (self-hosted; Archivo is one variable file per subset, wght 100-900, wdth 62-125) ---------- */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-100-900-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-100-900-latin-ext.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plex Mono';src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plex Mono';src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  /* ground: graphite, cool and quiet, so daylight site photographs carry the colour */
  --ink-900:#0F1011; --ink-800:#16181A; --ink-700:#1E2023;
  --concrete:#2A2D31; --concrete-lift:#373B40;
  /* ADA's own grey, straight from the logo: the "before" colour, the eyebrows, the mark */
  --grey:#AAAAAA;
  /* the proposed accent (one ramp, casa's 700 / 500 / 300 roles) */
  --sig-700:#A9461F; --sig-500:#DE6432; --sig-300:#F2A47E;
  /* text: lime white, opacity steps */
  --ivory:#F2F1EC;
  --ivory-92:rgb(242 241 236 / .92); --ivory-64:rgb(242 241 236 / .64);
  --ivory-38:rgb(242 241 236 / .38); --ivory-14:rgb(242 241 236 / .14); --ivory-08:rgb(242 241 236 / .08);
  --line:rgb(242 241 236 / .10); --line-hi:rgb(242 241 236 / .28); --rule:rgb(222 100 50 / .55);
  /* space */
  --pad-x:clamp(1.5rem,5vw,6rem); --pad-y:clamp(1.6rem,2.8vw,4rem);
  --col:74rem; --col-wide:86rem;
  --sec-y:clamp(4rem,7vw,7rem);
  --gap:clamp(.75rem,1.4vw,1.25rem);
  /* type */
  --fs-hero:clamp(3rem,6.4vw,6.6rem);
  --fs-title:clamp(2.6rem,4.6vw,4.6rem);
  --fs-h2:clamp(2rem,3.5vw,3.3rem);
  --fs-h3:clamp(1.35rem,2vw,1.8rem);
  --measure:52ch;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --head-h:4.5rem;
  --expo:cubic-bezier(.16,1,.3,1);
  --wipe:cubic-bezier(.77,0,.18,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink-900); -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 1rem)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; background:var(--ink-900); color:var(--ivory);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6; font-weight:400; font-stretch:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer}
p,figure,h1,h2,h3,dl,dd,ol,ul{margin:0}
ol,ul{padding:0; list-style:none}
h1,h2,h3{font-weight:600}
address{font-style:normal}
:focus-visible{outline:2px solid var(--sig-300); outline-offset:3px; border-radius:2px}
::selection{background:var(--sig-500); color:var(--ink-900)}
.skip{position:fixed; z-index:120; top:1rem; left:var(--pad-x); padding:.75rem 1rem; background:var(--sig-300); color:var(--ink-900); transform:translateY(-200%); opacity:0}
.skip:focus{transform:none; opacity:1}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.wrap{position:relative; width:100%; max-width:var(--col); margin-inline:auto}
.wrap--wide{max-width:var(--col-wide)}
main > section{position:relative}

/* ---------- type primitives ---------- */
/* micro-caps: Archivo at 118 % width, the logo subline's voice */
.eyebrow,.micro,.nav a,.cta,.link,.rail,.field-k,.index-row .k,.chip,.switch button,.foot-nav a{
  text-transform:uppercase; font-weight:600; font-stretch:118%;
}
.eyebrow,.micro{
  display:flex; align-items:center; gap:.9rem;
  font-size:.68rem; letter-spacing:.2em; line-height:1.4;
  color:var(--grey); margin:0 0 clamp(.9rem,1.6vw,1.5rem);
}
.eyebrow::before{content:""; width:clamp(24px,4vw,54px); height:1px; background:var(--sig-500); flex:none}
.eyebrow--bare::before{content:none}
/* the measurements: mono, tabular, never shouting */
.mono,.n,.facts,.ba-tag,.tl-k,.step-n,.pcard-meta,.spec dd.mono{font-family:var(--mono); font-weight:400; letter-spacing:.02em; font-variant-numeric:tabular-nums}
h2{font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.03em; text-wrap:balance}
h2 .soft{color:var(--grey); font-weight:300}
.h3{font-size:var(--fs-h3); line-height:1.1; letter-spacing:-.02em; font-weight:600}
.copy{max-width:var(--measure); color:var(--ivory-64); text-wrap:pretty}
.copy--first{margin-top:clamp(1.1rem,2vw,1.6rem)}
.copy + .copy{margin-top:.9rem}
.u{text-transform:none}

/* ---------- controls: cta, link ---------- */
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:clamp(1.3rem,2.3vw,2.2rem)}
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:46px;
  padding:.95rem 1.5rem; border:1px solid var(--sig-500); border-radius:2px; color:var(--ivory);
  background:rgb(222 100 50 / .14);
  font-size:.7rem; line-height:1.2; letter-spacing:.16em; white-space:nowrap;
  transition:color .24s ease,border-color .24s ease,transform .24s var(--expo);
}
.cta::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--sig-500); transform:scaleX(0); transform-origin:100% 50%; transition:transform .3s var(--expo)}
.cta svg{width:14px; height:14px; flex:none; transition:transform .3s var(--expo)}
.cta--ghost{border-color:var(--ivory-38); background:none}
.cta--ghost::before{background:var(--ivory)}
.cta--sm{min-height:38px; padding:.6rem 1rem; font-size:.64rem; letter-spacing:.14em}
@media (hover:hover) and (pointer:fine){
  .cta:hover{color:var(--ink-900)}
  .cta:hover::before{transform:scaleX(1); transform-origin:0 50%; transition-duration:.42s}
  .cta:hover svg{transform:translateX(3px)}
  .cta--ghost:hover{border-color:var(--ivory)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.cta:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion:no-preference){.cta:active{transform:scale(.97)}}

.link{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.68rem; letter-spacing:.16em;
  color:var(--ivory); border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:color .24s ease,border-color .24s ease;
}
.link::after{content:""; position:absolute; inset:-10px -6px}
.link svg{width:12px; height:12px; transition:transform .3s var(--expo)}
@media (hover:hover) and (pointer:fine){
  .link:hover{color:var(--sig-300); border-bottom-color:var(--sig-500)}
  .link:hover svg{transform:translateX(3px)}
}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:50; padding:.75rem var(--pad-x)}
.site-head::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:rgb(15 16 17 / .7); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); opacity:0; transition:opacity .3s ease}
.site-head.is-scrolled::before,.site-head--solid::before{opacity:1}
.head-in{display:flex; align-items:center; gap:clamp(1.25rem,3vw,3rem); max-width:var(--col-wide); margin-inline:auto}
/* the logo as an alpha mask (the client's PNG, trimmed): it can take any colour and warm on hover */
.head-mark{
  display:block; flex:none; height:46px; aspect-ratio:250/104; background:var(--grey);
  -webkit-mask:url('../logo/lockup.png') no-repeat center/contain; mask:url('../logo/lockup.png') no-repeat center/contain;
  transition:background-color .25s ease;
}
@media (hover:hover) and (pointer:fine){.head-mark:hover{background:var(--ivory)}}
.nav{display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.6rem); margin-left:auto}
.nav a{position:relative; padding-block:.6rem; color:var(--ivory-64); font-size:.66rem; letter-spacing:.18em; white-space:nowrap; transition:color .24s ease}
.nav a::after{content:""; position:absolute; bottom:.3rem; left:0; right:.18em; height:1px; background:var(--sig-500); transform:scaleX(0); transform-origin:100% 50%; transition:transform .26s var(--expo)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--ivory)}
  .nav a:hover::after{transform:scaleX(1); transform-origin:0 50%; transition-duration:.44s}
}
.nav a[aria-current]{color:var(--ivory)}
.nav a[aria-current]::after{transform:scaleX(1)}
.head-actions{display:flex; align-items:center; gap:1rem; flex:none}
.lang{display:flex; align-items:center; border:1px solid var(--ivory-14); border-radius:999px; overflow:hidden}
.lang button{min-width:40px; min-height:38px; padding:0 .65rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ivory-64); transition:color .24s ease,background-color .24s ease}
.lang button + button{border-left:1px solid var(--ivory-14)}
.lang button:hover{color:var(--ivory)}
.lang button[aria-pressed="true"]{color:var(--ink-900); background:var(--grey)}
.lang button:focus-visible{outline-offset:-3px}

/* =====================================================================================
   THE OBJECT: the before/after pair (.ba)
   Two modes, chosen per pair in projects.json:
   - wipe   : an aligned pair (same viewpoint). A divider the visitor drags; "after" is clipped
              to the right of it. Keyboard: arrows, Home, End (role=slider).
   - toggle : any pair (different angles). A two-state switch crossfades; press-and-hold on the
              photograph peeks at "before".
   ===================================================================================== */
.ba{position:relative; overflow:hidden; border-radius:3px; background:var(--ink-800); aspect-ratio:var(--ar,3/2); border:1px solid var(--line); user-select:none; -webkit-user-select:none; touch-action:pan-y}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--op,50% 50%); pointer-events:none}
/* "before" keeps its colour, only a touch cooler and flatter, so the eye reads the change and not a filter */
.ba-before{filter:saturate(.82) contrast(.96)}
.ba-tag{
  position:absolute; z-index:3; top:clamp(.8rem,1.4vw,1.2rem);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.38rem .6rem .36rem; border-radius:2px;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:var(--ivory); background:rgb(15 16 17 / .56); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:opacity .3s ease;
}
.ba-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--grey)}
.ba-tag--after::before{background:var(--sig-500)}
.ba-tag--before{left:clamp(.8rem,1.4vw,1.2rem)}
.ba-tag--after{right:clamp(.8rem,1.4vw,1.2rem)}

/* wipe */
.ba--wipe{--pos:50%; cursor:ew-resize}
.ba--wipe .ba-after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos)); will-change:clip-path}
.ba-line{position:absolute; z-index:2; top:0; bottom:0; left:var(--pos); width:0; pointer-events:none}
.ba-line::before{content:""; position:absolute; top:0; bottom:0; left:-.5px; width:1px; background:var(--ivory); box-shadow:0 0 0 .5px rgb(15 16 17 / .25),0 0 18px rgb(15 16 17 / .35)}
.ba-handle{
  position:absolute; z-index:3; top:50%; left:var(--pos); width:54px; height:54px; margin:-27px 0 0 -27px;
  display:grid; place-items:center; border-radius:50%; cursor:grab; touch-action:none;
  color:var(--ivory); background:rgb(15 16 17 / .42); border:1px solid rgb(242 241 236 / .7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color .24s ease,border-color .24s ease,transform .3s var(--expo),box-shadow .3s ease;
}
.ba-handle svg{width:22px; height:22px}
.ba-handle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ink-900),0 0 0 5px var(--sig-300)}
@media (hover:hover) and (pointer:fine){.ba--wipe:hover .ba-handle{border-color:var(--sig-500); background:rgb(222 100 50 / .22)}}
.ba.is-dragging .ba-handle{cursor:grabbing; transform:scale(.92); background:var(--sig-500); border-color:var(--sig-500); color:var(--ink-900)}
.ba.is-dragging{cursor:grabbing}
/* the tags fade out when the divider covers them */
.ba--wipe.hide-before .ba-tag--before,.ba--wipe.hide-after .ba-tag--after{opacity:0}

/* toggle */
.ba--toggle .ba-img{transition:opacity .7s var(--expo),transform 1.2s var(--expo)}
.ba--toggle .ba-before{opacity:0; transform:scale(1.02)}
.ba--toggle[data-state="before"] .ba-before,.ba--toggle.is-peek .ba-before{opacity:1; transform:none}
.ba--toggle .ba-tag{display:none}
.switch{
  position:relative; display:inline-grid; grid-template-columns:1fr 1fr; align-items:center;
  border:1px solid var(--ivory-14); border-radius:999px; padding:3px; background:rgb(15 16 17 / .5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.switch button{position:relative; z-index:1; min-height:34px; padding:0 1.05rem; border-radius:999px; font-size:.62rem; letter-spacing:.16em; color:var(--ivory-64); transition:color .3s ease}
.switch button[aria-pressed="true"]{color:var(--ink-900)}
.switch i{position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:999px; background:var(--ivory); transition:transform .45s var(--expo),background-color .3s ease}
.switch[data-state="before"] i{background:var(--grey)}
.switch[data-state="after"] i{transform:translateX(100%)}
@media (hover:hover) and (pointer:fine){.switch button:not([aria-pressed="true"]):hover{color:var(--ivory)}}
.ba--toggle .switch{position:absolute; z-index:3; left:50%; bottom:clamp(.9rem,1.6vw,1.3rem); transform:translateX(-50%)}
.ba-hint{position:absolute; z-index:3; right:clamp(.8rem,1.4vw,1.2rem); bottom:clamp(1.05rem,1.8vw,1.5rem); padding:.38rem .6rem .36rem; border-radius:2px; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; line-height:1; color:var(--ivory-92); background:rgb(15 16 17 / .56); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.ba--toggle{cursor:pointer}

/* ---------- ACT I: the hero (the compare is the stage) ---------- */
.act--i{
  isolation:isolate; z-index:0;
  min-height:calc(100vh - var(--head-h)); min-height:calc(100svh - var(--head-h));
  display:grid; grid-template-rows:1fr auto;
  padding:var(--pad-y) var(--pad-x);
}
.stage{position:absolute; z-index:-1; inset:calc(-1 * var(--head-h)) 0 0; border:0; border-radius:0; aspect-ratio:auto; background:var(--ink-900)}
.stage .ba-img{object-position:var(--op,50% 50%)}
.stage .scrim{position:absolute; inset:0; z-index:1; pointer-events:none}
.scrim--h{background:linear-gradient(100deg,rgb(15 16 17 / .92) 0%,rgb(15 16 17 / .74) 28%,rgb(15 16 17 / .34) 50%,rgb(15 16 17 / 0) 64%)}
.scrim--v{background:linear-gradient(to top,var(--ink-900) 0%,rgb(15 16 17 / .62) 12%,rgb(15 16 17 / .16) 30%,rgb(15 16 17 / 0) 46%,rgb(15 16 17 / 0) 80%,rgb(15 16 17 / .45) 100%)}
/* the divider fades out with the photograph into the ground below */
.stage .ba-line{-webkit-mask:linear-gradient(to top,transparent 0,#000 16%); mask:linear-gradient(to top,transparent 0,#000 16%)}
.stage .ba-line,.stage .ba-handle{z-index:4}
.stage .ba-tag{top:auto; bottom:calc(var(--pad-y) + 4.2rem); z-index:4}
.stage .ba-tag--before{left:auto; right:calc(100% - var(--pos) + 1rem)}
.stage .ba-tag--after{right:auto; left:calc(var(--pos) + 1rem)}
.stage .ba-handle{top:56%}
.hero{align-self:center; position:relative; z-index:5; max-width:min(44rem,52%); pointer-events:none; padding-block:clamp(.8rem,1.5vw,2.5rem)}
.hero a,.hero button{pointer-events:auto}
.hero h1{font-size:var(--fs-hero); line-height:.96; letter-spacing:-.045em; font-weight:700; text-shadow:0 1px 30px rgb(15 16 17 / .5)}
.hero h1 span{display:block}
.hero h1 .was{color:var(--grey)}
.hero h1 .l2{font-weight:300; letter-spacing:-.04em; color:var(--ivory-92); margin-top:.06em}
.lead{
  margin-top:clamp(1.1rem,1.9vw,1.8rem); max-width:44ch;
  font-size:clamp(1.05rem,.6rem + .8vw,1.22rem); line-height:1.6; color:var(--ivory-92);
  text-shadow:0 1px 22px rgb(15 16 17 / .7),0 1px 3px rgb(15 16 17 / .5);
}
.rail{position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; font-size:.62rem; letter-spacing:.18em; color:var(--ivory-64); pointer-events:none}
.rail a{pointer-events:auto}
.scroll-cue{display:flex; align-items:center; gap:.75rem; min-height:44px; transition:color .24s ease}
.scroll-cue:hover{color:var(--ivory)}
.scroll-cue i{display:block; width:1px; height:34px; background:linear-gradient(to bottom,var(--sig-500),rgb(222 100 50 / 0)); transform-origin:top; animation:drop 2.4s var(--expo) infinite}
@keyframes drop{0%{transform:scaleY(0); opacity:0}30%{opacity:1}100%{transform:scaleY(1); opacity:0}}
.rail-right{text-align:right}
.rail-right b{font-weight:600; color:var(--ivory)}

/* ---------- the signature load moment ----------
   The site is renovated in front of you: the "before" settles out of a blur, the divider draws
   itself down the right edge, then sweeps in and stops beside the words, uncovering "after".
   Then the words rise. Gated on .js; without a script the pair simply sits at rest. */
.js .stage .ba-before{filter:saturate(.82) contrast(.96) blur(12px); transform:scale(1.05)}
.js .stage .ba-after{clip-path:inset(0 0 0 100%)}
.js .stage .ba-line::before{transform:scaleY(0); transform-origin:50% 0}
.js .stage .ba-handle,.js .stage .ba-tag{opacity:0}
.js .act--i .reveal{opacity:0; transform:translate3d(0,20px,0)}
.is-ready .stage .ba-before{animation:settle 1.6s cubic-bezier(.22,.8,.3,1) forwards}
.is-ready .stage .ba-line::before{animation:draw .9s var(--expo) .35s forwards}
.is-ready .stage .ba-after{animation:uncover 1.5s var(--wipe) .75s forwards}
.is-ready .stage .ba-line{animation:travel 1.5s var(--wipe) .75s backwards}
.is-ready .stage .ba-handle{animation:travel 1.5s var(--wipe) .75s backwards,appear .5s ease 1.9s forwards}
.is-ready .stage .ba-tag{animation:appear .6s ease 2.1s forwards}
.is-ready .act--i .reveal{animation:rise .95s var(--expo) forwards; animation-delay:calc(1.25s + var(--i,0) * 90ms)}
/* once the sweep has landed (site.js adds .is-live), the animations let go so the divider can be dragged */
.stage.is-live :is(.ba-before,.ba-after,.ba-line,.ba-handle,.ba-tag),.stage.is-live .ba-line::before{animation:none !important}
.stage.is-live .ba-before{filter:saturate(.82) contrast(.96); transform:none}
.stage.is-live .ba-after{clip-path:inset(0 0 0 var(--pos))}
.stage.is-live .ba-line::before{transform:none}
.stage.is-live .ba-handle,.stage.is-live .ba-tag{opacity:1}
@keyframes settle{to{filter:saturate(.82) contrast(.96) blur(0); transform:none}}
@keyframes draw{to{transform:scaleY(1)}}
@keyframes uncover{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 var(--pos))}}
@keyframes travel{from{left:100%}}
@keyframes appear{to{opacity:1}}
@keyframes rise{to{opacity:1; transform:none}}

/* ---------- scroll reveals ---------- */
.js [data-reveal] .reveal,.js [data-reveal].reveal{opacity:0; transform:translate3d(0,26px,0)}
.js [data-reveal].in .reveal,.js [data-reveal].reveal.in{animation:rise .85s var(--expo) forwards; animation-delay:calc(var(--i,0) * 70ms)}

/* ---------- sections ---------- */
.sec{padding:var(--sec-y) var(--pad-x)}
.sec--first{padding-top:clamp(5rem,9vw,9rem)}
.sec--panel{background:linear-gradient(180deg,var(--ink-900) 0%,var(--ink-800) 18%,var(--ink-800) 82%,var(--ink-900) 100%)}
.head-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:end}
.head-split .copy{padding-bottom:.4rem}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem}

/* Leistungen: the index rows */
.index{margin-top:clamp(3rem,5.5vw,5rem); border-top:1px solid var(--ivory-14)}
.index-row{
  display:grid; grid-template-columns:4.5rem minmax(0,17rem) minmax(0,1fr) auto; gap:.5rem 1.75rem; align-items:baseline;
  padding:clamp(1.15rem,1.9vw,1.65rem) 0; border-bottom:1px solid var(--ivory-14);
  transition:border-color .3s ease;
}
.index-row .n{font-size:.78rem; color:var(--sig-500)}
.index-row .k{font-size:.74rem; letter-spacing:.16em; color:var(--ivory)}
.index-row .v{color:var(--ivory-64); font-size:.98rem; max-width:58ch}
.index-row .x{font-family:var(--mono); font-size:.72rem; color:var(--ivory-38); white-space:nowrap}
.index-row .x a{color:var(--ivory-64); border-bottom:1px solid var(--ivory-14); transition:color .24s ease,border-color .24s ease}
@media (hover:hover) and (pointer:fine){
  .index-row:hover{border-bottom-color:var(--rule)}
  .index-row .x a:hover{color:var(--ivory); border-bottom-color:var(--sig-500)}
}

/* Projekte: cards whose photograph turns into its own "before" */
.proj-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:end}
.proj-tools{display:flex; flex-direction:column; align-items:flex-end; gap:.6rem}
.proj-tools .micro{margin:0; color:var(--ivory-38)}
.proj-tools .micro::before{content:none}
.pgrid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.25rem,2.2vw,2rem) var(--gap); margin-top:clamp(2.5rem,4.5vw,4rem)}
.pgrid > *{grid-column:span 4}
.pgrid--home > :first-child{grid-column:span 7; grid-row:span 2}
.pgrid--home > :nth-child(2),.pgrid--home > :nth-child(3){grid-column:span 5}
.pgrid--index > *{grid-column:span 6}
.pgrid--index > :first-child{grid-column:span 12}
.pcard{display:flex; flex-direction:column; color:inherit; position:relative}
.pcard-media{position:relative; overflow:hidden; border-radius:3px; aspect-ratio:var(--ar,3/2); background:var(--ink-800); border:1px solid var(--line); transition:border-color .3s ease}
.pgrid--home > :first-child .pcard-media{aspect-ratio:auto; flex:1; min-height:24rem}
.pgrid--home > :not(:first-child) .pcard-media{aspect-ratio:16/9}
.pgrid--index > :first-child .pcard-media{aspect-ratio:21/9}
.pcard-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--op,50% 50%)}
.pcard-media .before{filter:saturate(.82) contrast(.96); clip-path:inset(0 100% 0 0); transition:clip-path .75s var(--wipe); transition-delay:0ms}
.pcard-media .after{transition:transform 1.4s var(--expo)}
/* the wipe's leading edge: parked just outside the frame at either end, so it is only seen travelling */
.pcard-media .edge{position:absolute; z-index:2; top:0; bottom:0; left:-1px; width:1px; background:var(--ivory); box-shadow:0 0 14px rgb(15 16 17 / .4); transition:left .75s var(--wipe)}
.pcard-tag{position:absolute; z-index:3; left:clamp(.8rem,1.4vw,1.1rem); top:clamp(.8rem,1.4vw,1.1rem)}
.pcard-tag .ba-tag{position:relative; top:auto; left:auto; right:auto}
.pcard-tag .t-before{display:none}
.pcard-body{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.25rem 1.5rem; align-items:baseline; padding-top:clamp(.9rem,1.4vw,1.2rem)}
.pcard-name{font-size:clamp(1.2rem,1.65vw,1.5rem); line-height:1.15; letter-spacing:-.02em; font-weight:600}
.pcard-meta{grid-column:1 / -1; font-size:.74rem; color:var(--ivory-64)}
.pcard-meta span + span::before{content:"·"; margin:0 .55em; color:var(--ivory-38)}
.pcard-go{font-family:var(--mono); font-size:.72rem; color:var(--ivory-38); transition:color .24s ease,transform .3s var(--expo)}
/* the reveal of "before": by hover on one card, or by the switch for all of them, staggered */
[data-show="before"] .pcard .before{clip-path:inset(0 0 0 0)}
[data-show="before"] .pcard .edge{left:100%}
[data-show="before"] .pcard .t-after{display:none}
[data-show="before"] .pcard .t-before{display:inline-flex}
[data-show] .pcard :is(.before,.edge){transition-delay:calc(var(--i,0) * 90ms)}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard-media{border-color:var(--line-hi)}
  .pcard:hover .pcard-go{color:var(--sig-300); transform:translateX(3px)}
  [data-show] .pcard:hover :is(.before,.edge){transition-delay:0ms}
  /* hover shows the other state: "before" when the grid shows "after", and back */
  [data-show="after"] .pcard:hover .before{clip-path:inset(0 0 0 0)}
  [data-show="after"] .pcard:hover .edge{left:100%}
  [data-show="after"] .pcard:hover .t-after{display:none}
  [data-show="after"] .pcard:hover .t-before{display:inline-flex}
  [data-show="before"] .pcard:hover .before{clip-path:inset(0 100% 0 0)}
  [data-show="before"] .pcard:hover .edge{left:-1px}
  [data-show="before"] .pcard:hover .t-before{display:none}
  [data-show="before"] .pcard:hover .t-after{display:inline-flex}
}
.pcard:focus-visible{outline:none}
.pcard:focus-visible .pcard-media{box-shadow:0 0 0 2px var(--ink-900),0 0 0 4px var(--sig-300)}
.proj-more{margin-top:clamp(2rem,3.5vw,3rem); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--ivory-14); padding-top:1.25rem}
.proj-more .micro{margin:0; color:var(--ivory-38)}
.proj-more .micro::before{content:none}

/* Verlauf: one project in five frames; the hovered frame widens */
.tl{margin-top:clamp(2.5rem,4.5vw,4rem)}
.tl-bar{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap); margin-bottom:1rem}
.tl-bar::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ivory-14)}
.tl-bar::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--sig-500); transform:scaleX(0); transform-origin:0 50%}
.in .tl-bar::after,.tl.in .tl-bar::after{transition:transform 2.2s var(--expo) .2s; transform:scaleX(1)}
.tl-bar span{position:relative; z-index:1; justify-self:start; padding-right:.75rem; background:var(--ink-900); font-family:var(--mono); font-size:.7rem; color:var(--ivory-64)}
.sec--panel .tl-bar span{background:var(--ink-800)}
.tl-frames{display:flex; gap:var(--gap); height:clamp(20rem,34vw,30rem)}
.tl-frame{position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:3px; border:1px solid var(--line); background:var(--ink-800); transition:flex-grow .7s var(--expo),border-color .3s ease}
.tl-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--expo)}
.tl-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgb(15 16 17 / .86) 0%,rgb(15 16 17 / .1) 46%,rgb(15 16 17 / 0) 100%); pointer-events:none}
.tl-frame figcaption{position:absolute; z-index:1; left:1rem; right:1rem; bottom:.95rem}
.tl-k{display:block; font-size:.68rem; color:var(--sig-300); margin-bottom:.25rem}
.tl-v{display:block; font-size:.98rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-frames:hover .tl-frame{flex-grow:.8}
.tl-frames .tl-frame:hover,.tl-frames .tl-frame:focus-within{flex-grow:2.2; border-color:var(--line-hi)}
.tl-frames .tl-frame:hover img{transform:scale(1.03)}
.tl-note{margin-top:1rem; font-family:var(--mono); font-size:.72rem; color:var(--ivory-38)}

/* Ablauf: five steps on one line that draws itself */
.steps{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(1.25rem,2.4vw,2.25rem); margin-top:clamp(3rem,5.5vw,5rem); padding-top:2.25rem}
.steps::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--ivory-14)}
.steps::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--sig-500); transform:scaleX(0); transform-origin:0 50%}
.steps.in::after{transition:transform 1.8s var(--expo) .15s; transform:scaleX(1)}
.step{position:relative}
.step::before{content:""; position:absolute; top:calc(-2.25rem - 4px); left:0; width:9px; height:9px; border-radius:50%; background:var(--ink-900); border:1px solid var(--grey)}
.steps.in .step::before{transition:background-color .3s ease,border-color .3s ease; transition-delay:calc(.2s + var(--i,0) * 300ms); background:var(--sig-500); border-color:var(--sig-500)}
.step-n{display:block; font-size:.74rem; color:var(--grey); margin-bottom:.9rem}
.step h3{font-size:1.28rem; line-height:1.15; letter-spacing:-.02em}
.step p{margin-top:.6rem; font-size:.95rem; color:var(--ivory-64); text-wrap:pretty}

/* Über uns */
.about{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(2rem,5.5vw,5.5rem); align-items:center}
.tile{position:relative; overflow:hidden; border-radius:3px; background:var(--ink-800); aspect-ratio:4/5; border:1px solid var(--line)}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--op,50% 50%)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgb(15 16 17 / .3),rgb(15 16 17 / 0) 50%); pointer-events:none}
.tile-fig figcaption{margin-top:.85rem; font-family:var(--mono); font-size:.7rem; color:var(--ivory-38)}
.facts{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 2rem; margin-top:clamp(1.75rem,3vw,2.5rem); border-top:1px solid var(--ivory-14)}
.facts div{padding:.95rem 0; border-bottom:1px solid var(--ivory-14)}
.facts dt{font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; font-stretch:118%; color:var(--grey)}
.facts dd{margin-top:.3rem; font-size:.86rem; color:var(--ivory)}

/* Kontakt: the panel with a form */
.contact{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(1.75rem,3.8vw,3.25rem); border-radius:3px;
  border:1px solid var(--ivory-14);
  background:linear-gradient(150deg,rgb(55 59 64 / .5) 0%,rgb(30 32 35 / .55) 48%,rgb(15 16 17 / .3) 100%);
  box-shadow:inset 0 1px 0 rgb(242 241 236 / .07),0 30px 70px -44px rgb(0 0 0 / .95);
}
.contact h2{font-size:clamp(1.9rem,3vw,2.75rem)}
.reach{display:flex; flex-direction:column; gap:.35rem; margin-top:clamp(1.6rem,2.8vw,2.3rem)}
.reach .mail{font-size:clamp(1.15rem,1.7vw,1.45rem); font-weight:600; letter-spacing:-.01em; color:var(--ivory); border-bottom:1px solid var(--rule); align-self:flex-start; padding-bottom:2px; transition:color .24s ease,border-color .24s ease}
.reach .mail:hover{color:var(--sig-300); border-bottom-color:var(--sig-500)}
.reach address{font-family:var(--mono); font-size:.78rem; color:var(--ivory-64); margin-top:.5rem}
.form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.35rem 1.5rem}
.field{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.field--full{grid-column:1 / -1}
.field-k{font-size:.6rem; letter-spacing:.18em; color:var(--ivory-64)}
.field input,.field select,.field textarea{
  -webkit-appearance:none; appearance:none; width:100%; margin:0;
  padding:.55rem 0 .6rem; border:0; border-bottom:1px solid var(--ivory-14); border-radius:0;
  background:transparent; color:var(--ivory); font-size:1rem; color-scheme:dark; transition:border-color .24s ease;
}
.field textarea{resize:vertical; min-height:5.5rem; line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ivory-38)}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:rgb(242 241 236 / .34)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none; border-bottom-color:var(--sig-500); box-shadow:0 1px 0 var(--sig-500)}
.field--select{position:relative}
.field--select::after{content:""; position:absolute; right:.25rem; bottom:1.15rem; width:6px; height:6px; border-right:1px solid var(--ivory-64); border-bottom:1px solid var(--ivory-64); transform:rotate(45deg); pointer-events:none}
.field select option{background:var(--ink-800); color:var(--ivory)}
.drop{
  grid-column:1 / -1; display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem;
  border:1px dashed rgb(242 241 236 / .22); border-radius:3px; color:var(--ivory-64); font-size:.9rem; cursor:pointer;
  transition:border-color .24s ease,background-color .24s ease,color .24s ease;
}
.drop svg{width:22px; height:22px; flex:none; color:var(--grey)}
.drop b{color:var(--ivory); font-weight:600}
.drop small{display:block; font-family:var(--mono); font-size:.68rem; color:var(--ivory-38); margin-top:.15rem}
.drop:hover,.drop.is-over{border-color:var(--sig-500); background:rgb(222 100 50 / .06); color:var(--ivory)}
.drop input{position:absolute; width:1px; height:1px; opacity:0}
.drop:focus-within{border-color:var(--sig-300)}
.form-foot{grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:.4rem}
.form-foot .note{font-size:.78rem; color:var(--ivory-38); max-width:36ch}
.form-done{grid-column:1 / -1; font-family:var(--mono); font-size:.78rem; color:var(--sig-300); min-height:1.2em}

/* ---------- footer ---------- */
.site-foot{padding:clamp(3.5rem,6vw,5.5rem) var(--pad-x) clamp(2rem,3vw,2.75rem); text-align:center; border-top:1px solid var(--ivory-08)}
.foot-lockup{display:block; width:clamp(104px,8vw,128px); aspect-ratio:250/104; margin:0 auto clamp(1.8rem,3vw,2.6rem); background:var(--grey); -webkit-mask:url('../logo/lockup.png') no-repeat center/contain; mask:url('../logo/lockup.png') no-repeat center/contain; transition:background-color .25s ease}
.foot-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 2rem}
.foot-nav a{display:inline-flex; align-items:center; min-height:2.25rem; font-size:.64rem; letter-spacing:.18em; color:var(--ivory-64); transition:color .24s ease}
.foot-place{margin-top:1.1rem; font-family:var(--mono); font-size:.74rem; color:var(--ivory-64)}
.foot-place a{transition:color .24s ease}
.foot-base{display:grid; justify-items:center; gap:.2rem; margin-top:2.2rem}
.foot-copy,.foot-legal{font-size:.74rem; color:var(--ivory-38)}
.foot-legal a{transition:color .24s ease}
.foot-credits{margin-top:.35rem; font-family:var(--mono); font-size:.66rem; color:var(--ivory-38)}
.foot-legal a + a::before{content:"·"; margin:0 .6em; color:var(--ivory-14)}
.credit{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin-top:.8rem; color:var(--ivory-38); transition:color .3s ease}
.avinii{width:46px; height:auto; display:block}
@media (hover:hover) and (pointer:fine){
  .foot-lockup:hover{background:var(--ivory)}
  .foot-nav a:hover,.foot-place a:hover,.foot-legal a:hover{color:var(--ivory)}
  .credit:hover{color:var(--sig-300)}
}

/* ---------- concept notice (a pitch, not a live site) ---------- */
.toast{position:fixed; z-index:90; left:50%; bottom:1.5rem; transform:translate(-50%,1rem); padding:.7rem 1rem; border-radius:3px; background:var(--ivory); color:var(--ink-900); font-family:var(--mono); font-size:.74rem; opacity:0; pointer-events:none; transition:opacity .3s ease,transform .4s var(--expo)}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .act--i .reveal,.js [data-reveal] .reveal,.js [data-reveal].reveal{opacity:1 !important; transform:none !important; animation:none !important}
  .js .stage .ba-before{filter:saturate(.82) contrast(.96); transform:none}
  .js .stage .ba-after{clip-path:inset(0 0 0 var(--pos))}
  .js .stage .ba-line::before{transform:none}
  .js .stage .ba-handle,.js .stage .ba-tag{opacity:1}
  .is-ready .stage *{animation:none !important}
  .scroll-cue i{animation:none; opacity:.5; transform:none}
  .pcard-media .before,.pcard-media .edge,.ba--toggle .ba-img,.tl-frame,.steps::after,.tl-bar::after{transition-duration:.01ms !important}
}