/* ============================================================
   ALTIDA — Projects hub (page-specific)
   ------------------------------------------------------------
   Loads AFTER tokens.css + components.css + homepage.css.
   homepage.css supplies the shared chrome (util bar, nav, drawer,
   footer, .v3-eyebrow, .v3-btn, .v3-container, WhatsApp float,
   reveal primitives). This file only carries the projects-hub
   sections: dark banner, filter bar, work grid + cards, CTA band.

   Brand-system discipline (claude_design/Altida Design System):
   Lovelo display ≥32px · Inter caps for structural <32px · Aller
   body · yellow flat-fill accent ≤~10% ink · square corners ·
   --ease-mech motion · two corner-slashes max · real Altida imagery.

   Distinct from the homepage: the homepage Recent-Work device is a
   dark scroll-pinned cinematic spotlight. The hub is a browsable
   index — light editorial image-top cards on white, with a category
   filter (FLIP reflow) as the signature interaction.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. BANNER — dark page header. Nav overlays it (transparent at
   top, solid on scroll via homepage.js no-#hero fallback), so the
   top region must stay dark. Mirrors the hero's -86px tuck so the
   dark ground runs flush under the util bar + behind the nav.
   ──────────────────────────────────────────────────────────── */
.prj-hero {
  position: relative;
  margin-top: -86px;                 /* tuck under the absolute nav, like .v3-hero */
  /* Top clears the absolute nav (~106px) + gives the title homepage-equivalent
     breathing (nav-bottom → title ≈ 160px, matching the homepage hero). Bottom
     gives the description real dark breathing below it: the homepage hero is
     full-height and leaves ~300px under its sub; this banner can't match that,
     but 45px read far too tight, so it now carries a generous bottom. The work
     section trims its own top to keep the dark-hero→white-work boundary sensible. */
  padding: clamp(264px, 30vh, 344px) 0 clamp(96px, 13vh, 140px);
  background: var(--altida-pure-black);
  color: var(--altida-white);
  overflow: hidden;
  isolation: isolate;
}
/* Fixed slim hero height (variation 2 — Projects Hub) so the hub, the project
   pages and the Contact page are all the SAME height regardless of content.
   Desktop only; narrow screens size to content. The taller variation-3 hero
   (service pages + About) overrides this via the .prj-hero.sd-hero rule in
   service-detail.css. */
@media (min-width: 760px) {
  .prj-hero { min-height: 735px; }
}
.prj-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.prj-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  opacity: 0.46;
  filter: grayscale(0.25);
}
.prj-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* 1) nav-band darkness at the very top so the transparent nav reads;
     2) diagonal depth top-left → bottom-right;
     3) bottom anchor so the white grid section below lands cleanly. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0)    16%),
    linear-gradient(115deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 52%, rgba(0,0,0,0.20) 100%),
    linear-gradient(0deg,   rgba(0,0,0,0.55) 0%, rgba(0,0,0,0)    46%);
}
.prj-hero__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.42;
}
/* Hero bottom edge — ONE element drawn with a single clip-path so the full-width
   line and the corner slash read as one continuous shape (no seam, no gap — the
   earlier two-element approach left a sliver of dark between them). The bottom
   --line-h is a full-width rule; a slash rises from it at the bottom-right, its
   left edge at the nav flags' angle (atan(--nav-slant)). --slash-h is the slash
   height above the line; --slash-w the slash width. */
.prj-hero__base {
  position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--bleed)); z-index: 3;
  --line-h: var(--border-bold);          /* full-width line beneath the slash */
  --slash-h: clamp(40px, 3.7vw, 53px);   /* slash height above the line */
  --slash-w: clamp(200px, 26vw, 340px);  /* slash width at the right */
  --nav-slant: 0.756757;                 /* 56/74 — nav desktop angle */
  --bleed: 10px;                         /* extend below the hero so the hero's
                                            overflow:hidden crisp-clips the bottom.
                                            Without this the clip-path's bottom edge
                                            anti-aliases at the fractional hero-bottom
                                            and the dark hero bg shows through as a
                                            thin dark line before the white section. */
  height: calc(var(--line-h) + var(--slash-h) + var(--bleed));
  background: var(--altida-yellow);
  pointer-events: none;
  clip-path: polygon(
    calc(100% - var(--slash-w) + var(--slash-h) * var(--nav-slant)) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--slash-h),
    calc(100% - var(--slash-w)) var(--slash-h)
  );
}
@media (max-width: 1024px) { .prj-hero__base { --nav-slant: 0.875; } }      /* navH 64 → 56/64 */
@media (max-width: 640px)  { .prj-hero__base { --nav-slant: 0.736842; } }   /* navH 76 → 56/76 */
.prj-hero__inner {
  position: relative; z-index: 4;
  max-width: var(--container-wide); margin: 0 auto;
  padding: 0 var(--gutter);
}
.prj-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--altida-white);
  margin: 0 0 26px;
}
/* Yellow terminal-period accent — mirrors the homepage hero's yellow-accent-
   on-white-title treatment (.v3-hero__amp) + the brand's terminal-period rhythm. */
