/* Selena Jokić · R03 POC · one design system, two colour systems (black / brown).
   Public Sans only: the type weight matches the drawing's stroke, one instrument. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;min-height:100vh}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html[data-lang="sr"] .en{display:none!important}
html[data-lang="en"] .sr{display:none!important}

:root{
  /* SYSTEM BLACK */
  --bg:oklch(13.5% .005 70);
  --bg-2:oklch(17.5% .006 70);
  --line-art:oklch(92% .009 80);
  --surface:oklch(96.5% .006 80);
  --surface-2:oklch(93.5% .007 80);
  --ink:oklch(16% .006 70);
  --ink-mid:oklch(45% .009 70);
  --rule:oklch(84% .007 80);
  --rule-dark:oklch(31% .007 70);
  --fg:oklch(95% .007 80);
  --fg-mid:oklch(70% .010 80);
  --warm:oklch(74% .045 70);
  --font:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(1.25rem,4vw,4.5rem);
  --max:1560px;
  --ease:cubic-bezier(.2,.75,.2,1);
}
html[data-system="brown"]{
  --bg:oklch(19% .026 52);
  --bg-2:oklch(23% .028 52);
  --line-art:oklch(93% .016 80);
  --surface:oklch(96% .013 80);
  --surface-2:oklch(93% .015 78);
  --ink:oklch(18% .016 55);
  --ink-mid:oklch(46% .022 60);
  --rule:oklch(84% .014 78);
  --rule-dark:oklch(35% .026 52);
  --fg:oklch(95.5% .013 80);
  --fg-mid:oklch(72% .022 72);
  --warm:oklch(77% .055 70);
}

body{font:400 1.0625rem/1.55 var(--font);color:var(--ink);background:var(--surface);font-feature-settings:"tnum" 1,"kern" 1;text-rendering:optimizeLegibility}
.wrap{padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto;width:100%}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem)}
.label{font-size:.8125rem;font-weight:500;letter-spacing:.01em;color:var(--ink-mid)}
.dark{background:var(--bg);color:var(--fg)}
.dark .label{color:var(--fg-mid)}
.dark p{line-height:1.6}

