/* First visual version. Local/system typography;
   original photography. */
:root{
  color-scheme:dark;
  --bg:#090b10;
  --surface:#12151d;
  --text:#f1f3f8;
  --muted:#a8afbf;
  --line:#2b303c;
  --blue:#5278f5;
  --link:#b1c5ff;
  --radius:18px;
  font-family:"Golos Text","Segoe UI",Arial,sans-serif;
  font-synthesis:none}

*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased}
button,input,textarea,select{
  font:inherit}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:#5278f533}
button,a{
  touch-action:manipulation}
a{
  color:inherit;
  text-decoration:none}
button{
  cursor:pointer}
img{
  display:block;
  max-width:100%}
h1,h2,h3,h4,h5,p{
  margin:0}
h1,h2,h3,h4{
  text-wrap:balance}
a,button{
  transition:background-color .18s,color .18s,border-color .18s}
a:hover{
  color:var(--link)}
:focus-visible{
  outline:3px solid #b1c5ff;
  outline-offset:6px}
section[id],article[id]{
  scroll-margin-top:32px}
[hidden]{
  display:none!important}
.container{
  width:min(1184px,calc(100% - 96px));
  margin-inline:auto}
.section{
  padding-block:104px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap}
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  transform:translateY(-180%);
  z-index:10;
  background:#fff;
  color:#000;
  padding:12px 20px;
  border-radius:8px}
.skip-link:focus{
  transform:none}

.site-header{
  border-bottom:1px solid #ffffff0e}
.header-inner{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}
.identity{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap}
.monogram{
  font-size:33px;
  line-height:1;
  font-weight:750;
  letter-spacing:-4px;
  padding-right:5px}
.monogram>span{
  color:#7b9aff}
.header-inner nav{
  display:flex;
  align-items:center;
  gap:36px;
  font-size:14px;
  color:#b7bdcc}
.nav-contact{
  padding:10px 18px;
  border:1px solid #424959;
  border-radius:8px;
  color:var(--text)}
.nav-contact:hover{
  border-color:var(--link);
  background:#ffffff08}
.nav-contact span{
  margin-left:12px}
.menu-toggle{
  display:none}

.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:716px;
  align-items:center;
  padding-block:60px 68px;
  isolation:isolate}
.hero-content{
  z-index:1;
  position:relative;
  padding-top:2px}
.role{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:#c9d1e2;
  margin-bottom:26px}
.role-dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:#8ba7ff;
  border-radius:50%;
  box-shadow:0 0 0 5px #5278f51c}
h1{
  font-size:clamp(54px,5.5vw,78px);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1.04;
  margin-left:-4px;
  position:relative;
  white-space:nowrap}
.hero-description{
  font-size:17px;
  line-height:1.75;
  color:#b2bacb;
  margin-top:28px;
  max-width:450px}
.hero-actions{
  display:flex;
  gap:24px;
  align-items:center;
  margin-top:32px;
  flex-wrap:wrap}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:15px 22px;
  border-radius:9px;
  border:1px solid transparent;
  min-height:54px;
  font-size:14px;
  font-weight:600;
  line-height:1.4}
.primary{
  background:#4166df;
  color:#fff}
.primary:hover{
  background:#3154c7;
  color:#fff}
.button svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6}
.text-link{
  font-size:14px;
  font-weight:550;
  text-underline-offset:6px}
.text-link:hover{
  text-decoration:underline}
.location{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#9ba5b8;
  margin-top:30px}
.location svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5}
.location span{
  margin-left:12px;
  padding-left:16px;
  border-left:1px solid #4d5460}
.hero-portrait{
  position:absolute;
  right:-42px;
  top:0;
  width:56%;
  height:100%;
  z-index:0;
  overflow:hidden}
.hero-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);
  opacity:.95}
.hero-portrait:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--bg),transparent 30%,transparent 91%,var(--bg))}
.portrait-caption{
  position:absolute;
  z-index:1;
  bottom:46px;
  left:37%;
  display:flex;
  flex-direction:column;
  font-size:11px;
  color:#aeb9cf}
.portrait-caption>span:first-child{
  color:#eef0f8;
  font-size:13px;
  letter-spacing:.01em}
.experience-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  border-block:1px solid var(--line);
  min-height:119px}
.experience-strip>p{
  font-size:12px;
  color:#8e98ac;
  line-height:1.65}
