/* ==========================================================================
   Sepideh Abedi — Research & Credential Profile, v1

   Palette measured from the researcher's own material: the deep green recurs
   on 8 of the 12 slides in her PRDS deck, and the signal green is lifted from
   her dashboard. Every text/background pair below is verified at WCAG AA
   (>= 4.5:1) by tools/check-contrast.py — do not change a value without
   re-running it.

   There is no ornament here, deliberately. Three separate motifs were tried
   above the section headings and all three were cut: at that size a mark is
   either illegible or it is decoration, and this page is read by immigration
   and academic assessors who are looking for evidence, not styling. The gold
   eyebrow label carries the structure on its own.
   ========================================================================== */

:root {
  --canopy:      #0F3D2B;
  --canopy-deep: #092518;

  --paper:       #FAF7F0;
  --paper-dim:   #F1EDE2;
  --line:        #DFD8C8;
  --line-dark:   rgba(250,247,240,0.16);

  --leaf:        #1B6B45;
  --signal:      #3AC05D;   /* on canopy only */

  --gold:        #7D6011;   /* text-safe on paper */
  --gold-lite:   #E3B341;   /* on canopy only */

  --ink:         #16261D;
  --ink-dim:     #46584D;
  --ink-faint:   #5C6D62;
  --on-dark:       rgba(250,247,240,0.94);
  --on-dark-dim:   rgba(250,247,240,0.72);
  --on-dark-faint: rgba(250,247,240,0.55);

  --font-display: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", -apple-system, "Segoe UI", sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 3.5rem;
  --space-6: 5rem;

  --radius: 3px;
  --max: 1140px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing. The width/height attributes on every <img>
   reserve layout space, but the height attribute also lands as a presentational
   hint — and a definite width *and* height makes the browser ignore any
   aspect-ratio we set. Without this the hero portrait renders at full height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--canopy);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.18;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--signal); color: var(--canopy-deep); }

:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.band-dark :focus-visible,
.contact-section :focus-visible { outline-color: var(--signal); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (max-width: 720px) { .container { padding: 0 var(--space-3); } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--canopy);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,247,240,0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 220ms ease, background 220ms ease;
}
/* Added by script.js once the page has moved under the bar. */
.site-nav.scrolled {
  background: rgba(250,247,240,0.97);
  box-shadow: 0 1px 12px rgba(22, 38, 29, 0.09);
}
.site-nav .container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--canopy);
  margin-right: auto;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 44px;
}
.nav-mark img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.nav-links a {
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  padding: 0.72rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color 160ms, border-color 160ms;
}
.nav-links a:hover { color: var(--leaf); border-bottom-color: var(--leaf); }

.nav-cta {
  font-size: 0.83rem;
  font-weight: 700;
  padding: 0.72rem 1.05rem;
  background: var(--canopy);
  color: var(--paper);
  border-radius: var(--radius);
  transition: background 160ms;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--leaf); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 21px;
  margin: 0 auto;
  background: var(--canopy);
  transition: transform 200ms, opacity 200ms;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 0.85rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
}
.mobile-menu a:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .nav-links, .desktop-only { display: none; }
  .nav-toggle { display: flex; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

section { padding: var(--space-6) 0; }
@media (max-width: 720px) { section { padding: var(--space-5) 0; } }

.section-alt { background: var(--paper-dim); }
.band-dark { background: var(--canopy); color: var(--on-dark); }
.band-dark h2, .band-dark h3 { color: var(--paper); }

/* A short rule sits on the eyebrow's own baseline and opens each section.
   Deliberately an inline-block pseudo-element rather than a flex child: the
   eyebrow sits inside grid and card contexts, and a flex row here would raise
   the minimum intrinsic width of its container and push cards out of shape on
   narrow screens. currentColor lets the same rule work on paper and on the
   dark band without a second declaration. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.7rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1.5px;
  margin-right: 0.75rem;
  vertical-align: 0.25em;
  background: currentColor;
}
.band-dark .eyebrow,
.hero .eyebrow,
.contact-section .eyebrow { color: var(--gold-lite); }

.section-head { max-width: 660px; margin-bottom: var(--space-4); }
.section-head h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
/* :not(.eyebrow) on every descendant `p` rule that could otherwise win.
   `.section-head p` is 0-1-1 and `.eyebrow` is 0-1-0, so without the guard the
   body colour silently overrides the gold on every section label. */
.section-head p:not(.eyebrow) {
  color: var(--ink-dim);
  margin-top: var(--space-2);
  font-size: 1.02rem;
}
.band-dark .section-head p:not(.eyebrow) { color: var(--on-dark-dim); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--canopy-deep);
  color: var(--on-dark);
  padding: var(--space-6) 0;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-5);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  color: var(--paper);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.hero-role {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--signal);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}