/* ---------- header ---------- */
.site-head{position:absolute;inset:0 0 auto 0;z-index:6}
.site-head .grid{align-items:center;padding-block:1.25rem;border-bottom:1px solid oklch(100% 0 0 / .14)}
.brand{grid-column:1/span 4;text-decoration:none;font-weight:500;line-height:1.15;color:var(--fg)}
.brand small{display:block;font-weight:400;color:var(--fg-mid);font-size:.8125rem}
.nav{grid-column:5/span 6;display:flex;gap:clamp(1rem,2.6vw,2.5rem);font-size:.9375rem;color:var(--fg)}
.nav a{text-decoration:none;padding-block:.2rem;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.nav a[aria-current]{border-bottom-color:var(--fg)}
.nav a:hover{border-bottom-color:var(--fg-mid)}
.lang{grid-column:11/span 2;justify-self:end;font-size:.9375rem;display:flex;gap:.6rem;align-items:center;color:var(--fg-mid)}
.lang .sep{width:1px;height:1em;background:oklch(100% 0 0 / .25)}
.lang button{padding:.45rem .25rem;min-height:24px}
.lang button[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 -1px 0 var(--warm)}
.site-head.on-light{position:static}
.site-head.on-light .grid{border-bottom-color:var(--rule)}
.site-head.on-light .brand,.site-head.on-light .nav,.site-head.on-light .lang button[aria-pressed="true"]{color:var(--ink)}
.site-head.on-light .brand small,.site-head.on-light .lang{color:var(--ink-mid)}
.site-head.on-light .nav a[aria-current]{border-bottom-color:var(--ink)}
.site-head.on-light .lang .sep{background:var(--rule)}
@media (max-width:760px){
  .site-head .grid{grid-template-columns:1fr auto;row-gap:.75rem;padding-block:1rem}
  .brand{grid-column:1;grid-row:1}.lang{grid-column:2;grid-row:1;justify-self:end}
  .nav{grid-column:1/-1;grid-row:2;gap:1.25rem;font-size:.875rem}
  .nav a.home{display:none}
}

/* ---------- hero (shared) ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-content:start;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--fg)}
.hero .copy{position:relative;z-index:2;padding-top:clamp(7rem,15vh,10rem);padding-bottom:clamp(2rem,6vh,4rem)}
.hero .eyebrow{grid-column:1/span 5;color:var(--fg-mid);font-size:.8125rem;font-weight:500;letter-spacing:.01em;margin-bottom:clamp(1.25rem,3vh,2rem)}
.hero h1{grid-column:1/span 9;font-size:clamp(2.6rem,6.3vw,6.1rem);font-weight:300;line-height:1.04;letter-spacing:-.025em;text-wrap:balance;color:var(--fg)}
.hero h1 span{display:block}
.hero h1 span+span{color:var(--fg);opacity:.86}
.hero .sub{grid-column:1/span 5;margin-top:clamp(1.5rem,3.5vh,2.5rem);font-size:clamp(1.0625rem,1.35vw,1.2rem);line-height:1.55;color:var(--fg);opacity:.9;max-width:38ch}
.hero .cta{grid-column:1/span 6;margin-top:clamp(1.75rem,4vh,2.75rem);display:flex;gap:1.75rem;align-items:center;font-size:.9375rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.45rem;border:1px solid var(--fg);text-decoration:none;font-weight:500;letter-spacing:.005em;color:var(--fg);transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--fg);color:var(--bg)}
.link{text-decoration:none;border-bottom:1px solid oklch(100% 0 0 / .35);padding-bottom:.15rem;transition:border-color .25s var(--ease)}
.link:hover{border-bottom-color:currentColor}
.hero .marker{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(1.25rem,3.5vh,2.25rem);display:flex;align-items:center;gap:.65rem;font-size:.8125rem;color:var(--fg-mid);opacity:0;animation:fade .9s var(--marker-at,2.7s) var(--ease) forwards}
.hero .marker i{width:7px;height:7px;border-radius:50%;background:var(--warm);flex:none}
.hero .marker b{font-weight:500;color:var(--fg)}
@media (min-width:1200px){.hero .copy{max-width:var(--max);margin-inline:auto}}

/* staggered text reveal (small, no layout animation) */
.hero .copy>*{opacity:0;transform:translateY(8px);animation:up .8s var(--ease) forwards}
.hero .copy>.eyebrow{animation-delay:.05s}.hero .copy>h1{animation-delay:.15s}.hero .copy>.sub{animation-delay:.3s}.hero .copy>.cta{animation-delay:.42s}
html.ready .hero .copy>*{animation:none;opacity:1;transform:none}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* scene: the drawn Belgrade */
.scene{position:absolute;z-index:1;left:0;right:0;bottom:0;height:min(56vw,70%);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 100%),linear-gradient(to right,oklch(0% 0 0/.28) 0%,oklch(0% 0 0/.28) 30%,#000 56%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 100%),linear-gradient(to right,oklch(0% 0 0/.28) 0%,oklch(0% 0 0/.28) 30%,#000 56%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.scene svg{width:100%;height:100%}
.scene-photo picture,.scene-photo img{display:block;width:100%;height:100%}
.scene-photo img{object-fit:cover;object-position:50% 78%}
@media (max-width:760px){.scene-photo img{object-position:50% 70%}}
.scene path{fill:none;stroke:var(--line-art);stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--t,.6s) var(--d,0s) var(--ease) forwards}
.scene g[data-l="L2"] path{opacity:.72}
.scene g[data-l="L3"] path{opacity:.55}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:760px){
  .scene{height:44svh;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%)}
  .scene path{stroke-width:2.3}
  .hero .copy{padding-top:8rem;padding-bottom:38svh}
  .hero h1{font-size:clamp(1.7rem,8.8vw,2.5rem);letter-spacing:-.03em;text-wrap:pretty}
  .hero .marker{bottom:1rem}
  .hero h1{grid-column:1/-1}.hero .sub,.hero .cta,.hero .eyebrow{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .scene path{animation:none;stroke-dashoffset:0}
  .hero .copy>*{animation:none;opacity:1;transform:none}
  .hero .marker{animation:none;opacity:1}
  .figure-portrait img,.hero.a3 figure.portrait img{animation:none;opacity:1;transform:none}
}

