/* ==========================================================================
   CAREER  (/career/)
   The vacancies board and the three things it borrows: the animated line
   icons, the FAQ rail and the success panel. Loaded only by this page, the
   way home-v2.css is loaded only by Home, so the rest of the site does not
   carry it. The review copies of these rules stay in design-options.css,
   which is deleted when the designs are signed off.
   ========================================================================== */

/* ==========================================================================
   CAREER — ALWAYS-OPEN VACANCIES BOARD (/career/)
   Adrem recruits for the same trades continuously, so the page is a board of
   roles that never closes rather than a list of dated adverts. Search and
   category chips filter it live; every tile is a button that drops its role
   into the application form below.
   Motion, hover and the brand colours follow the 24 Sep rule: crimson for the
   action, navy for the structure, everything off under reduced motion.
   ========================================================================== */

/* ---- hero + the floating search card ------------------------------------ */
.jb-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--n-0); padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 8vw, 7rem); }
.jb-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jb-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(4, 31, 21, 0.94) 38%, rgba(4, 31, 21, 0.62) 100%); }
.jb-hero__inner { max-width: 46rem; }
.jb-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(150, 112, 31, 0.18); border: 1px solid rgba(150, 112, 31, 0.5); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson-300); }
.jb-hero__eyebrow .icon { width: 1rem; height: 1rem; }
.jb-hero__eyebrow i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--crimson-400); animation: jb-live 2.4s ease-in-out infinite; }
@keyframes jb-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }
.jb-hero h1 { color: var(--n-0); font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); margin: 0 0 var(--space-4); }
.jb-hero h1 em { font-style: normal; color: var(--crimson-300); }
.jb-hero__lead { margin: 0 0 var(--space-6); font-size: var(--text-lg); color: rgba(255, 255, 255, 0.88); max-width: 40rem; }
.jb-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.82); }
.jb-hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.jb-hero__facts .icon { width: 1.1rem; height: 1.1rem; color: var(--crimson-300); }

.jb-searchwrap { margin-top: calc(clamp(3rem, 6vw, 5rem) * -1); position: relative; z-index: 2; }
.jb-search {
  padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--radius-xl); background: var(--n-0);
  box-shadow: 0 30px 60px -32px rgba(4, 31, 21, 0.55); border: 1px solid var(--color-border);
}
.jb-search__field { position: relative; display: flex; align-items: center; }
.jb-search__field .icon { position: absolute; left: 1rem; width: 1.25rem; height: 1.25rem; color: var(--navy-400); pointer-events: none; transition: color 0.3s ease; }
.jb-search__field:focus-within .icon { color: var(--color-primary); }
.jb-search input {
  width: 100%; padding: 0.85rem 1rem 0.85rem 3rem; font: inherit; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--n-50);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.jb-search input:focus { outline: none; background: var(--n-0); border-color: var(--crimson-300); box-shadow: 0 0 0 4px rgba(150, 112, 31, 0.12); }
.jb-search__clear { position: absolute; right: 0.6rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--n-500); transition: background-color 0.25s ease, color 0.25s ease; }
.jb-search__clear:hover { background: var(--n-100); color: var(--color-primary); }
.jb-search__clear[hidden] { display: none; }

.jb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.jb-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.95rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--n-0); font: inherit; font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--color-text-muted);
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.jb-chip .icon { width: 1.05rem; height: 1.05rem; }
.jb-chip:hover { transform: translateY(-2px); color: var(--navy-600); border-color: var(--navy-200); }
.jb-chip[aria-pressed="true"] { background: var(--navy-500); border-color: transparent; color: var(--n-0); }
.jb-chip__n { font-size: var(--text-xs); opacity: 0.75; }

.jb-count { margin: var(--space-6) 0 var(--space-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.jb-count b { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-heading); }

/* ---- the board ----------------------------------------------------------- */
.jb-group + .jb-group { margin-top: var(--space-8); }
.jb-group[hidden] { display: none; }
.jb-group__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.jb-group__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-md); background: var(--crimson-50); color: var(--color-primary); }
/* every second category is navy instead of crimson, so the board keeps the
   red-and-blue rhythm rather than being one long run of crimson tiles. */
