/* ==========================================================================
   GrantLedge Partners — Shared Stylesheet
   Institutional dark aesthetic. Brass accent used sparingly.
   Playfair Display (serif headings) + Inter (sans body).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #0a0a0a;
  --bg-surface: #101010;

  /* Text — all three pass WCAG 2.1 AA (4.5:1) against --bg #0a0a0a.
     Ratios: text 15.9:1, muted 5.3:1, dim 4.7:1. The muted/dim values were
     raised from #6f6a62 (3.7:1) and #403b34 (1.5:1), which both failed. */
  --text: #ece7dd;          /* warm off-white */
  --text-muted: #8a847a;    /* secondary copy — most body text */
  --text-dim: #807a70;      /* placeholders, footer fine print, faint marks */

  /* Accent — brass, used sparingly */
  --accent: #c9a452;
  --accent-dim: #8a6e32;

  /* Lines */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Metrics */
  --max-w: 1140px;
  --gutter: 2rem;
  --nav-h: 76px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  animation: page-fade 0.45s var(--ease) both;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   3. Layout Primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Small uppercase label with a trailing brass rule */
.section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}

.section-label::after {
  content: '';
  width: 56px;
  height: 1px;
  background: var(--accent-dim);
}

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  list-style: none;
}

.nav__link {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: var(--text);
}

/* Brass underline wipes in from the left (not on the bordered CTA) */
.nav__link:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav__link:not(.nav__cta):hover::after,
.nav__link:not(.nav__cta).is-active::after {
  transform: scaleX(1);
}

/* Nav CTA — the one outlined element */
.nav__cta {
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 0.55rem 1.25rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__cta:hover {
  background: var(--accent);
  color: var(--bg);
}

/* Hamburger (mobile only).
   The three bars are only 36x25, so the button is padded out to a 44x44 hit
   area — the minimum comfortable touch target. Negative margin keeps the bars
   optically aligned with the logo despite the larger box. */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  margin-right: -6px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 1rem 2.25rem;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Hero (Home)
   -------------------------------------------------------------------------- */
.hero {
  padding: calc(var(--nav-h) + 9rem) 0 9rem;
  border-bottom: 1px solid var(--border);
}

.hero__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 16ch;
  margin-bottom: 2.25rem;
}

.hero__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 54ch;
  margin-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   7. Page Header (interior pages)
   -------------------------------------------------------------------------- */
.page-header {
  padding: calc(var(--nav-h) + 6rem) 0 5rem;
  border-bottom: 1px solid var(--border);
}

.page-header__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 18ch;
}

.page-header__intro {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   8. Testimonials Placeholder (Home)
   -------------------------------------------------------------------------- */
.testimonials {
  padding: 7rem 0;
  border-bottom: 1px solid var(--border);
}

.testimonials__frame {
  border: 1px solid var(--border-strong);
  padding: 5rem 2rem;
  text-align: center;
}

.testimonials__note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */
.service {
  padding: 6rem 0;
  border-bottom: 1px solid var(--border);
}

.service__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.service__index {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.service__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Tight rhythm between stacked paragraphs, a full gap after the last one so it
   still separates cleanly from a following list or the next section. */
.service__body {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 1.15rem;
}

.service__body:last-of-type {
  margin-bottom: 2.5rem;
}

/* Dashed-free custom bullets */
.service__list {
  list-style: none;
}

.service__list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.5rem;
  font-size: 1rem;
  color: var(--text);
  border-top: 1px solid var(--border);
  transition: padding-left 0.3s var(--ease);
}

.service__list li:first-child {
  border-top: none;
}

.service__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 10px;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.service__list li:hover {
  padding-left: 1.85rem;
}

.service__list li:hover::before {
  width: 20px;
}

/* --------------------------------------------------------------------------
   10. Contact Form
   -------------------------------------------------------------------------- */
.contact {
  padding: 6rem 0 7rem;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact-form {
  max-width: 560px;
}

.form-row {
  margin-bottom: 2.5rem;
}

.form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 300;
  padding: 0.65rem 0;
  transition: border-color 0.2s var(--ease);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-dim);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

/* Direct-contact aside */
.contact-aside {
  padding-top: 0.5rem;
}

.contact-aside__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.contact-aside__email {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--accent);
  transition: color 0.2s var(--ease);
  word-break: break-word;
}

.contact-aside__email:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer__logo {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text);
}

.footer__email {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}

.footer__email:hover {
  color: var(--accent);
}

.footer__legal {
  display: flex;
  gap: 1.5rem;
}

.footer__legal a {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}

.footer__legal a:hover {
  color: var(--accent);
}

/* No copyright notice by design — GrantLedge Partners has no formed entity, so
   a "© GrantLedge Partners" line would name something that does not legally
   exist. Protection is automatic without a notice. Revisit if an entity is
   ever registered. */

/* --------------------------------------------------------------------------
   12. Overview "What We Do" (Home)
   -------------------------------------------------------------------------- */
.overview {
  padding: 7rem 0;
  border-bottom: 1px solid var(--border);
}

.overview__lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 30ch;
  margin-bottom: 4.5rem;
}

.overview__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.overview__item-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 1rem;
}