/* A3 · portrait + linear Belgrade */
.hero.a3 .scene{left:0;right:auto;width:min(84%,1260px);height:min(46vw,66%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%),linear-gradient(to right,oklch(0% 0 0/.3) 0%,oklch(0% 0 0/.3) 26%,#000 48%,#000 74%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%),linear-gradient(to right,oklch(0% 0 0/.3) 0%,oklch(0% 0 0/.3) 26%,#000 48%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero.a3 .scene path{stroke-width:1.2}
.hero.a3 .portrait{position:absolute;z-index:2;right:max(-2.5%,calc((100% - var(--max))/2 - 3rem));bottom:0;height:min(84%,82svh);width:auto;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}
.hero.a3 .portrait img{height:100%;width:auto;opacity:0;transform:translateY(10px);animation:up 1.4s .5s var(--ease) forwards}
.hero.a3 h1{grid-column:1/span 8}
@media (max-width:760px){
  .hero.a3 .portrait{height:48svh;right:-6%}
  .hero.a3 h1{grid-column:1/-1}
  .hero.a3 .scene{width:100%;height:40svh}
  .hero.a3 .copy{padding-bottom:44svh}
  .hero.a3 .marker{display:none}
}

/* ---------- sections (light) ---------- */
section{padding-block:clamp(4rem,9vw,8rem)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem;padding-top:1rem;border-top:1px solid var(--rule);margin-bottom:clamp(2rem,5vw,4rem)}
.dark .sec-head{border-top-color:var(--rule-dark)}
.sec-head .label{grid-column:1/span 4}
.sec-head .n{grid-column:12;justify-self:end;font-size:.8125rem;color:var(--ink-mid)}
.dark .sec-head .n{color:var(--fg-mid)}
h2{font-weight:300;letter-spacing:-.02em;line-height:1.1;font-size:clamp(1.9rem,3.4vw,3.1rem);text-wrap:balance}
.lead{font-size:clamp(1.3rem,2vw,1.8rem);font-weight:300;line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}

/* 2 positioning */
.pos .lead{grid-column:2/span 8}
@media (max-width:760px){.pos .lead{grid-column:1/-1}.sec-head{column-gap:.75rem}.sec-head .label{grid-column:1/span 9}}
/* 3 about (portrait integrated) */
.about{padding-bottom:0}
.about .grid{align-items:end}
.about .text{grid-column:1/span 6;padding-bottom:clamp(3rem,8vw,6rem)}
.about h2{margin-bottom:1.5rem}
.about .more{display:inline-block;margin-top:1.75rem;font-size:.9375rem;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.15rem}
.about .more:hover{border-bottom-color:var(--ink)}
.about .figure-portrait{grid-column:8/span 5;position:relative;align-self:end;margin:0;padding-top:clamp(1rem,3vw,2.5rem)}
.about .figure-portrait img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
.about .figure-portrait figcaption{margin-top:.9rem;padding-bottom:1.25rem;font-size:.8125rem;color:var(--ink-mid);line-height:1.4}
.about .figure-portrait figcaption small{display:block;opacity:.75}
.about .rule-bottom{border-top:1px solid var(--rule)}
@media (max-width:760px){.about .text{grid-column:1/-1;padding-bottom:2rem}.about .figure-portrait{grid-column:3/-1}}

/* 4 practice index */
.practice ol{grid-column:1/-1}
.practice li{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding-block:clamp(1.25rem,2.5vw,1.9rem);border-top:1px solid var(--rule);align-items:baseline}
.practice li:last-child{border-bottom:1px solid var(--rule)}
.practice li .num{font-size:.8125rem;color:var(--ink-mid)}
.practice li .row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:2rem;align-items:baseline}
.practice li h3{font-weight:300;font-size:clamp(1.5rem,2.5vw,2.25rem);letter-spacing:-.015em;line-height:1.15}
.practice li p{font-size:.9375rem;color:var(--ink-mid);max-width:48ch}
.practice .note{grid-column:1/span 7;margin-top:2rem;font-size:.9375rem;color:var(--ink-mid);max-width:60ch}
.practice .all{grid-column:9/span 4;justify-self:end;margin-top:2rem;font-size:.9375rem;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.15rem}
.practice .all:hover{border-bottom-color:var(--ink)}
@media (max-width:760px){.practice li .row{grid-template-columns:1fr;row-gap:.5rem}.practice .note,.practice .all{grid-column:1/-1;justify-self:start}}

/* 5 approach: one measure line, three ticks */
.approach .line{grid-column:1/-1;position:relative;height:1px;background:var(--ink);margin-block:1rem 2.25rem}
.approach .line i{position:absolute;top:-6px;width:1px;height:13px;background:var(--ink)}
.approach .line i:nth-child(1){left:0}.approach .line i:nth-child(2){left:33.333%}.approach .line i:nth-child(3){left:66.666%}.approach .line i:nth-child(4){right:0}
.approach .steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2rem;row-gap:2rem}
.approach .steps h3{font-weight:300;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.015em;margin-bottom:.6rem}
.approach .steps p{font-size:.9375rem;color:var(--ink-mid);max-width:34ch}
.approach .steps .k{font-size:.8125rem;color:var(--ink-mid);display:block;margin-bottom:.75rem}
@media (max-width:760px){.approach .steps{grid-template-columns:1fr}.approach .line i:nth-child(2),.approach .line i:nth-child(3){display:none}}