.prj-hero__dot { color: var(--altida-yellow); }
.prj-hero__sub {
  font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55; color: rgba(255,255,255,0.86);
  max-width: 56ch; margin: 0;
}

/* ────────────────────────────────────────────────────────────
   2. WORK — white section holding the filter + the card grid.
   ──────────────────────────────────────────────────────────── */
/* Boundary rhythm: each section pads its share so a boundary = hero-bottom +
   work-top (~144) and work-bottom + cta-top (~144) — one --section-pad-y unit,
   coherent with the homepage's single-gap-per-boundary rhythm (no double-stack). */
.prj-work { background: var(--altida-white); color: var(--altida-black); padding-block: clamp(40px, 5vw, 56px) clamp(48px, 6vw, 72px); }
.prj-work__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Filter bar ─────────────────────────────────────────────── */
.prj-filter {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 28px;
  margin: 0 0 clamp(28px, 4vw, 48px);
  padding: 0 0 clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--hairline);
}
.prj-filter__group { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.prj-filter__btn {
  position: relative;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-secondary);
  background: transparent; border: 0; cursor: pointer;
  padding: 9px 14px;
  transition: color var(--dur-fast) var(--ease-mech);
}
.prj-filter__btn::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--altida-yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-mech);
}
.prj-filter__btn:hover { color: var(--altida-black); }
.prj-filter__btn[aria-pressed="true"] { color: var(--altida-black); }
.prj-filter__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.prj-filter__btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.prj-filter__count {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
  font-feature-settings: 'tnum' 1;
}
.prj-filter__count b { color: var(--altida-black); font-weight: 800; }

/* ── Grid ───────────────────────────────────────────────────── */
.prj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  align-items: stretch;   /* cards in a row share the tallest card's height */
}
@media (max-width: 980px) { .prj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prj-grid { grid-template-columns: 1fr; } }

/* ── Card — light editorial, image-top ──────────────────────── */
.prj-card {
  display: flex; flex-direction: column;
  background: var(--altida-white);
  border: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
  overflow: hidden; border-radius: 9px;   /* rounded to match the fleet / industries + design-system cards */
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.06);   /* soft rest lift; hover deepens to --shadow-3 below */
  transition: transform var(--dur-base) var(--ease-mech),
              box-shadow var(--dur-base) var(--ease-mech),
              border-color var(--dur-base) var(--ease-mech);
}
.prj-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-3);
}
.prj-card:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }

.prj-card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--altida-bone);
}
.prj-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.9);
  transition: transform 900ms var(--ease-mech);
}
.prj-card:hover .prj-card__media img { transform: scale(1.05); }
/* Flat yellow category tag overlaid bottom-left of the media. Square,
   black Inter caps — a tag, not a status pill. */
.prj-card__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--altida-yellow); color: var(--altida-pure-black);
  font-family: var(--font-sans); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 7px 12px;
}

.prj-card__body {
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 28px);
  flex: 1;
}
.prj-card__meta {
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  color: var(--ink-muted); margin: 0 0 12px;
  font-feature-settings: 'tnum' 1;
}
.prj-card__title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.2;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--altida-black); margin: 0 0 12px;
}
.prj-card__scope {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--ink-secondary); margin: 0 0 22px;
}
.prj-card__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--altida-black);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--altida-yellow);
}
.prj-card__link .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.prj-card:hover .prj-card__link .arrow { transform: translateX(4px); }

/* ── Featured card — first card, spans two columns, horizontal split
   (media left, body right). The row's other card stretches to match its
   height via the grid's align-items: stretch. ── */
.prj-card--featured { grid-column: span 2; }
@media (min-width: 601px) {
  .prj-card--featured { display: grid; grid-template-columns: 1.25fr 1fr; }
  .prj-card--featured .prj-card__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .prj-card--featured .prj-card__body { justify-content: center; padding: clamp(26px, 2.6vw, 44px); }
  .prj-card--featured .prj-card__title { font-size: clamp(22px, 2vw, 30px); }
  .prj-card--featured .prj-card__scope { font-size: 16px; max-width: 46ch; }
}
@media (max-width: 980px) { .prj-card--featured { grid-column: span 2; } }
@media (max-width: 600px) { .prj-card--featured { grid-column: span 1; } }

