/* ==========================================================================
   Claron Studio — header + call-to-action pills
   Separate file so header changes don't wait on Cloudflare's cache of style.css.
   If you edit this later and the live site looks stale, rename it (header-4.css)
   and update the <link> on each page. (header-3: sprout grows with the bars, Nov 2026)
   ========================================================================== */

:root {
  --hd-h: 84px;
  --hd-wash: #E6ECE0;          /* same sage block as the home intro */
  --hd-ease: cubic-bezier(.11,.82,.39,.92);
}

[id] { scroll-margin-top: calc(var(--hd-h) + 16px); }

/* ---------------------------------------------------------------- header -- */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,245,240,.86);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.hd.is-scrolled {
  background: rgba(246,245,240,.94);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -26px rgba(44,58,41,.6);
}
.hd__inner {
  max-width: 1240px; margin-inline: auto; padding-inline: 28px;
  height: var(--hd-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
}
.hd__side { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hd__side--l { justify-content: space-between; }
.hd__side--r { justify-content: space-between; }
.hd__group { display: flex; align-items: center; gap: 4px; }
.hd__side--l .hd__group { margin-left: auto; }
.hd__side--r .hd__group { margin-right: auto; }

/* links: lowercase serif, a soft sage pill on hover, a tiny sparkline under the current page */
.hd__link {
  position: relative; display: inline-flex; align-items: center;
  padding: 7px 14px 8px; border-radius: 12px;
  font-family: var(--display); font-variation-settings: "opsz" 28;
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.005em; line-height: 1.2;
  color: var(--forest-deep); text-decoration: none; text-transform: lowercase;
}
.hd__link::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--hd-wash); transform: scale(.7); opacity: 0;
  transition: transform .45s var(--hd-ease), opacity .25s ease;
}
.hd__link > span { position: relative; display: inline-block; transition: transform .45s var(--hd-ease); }
.hd__link:hover::before, .hd__link:focus-visible::before { transform: none; opacity: 1; }
.hd__link:hover > span { transform: translateY(-1px); }
.hd__link:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.hd__spark {
  position: absolute; left: 14px; right: 14px; bottom: 1px; height: 7px; width: calc(100% - 28px);
  overflow: visible; opacity: 0;
}
.hd__spark path {
  fill: none; stroke: var(--sage); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
}
.hd__link[aria-current="page"] .hd__spark { opacity: 1; }
.hd__link[aria-current="page"] .hd__spark path { animation: hdDraw .9s .35s var(--hd-ease) forwards; }
@keyframes hdDraw { to { stroke-dashoffset: 0; } }

/* center logo: the bars grow in on load and again on hover, like a live chart */
.hd__logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.hd__mark { width: 40px; height: auto; display: block; overflow: visible; }
.hd__bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: hdGrow .8s var(--hd-ease) both;
}
.hd__bar:nth-child(1) { animation-delay: .10s; }
.hd__bar:nth-child(2) { animation-delay: .18s; }
.hd__bar:nth-child(3) { animation-delay: .26s; }
.hd__bar:nth-child(4) { animation-delay: .34s; }
.hd__logo:hover .hd__bar, .hd__logo:focus-visible .hd__bar { animation-name: hdRegrow; }
@keyframes hdGrow { from { transform: scaleY(.08); } to { transform: none; } }
@keyframes hdRegrow { 0% { transform: scaleY(.08); } 100% { transform: none; } }
.hd__word {
  font-family: var(--display); font-variation-settings: "opsz" 28;
  font-size: 1.3125rem; font-weight: 600; letter-spacing: -.015em; line-height: 1; white-space: nowrap;
}
.hd__word em { font-style: normal; font-weight: 500; color: var(--sage); }

.hd__social { color: var(--forest); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; transition: background-color .25s ease; }
.hd__social:hover { background: var(--hd-wash); }

.hd__toggle {
  display: none; justify-self: end; width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: transparent; color: var(--forest-deep); cursor: pointer; place-items: center;
}
.hd__toggle:hover { background: var(--hd-wash); }
.hd__toggle .i-close { display: none; }
.hd__menu-only { display: none; }