.hero-lede {
  font-size: 1.06rem;
  color: var(--on-dark-dim);
  max-width: 52ch;
  margin-bottom: var(--space-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.btn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.btn-primary { background: var(--signal); color: var(--canopy-deep); }
.btn-primary:hover { background: var(--paper); }
.btn-ghost { border: 1.5px solid var(--line-dark); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }

.hero-portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-dark);
}
.hero-portrait img { width: 100%; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-portrait { max-width: 320px; }
}

/* ==========================================================================
   Facts strip
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border-top: 1px solid var(--line-dark);
  margin-top: var(--space-5);
}
.fact { background: var(--canopy-deep); padding: var(--space-3) var(--space-2) var(--space-2); min-width: 0; }
.fact dt {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 0.35rem;
}
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--paper);
  line-height: 1.3;
}

/* ==========================================================================
   Prose
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.about-body p:not(.eyebrow) { color: var(--ink-dim); }
.about-body p:not(.eyebrow):first-of-type {
  font-size: 1.13rem;
  color: var(--ink);
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.focus-list { list-style: none; margin: 0; padding: 0; }
.focus-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: baseline;
  min-width: 0;
}
.focus-list li:last-child { border-bottom: 0; }
.focus-list .fl-key {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.focus-list .fl-val { color: var(--ink-dim); min-width: 0; }

/* ==========================================================================
   Cards
   ========================================================================== */