.company-word{
  font-size:26px;
  color:#bdc3d1;
  font-weight:650;
  letter-spacing:-1px}
.company-word.tbank{
  font-weight:800}
.company-word.bianca{
  font-family:Georgia,serif;
  font-weight:500;
  font-style:italic;
  font-size:33px}
.company-word.rdtex{
  letter-spacing:1px;
  font-size:22px}
.small-dot{
  color:#7184b2}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px}
.section-intro{
  font-size:13px;
  line-height:1.5;
  color:#a3baff;
  margin-bottom:16px}
h2{
  font-size:clamp(32px,3.7vw,48px);
  line-height:1.15;
  font-weight:550;
  letter-spacing:-.045em}
.section-aside{
  font-size:14px;
  color:var(--muted);
  max-width:320px;
  line-height:1.8;
  padding-bottom:3px}
.case{
  background:var(--surface);
  border:1px solid #272c38;
  border-radius:var(--radius);
  padding:30px 34px 0;
  margin-top:20px}
.case-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px}
.case-company{
  display:flex;
  gap:14px;
  align-items:center}
.case-company h3{
  font-size:19px;
  letter-spacing:-.02em;
  font-weight:600}
.case-company p{
  font-size:12px;
  color:#9da6b9}
.company-sign{
  height:42px;
  width:42px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:800;
  flex-shrink:0}
.bank-sign{
  background:#f4d04e;
  color:#282411}
.workforce-sign{
  background:#293655;
  color:#c3d2ff;
  font-size:30px}
.bianca-sign{
  background:#293d3b;
  color:#c7e4df;
  font-family:Georgia,serif;
  font-style:italic}
.period{
  color:#929db1;
  font-size:13px}
.case-body{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:50px;
  padding:30px 0}
.case-story h4{
  font-size:29px;
  font-weight:550;
  line-height:1.22;
  letter-spacing:-.035em}
.case-story>p{
  color:#a8b0c1;
  font-size:14px;
  line-height:1.85;
  margin-top:15px;
  max-width:460px}
.tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:20px}
.tags span{
  font-size:11px;
  padding:4px 10px;
  border:1px solid #343a48;
  border-radius:5px;
  color:#b7c1d5}
.case-outcome{
  border-left:1px solid #303644;
  padding:12px 0 10px 48px;
  align-self:center}
.metric{
  font-size:61px;
  line-height:1.1;
  letter-spacing:-.055em;
  font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums}
.metric-arrow{
  font-size:35px;
  color:#6b7d9f;
  margin:0 5px;
  vertical-align:8px}
.unit{
  font-size:26px;
  letter-spacing:-.035em}
.case-outcome p{
  font-size:13px;
  color:#d0d7e5;
  margin-top:16px;
  line-height:1.7}
.case-outcome p span{
  color:#8f9bb2}
.case details{
  border-top:1px solid #303644}
.case summary{
  list-style:none;
  cursor:pointer;
  font-size:13px;
  color:#c4cfdf;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  min-height:60px}
.case summary::-webkit-details-marker{
  display:none}
.case summary:hover{
  color:#fff}
.expand-icon{
  font-size:24px;
  font-weight:300;
  color:#a3baff}
.case details[open] .expand-icon{
  transform:rotate(45deg)}
.case-details{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding:8px 0 28px}
.case-details h5{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  color:#e2e9f7}
.case-details p{
  font-size:13px;
  color:#abb6ca;
  line-height:1.8}
.case-details .method-note{
  grid-column:1/-1;
  font-size:11px;
  padding-top:16px;
  border-top:1px solid #303644;
  color:#9ba8bf}

.expertise-section{
  background:#0e1118;
  border-block:1px solid #212733}
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:34px}
.filters button{
  background:transparent;
  border:1px solid #303846;
  border-radius:7px;
  color:#aab5c9;
  font-size:13px;
  min-height:42px;
  padding:9px 15px}
.filters button:hover{
  background:#202938;
  color:#fff}
.filters button[aria-pressed=true]{
  background:#e4eafa;
  border-color:#e4eafa;
  color:#111826}
.competencies{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px}
.competency{
  min-width:0;
  border-top:1px solid #394357;
  padding-top:26px;
  display:flex;
  align-items:flex-start;
  flex-direction:column}
.competency-symbol{
  color:#9ab1ef;
  font-size:32px;
  line-height:1;
  margin-bottom:24px}
.competency h3{
  font-size:20px;
  line-height:1.3;
  font-weight:550;
  letter-spacing:-.02em;
  margin-bottom:14px}
.competency p{
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
  margin-bottom:26px}
.competency a{
  font-size:12px;
  color:var(--link);
  margin-top:auto;
  padding-block:8px}
.competency a span{
  margin-left:8px}
.competency a:hover{
  text-decoration:underline;
  text-underline-offset:5px}
.toolbox{
  margin-top:44px;
  display:flex;
  align-items:center;
  gap:10px 23px;
  flex-wrap:wrap;
  border-top:1px solid #28303d;
  padding-top:26px;
  font-size:12px;
  color:#c0cada}
.toolbox p{
  color:#8996ae;
  margin-right:20px}

.journey{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px}
.journey h2{
  font-size:38px;
  line-height:1.25}
.journey-intro>p:not(.section-intro){
  max-width:370px;
  color:var(--muted);
  font-size:14px;
  margin-top:26px;
  line-height:1.9}
.journey-intro .education{
  border-left:2px solid #506bc4;
  padding-left:18px;
  color:#e1e8f8!important;
  margin-top:42px!important}
.education span{
  color:#919db2;
  font-size:12px}
.timeline{
  padding-top:5px}
.timeline-item{
  display:grid;
  grid-template-columns:95px 1fr;
  gap:16px;
  border-top:1px solid #29303c;
  padding:20px 0}
.timeline-item>span{
  font-size:12px;
  color:#8392ad;
  padding-top:3px;
  font-variant-numeric:tabular-nums}
.timeline h3{
  font-size:16px;
  font-weight:550}
.timeline p{
  font-size:12px;
  color:#9ca8bd;
  margin-top:3px}

.approach{
  display:grid;
  grid-template-columns:.95fr 1fr;
  gap:80px;
  padding-top:0}
.approach-portrait{
  position:relative;
  border-radius:var(--radius);
  background:#140e0d;
  overflow:hidden;
  min-height:565px}
.approach-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% center;
  position:absolute;
  opacity:.85}
.approach-portrait:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#08090af5,transparent 62%)}
blockquote{
  position:absolute;
  bottom:30px;
  left:30px;
  right:25px;
  z-index:1;
  margin:0;
  font-size:23px;
  letter-spacing:-.025em;
  line-height:1.4;
  font-weight:450}
.approach-content{
  padding:20px 0 0}
.approach h2{
  font-size:38px;
  margin-bottom:25px}
.principle{
  padding:19px 0;
  border-bottom:1px solid #29303c}
.principle:last-child{
  border-bottom:0}
.principle h3{
  font-size:16px;
  font-weight:600;
  margin-bottom:8px}
.principle p{
  font-size:14px;
  color:var(--muted);
  line-height:1.85}

.projects{
  padding-top:0}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px}
.project-grid article{
  padding-top:26px;
  border-top:1px solid #394357;
  display:flex;
  align-items:flex-start;
  flex-direction:column}
.project-heading{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:17px}
.project-heading h3{
  font-size:21px;
  font-weight:550;
  letter-spacing:-.02em}
.status-label{
  color:#a9b6ce;
  font-size:10px;
  border:1px solid #414b5e;
  border-radius:20px;
  padding:2px 9px;
  white-space:nowrap}
.project-grid p{
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
  max-width:480px;
  margin-bottom:23px}
.project-grid a{
  margin-top:auto;
  padding-block:8px;
  color:#c3d1fa}

.contact-section{
  background:#111724;
  border-block:1px solid #2a354c;
  padding-block:88px}
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:95px}
.contact-intro h2{
  font-size:49px;
  line-height:1.1}
.contact-intro>p:not(.section-intro){
  max-width:390px;
  margin-top:24px;
  color:#abb7ce;
  font-size:14px;
  line-height:1.85}
.availability{
  font-size:12px;
  color:#c3cfe6;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:30px}
.availability>span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b0c5ff}
.contact-intro .relocation{
  font-size:11px!important;
  color:#9caac3!important;
  margin-top:10px!important;
  max-width:325px!important}
form{
  min-width:0}
.form-note{
  padding:13px 16px;
  border:1px solid #3a4964;
  background:#182237;
  border-radius:8px;
  font-size:11px;
  color:#bac7df;
  line-height:1.7;
  margin-bottom:23px}
.form-note strong{
  display:block;
  font-weight:600;
  color:#e5ecfb}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}
.field{
  margin-bottom:18px;
  min-width:0}
.field label{
  display:block;
  font-size:12px;
  color:#cbd5e9;
  margin-bottom:8px}
input,textarea,select{
  width:100%;
  background:#0c111b;
  border:1px solid #3b4559;
  border-radius:7px;
  padding:12px 13px;
  color:#f1f3f8;
  font-size:14px;
  min-height:46px}
input::placeholder,textarea::placeholder{
  color:#8390aa;
  opacity:1}
textarea{
  resize:vertical;
  min-height:125px}
select{
  color:#d5dff1}
input:hover,textarea:hover,select:hover{
  border-color:#637597}
.submit-button{
  width:100%}
#form-status{
  font-size:13px;
  color:#cedbfb;
  margin-top:14px;
  line-height:1.7}
#form-status:empty{
  display:none}
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-block:34px}
.footer p,.footer>a:last-child{
  font-size:12px;
  color:#8d9ab1}
.footer>a:last-child{
  padding:10px}
.footer>a:last-child:hover{
  color:var(--link)}

@media(min-width:1500px){
  .hero{
  min-height:770px}
.hero-portrait{
  width:58%;
  right:-55px}
.hero-content{
  padding-bottom:22px}
}

@media(max-width:1100px){
  .container{
  width:calc(100% - 64px)}
.header-inner nav{
  gap:22px}
.hero{
  min-height:670px}
h1{
  font-size:64px}
.hero-actions{
  gap:15px}
.hero-actions .button{
  padding-inline:17px;
  font-size:13px}
.hero-actions .text-link{
  font-size:12px}
.hero-portrait{
  right:-24px;
  width:56%}
.portrait-caption{
  left:28%;
  bottom:40px}
.case-outcome{
  padding-left:28px}
.metric{
  font-size:48px}
.metric-arrow{
  font-size:28px}
.unit{
  font-size:23px}
.case-story h4{
  font-size:26px}
.journey{
  gap:50px}
.approach{
  gap:45px}
.contact-layout{
  gap:45px}
.contact-intro h2{
  font-size:43px}
.section{
  padding-block:80px}
.approach,.projects{
  padding-top:0}
}

@media(max-width:800px){
  .header-inner{
  height:82px}
.header-inner nav{
  gap:18px}
.header-inner nav>a{
  font-size:12px}
.identity{
  gap:12px;
  font-size:13px}
.hero{
  min-height:630px}
h1{
  font-size:53px}
.hero-description{
  font-size:15px;
  max-width:340px}
.hero-actions{
  flex-direction:column;
  align-items:flex-start}
.hero-portrait{
  width:59%;
  right:-20px}
.portrait-caption{
  display:none}
.location{
  font-size:11px}
.experience-strip{
  gap:20px;
  flex-wrap:wrap;
  padding-block:23px}
.company-word{
  font-size:22px}
.experience-strip>p{
  font-size:10px}
.company-word.rdtex{
  font-size:18px}
.company-word.bianca{
  font-size:26px}
.section-heading{
  gap:25px}
.section-aside{
  font-size:12px;
  max-width:225px}
.case{
  padding:25px 25px 0}
.case-body{
  gap:25px}
.case-story h4{
  font-size:24px}
.case-story>p{
  font-size:13px}
.metric{
  font-size:40px}
.unit{
  font-size:20px}
.metric-arrow{
  font-size:24px;
  margin:0 2px;
  vertical-align:4px}
.case-outcome{
  padding-left:22px}
.case-outcome p{
  font-size:11px}
.competencies{
  gap:23px}
.competency h3{
  font-size:18px}
.competency p{
  font-size:13px}
.journey{
  gap:35px}
.journey h2{
  font-size:30px}
.timeline-item{
  grid-template-columns:75px 1fr;
  gap:12px}
.timeline-item>span{
  font-size:11px}
.timeline h3{
  font-size:14px}
.approach{
  gap:32px;
  grid-template-columns:.9fr 1fr}
.approach h2{
  font-size:30px}
.approach-portrait{
  min-height:540px}
blockquote{
  font-size:19px;
  left:22px;
  bottom:24px}
.project-heading h3{
  font-size:18px}
.contact-layout{
  gap:35px}
.contact-intro h2{
  font-size:37px}
.form-row{
  grid-template-columns:1fr;
  gap:0}
}

@media(max-width:620px){
  .container{
  width:calc(100% - 40px)}
.header-inner{
  height:76px;
  position:relative}
.identity{
  font-size:13px}
.monogram{
  font-size:30px}
.menu-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 0 8px 12px;
  border:0;
  background:transparent;
  color:#d2daeb;
  font-size:13px}
.menu-toggle span{
  font-size:23px}
.header-inner nav{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:68px;
  z-index:5;
  padding:12px;
  background:#151b28;
  border:1px solid #3c4960;
  border-radius:12px;
  box-shadow:0 20px 40px #0007}
.header-inner nav.is-open{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px}
.header-inner nav>a{
  padding:11px 14px;
  font-size:14px}
.nav-contact{
  margin-top:5px}
.hero{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-height:0;
  padding:38px 0 0}
.hero-content{
  padding:0}
.role{
  font-size:12px;
  margin-bottom:21px}
h1{
  font-size:clamp(43px,10.8vw,65px);
  line-height:1.05;
  letter-spacing:-.055em;
  margin-left:-2px;
  white-space:normal}
.hero-description{
  max-width:390px;
  font-size:14px;
  margin-top:21px;
  line-height:1.8}
.hero-description br{
  display:none}
.hero-actions{
  flex-direction:row;
  align-items:center;
  gap:19px;
  margin-top:25px}
.hero-actions .button{
  padding:14px 16px;
  font-size:12px;
  gap:12px;
  min-height:50px}
.hero-actions .text-link{
  font-size:12px}
.location{
  margin-top:22px;
  font-size:11px}
.hero-portrait{
  position:relative;
  top:auto;
  right:auto;
  width:100%;
  height:370px;
  margin-top:13px}
.hero-portrait img{
  object-position:center 38%;
  mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 82%,transparent)}
.hero-portrait:after{
  background:linear-gradient(90deg,var(--bg),transparent 15%,transparent 85%,var(--bg))}
.experience-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 32px;
  padding:23px 8px 26px;
  min-height:0;
  text-align:center}
.experience-strip>p{
  grid-column:1/-1;
  font-size:11px}
.experience-strip>p br{
  display:none}
.company-word{
  font-size:25px}
.company-word.bianca{
  font-size:29px}
.company-word.rdtex{
  font-size:20px}
.section{
  padding-block:62px}
.section-heading{
  display:block;
  margin-bottom:28px}
.section-intro{
  font-size:12px;
  margin-bottom:12px}
h2{
  font-size:34px;
  line-height:1.15}
.section-aside{
  margin-top:18px;
  font-size:13px;
  max-width:350px}
.section-aside br{
  display:none}
.case{
  padding:22px 21px 0;
  border-radius:13px;
  margin-top:15px}
.case-company{
  gap:11px}
.company-sign{
  height:36px;
  width:36px;
  border-radius:9px;
  font-size:22px}
.case-company h3{
  font-size:17px}
.case-company p{
  font-size:10px}
.period{
  font-size:10px}
.case-body{
  grid-template-columns:1fr;
  gap:23px;
  padding-block:23px}
.case-story h4{
  font-size:25px}
.case-story>p{
  font-size:13px;
  line-height:1.8}
.tags{
  margin-top:17px;
  gap:6px}
.tags span{
  font-size:10px;
  padding:3px 8px}
.case-outcome{
  border-left:0;
  border-top:1px solid #303644;
  padding:22px 0 0}
.metric{
  font-size:49px}
.metric-arrow{
  font-size:28px;
  vertical-align:6px}
.unit{
  font-size:23px}
.case-outcome p{
  font-size:12px;
  margin-top:9px}
.case summary{
  font-size:11px;
  min-height:60px;
  line-height:1.5}
.case-details{
  grid-template-columns:1fr;
  gap:20px}
.case-details p{
  font-size:13px}
.filters{
  gap:7px;
  margin-bottom:29px}
.filters button{
  font-size:12px;
  padding:9px 12px;
  min-height:42px}
.competencies{
  grid-template-columns:1fr;
  gap:30px}
.competency{
  padding-top:22px}
.competency-symbol{
  font-size:28px;
  margin-bottom:15px}
.competency h3{
  font-size:21px}
.competency p{
  font-size:14px;
  margin-bottom:14px;
  max-width:440px}
.competency a{
  font-size:12px}
.toolbox{
  gap:12px 20px;
  margin-top:30px;
  font-size:12px}
.toolbox p{
  width:100%;
  margin:0}
.journey{
  grid-template-columns:1fr;
  gap:30px}
.journey h2{
  font-size:33px}
.journey-intro>p:not(.section-intro){
  font-size:14px;
  margin-top:20px}
.journey-intro .education{
  margin-top:25px!important}
.timeline-item{
  grid-template-columns:85px 1fr;
  gap:14px;
  padding:18px 0}
.timeline h3{
  font-size:16px}
.timeline-item>span{
  font-size:11px}
.timeline p{
  font-size:12px}
.approach{
  padding-top:0;
  display:flex;
  flex-direction:column-reverse;
  gap:26px}
.approach-content{
  padding:0}
.approach h2{
  font-size:33px}
.principle{
  padding-block:18px}
.principle p{
  font-size:14px}
.approach-portrait{
  min-height:400px;
  height:400px}
.approach-portrait img{
  object-position:51% center}
blockquote{
  font-size:22px;
  left:24px;
  bottom:24px}
.projects{
  padding-top:0}
.project-grid{
  grid-template-columns:1fr;
  gap:30px}
.project-heading h3{
  font-size:21px}
.project-grid p{
  font-size:14px}
.contact-section{
  padding-block:56px}
.contact-layout{
  grid-template-columns:1fr;
  gap:35px}
.contact-intro h2{
  font-size:40px}
.contact-intro h2 br:last-child{
  display:none}
.contact-intro>p:not(.section-intro){
  max-width:100%;
  font-size:14px}
.availability{
  margin-top:23px}
.form-row{
  grid-template-columns:1fr;
  gap:0}
input,select,textarea{
  font-size:16px}
.form-note{
  font-size:12px}
.footer{
  flex-wrap:wrap;
  gap:18px;
  padding-block:28px}
.footer p{
  order:3;
  width:100%;
  font-size:11px}
.footer .identity{
  font-size:12px}
.footer>a:last-child{
  font-size:12px}
.footer .monogram{
  font-size:28px}
}

@media(max-width:370px){
  .container{
  width:calc(100% - 32px)}
.hero-actions{
  gap:14px}
.hero-actions .button{
  font-size:11px;
  padding-inline:12px}
.hero-actions .text-link{
  font-size:11px}
.location span{
  margin-left:5px;
  padding-left:10px}
.metric{
  font-size:44px}
.case{
  padding-inline:18px}
.case-company p{
  font-size:9px}
.period{
  font-size:9px}
.project-heading{
  gap:8px}
}

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


/* Approved copy: longer headlines and readable full case studies. */
.hero h1{font-size:clamp(42px,4.7vw,66px);white-space:normal;overflow-wrap:normal;line-height:1.12}
.hero-roles{font-size:13px;color:var(--muted);margin-top:18px;max-width:430px}
.hero-content{min-width:0}
.case-company>div{min-width:0}
.case-reading{max-width:72ch;margin-inline:auto;padding:12px 0 34px;font-size:15px;color:#bbc5d7;line-height:1.85;overflow-wrap:break-word}
.case-reading p{margin-bottom:18px}
.case-reading h5{font-size:21px;color:var(--text);margin:30px 0 12px;line-height:1.35}
.case-reading strong{color:#e2e9f7}
.case-reading ul{padding-left:24px;margin-block:16px 24px}
.case-reading li+li{margin-top:10px}
.case-reading>a{display:inline-block;padding:10px 0;color:var(--link)}
.case-outcome .metric-unit{margin-top:5px;color:var(--muted)}
.case-outcome .metric-note{font-size:12px;color:#a8b3c8;max-width:38ch}
.metric{white-space:normal;font-size:clamp(30px,4.2vw,58px)}
.metric-wide{font-size:clamp(26px,3vw,40px);text-wrap:balance}
.dryharder-sign{background:#363049;color:#e1d6ff}
.competencies{row-gap:44px}
.filters button{min-height:44px}
.contact-intro .relocation{font-size:13px!important;max-width:390px!important}
@media(max-width:800px) and (min-width:621px){.hero h1{font-size:42px}.hero{padding-block:36px}.hero-actions{gap:14px}}
@media(max-width:620px){
 .hero h1{font-size:clamp(32px,8.5vw,52px)}
 .hero-roles{font-size:12px;max-width:36ch}
 .case-top{align-items:flex-start}.case-company p{font-size:11px}.period{flex-shrink:0}
 .case-reading{font-size:14px}.case-reading h5{font-size:20px}
 .metric{font-size:clamp(32px,9vw,49px)}.metric-wide{font-size:clamp(25px,7vw,38px)}
 .case summary{font-size:13px}.hero-actions{flex-wrap:wrap}
}
.case-top,.case-story,.case-outcome{min-width:0}
.case-story h4,.hero h1{overflow-wrap:break-word}
summary{touch-action:manipulation}
@supports(padding:max(0px)){
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* Block 02/06 fixes 18.10: whole compound word in hero, no overflow on narrow phones. */
.nowrap{white-space:nowrap}
.hero h1{font-size:clamp(42px,4.7vw,60px)}
@media(max-width:800px) and (min-width:621px){.hero h1{font-size:4.4vw}}
@media(max-width:620px){.hero h1{font-size:clamp(25px,8.1vw,52px)}}
@media(max-width:420px){.journey h2{font-size:min(33px,7.3vw)}}
.journey-intro{min-width:0}

/* Block 04: three-block case summary with link to the full case page. */
.case-more-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:6px;padding-top:20px;border-top:1px solid var(--line)}
.case-more-row p{margin:0;font-size:13px;color:var(--muted)}
.case-more{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid #424959;border-radius:9px;font-size:14px;font-weight:600;color:var(--text)}
.case-more:hover{border-color:var(--link);background:#ffffff08}


/* Case pages /cases/<slug>/ and catalogue /cases/ — generated by scripts/build_cases.py. */
:root{--cp-gap:64px}
.header-inner nav.case-page-nav{display:flex;position:static;flex-direction:row;align-items:center;gap:28px;padding:0;background:none;border:0;box-shadow:none}
.case-page-nav>a:not(.nav-contact){color:#b7bdcc}
.case-page-nav>a:not(.nav-contact):hover{color:var(--text)}
.case-page h1{white-space:normal;margin-left:0}
.case-page h2{font-size:clamp(22px,2.3vw,28px);line-height:1.25;letter-spacing:-.02em}

.breadcrumbs{padding-top:28px;font-size:13px;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.breadcrumbs li+li::before{content:"/";margin:0 10px;color:#5d6577}
.breadcrumbs a{color:#c4cfdf}
.breadcrumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}

.cp-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:72px;align-items:end;padding-block:48px var(--cp-gap)}
.cp-company{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.cp-company p{margin:0;font-size:16px;font-weight:600;line-height:1.35}
.cp-company p span{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.cp-title h1{font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
.cp-lead{margin:24px 0 0;max-width:60ch;font-size:17px;color:#c9d1e2}
.cp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.cp-tags li{padding:5px 11px;border:1px solid #343a48;border-radius:6px;font-size:12px;color:#c4cfdf}
.cp-facts{margin:0}
.cp-facts>div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0}
.cp-facts>div+div{border-top:1px solid var(--line)}
.cp-facts dt{font-size:13px;color:var(--muted)}
.cp-facts dd{margin:0;font-size:14px;line-height:1.55;color:#dfe5f1}

.cp-results,.cp-section{padding-block:var(--cp-gap);border-top:1px solid var(--line)}
.cp-results>h2{margin-bottom:28px}
.cp-ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cp-ledger thead th{padding:0 0 12px;font-size:13px;font-weight:500;color:var(--muted);text-align:right;border-bottom:1px solid var(--line)}
.cp-ledger thead th:first-child{text-align:left}
.cp-ledger tbody th{padding:18px 24px 18px 0;width:46%;font-size:15px;font-weight:500;text-align:left;color:#dfe5f1;line-height:1.45}
.cp-ledger tbody th span{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--muted)}
.cp-ledger td{padding:18px 0 18px 24px;text-align:right;white-space:nowrap;font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--text)}
.cp-ledger td:last-child{color:var(--link)}
.cp-ledger tbody tr{border-bottom:1px solid var(--line)}
.cp-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px 40px;margin:0;padding:0;list-style:none}
.cp-ledger+.cp-highlights{margin-top:32px}
.cp-highlights li{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
.cp-highlights strong{font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.cp-highlights span{font-size:14px;line-height:1.5;color:var(--muted)}
.cp-outcomes{margin:28px 0 0;padding-left:20px;max-width:80ch;color:#c3cbdb}
.cp-results>h2+.cp-outcomes{margin-top:0}
.cp-outcomes li+li{margin-top:8px}
.cp-method{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 40px;margin-top:28px;max-width:980px}
.cp-method h3{grid-row:span 3;font-size:14px;font-weight:600;color:#dfe5f1}
.cp-method p{margin:0;font-size:14px;color:var(--muted);max-width:72ch}

.cp-section{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px}
.cp-section>div{max-width:68ch}
.cp-section p{margin:0;font-size:16px;color:#c3cbdb;line-height:1.75}
.cp-section p+p,.cp-section .cp-changes+p{margin-top:16px}
.cp-changes{display:grid;grid-template-columns:1fr 1fr;gap:36px 44px}
.cp-section>div:has(.cp-changes){max-width:none}
.cp-changes h3{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--text)}
.cp-changes p{font-size:15px}

.cp-cta{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:8px;padding:40px 44px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.cp-cta p{margin:0;max-width:46ch;font-size:19px;line-height:1.5;color:var(--text)}
.cp-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;flex-shrink:0}
.cp-pager{display:flex;justify-content:space-between;gap:24px;padding-block:40px 88px}
.cp-pager a{display:flex;flex-direction:column;gap:4px;font-size:17px;font-weight:600;color:var(--text)}
.cp-pager a span{font-size:13px;font-weight:400;color:var(--muted)}
.cp-pager a:hover{color:var(--link)}
.cp-pager .cp-next{margin-left:auto;text-align:right}

.cases-main{padding-bottom:96px}
.cases-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:48px 48px}
.cases-head h1{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.05em}
.cases-head p{margin:0;max-width:52ch;color:var(--muted)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.case-tile{display:flex;flex-direction:column;gap:14px;height:100%;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.case-tile:hover{border-color:#4a5468;background:#161a24}
.case-tile-top{display:flex;align-items:center;gap:12px}
.case-tile-top .company-sign{width:38px;height:38px;font-size:20px}
.case-tile-company{display:flex;flex-direction:column;font-size:15px;font-weight:600;line-height:1.3;color:var(--text)}
.case-tile-company span{font-size:12px;font-weight:400;color:var(--muted)}
.case-tile-top .period{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap;align-self:flex-start;padding-top:2px}
.case-tile-title{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--text)}
.case-tile-summary{font-size:14px;line-height:1.6;color:var(--muted)}

.pragmacore-sign{background:#1f3a4d;color:#bfe3ff}
.rdtex-sign{background:#3d2a2a;color:#ffd3c4}
.foresight-sign{background:#2a3350;color:#c8d4ff}
.engineering-sign{background:#2d3a2a;color:#d6f0c4}
.krok-sign{background:#3a3a2a;color:#f0ecc4}
.rubezh-sign{background:#4a2326;color:#ffc9cc}
.onis-sign{background:#2a3a3a;color:#c4f0ec}
.bastion-sign{background:#33302a;color:#ece2c8}

@media(max-width:1000px){
 :root{--cp-gap:48px}
 .cp-head{grid-template-columns:1fr;gap:40px;align-items:start}
 .cp-section{grid-template-columns:1fr;gap:18px}
 .cp-method{grid-template-columns:1fr}
 .cp-method h3{grid-row:auto}
 .cases-head{grid-template-columns:1fr;gap:16px}
}
@media(max-width:700px){
 .cp-ledger thead{display:none}
 .cp-ledger tbody tr{display:flex;flex-wrap:wrap;gap:8px 22px;padding:18px 0}
 .cp-ledger tbody th{flex-basis:100%;width:auto;padding:0}
 .cp-ledger td{padding:0;text-align:left}
 .cp-ledger td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:0;font-weight:400;color:var(--muted)}
 .cp-changes{grid-template-columns:1fr;gap:26px}
 .cp-cta{flex-direction:column;align-items:flex-start;padding:28px 24px}
 .cp-cta p{font-size:17px}
 .cp-pager{padding-bottom:64px}
 .case-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 :root{--cp-gap:40px}
 .header-inner nav.case-page-nav{gap:4px}
 .header-inner nav.case-page-nav>a{padding:10px 8px;font-size:13px;white-space:nowrap}
 .case-page-nav .nav-contact{margin-top:0}
 .cp-head{padding-top:32px}
 .cp-lead{font-size:16px}
 .cp-facts>div{grid-template-columns:80px 1fr;gap:12px}
 .case-tile{padding:22px}
}
@media(max-width:420px){
 .case-page .identity>span:not(.monogram){display:none}
}