/* An unframed, continuous sequence; the existing adaptive header is untouched. */
.hero-gradient{
  --ribbon-height:clamp(160.65px,35.5725svh,256.275px);
  --ribbon-gap:22px;
  --ribbon-bottom:54px;
}
.home-ribbon{
  position:absolute;
  inset:auto 0 var(--ribbon-bottom);
  padding-top:38px;
  height:calc(var(--ribbon-height) + 38px);
  overflow:visible;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}
.home-ribbon-track{
  display:flex;
  align-items:flex-end;
  gap:var(--ribbon-gap);
  width:max-content;
  height:var(--ribbon-height);
  transform:translate3d(0,0,0);
  will-change:transform;
}
.ribbon-image{
  position:relative;
  display:block;
  flex:none;
  height:calc(var(--ribbon-height) * var(--image-scale,1));
  width:calc(var(--ribbon-height) * var(--image-scale,1) * var(--image-ratio));
  transform-origin:50% 100%;
  transition:transform .85s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color:transparent;
}
.ribbon-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.home-ribbon.is-dragging,.home-ribbon.is-dragging a{cursor:grabbing}
.home-ribbon.is-dragging .ribbon-image{transform:none}
.ribbon-image:focus-visible{
  outline:1px solid #fff;
  outline-offset:6px;
  transform:translateY(-3px) scale(1.065);
  z-index:2;
}
.ribbon-caption{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  color:#f0f0ed;
  font-size:12px;
  line-height:1.2;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .35s ease,transform .5s ease;
  pointer-events:none;
}
.ribbon-image:focus-visible .ribbon-caption{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
  .ribbon-image:hover{transform:translateY(-3px) scale(1.065);z-index:2}
  .ribbon-image:hover .ribbon-caption{opacity:1;transform:none}
}
.ribbon-toggle{
  position:absolute;
  right:calc(var(--pad) - 13px);
  bottom:4px;
  width:44px;
  height:44px;
  padding:12px;
  border:0;
  background:none;
  color:#e7e7e2;
  cursor:pointer;
  opacity:.7;
  transition:opacity .3s;
}
.ribbon-toggle:hover,.ribbon-toggle:focus-visible{opacity:1}
.ribbon-toggle svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.1}
.ribbon-toggle .play-symbol{display:none}
.ribbon-toggle[aria-pressed=true] .pause-symbol{display:none}
.ribbon-toggle[aria-pressed=true] .play-symbol{display:block}
.ribbon-fallback{position:absolute;bottom:var(--pad);left:var(--pad);font-size:16px}
@media(max-width:760px){
  .hero-gradient{--ribbon-height:clamp(137.7px,24.48svh,206.55px);--ribbon-gap:16px;--ribbon-bottom:max(64px,calc(env(safe-area-inset-bottom) + 46px))}
  .ribbon-toggle{bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .home-ribbon{height:calc(var(--ribbon-height) + 76px);padding:18px var(--pad) 40px;overflow-x:auto;overflow-y:hidden}
  .home-ribbon-track{transform:none!important;will-change:auto}
  .ribbon-image{transition:none}
  .ribbon-caption{opacity:1;transform:none;transition:none}
  .ribbon-toggle{display:none}
}

/* Three equally spaced service columns, with the biography kept as two paragraphs. */
.about .manifesto p{margin:0}
.about .manifesto p + p{margin-top:1.4em}
@media(min-width:761px){
  .about{display:flex;align-items:flex-end;min-height:100svh;padding-bottom:clamp(34px,5vh,56px)}
  .about .practice-content{grid-template-rows:auto auto;align-items:end}
  .about .manifesto{grid-column:1 / 5;grid-row:1;align-self:end}
  .about .areas{grid-column:1 / 13;grid-row:2;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:var(--pad);align-items:start;align-self:end;margin-top:clamp(28px,4vh,42px)}
  .about .areas-label,.about .service-group:nth-of-type(n){grid-column:auto;grid-row:1;justify-self:stretch}
  .about .service-group h3,.about .service-group p{line-height:1.3;text-align:right}
}
@media(max-width:760px){
  .about{display:flex;align-items:flex-end;min-height:100svh;padding-bottom:32px}
  .about .manifesto{margin-bottom:40px}
  .about .areas{grid-template-rows:repeat(3,auto);grid-template-columns:1fr 2fr;row-gap:28px;margin-top:0}
}