/* ------------------------------------------------- "Get in touch" pill -- */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 18px; border-radius: 999px;
  border: 1px solid rgba(62,79,58,.28); background: transparent;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; line-height: 1.2;
  color: var(--forest-deep); text-decoration: none; white-space: nowrap;
  transition: background-color .35s var(--hd-ease), color .35s ease, border-color .35s ease;
}
.pill__dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--forest); color: #fff;
  transition: background-color .35s ease, color .35s ease, transform .45s var(--hd-ease);
}
.pill__dot svg { transition: transform .45s var(--hd-ease); }
.pill:hover, .pill:focus-visible { background: var(--forest); border-color: var(--forest); color: #fff; outline: none; }
.pill:hover .pill__dot, .pill:focus-visible .pill__dot { background: var(--cream); color: var(--forest); }
.pill:hover .pill__dot svg, .pill:focus-visible .pill__dot svg { transform: rotate(45deg); }
.pill:focus-visible { box-shadow: 0 0 0 3px var(--hd-wash); }

/* the bigger, filled version used in page bodies */
.pill--lg { padding: 7px 7px 7px 24px; font-size: 1rem; gap: 14px; background: var(--forest); border-color: var(--forest); color: #fff; }
.pill--lg .pill__dot { width: 38px; height: 38px; background: var(--cream); color: var(--forest); }
.pill--lg:hover, .pill--lg:focus-visible { background: var(--forest-deep); border-color: var(--forest-deep); }
.pill--lg:hover .pill__dot, .pill--lg:focus-visible .pill__dot { background: #fff; }

/* quiet text link that sits next to a pill */
.lnk {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px;
  font-size: .9375rem; font-weight: 500; color: var(--forest-deep); text-decoration: none;
}
.lnk::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1.5px;
  background: var(--sage-light); transform-origin: left; transition: transform .45s var(--hd-ease), background-color .3s;
}
.lnk:hover::after { background: var(--forest); transform: scaleX(1.04); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1060px) {
  .hd__link { padding-inline: 10px; font-size: 1.0625rem; }
  .hd__spark { left: 10px; right: 10px; width: calc(100% - 20px); }
  .hd__social { display: none; }
}
@media (max-width: 900px) {
  :root { --hd-h: 70px; }
  .hd__inner { grid-template-columns: 42px 1fr 42px; gap: 8px; padding-inline: 20px; position: relative; }
  .hd__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .hd__toggle { display: grid; grid-column: 3; grid-row: 1; }
  .hd__side { display: none; }
  .hd__mark { width: 34px; }
  .hd__word { font-size: 1.1875rem; }

  .hd__inner.is-open { height: auto; min-height: var(--hd-h); padding-bottom: 28px; row-gap: 6px; }
  .hd__inner.is-open .hd__toggle .i-open { display: none; }
  .hd__inner.is-open .hd__toggle .i-close { display: block; }
  .hd__inner.is-open .hd__logo { align-self: center; height: var(--hd-h); }
  .hd__inner.is-open .hd__side { display: flex; grid-column: 1 / -1; flex-direction: column; align-items: center; gap: 2px; }
  .hd__inner.is-open .hd__group { flex-direction: column; margin: 0; gap: 2px; }
  .hd__inner.is-open .hd__link { font-size: 1.5rem; padding: 8px 18px; }
  .hd__inner.is-open .hd__side--r { gap: 18px; }
  .hd__inner.is-open .hd__social { display: none; }
  .hd__inner.is-open .hd__spark { left: 18px; right: 18px; width: calc(100% - 36px); }
}

/* on the dark green call-to-action band */
.cta .pill--lg { background: var(--cream); border-color: var(--cream); color: var(--forest-deep); }
.cta .pill--lg .pill__dot { background: var(--forest); color: #fff; }
.cta .pill--lg:hover, .cta .pill--lg:focus-visible { background: #fff; border-color: #fff; color: var(--forest-deep); }
.cta .pill--lg:hover .pill__dot { background: var(--sage); }
.cta .lnk { color: #fff; }
.cta .lnk::after { background: rgba(255,255,255,.35); }
.cta .lnk:hover::after { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hd__bar, .hd__link[aria-current="page"] .hd__spark path { animation: none; stroke-dashoffset: 0; }
}

/* ------------------------------------------------ Label Line logo (Nov 2026) -- */
.hd__lockup { display: block; height: 60px; width: auto; overflow: visible; }
.footer__brand img.footer__logo { height: 58px; width: auto; }
@media (max-width: 900px) {
  .hd__lockup { height: 50px; }
}

/* ---------------- the sprout rides up with the tallest bar, then its leaves open (Nov 2026) -- */
.hd__sprout { animation: hdSprout .8s var(--hd-ease) .26s both; }
.hd__leaf { transform-box: fill-box; animation: hdLeaf .55s var(--hd-ease) .95s both; }
.hd__leaf--r { transform-origin: 0% 100%; }
.hd__leaf--l { transform-origin: 100% 60%; animation-delay: 1.02s; }
.hd__logo:hover .hd__sprout, .hd__logo:focus-visible .hd__sprout { animation-name: hdSproutRe; }
.hd__logo:hover .hd__leaf, .hd__logo:focus-visible .hd__leaf { animation-name: hdLeafRe; }
@keyframes hdSprout { from { transform: translateY(35.9px); } to { transform: none; } }
@keyframes hdSproutRe { from { transform: translateY(35.9px); } to { transform: none; } }
@keyframes hdLeaf { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
@keyframes hdLeafRe { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd__sprout, .hd__leaf { animation: none; } }