/* 6 location (dark, office as reality signal) */
.location{padding-block:0}
.location .grid{align-items:stretch}
.location .text{grid-column:1/span 5;padding-block:clamp(4rem,9vw,8rem)}
.location h2{font-size:clamp(2.4rem,5vw,4.5rem);margin-bottom:1.5rem}
.location p{max-width:36ch;color:var(--fg);opacity:.9}
.location .route{margin-top:2.5rem;font-size:.8125rem;color:var(--fg-mid);display:flex;align-items:center;gap:.75rem;white-space:nowrap}
.location .route i{flex:1 1 1rem;height:1px;background:var(--rule-dark);min-width:1rem}
.location .route b{font-weight:500;color:var(--fg);display:flex;align-items:center;gap:.5rem}
.location .route b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warm)}
.location .hours{margin-top:1rem;font-size:.8125rem;color:var(--fg-mid)}
.location .photo{grid-column:6/span 7;position:relative;margin:0;margin-right:calc(-1*var(--gutter));min-height:100%}
.location .photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 40%);mask-image:linear-gradient(to right,transparent 0%,#000 40%);opacity:.9}
@media (min-width:1600px){.location .photo{margin-right:calc((100vw - var(--max))/-2 - var(--gutter))}}
@media (max-width:760px){.location .text{grid-column:1/-1;padding-bottom:2.5rem}.location .photo{grid-column:1/-1;margin-inline:calc(-1*var(--gutter));min-height:52vw;aspect-ratio:16/9}.location .photo img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 25%);mask-image:linear-gradient(to bottom,transparent 0%,#000 25%)}}

/* 7 contact close (dark, typographic) */
.contact h2{font-size:clamp(2.4rem,5.4vw,5rem);grid-column:1/span 10;margin-bottom:1rem}
.contact .p{grid-column:1/span 6;color:var(--fg);opacity:.85;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.contact dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2rem;border-top:1px solid var(--rule-dark)}
.contact dl>div{padding-block:1.5rem 2rem;border-bottom:1px solid var(--rule-dark)}
.contact dt{font-size:.8125rem;color:var(--fg-mid);margin-bottom:.6rem}
.contact dd{font-size:clamp(1.2rem,1.9vw,1.7rem);font-weight:300;letter-spacing:-.01em;line-height:1.3}
.contact dd a{text-decoration:none;display:inline-block;padding-block:.15rem;border-bottom:1px solid var(--rule-dark);transition:border-color .25s var(--ease)}
.contact dd a:hover{border-bottom-color:var(--fg)}
.contact .when{grid-column:1/span 6;margin-top:1.5rem;font-size:.9375rem;color:var(--fg-mid)}
@media (max-width:760px){.contact dl{grid-template-columns:1fr}.contact dl>div{padding-block:1.1rem 1.4rem}}

/* footer */
.foot{padding-block:2rem 2.5rem;font-size:.8125rem;color:var(--fg-mid);border-top:1px solid var(--rule-dark)}
.foot .grid{row-gap:.75rem}
.foot .a{grid-column:1/span 5}.foot .b{grid-column:6/span 4}.foot .c{grid-column:10/span 3;justify-self:end;text-align:right}
.foot b{font-weight:500;color:var(--fg)}
.foot a{text-decoration:none;display:inline-block;padding-block:.3rem}
@media (max-width:760px){.foot .a,.foot .b,.foot .c{grid-column:1/-1;justify-self:start;text-align:left}}

/* ---------- inner pages ---------- */
.page-head{position:relative;padding-top:clamp(7rem,16vh,10rem);padding-bottom:clamp(3rem,8vh,5rem);overflow:hidden}
.page-head .eyebrow{grid-column:1/span 5;font-size:.8125rem;font-weight:500;color:var(--fg-mid);margin-bottom:1.25rem}
.page-head h1{grid-column:1/span 9;font-size:clamp(2.4rem,5.4vw,5rem);font-weight:300;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.page-head .lead{grid-column:1/span 7;margin-top:2rem;opacity:.9}
/* about page: portrait straddles the dark/light cut */
.ab-head{padding-bottom:clamp(4rem,10vh,7rem);overflow:visible}
.ab-head .portrait{position:absolute;right:max(0px,calc((100% - var(--max))/2));bottom:-14%;height:min(108%,76svh);width:auto;pointer-events:none;z-index:2}
.ab-head .portrait img{height:100%;width:auto;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
.ab-head h1{grid-column:1/span 8;font-size:clamp(2.4rem,4.9vw,4.6rem)}.ab-head h1 span{display:block}
.ab-head .lead{grid-column:1/span 6}
.ab-body{padding-top:clamp(6rem,14vw,11rem)}
.ab-body .how{grid-column:1/span 6}
.ab-body .how p{margin-top:1.25rem;max-width:52ch}
.ab-body .how p+p{border-top:1px solid var(--rule);padding-top:1.25rem}
.ab-body .facts{grid-column:8/span 5}
.ab-body dl{border-top:1px solid var(--rule)}
.ab-body dl>div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding-block:.9rem;border-bottom:1px solid var(--rule);font-size:.9375rem}
.ab-body dt{color:var(--ink-mid)}
.ab-office{padding-top:0}
.ab-office figure{grid-column:1/span 5;margin:0}
.ab-office img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ab-office .cap{grid-column:7/span 5;align-self:end;font-size:.9375rem;color:var(--ink-mid);max-width:40ch}
@media (max-width:760px){
  .ab-head .portrait{position:relative;right:auto;bottom:auto;height:auto;width:72%;margin:2rem auto -22% auto;grid-column:1/-1}
  .ab-head .portrait img{width:100%;height:auto}
  .ab-head .lead,.ab-head h1,.ab-body .how,.ab-body .facts,.ab-office figure,.ab-office .cap,.page-head .lead,.page-head h1{grid-column:1/-1}
  .ab-body .facts{margin-top:3rem}.ab-office .cap{margin-top:1rem}
  .ab-body dl>div{grid-template-columns:6.5rem 1fr}
}
/* practice page */
.pr-list ol{grid-column:1/-1}
.pr-list li{display:grid;grid-template-columns:3rem minmax(0,5fr) minmax(0,6fr);column-gap:2rem;padding-block:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--rule);align-items:baseline}
.pr-list li:last-child{border-bottom:1px solid var(--rule)}
.pr-list .num{font-size:.8125rem;color:var(--ink-mid)}
.pr-list h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.pr-list p{color:var(--ink-mid);max-width:52ch}
.pr-list .note{grid-column:1/span 7;margin-top:2.5rem;color:var(--ink-mid);max-width:60ch;font-size:.9375rem}
.pr-cta{padding-top:0}
.pr-cta .grid{align-items:center}
.pr-cta .lead{grid-column:1/span 7}
.pr-cta .btn{grid-column:9/span 4;justify-self:start;border-color:var(--ink);color:var(--ink)}
.pr-cta .btn:hover{background:var(--ink);color:var(--surface)}
@media (max-width:760px){.pr-list li{grid-template-columns:3rem 1fr;row-gap:.5rem}.pr-list li p{grid-column:2}.pr-list .note,.pr-cta .lead,.pr-cta .btn{grid-column:1/-1}.pr-cta .btn{margin-top:1.5rem}}
/* contact page */
.ct-h1{grid-column:1/span 9}.ct-lead{grid-column:1/span 6}
@media (max-width:760px){.ct-h1,.ct-lead{grid-column:1/-1}}
.ct-city{padding-block:0;position:relative}
.ct-city img{width:100%;height:auto;aspect-ratio:1600/640;object-fit:cover;opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.ct-route .grid{align-items:baseline}
.ct-route h2{grid-column:1/span 4;font-size:clamp(1.6rem,2.6vw,2.4rem)}
.ct-route p{grid-column:5/span 6;opacity:.9}
@media (max-width:760px){.ct-route h2,.ct-route p{grid-column:1/-1}.ct-route p{margin-top:1rem}}

/* POC controls (not part of the site) */
.poc{position:fixed;right:.75rem;bottom:.75rem;z-index:20;display:flex;gap:.5rem;align-items:center;font:500 .6875rem/1 system-ui,sans-serif;letter-spacing:.03em;padding:.45rem .55rem;background:oklch(20% .01 60 / .86);color:oklch(96% .01 80);border-radius:2px;backdrop-filter:blur(4px)}
.poc span{opacity:.75;padding-right:.35rem;border-right:1px solid oklch(100% 0 0/.25)}
.poc select{font:inherit;color:inherit;background:oklch(30% .01 60);border:1px solid oklch(100% 0 0/.2);border-radius:2px;padding:.2rem .3rem}
@media (max-width:760px){.poc{right:.5rem;bottom:.5rem;flex-wrap:wrap}.poc span{display:none}}


/* ==================== R04C · owner correction pass (2026-09-20) ==================== */
/* header identity: ADVOKAT readable, not a whisper */
.brand{font-size:1.125rem}
.brand small{text-transform:uppercase;letter-spacing:.22em;font-size:.8125rem;font-weight:600;color:var(--fg);opacity:1;margin-top:.3rem}
.site-head.on-light .brand small{color:var(--ink)}
/* hero eyebrow: clear professional identification before the headline */
.hero .eyebrow{grid-column:1/span 8;text-transform:uppercase;letter-spacing:.14em;font-size:.9375rem;font-weight:500;color:var(--fg);opacity:1}
/* hero scene: full frame, no vertical mask, no left-side global dimming — skyline stays visible */
.hero.a1 .scene-photo{top:0;bottom:0;height:auto;-webkit-mask-image:none;mask-image:none}
.hero.a1 .scene-photo img{object-fit:cover;object-position:50% 50%}
/* local, soft text scrim anchored to the headline block itself (not to the hero edge — fails on 2560 px) */
.hero.a1 .scrim{display:none}
.hero.a1 .copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-34%;width:118%;top:-30%;height:160%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,oklch(13.5% .005 70/.96) 0%,oklch(13.5% .005 70/.9) 22%,oklch(13.5% .005 70/.66) 45%,oklch(13.5% .005 70/.3) 68%,oklch(13.5% .005 70/.08) 86%,transparent 100%)}
@media (max-width:760px){
  .hero.a1 .scene-photo{top:auto;bottom:0;height:52svh;-webkit-mask-image:none;mask-image:none}
  .hero.a1 .scene-photo img{object-position:58% 46%}
  .hero.a1 .copy::before{display:none}
  .hero .copy{padding-bottom:50svh}
  .hero .eyebrow{font-size:.75rem;letter-spacing:.12em}
}
/* portrait panels: the cutout ends on the panel's bottom edge — no mask, no blur, no fade across the body */
.figure-portrait .ph,.portrait-panel .ph{position:relative;aspect-ratio:4/5;background:var(--surface-2);overflow:hidden}
.figure-portrait .ph img,.portrait-panel .ph img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:94%;width:auto;max-width:none;
  -webkit-mask-image:none;mask-image:none}