.jb-group--navy .jb-group__icon { background: var(--navy-50); color: var(--navy-500); }
.jb-group--navy .jb-role__icon { background: var(--navy-50); color: var(--navy-500); }
.jb-group--navy .jb-role:hover .jb-role__icon { background: var(--navy-500); color: var(--n-0); }
.jb-group--navy .jb-role__go { color: var(--navy-500); }
.jb-group__title { margin: 0; font-size: var(--text-lg); }
.jb-group__rule { flex: 1; height: 1px; background: var(--color-border); }
.jb-group__n { font-size: var(--text-sm); color: var(--color-text-muted); }

.jb-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.jb-role {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0); font: inherit;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.jb-role[hidden] { display: none; }
.jb-role:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.jb-role__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-md); background: var(--crimson-50); color: var(--color-primary); transition: background-color 0.35s ease, color 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.jb-role:hover .jb-role__icon { background: var(--color-primary); color: var(--n-0); transform: rotate(-6deg) scale(1.06); }
.jb-role__body { flex: 1; min-width: 0; }
.jb-role__title { display: block; font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--color-heading); }
.jb-role__note { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.1rem; }
.jb-role__go { flex: none; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.jb-role:hover .jb-role__go, .jb-role:focus-visible .jb-role__go { opacity: 1; transform: none; }

.jb-empty { display: grid; justify-items: center; gap: var(--space-3); padding: clamp(2rem, 5vw, 3rem); text-align: center; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-xl); background: var(--n-0); }
.jb-empty[hidden] { display: none; }
.jb-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--navy-300); }
.jb-empty h3 { margin: 0; font-size: var(--text-lg); }
.jb-empty p { margin: 0; color: var(--color-text-muted); max-width: 32rem; }

/* ---- why we are always hiring (animated icons) --------------------------- */
.jb-why { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.jb-why__item { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.jb-why__item:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }
.jb-why__item .ai-ico { width: 2.5rem; height: 2.5rem; color: var(--crimson-300); margin-bottom: var(--space-4); }
.jb-why__item strong { display: block; font-family: var(--font-heading); font-size: var(--text-base); color: var(--n-0); }
.jb-why__item p { margin: 0.3rem 0 0; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.78); }