.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-width: 0;
  position: relative;
}
.section-alt .card { background: #FFFDF8; }
.band-dark .card {
  background: rgba(250,247,240,0.05);
  border-color: var(--line-dark);
}
.card h3 { font-size: 1.16rem; margin-bottom: 0.5rem; }
.card p:not(.eyebrow) { color: var(--ink-dim); font-size: 0.95rem; }
.band-dark .card p:not(.eyebrow) { color: var(--on-dark-dim); }

/* --------------------------------------------------------------------------
   Credential cards

   Every card in the recognition grid opens with a document at the same 16:11
   ratio, so the status chip, the heading and the meta rows start at the same
   height across the row. The card that has no document yet still gets the slot,
   filled with a placeholder — dropping it would pull that card's text upward
   and break the alignment of the whole row.

   The card is a flex column so a verify link at the end of a short card still
   sits at the bottom rather than floating mid-card.
   -------------------------------------------------------------------------- */

.card-credential {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.card-credential > .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
  padding-left: calc(var(--space-3) + 7px);
}
.card-credential .verify { margin-top: auto; padding-top: var(--space-2); }

.doc {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
button.doc { cursor: zoom-in; }
.doc img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.doc-cue {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0.35rem 0.6rem;
  border-radius: 2px;
  background: var(--canopy-deep);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
  transition: background 160ms;
}
button.doc:hover .doc-cue,
button.doc:focus-visible .doc-cue { background: var(--leaf); opacity: 1; }

/* The slot for a credential whose document has not arrived. It is visibly not
   a document, which is the point: the gap is stated rather than papered over. */
.doc-awaiting {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg, var(--paper-dim), var(--paper-dim) 10px,
    #EAE5D7 10px, #EAE5D7 20px);
}
.doc-awaiting-text {
  padding: 0.45rem 0.8rem;
  border: 1px dashed var(--ink-faint);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.band-dark .card h3 { color: var(--paper); }

/* The green edge rule marks a credential card. It is drawn on .card-body, not
   on the card, so it starts below the document image instead of running up the
   side of it. The padding that clears it lives with the rule, above. */
.card-credential > .card-body::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--leaf);
}
.card-credential > .card-body { position: relative; }
.band-dark .card-credential > .card-body::before { background: var(--signal); }

.meta-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.meta-list li {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: var(--space-2);
  padding: 0.4rem 0;
  font-size: 0.87rem;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.band-dark .meta-list li { border-top-color: var(--line-dark); }
.meta-list .m-key {
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.band-dark .meta-list .m-key { color: var(--on-dark-faint); }
.meta-list .m-val { color: var(--ink); word-break: break-word; min-width: 0; }
.band-dark .meta-list .m-val { color: var(--on-dark); }
@media (max-width: 520px) {
  .meta-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}

.status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  background: var(--paper-dim);
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.status-filed { background: rgba(27,107,69,0.09); color: var(--leaf); border-color: rgba(27,107,69,0.28); }
.status-pending { background: rgba(125,96,17,0.09); color: var(--gold); border-color: rgba(125,96,17,0.28); }
.band-dark .status { background: rgba(250,247,240,0.09); color: var(--on-dark-dim); border-color: var(--line-dark); }

/* min-height 44px is a touch-target requirement, not a look. The underline is
   drawn on an inner span so the rule hugs the text while the hit area stays
   full height. */
.verify {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-1);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--leaf);
  min-height: 44px;
}
.verify > span {
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.band-dark .verify { color: var(--signal); }
.verify:hover { opacity: 0.75; }

.band-dark .band-dark .note { color: var(--on-dark-faint); border-left-color: var(--line-dark); }

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.timeline > li:first-child { border-top: 0; padding-top: 0; }
.tl-when {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
  padding-top: 0.2rem;
}
.tl-what { min-width: 0; }
.tl-what h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.tl-where {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.tl-what ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.tl-what li { color: var(--ink-dim); font-size: 0.93rem; margin-bottom: 0.3rem; }
@media (max-width: 620px) {
  .timeline > li { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ==========================================================================
   Figure block
   ========================================================================== */

.figure-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
}
.figure-row figure { margin: 0; min-width: 0; }
.figure-row img {
  width: 100%;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line-dark);
}
.figure-row figcaption {
  font-size: 0.82rem;
  color: var(--on-dark-faint);
  margin-top: var(--space-2);
}
@media (max-width: 820px) { .figure-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Shared document overlay

   One <dialog> serves every credential and the dashboard. showModal() puts it
   in the top layer, dims the page with ::backdrop, and restores focus to the
   trigger on close.
   -------------------------------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(1100px, 94vw);
  max-height: 92vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(9, 37, 24, 0.88); }
.lightbox img {
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #fff;
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--canopy-deep);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--signal); }
@media (max-width: 620px) {
  .lightbox-close { top: 6px; right: 6px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-section { background: var(--canopy-deep); color: var(--on-dark); }
.contact-section h2 { color: var(--paper); font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: start;
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-dark);
  min-width: 0;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .c-key {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 0.25rem;
}
.contact-list a,
.contact-list .c-val {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.98rem;
  word-break: break-word;
}
.contact-list a { color: var(--signal); }
.contact-list .c-val { color: var(--on-dark); }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.site-footer {
  background: var(--canopy-deep);
  color: var(--on-dark-faint);
  border-top: 1px solid var(--line-dark);
  padding: var(--space-4) 0;
  font-size: 0.83rem;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
}

/* ==========================================================================
   Reveal on scroll
   The hidden state is applied by JS (html.js-reveal), never by CSS alone.
   If the script never runs, or the observer never fires, everything is
   visible by default rather than a page of invisible elements.
   ========================================================================== */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.js-reveal .reveal.shown {
  opacity: 1;
  transform: none;
  /* Decelerating curve: the element arrives quickly and settles, rather than
     easing symmetrically in and out, which reads as sluggish on a long page. */
  transition: opacity 560ms cubic-bezier(0.16, 0.8, 0.3, 1),
              transform 560ms cubic-bezier(0.16, 0.8, 0.3, 1);
}

/* The gold rule draws itself out as its section arrives. It is the one piece
   of motion tied to the design system rather than to the layout, which is why
   it is worth the extra rule. */
/* The transition belongs on the shown state, not the hidden one. Declared the
   other way round, applying .reveal animates the rule from 30px down to 0 —
   the reader watches it retract before it draws. */
.js-reveal .reveal .eyebrow::before { width: 0; }
.js-reveal .reveal.shown .eyebrow::before {
  width: 30px;
  transition: width 620ms cubic-bezier(0.16, 0.8, 0.3, 1) 140ms;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal .eyebrow::before { width: 30px; transition: none; }
}