.about .figure-portrait img{-webkit-mask-image:none;mask-image:none}
.about .figure-portrait{align-self:end;padding-top:0}
.about .grid{align-items:end}
/* about page: biography with the SECONDARY portrait on the light surface (no dark/light straddle) */
.ab-head{padding-bottom:clamp(3rem,8vh,5rem)}
.ab-bio .portrait-panel{grid-column:1/span 5;margin:0}
.ab-bio .portrait-panel figcaption{margin-top:.9rem;font-size:.8125rem;color:var(--ink-mid);line-height:1.4}
.ab-bio .portrait-panel figcaption small{display:block;opacity:.75}
.ab-bio .bio{grid-column:7/span 6}
.ab-bio .bio p{max-width:58ch;font-size:1.0625rem;line-height:1.6}
.ab-bio .bio p+p{margin-top:1.25rem}
.ab-body{padding-top:clamp(4rem,9vw,8rem)}
.ab-body dl>div{grid-template-columns:9.5rem 1fr}
.ab-office{padding-top:0}
@media (max-width:760px){
  .ab-bio .portrait-panel,.ab-bio .bio{grid-column:1/-1}
  .ab-bio .bio{margin-top:2rem}
  .ab-body dl>div{grid-template-columns:7rem 1fr}
}
/* home location: typographic, no photo */
.location.typo .text{grid-column:1/span 6}
.location.typo .loc-facts{grid-column:8/span 5;align-self:center;border-top:1px solid var(--rule-dark)}
.location.typo .loc-facts>div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--rule-dark);font-size:1rem}
.location.typo .loc-facts dt{font-size:.8125rem;color:var(--fg-mid)}
.location.typo .loc-facts dd{color:var(--fg);opacity:.92;max-width:none}
.maplink{display:inline-block;text-decoration:none;border-bottom:1px solid var(--fg-mid);padding-bottom:.15rem;transition:border-color .25s var(--ease)}
.maplink:hover{border-bottom-color:var(--fg)}
@media (max-width:760px){.location.typo .text{padding-bottom:1rem}.location.typo .loc-facts{grid-column:1/-1;margin-bottom:clamp(3rem,9vw,5rem)}}
/* contact page: three primary actions, then office + small location visual */
.ct-head{padding-bottom:clamp(3rem,7vh,4.5rem)}
.ct-head .ct-lead{grid-column:1/span 7}
.ct-actions{grid-column:1/-1;margin-top:clamp(2.5rem,6vw,4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark)}
.act{display:grid;align-content:start;gap:.55rem;background:var(--bg);padding:1.6rem 1.5rem 1.8rem;text-decoration:none;color:var(--fg);transition:background .3s var(--ease)}
.act:hover{background:var(--bg-2)}
.act .k{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--fg-mid)}
.act .v{font-size:clamp(1.15rem,1.55vw,1.45rem);font-weight:300;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.act .s{font-size:.8125rem;color:var(--fg-mid)}
.ct-office{padding-top:0}
.ct-office .grid{align-items:start}
.ct-office .ct-info{grid-column:1/span 5}
.ct-office h2{font-size:clamp(1.6rem,2.6vw,2.4rem);margin:.75rem 0 1.75rem}
.ct-office dl{border-top:1px solid var(--rule-dark)}
.ct-office dl>div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding-block:1rem;border-bottom:1px solid var(--rule-dark);font-size:1rem}
.ct-office dt{font-size:.8125rem;color:var(--fg-mid)}
.ct-office dd{color:var(--fg);opacity:.92}
.ct-visual{grid-column:7/span 6;margin:0}
.ct-visual img{width:100%;height:clamp(220px,24vw,330px);object-fit:cover;object-position:50% 48%;opacity:.92;-webkit-mask-image:none;mask-image:none}
.ct-visual figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--fg-mid)}
@media (max-width:760px){
  .ct-head .ct-lead{grid-column:1/-1}
  .ct-actions{grid-template-columns:1fr}
  .ct-office .ct-info,.ct-visual{grid-column:1/-1}
  .ct-visual{margin-top:2.5rem}.ct-visual img{height:200px}
  .ct-office dl>div{grid-template-columns:6rem 1fr}
}