/* ---- how to apply -------------------------------------------------------- */
.jb-steps { display: grid; gap: var(--space-5); counter-reset: jbstep; }
@media (min-width: 768px) { .jb-steps { grid-template-columns: repeat(3, 1fr); } }
.jb-step { position: relative; padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--n-0); border: 1px solid var(--color-border); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease; }
.jb-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.jb-step::before { counter-increment: jbstep; content: "0" counter(jbstep); position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--navy-50); }
.jb-step .ai-ico { width: 2.5rem; height: 2.5rem; color: var(--color-primary); margin-bottom: var(--space-4); }
.jb-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.jb-step p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- the application panel ---------------------------------------------- */
.jb-apply { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .jb-apply { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.jb-apply__aside { position: relative; overflow: hidden; padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); color: var(--n-0); background: linear-gradient(160deg, var(--navy-600), var(--navy-900)); box-shadow: var(--shadow-lg); }
.jb-apply__aside::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, rgba(150, 112, 31, 0.35), transparent 68%); animation: jb-drift 16s ease-in-out infinite alternate; }
@keyframes jb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, 8%, 0) scale(1.12); } }
.jb-apply__aside h2 { color: var(--n-0); font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.jb-apply__aside p { color: rgba(255, 255, 255, 0.85); margin: 0 0 var(--space-6); }
.jb-apply__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); position: relative; }
.jb-apply__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.88); }
.jb-apply__list .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--crimson-300); margin-top: 0.15rem; }
.jb-apply__aside a { color: var(--n-0); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); transition: color 0.3s ease, text-decoration-color 0.3s ease; }
.jb-apply__aside a:hover { color: var(--crimson-300); text-decoration-color: currentColor; }
.jb-apply__picked { display: none; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(150, 112, 31, 0.16); border: 1px solid rgba(150, 112, 31, 0.45); font-size: var(--text-sm); }
.jb-apply__picked.is-on { display: inline-flex; animation: jb-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes jb-pop { from { opacity: 0; transform: scale(0.85); } }
.jb-apply__picked .icon { width: 1rem; height: 1rem; color: var(--crimson-300); }
.jb-form.is-flash { animation: jb-flash 1s ease; }
@keyframes jb-flash { 0% { box-shadow: 0 0 0 0 rgba(150, 112, 31, 0.45); } 100% { box-shadow: 0 0 0 18px rgba(150, 112, 31, 0); } }

/* ---- Email / Call / Visit beside the application form --------------------
   The form is tall, so the left column carries the three ways to reach us and
   fills the height with it. Filled tiles, and on hover the card floods with
   its own colour and the text flips to white — crimson, navy, crimson, so the
   column keeps the red-and-blue rhythm the rest of the site uses.            */
.jb-side { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 1024px) {
  .jb-apply { align-items: stretch; }
  .jb-side { grid-template-rows: auto 1fr; }
}
.jb-reach { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-auto-rows: 1fr; }
.jb-reach li { display: grid; }   /* the card fills the row the grid hands it */
.jb-reach__item {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); text-decoration: none;
  background: var(--n-0); border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.jb-reach__item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, var(--crimson-600), var(--crimson-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.jb-reach__item--navy::before { background: linear-gradient(120deg, var(--navy-700), var(--navy-500)); }
.jb-reach__item:hover, .jb-reach__item:focus-visible { transform: translateX(4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.jb-reach__item:hover::before, .jb-reach__item:focus-visible::before { transform: scaleX(1); }
.jb-reach__icon {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--n-0);
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jb-reach__item--navy .jb-reach__icon { background: var(--navy-500); }
.jb-reach__icon .icon { width: 1.3rem; height: 1.3rem; }
.jb-reach__item:hover .jb-reach__icon, .jb-reach__item:focus-visible .jb-reach__icon { background: var(--n-0); color: var(--color-primary); transform: rotate(-8deg) scale(1.08); }
.jb-reach__item--navy:hover .jb-reach__icon, .jb-reach__item--navy:focus-visible .jb-reach__icon { color: var(--navy-600); }
.jb-reach__body { flex: 1; min-width: 0; }
.jb-reach__body strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); line-height: 1.2; color: var(--color-heading); transition: color 0.4s ease; }
.jb-reach__value { display: block; margin-top: 0.15rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy-600); transition: color 0.4s ease; }
.jb-reach__note { display: block; margin-top: 0.1rem; font-size: var(--text-xs); color: var(--color-text-muted); transition: color 0.4s ease; }
.jb-reach__item:hover .jb-reach__note, .jb-reach__item:focus-visible .jb-reach__note { color: rgba(255, 255, 255, 0.85); }
.jb-reach__item:hover strong, .jb-reach__item:focus-visible strong,
.jb-reach__item:hover .jb-reach__value, .jb-reach__item:focus-visible .jb-reach__value { color: var(--n-0); }
.jb-reach__go { flex: none; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity 0.35s ease, transform 0.35s ease, color 0.4s ease; }
.jb-reach__item--navy .jb-reach__go { color: var(--navy-500); }
.jb-reach__item:hover .jb-reach__go, .jb-reach__item:focus-visible .jb-reach__go { opacity: 1; transform: none; color: var(--n-0); }

@media (prefers-reduced-motion: reduce) {
  .jb-hero__eyebrow i, .jb-apply__aside::after, .jb-apply__picked.is-on, .jb-form.is-flash { animation: none; }
}

/* ---- FAQ rail ------------------------------------------------------------ */
/* ==========================================================================
   FAQ OPTIONS (design-options/faq/)
   B sticky side + rail · C category tabs · D master-detail.
   Answers open with a grid-row transition (no jump); crimson marks what is
   active, navy carries the structure. Everything degrades without JS.
   ========================================================================== */
.faq-b__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-b__inner { overflow: hidden; }
details[open] > .faq-b__body { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .faq-b__body { transition: none; } }

/* ---- B: two columns, sticky help card ------------------------------------- */
.faq-b { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .faq-b { grid-template-columns: 5fr 7fr; } .faq-b__side { position: sticky; top: 7.5rem; } }
.faq-b__help {
  display: flex; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5);
  border-radius: var(--radius-xl); color: var(--n-0);
  background: linear-gradient(120deg, var(--crimson-600), var(--crimson-500));
  box-shadow: 0 18px 38px -20px rgba(150, 112, 31, 0.75);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.faq-b__help:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -20px rgba(150, 112, 31, 0.85); }