/* Filtered-out / off-page cards. JS toggles .is-hidden. */
.prj-card.is-hidden { display: none; }

/* ── Pager — page controls below the grid (shown only when > 6 results) ── */
.prj-pager {
  display: flex; justify-content: center; align-items: center;
  gap: 6px; margin-top: clamp(32px, 4vw, 56px);
}
.prj-pager[hidden] { display: none; }
.prj-pager__btn {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-secondary);
  background: var(--altida-white);
  border: 1px solid var(--hairline); cursor: pointer;
  font-feature-settings: 'tnum' 1;
  transition: color var(--dur-fast) var(--ease-mech),
              border-color var(--dur-fast) var(--ease-mech),
              background var(--dur-fast) var(--ease-mech);
}
.prj-pager__btn:hover:not(:disabled) { color: var(--altida-black); border-color: var(--hairline-strong); }
.prj-pager__btn[aria-current="page"] {
  background: var(--altida-yellow); color: var(--altida-pure-black); border-color: var(--altida-yellow);
}
.prj-pager__btn:disabled { opacity: 0.4; cursor: default; }
.prj-pager__btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.prj-pager__btn--nav { font-size: 16px; }
.prj-pager__arrow { display: inline-block; line-height: 1; }

/* ────────────────────────────────────────────────────────────
   3. CTA band — solid yellow, design-system pattern.
   ──────────────────────────────────────────────────────────── */
.prj-cta { background: var(--altida-yellow); color: var(--altida-pure-black); padding-block: clamp(48px, 6vw, 72px) clamp(60px, 7.5vw, 96px); }
.prj-cta__inner {
  max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(24px, 4vw, 56px);
}
.prj-cta__copy { max-width: 60ch; }
.prj-cta__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.0;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--altida-pure-black); margin: 14px 0 0;
}
/* Eyebrow + title + actions all left-aligned in one column; the actions sit as
   a row directly under the title — not a sparse cluster floating on the right. */
.prj-cta__actions { display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 2.4vw, 32px); flex-wrap: wrap; }
/* Premium lift on the primary button (base .v3-btn already transitions transform + box-shadow) */
.prj-cta .v3-btn--dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(10, 10, 10, 0.6); }
/* Contact methods (Call / Email) styled like the homepage's bottom CTA:
   a compact key + value grid, both emails stacked under one "Email" key. */
.prj-cta__contact { display: flex; flex-direction: column; gap: 12px; }
.prj-cta__line { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 16px; }
.prj-cta__line-key {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(10, 10, 10, 0.5);
}
.prj-cta__line-stack { display: flex; flex-direction: column; gap: 4px; }
.prj-cta__line-val {
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.4;
  color: var(--altida-pure-black); text-decoration: none; font-feature-settings: 'tnum' 1;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease-mech);
}
.prj-cta__line-val:hover { background-size: 100% 1.5px; }
.prj-cta__line-val:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }

/* Soft "Send us a message" prompt under the title (not a button) — opens the
   send-a-message modal. Styled like the homepage's "Talk it through" link. */
.prj-cta__message {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  color: var(--altida-pure-black); text-decoration: none;
}
.prj-cta__message-text {
  border-bottom: 1.5px solid rgba(10, 10, 10, 0.4); padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-mech);
}
.prj-cta__message:hover .prj-cta__message-text { border-color: var(--altida-pure-black); }
.prj-cta__message .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.prj-cta__message:hover .arrow { transform: translateX(4px); }
.prj-cta__message:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
.prj-cta .v3-eyebrow__rule { background: var(--altida-pure-black); }

/* ────────────────────────────────────────────────────────────
   4. MOTION — scroll-reveal. homepage.js adds .is-revealed to
   [data-section-reveal] on enter; [data-reveal] staggers on load.
   ──────────────────────────────────────────────────────────── */