/* R04C-b · owner: no panel, no frame — cutout straight on the page surface, standing on a rule (no mask, no fade) */
.figure-portrait .ph,.portrait-panel .ph{background:none;aspect-ratio:auto;overflow:visible;position:static;border-bottom:1px solid var(--rule)}
.figure-portrait .ph img,.portrait-panel .ph img{position:static;transform:none;height:auto;width:100%;max-width:100%;display:block}
.about .figure-portrait figcaption{margin-top:.75rem}
.ab-bio .portrait-panel{align-self:start}

/* R04C-c · draw-on restored: SVG strokes draw over the hero PNG, then cross-fade into the untouched PNG */
.hero.a1 .scene-photo{--draw-end:2.90s}
.hero.a1 .scene-photo svg.draw{position:absolute;inset:0;width:100%;height:100%;opacity:1;animation:scene-out .9s calc(var(--draw-end) + .35s) var(--ease) forwards}
.hero.a1 .scene-photo picture{position:absolute;inset:0;opacity:0;animation:scene-in .9s calc(var(--draw-end) + .2s) var(--ease) forwards}
.hero.a1 .scene-photo svg.draw path{stroke-width:1.15}
@keyframes scene-in{to{opacity:1}}
@keyframes scene-out{to{opacity:0}}
@media (max-width:760px){.hero.a1 .scene-photo img{object-position:50% 50%}.hero.a1 .scene-photo svg.draw path{stroke-width:2}}
@media (prefers-reduced-motion:reduce){.hero.a1 .scene-photo svg.draw{display:none}.hero.a1 .scene-photo picture{opacity:1;animation:none}}