.faq-b__help-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.18); }
.faq-b__help strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); }
.faq-b__help p { margin: 0.15rem 0 var(--space-4); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.9); }
.faq-b__list { display: grid; gap: var(--space-3); }
.faq-b__item {
  position: relative; overflow: hidden; background: var(--n-0); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.faq-b__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-b__item:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.faq-b__item[open] { border-color: transparent; box-shadow: var(--shadow-lg); }
.faq-b__item[open]::before { transform: scaleY(1); }
.faq-b__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--color-heading);
  transition: color 0.3s ease;
}
.faq-b__q::-webkit-details-marker { display: none; }
.faq-b__q:hover { color: var(--color-primary); }
.faq-b__q .icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--color-primary); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-b__item[open] .faq-b__q .icon { transform: rotate(135deg); }
.faq-b__inner { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-muted); }

/* ---- the sent state ------------------------------------------------------ */
.ty-tick { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--space-4); border-radius: 50%; background: rgba(150, 112, 31, 0.1); }
.ty-tick svg { width: 3rem; height: 3rem; overflow: visible; }
.ty-tick__ring, .ty-tick__mark { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ty-tick__ring { stroke: var(--crimson-300); stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: ty-ring 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.ty-tick__mark { stroke: var(--color-primary); stroke-width: 4; stroke-dasharray: 48; stroke-dashoffset: 48; animation: ty-mark 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards; }
@keyframes ty-ring { to { stroke-dashoffset: 0; } }
@keyframes ty-mark { to { stroke-dashoffset: 0; } }
/* ---- B: the card swaps to a success panel --------------------------------- */
.ty-swap { position: relative; }
.ty-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-xl); background: var(--n-0);
  border: 1px solid var(--crimson-100); box-shadow: var(--shadow-lg); text-align: left; outline: none;
}
.ty-panel.is-in { animation: ty-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ty-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.ty-panel__eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.ty-panel__title { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.ty-panel__text { margin: 0 0 var(--space-5); color: var(--color-text-muted); }
.ty-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.ty-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ty-steps--row { margin-bottom: var(--space-8); }
@media (min-width: 768px) { .ty-steps--row { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.ty-steps__item {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-bg-tint);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background-color 0.35s ease;
  animation: ty-step 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ty-steps__item:nth-child(2) { animation-delay: 0.12s; }
.ty-steps__item:nth-child(3) { animation-delay: 0.24s; }
@keyframes ty-step { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ty-steps__item:hover { transform: translateY(-3px); background: var(--n-0); box-shadow: var(--shadow-md); }
.ty-steps__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--color-primary); color: var(--n-0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ty-steps__item:hover .ty-steps__icon { transform: rotate(-8deg) scale(1.08); }
.ty-steps__item strong { display: block; font-family: var(--font-heading); color: var(--color-heading); }
.ty-steps__item p { margin: 0.15rem 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .ty-tick__ring, .ty-tick__mark { animation: none; stroke-dashoffset: 0; }
  .ty-panel.is-in, .ty-steps__item { animation: none; }
}