/* Hudson Row Advisors -- shared site chrome: header, mobile menu, footer, buttons, skip link.
 *
 * Every page links this after brand-tokens.css, so the header and footer look the same everywhere
 * without copying their CSS into each page. Classes are prefixed (sh- header, sf- footer, hb- button)
 * so they never collide with a page's own inline styles.
 *
 * The header follows the reference: white, the crest and wordmark centred, a quiet nav split
 * either side of it. Below 1000px the nav folds into a menu button.
 */

/* The header is not sticky (the reference keeps it in the page), so in-page targets need no offset. */
html{scroll-padding-top:0}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(45,61,48,.12)}

/* ---- buttons ---------------------------------------------------------------- */
/* Square, solid, small tracked capitals: the reference's "REQUEST PROPOSAL". */
.hb{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--hr-font-text);font-size:.72rem;font-weight:600;line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.95rem 1.9rem;border-radius:var(--hr-radius);border:1px solid transparent;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .25s var(--hr-ease),color .25s var(--hr-ease),border-color .25s var(--hr-ease);
}
.hb:active{transform:translateY(1px)}
/* slate green with white text (11.5:1): the primary on light grounds */
.hb-ink{background:var(--hr-ink);color:var(--hr-white)}
.hb-ink:hover{background:var(--hr-ink-deep)}
/* a white hairline button for photographs */
.hb-line-light{background:transparent;color:var(--hr-white);border-color:rgba(255,255,255,.62)}
.hb-line-light:hover{background:var(--hr-white);color:var(--hr-ink);border-color:var(--hr-white)}

/* ---- header ----------------------------------------------------------------- */
/* As in the reference: white, the crest and one-line wordmark centred at the same proportions.
   The nav is split either side of the lockup; below 1120px it folds into a menu button. */
.sh{
  position:relative;z-index:100;
  background:var(--hr-white);border-bottom:1px solid var(--hr-line);
  font-family:var(--hr-font-text);
}
.sh-in{
  position:relative;max-width:1440px;margin:0 auto;height:132px;
  padding:0 clamp(1rem,4vw,3rem);
  display:flex;align-items:center;justify-content:center;
}
.sh-logo{position:relative;z-index:2;display:flex;align-items:center;flex:none}
.sh-logo img{height:76px;width:auto;display:block}
/* the nav spans the bar; its two groups sit either side of a gap the width of the lockup */
.sh-nav{
  position:absolute;inset:0;padding:0 clamp(1rem,3vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) 370px minmax(0,1fr);align-items:center;
  pointer-events:none;
}
.sh-group{display:flex;align-items:center;gap:.3rem;pointer-events:auto}
.sh-l{grid-column:1;justify-self:end}
.sh-r{grid-column:3;justify-self:start}
.sh-nav a:not(.hb){
  position:relative;padding:.7rem .8rem;
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hr-charcoal);text-decoration:none;white-space:nowrap;
  transition:color .2s var(--hr-ease);
}
.sh-nav a:not(.hb)::after{
  content:'';position:absolute;left:.8rem;right:calc(.8rem + .2em);bottom:.35rem;height:1px;background:var(--hr-ink);
  transform:scaleX(0);transition:transform .35s var(--hr-ease);
}
.sh-nav a:not(.hb):hover,.sh-nav a[aria-current]{color:var(--hr-ink)}
.sh-nav a:not(.hb):hover::after,.sh-nav a[aria-current]::after{transform:scaleX(1)}
.sh-nav .hb{margin-left:.8rem;padding:.85rem 1.3rem;font-size:.7rem}
.sh-toggle{
  display:none;position:absolute;right:clamp(.4rem,3vw,2.5rem);top:50%;transform:translateY(-50%);
  width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--hr-ink);
  align-items:center;justify-content:center;
}
.sh-toggle span{position:relative;display:block;width:22px;height:1px;background:currentColor;transition:background-color .2s}
.sh-toggle span::before,.sh-toggle span::after{
  content:'';position:absolute;left:0;width:22px;height:1px;background:currentColor;
  transition:transform .3s var(--hr-ease);
}
.sh-toggle span::before{transform:translateY(-6px)}
.sh-toggle span::after{transform:translateY(6px)}
.sh-toggle[aria-expanded="true"] span{background:transparent}
.sh-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.sh-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}
.sh a:focus-visible,.sh button:focus-visible{outline:2px solid var(--hr-ink);outline-offset:2px}

@media (max-width:1120px){
  .sh-in{height:96px}
  .sh-logo img{height:58px}
  .sh-toggle{display:inline-flex}
  .sh-nav{
    display:none;position:absolute;inset:auto 0 auto 0;top:100%;
    flex-direction:column;align-items:stretch;
    padding:.5rem clamp(1rem,4vw,3rem) 1.75rem;
    background:var(--hr-white);border-bottom:1px solid var(--hr-line);
    box-shadow:0 18px 30px -24px rgba(31,43,34,.35);
    pointer-events:auto;
  }
  .sh-nav.open{display:flex}
  .sh-group{flex-direction:column;align-items:stretch;gap:0}
  .sh-nav a:not(.hb){padding:1.05rem 0;text-align:center;font-size:.78rem;border-bottom:1px solid var(--hr-line)}
  .sh-nav a:not(.hb)::after{display:none}
  .sh-nav .hb{margin:1.5rem 0 0;padding:1.05rem 1.2rem;font-size:.76rem}
}
@media (max-width:480px){
  .sh-in{height:84px}
  .sh-logo img{height:52px}
}

/* ---- footer ----------------------------------------------------------------- */
/* Quiet and white, as in the reference: the lockup, the line, the links, the copyright in small grey type. */
.sf{
  background:var(--hr-white);color:var(--hr-body);border-top:1px solid var(--hr-line);
  font-family:var(--hr-font-text);text-align:center;
  padding:clamp(3.5rem,7vw,5rem) 0 2rem;
}
.sf-in{max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.sf-brand img{height:64px;width:auto;display:block;margin:0 auto}
.sf-brand p{margin:1.3rem auto 0;max-width:40ch;font-size:.98rem;line-height:1.65;color:var(--hr-body)}
.sf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 2.25rem;margin-top:2.25rem}
.sf-links a{
  padding:.4rem 0;font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hr-charcoal);text-decoration:none;transition:color .2s var(--hr-ease);
}
.sf-links a:hover{color:var(--hr-ink)}
.sf-cta{display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin-top:2.25rem}
.sf-cta a.sf-mail{color:var(--hr-body);font-size:.95rem;text-decoration:none;overflow-wrap:anywhere;border-bottom:1px solid var(--hr-line-2);padding-bottom:2px}
.sf-cta a.sf-mail:hover{color:var(--hr-ink);border-bottom-color:var(--hr-ink)}
.sf-legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hr-line)}
.sf-legal p{font-size:.82rem;line-height:1.7;color:var(--hr-muted)}
.sf a:focus-visible{outline:2px solid var(--hr-ink);outline-offset:3px}

/* ---- skip link -------------------------------------------------------------- */
.skip{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--hr-ink);color:var(--hr-white);padding:.75rem 1.1rem;
  font-family:var(--hr-font-text);font-weight:600;text-decoration:none;
}
.skip:focus{top:.75rem}

@media (prefers-reduced-motion:reduce){
  .hb,.sh-nav a::after,.sh-toggle span::before,.sh-toggle span::after{transition:none}
}