/* Brand system — institutional identity + service sub-brand.
   Isolated on purpose: it must not change page layout, typography or palette. */
.brand.brand--logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  max-width:100%;
  font:inherit;
  letter-spacing:normal;
  line-height:0;
}
.brand.brand--logo img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.brand--header{width:clamp(172px,15vw,214px)}
.brand--footer{width:clamp(190px,18vw,246px)}

.brand--orientation.brand--header{width:clamp(184px,16vw,232px)}
.brand--orientation.brand--footer{width:clamp(204px,18vw,264px)}

.orientation-service-brand{
  width:min(288px,52vw);
  margin:0 0 20px;
  line-height:0;
}
.orientation-service-brand img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:1100px){
  .brand--header{width:178px}
  .brand--orientation.brand--header{width:194px}
}
@media(max-width:640px){
  .brand--header{width:154px}
  .brand--footer{width:196px}
  .brand--orientation.brand--header{width:168px}
  .brand--orientation.brand--footer{width:214px}
  .orientation-service-brand{width:min(238px,68vw);margin-bottom:16px}
}
@media(max-width:360px){
  .brand--header{width:142px}
  .brand--orientation.brand--header{width:156px}
}

/* orientation.css uses display:contents in the mobile hero; preserve the gutter/order there. */
@media(max-width:640px){
  .hero-copy>.orientation-service-brand{order:0;margin:26px var(--gutter) 0;width:min(238px,68vw)}
  .hero-copy>.orientation-service-brand+.kicker{margin-top:18px}
}

/* Keyboard focus is intentionally visible across the whole site. */
.daniel-v2 a:focus-visible,
.daniel-v2 button:focus-visible{
  outline:3px solid var(--sage,#a7be8f);
  outline-offset:4px;
}