.hero{
  min-height:864px;
  position:relative;
  padding-top:32px
}
.hero h1{
  margin-top:40px;
  max-width:calc((100% - 24px)/2);
  font-size:clamp(34px,2.78vw,40px);
  line-height:1.25
}
.hero h1 span{
  display:block
}
.hero-copy{
  margin-top:40px;
  max-width:636px
}
.hero .actions{
  margin-top:40px
}
.hero-collage{
  position:absolute;
  top:196px;
  right:0;
  width:526px
}
.hero-collage .eyebrow{
  margin-bottom:40px
}
.hero-collage .main-visual{
  display:block;
  height:272px;
  width:100%
}
.hero-subslots{
  display:flex;
  gap:24px;
  justify-content:flex-end;
  margin-top:24px
}
.hero-subslots a{
  width:196px;
  height:112px
}
.hero-subslots .placeholder-copy{
  font-size:18px;
  gap:8px
}
.hero-subslots .placeholder-meta{
  display:none
}
.hero-collage .pattern{
  position:absolute;
  bottom:-16px;
  left:-110px;
  width:96px
}
.hero-footnote{
  position:absolute;
  bottom:104px
}
.hero::after{
  content:'';
  position:absolute;
  bottom:48px;
  left:0;
  right:0;
  border-bottom:1px solid var(--color-structure)
}
.profile{
  min-height:672px
}
.profile h2{
  max-width:1000px
}
.profile-copy{
  margin-top:48px;
  grid-column:1/9
}
.facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:74px
}
.fact .eyebrow{
  margin-bottom:16px
}
.fact .value{
  font-size:48px;
  line-height:56px;
  white-space:nowrap
}
.fact h3{
  max-width:300px
}
.fact .short{
  margin-top:24px
}
.projects{
  min-height:2272px
}
.projects-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:64px
}
.focus{
  min-height:640px
}
.focus-list{
  display:grid;
  gap:40px
}
.focus-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.focus .split-head{
  grid-row:1
}
.focus .section-label{
  margin-bottom:32px
}
.section-grid-body{
  padding-top:48px
}
.approach{
  min-height:736px
}
.approach .split-body{
  display:grid;
  gap:96px
}
.experience{
  min-height:640px
}
.experience-list{
  display:grid;
  gap:72px
}
.experience-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px
}
.experience-item>p{
  grid-column:1/-1;
  font-size:18px;
  line-height:28px
}
.experience-meta{
  font-size:16px;
  line-height:24px
}
.experience-meta span{
  display:block
}
.about-intro{
  min-height:816px;
  padding-top:48px;
  position:relative
}
.about-intro h1{
  margin-top:48px;
  max-width:820px
}
.about-intro h1 span{
  display:block
}
.about-intro .intro-copy{
  margin-top:72px;
  max-width:746px
}
.about-intro .availability{
  margin-top:136px
}
.portrait-frame{
  position:absolute;
  width:416px;
  height:560px;
  right:0;
  top:112px
}
.about-intro::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  border-bottom:1px solid var(--color-structure)
}
.about-principles{
  padding-top:144px;
  min-height:1088px
}
.principle{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  min-height:232px
}
.principle>.eyebrow{
  grid-column:span 1;
  padding-top:8px
}
.principle h2{
  grid-column:span 3
}
.principle>p:last-child{
  grid-column:span 8
}
.about-tools{
  min-height:400px;
  border-top:1px solid var(--color-structure);
  padding-top:112px
}
.about-tools h2{
  grid-column:span 4
}
.about-tools p{
  grid-column:span 8;
  padding-top:8px
}
.mobile-break{
  display:none
}
.about-intro h1 .about-mobile-title{
  display:none
}

/* Profile facts share the section heading's typography and equal grid tracks. */
.profile .facts{
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px
}
.profile .fact{min-width:0}
.profile .fact .value{
  font-family:var(--font-heading);
  font-weight:500;
  letter-spacing:0;
  font-size:clamp(28px,2.5vw,36px);
  line-height:1.25
}

/* Decorative layers occupy the free right column without moving the content. */
.profile-art{
  position:absolute;
  top:48px;
  right:0;
  width:calc((100% - 48px)/3);
  height:420px;
  overflow:hidden;
  animation:profile-float 7s ease-in-out infinite
}
.profile-art-tilt{transition:transform 500ms ease-in-out}
.profile-art img{
  display:block;
  width:150%;
  max-width:none;
  height:auto;
  margin-left:-25%;
  margin-top:-12%
}
@keyframes profile-float{
  0%,100%{transform:translateY(3px) rotate(-.4deg)}
  50%{transform:translateY(-3px) rotate(.4deg)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .profile-art:hover .profile-art-tilt{transform:rotate(1.2deg)}
}
@media(prefers-reduced-motion:reduce){
  .profile-art,.profile-art-tilt{transform:none}
}