.prj-grid[data-section-reveal] .prj-card,
.prj-cta[data-section-reveal] .prj-cta__copy,
.prj-cta[data-section-reveal] .prj-cta__actions,
.prj-filter[data-section-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 600ms var(--ease-mech), transform 600ms var(--ease-mech);
}
.prj-filter[data-section-reveal].is-revealed { opacity: 1; transform: none; }
.prj-grid.is-revealed .prj-card,
.prj-cta.is-revealed .prj-cta__copy,
.prj-cta.is-revealed .prj-cta__actions { opacity: 1; transform: none; }
/* Card cascade as the grid enters view. */
.prj-grid.is-revealed .prj-card:nth-child(1) { transition-delay: 0ms; }
.prj-grid.is-revealed .prj-card:nth-child(2) { transition-delay: 80ms; }
.prj-grid.is-revealed .prj-card:nth-child(3) { transition-delay: 140ms; }
.prj-grid.is-revealed .prj-card:nth-child(4) { transition-delay: 200ms; }
.prj-grid.is-revealed .prj-card:nth-child(5) { transition-delay: 260ms; }
.prj-grid.is-revealed .prj-card:nth-child(6) { transition-delay: 320ms; }
.prj-cta.is-revealed .prj-cta__actions { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .prj-grid[data-section-reveal] .prj-card,
  .prj-cta[data-section-reveal] .prj-cta__copy,
  .prj-cta[data-section-reveal] .prj-cta__actions,
  .prj-filter[data-section-reveal] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .prj-card, .prj-card__media img, .prj-card__link .arrow { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   HERO ELEVATION — site-wide rollout (2026-07-01, operator-approved on
   crane-hire). Three variations, one choreography:
   · v3-hero (homepage)     — motion only; keeps its own tonality
   · prj-hero (all others)  — motion + refined tonality (photo breathes,
                              overlay deepened left for the text zone)
   Elements + heights + copy unchanged. Reduced-motion: all static.
   ──────────────────────────────────────────────────────────────────── */
.prj-hero__bg img{opacity:.52;filter:grayscale(.12)}
.prj-hero__overlay{background:
  linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 16%),
  linear-gradient(115deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.12) 100%),
  linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 44%)}
.ch-line{display:block;overflow:hidden;padding:.14em 0 .1em;margin:-.14em 0 -.1em} /* clip room for cap overshoot at tight leading — glyphs no longer trim */
@media (prefers-reduced-motion: no-preference){
  /* cinematic settle on load (image), scroll parallax on exit (wrapper) */
  .prj-hero__bg img,.v3-hero__bg img{animation:heroSettle 2600ms var(--ease-mech) both}
  @keyframes heroSettle{from{transform:scale(1.055)}to{transform:scale(1)}}
  @supports (animation-timeline: view()){
    .prj-hero__bg,.v3-hero__bg{animation:heroPar linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes heroPar{to{transform:translateY(9%)}}
  }
  /* masked line-rise on the hero title (keys off the existing reveal JS) */
  .ch-hero-title[data-reveal]{opacity:1;transform:none;transition:none}
  .ch-line__in{display:block;transform:translateY(130%);transition:transform 850ms var(--ease-mech)}
  .ch-hero-title.is-revealed .ch-line:nth-child(1) .ch-line__in{transform:none;transition-delay:60ms}
  .ch-hero-title.is-revealed .ch-line:nth-child(2) .ch-line__in{transform:none;transition-delay:180ms}
  /* the yellow base rule draws in after the title lands */
  .prj-hero__base{transform-origin:left;animation:baseDraw 1050ms var(--ease-mech) 700ms both}
  @keyframes baseDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion: reduce){
  .ch-line__in{transform:none!important;transition:none!important}
  .prj-hero__bg,.prj-hero__bg img,.v3-hero__bg,.v3-hero__bg img,.prj-hero__base{animation:none!important}
}

/* 2026-07-02 contrast floor: the CTA band's Call/Email keys were 3.58:1
   on the yellow ground — raised to ~7:1. */
.prj-cta__line-key{color:rgba(10,10,10,.78)}

/* 2026-07-02 mobile polish — touch hit-areas. The filter buttons grow
   visibly taller on touch screens (padding is the tap area there);
   the CTA links extend invisibly via negative-margin compensation. */
@media (pointer: coarse) {
  .prj-cta__line-val { padding-block: 6px; margin-block: -6px; }
  .prj-cta__message { padding-block: 9px; margin-block: -9px; }
  .prj-filter__btn { padding-block: 13px; }
}

/* 2026-07-02 — hero eyebrow on the Projects hub + project pages matches the
   plain sd-crumb style used on every other page's hero (11px / .18em / 70%
   white, no yellow rule). Scoped to the hero (.prj-hero__inner) so section
   eyebrows elsewhere on these pages keep the standard v3-eyebrow + rule. */
.prj-hero__inner > .v3-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; gap: 10px;
  color: rgba(255, 255, 255, 0.7);
}
.prj-hero__inner > .v3-eyebrow .v3-eyebrow__rule { display: none; }
/* 2026-07-02 — breadcrumb "Home ·" link + separator on the Projects hero
   eyebrows match the sd-crumb breadcrumbs used on every other page. */
.prj-hero__inner > .v3-eyebrow a { color: var(--altida-yellow); text-decoration: none; }
.prj-hero__inner > .v3-eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prj-hero__inner > .v3-eyebrow span { color: rgba(255, 255, 255, 0.4); }