.overview__item-text {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

.overview__link {
  position: relative;
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s var(--ease);
}

.overview__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.overview__link:hover {
  color: var(--text);
}

.overview__link:hover::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   13. Closing CTA Band (Home)
   -------------------------------------------------------------------------- */
.cta-band {
  padding: 8rem 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.cta-band__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.cta-band__sub {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 2.75rem;
}

/* --------------------------------------------------------------------------
   14. Statement — mission / "why pro bono"
   -------------------------------------------------------------------------- */
.statement {
  padding: 8rem 0;
  border-bottom: 1px solid var(--border);
}

.statement__text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 800px;
}

.statement__text .accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   15. Deliverables — "what you walk away with"
   -------------------------------------------------------------------------- */
.deliverables {
  padding: 7rem 0;
  border-bottom: 1px solid var(--border);
}

.deliverables__lead {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 3.5rem;
}

.deliverables__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
}

.deliverables__item {
  position: relative;
  padding: 1.5rem 0 1.5rem 1.85rem;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--text);
  transition: padding-left 0.3s var(--ease);
}

.deliverables__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2.2rem;
  width: 12px;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.deliverables__item:hover {
  padding-left: 2.2rem;
}

.deliverables__item:hover::before {
  width: 22px;
}

/* --------------------------------------------------------------------------
   16. Fit list — self-selection (Contact)
   -------------------------------------------------------------------------- */
.fit {
  margin-top: 3.5rem;
}

.fit__label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.fit__list {
  list-style: none;
}

.fit__list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.5rem;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  border-top: 1px solid var(--border);
  transition: padding-left 0.3s var(--ease);
}

.fit__list li:first-child {
  border-top: none;
}

.fit__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 10px;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.fit__list li:hover {
  padding-left: 1.85rem;
}

.fit__list li:hover::before {
  width: 20px;
}

/* Inline links inside body copy — brass with a dim rule, matching the legal
   pages. Body text otherwise has no links, so this stays rare by design. */
.overview__item-text a,
.service__body a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.2s var(--ease);
}

.overview__item-text a:hover,
.service__body a:hover {
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   17. Legal pages — long-form prose (privacy.html, terms.html)
   Deliberately plainer than the marketing pages: narrower measure, tighter
   rhythm, no reveal animation. These are meant to be read, not skimmed.
   -------------------------------------------------------------------------- */
.legal {
  padding: 4rem 0 7rem;
}

.legal__updated {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 3.5rem;
}

.legal h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--text);
  margin: 3rem 0 1rem;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 68ch;
}

.legal p + p {
  margin-top: 1rem;
}

.legal ul {
  list-style: none;
  margin: 1rem 0 0;
}

.legal li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}

.legal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 10px;
  height: 1px;
  background: var(--accent-dim);
}

.legal a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
}

.legal a:hover {
  border-bottom-color: var(--accent);
}

/* Conspicuous clauses (warranty disclaimer, liability cap).
   Many states require these to stand out from surrounding text to be
   enforceable, hence the uppercase in the markup. Brighter than body copy and
   slightly looser to stay legible — do not tone this down to match the prose. */
.legal__caps {
  font-size: 0.9rem;
  line-height: 1.85;
  letter-spacing: 0.015em;
  color: var(--text);
}

/* Standing caveat block — visually distinct from the body copy */
.legal__note {
  border-left: 2px solid var(--accent-dim);
  padding: 1.25rem 0 1.25rem 1.5rem;
  margin: 2.5rem 0;
  background: var(--bg-surface);
}

.legal__note p {
  color: var(--text);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .service__grid,
  .contact__grid,
  .overview__cols,
  .deliverables__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact-aside {
    border-top: 1px solid var(--border);
    padding-top: 2.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter: 1.5rem;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__links {
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }

  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__link {
    width: 100%;
    padding: 0.9rem 0;
    font-size: 0.85rem;
  }

  .nav__cta {
    margin-top: 0.75rem;
    border: none;
    padding: 0.9rem 0;
    color: var(--accent);
  }

  .nav__cta:hover {
    background: transparent;
    color: var(--text);
  }

  /* Underline wipe reads as a heavy divider in the stacked menu — drop it */
  .nav__link:not(.nav__cta)::after {
    display: none;
  }

  .hero {
    padding: calc(var(--nav-h) + 5rem) 0 5rem;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* --------------------------------------------------------------------------
   20. Micro-interactions — entrance, scroll reveal, rule draw
   Reveal classes (.reveal-rise, .js-rule) are applied by script.js and are
   never added under prefers-reduced-motion, so content stays fully visible
   without JS or for users who opt out of motion.
   -------------------------------------------------------------------------- */
@keyframes page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Load entrance — hero (home) and page headers (interior pages) */
.hero__headline     { animation: rise-in 0.85s var(--ease) 0.05s both; }
.hero__sub          { animation: rise-in 0.85s var(--ease) 0.18s both; }
.hero .btn          { animation: rise-in 0.85s var(--ease) 0.31s both; }
.page-header__title { animation: rise-in 0.85s var(--ease) 0.05s both; }
.page-header__intro { animation: rise-in 0.85s var(--ease) 0.18s both; }

/* Scroll reveal — fade + rise as blocks enter the viewport */
.reveal-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-rise.is-visible {
  opacity: 1;
  transform: none;
}

/* Deliverables rows are also hover targets — keep padding animating while
   reveal governs opacity/transform */
.deliverables__item.reveal-rise {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              padding-left 0.3s var(--ease);
}

/* Section-label brass rule draws out from zero on reveal */
.section-label.js-rule::after {
  width: 0;
  transition: width 0.85s var(--ease);
}

.section-label.js-rule.is-visible::after {
  width: 56px;
}