/* ==========================================================================
   Reltic - two column body layout (October 2026)
   Every section between the hero and the footer is a two column band:
   a sticky aside on the left (eyebrow, heading, intro, actions) and the
   content on the right. Card grids become accordions and numbered rows.
   Patterns adapted from the BYQ library: sticky FAQ accordion, process with
   sticky left column, accordion list with meta, blog roll with sticky
   sidebar, article with sticky contents, two column legal page.
   Loaded after site.css. Hero and footer are untouched.
   ========================================================================== */

/* ------------------------------------------------------------ Bands */

main .section.l2 {
  padding-block: clamp(72px, 8.5vw, 120px);
  border-block: 0;
}
main .section.l2--white { background: #FFFFFF; }
main .section.l2--paper { background: #F6F8FA; }
main .section.l2 + .section.l2 { border-top: 1px solid rgba(11, 22, 31, 0.07); }

.l2__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6.5vw, 104px);
  align-items: start;
}

/* ------------------------------------------------------------ Aside */

.l2__aside { position: relative; height: 100%; }
.l2__stick {
  position: sticky;
  top: calc(var(--header-h) + 36px);
}
.l2__aside .eyebrow { margin-bottom: 22px; }
.l2__aside h2 {
  font-size: clamp(1.75rem, 2.55vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0;
}
.l2__aside h2 em { font-style: normal; color: var(--accent-ink); }
.l2__aside .lede,
.l2__aside .muted,
.l2__aside > .l2__stick > p:not(.eyebrow) {
  margin-top: 20px;
  font-size: 1.0625rem;
  line-height: 1.62;
}
.l2__aside p[style] { margin-top: 20px !important; }
.l2__aside .btn-row { margin-top: 30px !important; }
.l2__aside .figure { margin-top: 30px !important; }

/* Running index under the heading: a short amber rule */
.l2__aside h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 26px;
  background: var(--accent);
  border-radius: 2px;
}

/* A statement in the aside becomes a dark card on the light band */
.l2__aside .statement {
  background: var(--bg-2);
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 40px);
}
main .section.l2 .l2__aside .statement p { color: var(--white); }
main .section.l2 .l2__aside .statement .attrib { color: var(--text-3); }

/* Small contact card used where a section has no heading of its own */
.l2__card {
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 32px);
}
main .section.l2 .l2__card h3 { color: var(--white); margin: 0 0 10px; font-size: 1.15rem; }
main .section.l2 .l2__card p { color: var(--text-2); margin: 0; font-size: 0.95rem; }
main .section.l2 .l2__card a:not(.btn) { color: var(--white); }
.l2__card .btn-row { margin-top: 22px; }
.l2__card + .l2__card,
.l2__toc + .l2__card,
.l2__meta + .l2__toc { margin-top: 24px; }

/* ------------------------------------------------------------ Body */

.l2__body > * + * { margin-top: clamp(28px, 3vw, 40px); }
.l2__body > .stack > * + * { margin-top: 1.15em; }
.l2__body > .l2__intro { margin-top: 0; }
.l2__body > .l2__intro + * { margin-top: clamp(20px, 2.4vw, 30px); }
.l2__body .lede { color: var(--l-text); }
.l2__body .split { grid-template-columns: 1fr; gap: 28px; }
.l2__body .split > :nth-child(2) { margin-top: 0 !important; }
.l2__body .steps { margin-top: 0 !important; }
.l2__body > [style*="margin-top"] { margin-top: clamp(28px, 3vw, 40px) !important; }

/* ------------------------------------------------------------ Accordion
   Used for service cards, problem rows and FAQs. Native <details name>,
   so only one item is open at a time; l2.js covers older browsers. */

.l2acc { border-top: 1px solid var(--l-line-2, rgba(11, 22, 31, 0.2)); }
.l2acc > details {
  border-bottom: 1px solid var(--l-line, rgba(11, 22, 31, 0.11));
  transition: background-color 0.25s var(--ease);
}
.l2acc > details[open] { background: var(--l-surface, #fff); }
main .section.l2--white .l2acc > details[open] { background: #F6F8FA; }

.l2acc summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 18px;
  padding: 22px 20px;
}
.l2acc summary::-webkit-details-marker { display: none; }
.l2acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.l2acc__no {
  min-width: 2.2em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.l2acc__no:empty { display: none; }
.l2acc__t {
  display: block;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--l-text);
}
.l2acc__s {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--l-text-3);
}
.l2acc summary:hover .l2acc__t { color: var(--accent-ink); }

.l2acc__ic {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--l-line-2, rgba(11, 22, 31, 0.2));
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
.l2acc__ic::before,
.l2acc__ic::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  background: var(--l-text);
  transition: transform 0.3s var(--ease);
}
.l2acc__ic::after { transform: rotate(90deg); }
.l2acc > details[open] .l2acc__ic { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.l2acc > details[open] .l2acc__ic::after { transform: rotate(0deg); }
.l2acc > details[open] .l2acc__ic::before,
.l2acc > details[open] .l2acc__ic::after { background: var(--on-accent); }

.l2acc__b {
  padding: 0 20px 26px calc(20px + 2.2em + 18px);
  color: var(--l-text-2);
}
.l2acc--plain .l2acc__b { padding-left: 20px; }
.l2acc__b > * + * { margin-top: 0.9em; }
.l2acc__b p { margin: 0; font-size: 0.98rem; line-height: 1.65; }
.l2acc__b p + p { margin-top: 0.9em; }
.l2acc__b .link-arrow { margin-top: 16px; display: inline-flex; }
.l2acc__k {
  display: block;
  margin-top: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l-text);
}
.l2acc__out {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 153, 58, 0.14);
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 500;
}
.l2acc details[open] .l2acc__b { animation: l2-in 0.35s var(--ease); }
@keyframes l2-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ Numbered rows
   Deliverables, facts and short numbered lists. */

.l2num { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line-2, rgba(11, 22, 31, 0.2)); }
.l2num > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--l-line, rgba(11, 22, 31, 0.11));
}
.l2num__n {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.l2num__n:empty::before { content: ""; display: block; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--accent); }
.l2num h3 { margin: 0 0 6px; font-size: 1.1rem; }
.l2num p { margin: 0; color: var(--l-text-2); font-size: 0.98rem; line-height: 1.62; }
.l2num > li > div > p:only-child { color: var(--l-text); font-size: 1.02rem; }

/* ------------------------------------------------------------ Link rows
   Related services, audience lists, categories. */

.l2rows { border-top: 1px solid var(--l-line-2, rgba(11, 22, 31, 0.2)); }
.l2rows__i {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 40px;
  gap: 18px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--l-line, rgba(11, 22, 31, 0.11));
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s var(--ease), padding 0.25s var(--ease);
}
a.l2rows__i:hover { background: var(--l-surface, #fff); padding-inline: 18px; }
main .section.l2--white a.l2rows__i:hover { background: #F6F8FA; }
.l2rows__n { font-size: 0.8125rem; font-weight: 600; color: var(--accent-ink); min-width: 2.2em; }
.l2rows__n:empty { display: none; }
.l2rows h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.l2rows h3 a { color: inherit; text-decoration: none; }
.l2rows p { margin: 4px 0 0; font-size: 0.95rem; color: var(--l-text-2); }
.l2rows__k { display: block; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--l-text-3); }
.l2rows__go {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--l-line-2, rgba(11, 22, 31, 0.2));
  color: var(--l-text);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
a.l2rows__i:hover .l2rows__go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateX(3px); }
a.l2rows__i:hover h3 { color: var(--accent-ink); }
.l2rows__i:not(a) { grid-template-columns: auto minmax(0, 1fr); }

/* ------------------------------------------------------------ FAQ */

.l2faq .l2acc__b { padding-left: 20px; }

/* ------------------------------------------------------------ Article
   Blog posts and legal pages: contents on the left, text on the right. */

.l2__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.l2__meta span {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  background: var(--l-surface, #fff); border: 1px solid var(--l-line);
  font-size: 0.8125rem; font-weight: 500; color: var(--l-text-2);
}
.l2__toc { border-left: 1px solid var(--l-line-2, rgba(11, 22, 31, 0.2)); }
.l2__toc-h { display: block; margin: 0 0 12px 18px; font-size: 0.8125rem; font-weight: 600; color: var(--l-text); }
.l2__toc ol { list-style: none; margin: 0; padding: 0; }
.l2__toc a {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 17px;
  border-left: 2px solid transparent;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--l-text-2);
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.l2__toc a:hover { color: var(--l-text); }
.l2__toc a.is-current { color: var(--l-text); border-left-color: var(--accent); font-weight: 500; }

main .section.l2 .l2__body .article { max-width: none; margin: 0; padding: 0; }
.l2__body .article > h2:first-child,
.l2__body .prose > h2:first-of-type { margin-top: 0; }

/* Blog category filters in the aside */
.l2__aside .post-filters {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin-top: 0; padding: 0; border: 0;
}
.l2__aside .post-filters a,
.l2__aside .post-filters span {
  padding: 8px 0; font-size: 0.95rem; color: var(--l-text-2); text-decoration: none; border: 0; background: none;
}
.l2__aside .post-filters a:hover { color: var(--l-text); }
.l2__aside .post-filters [aria-current] { color: var(--l-text); font-weight: 600; }
.l2__aside .post-filters [aria-current]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--accent); }

/* Glossary jump cards in the right column */
.l2__body .gloss-toc + .gloss-toc { margin-top: 16px; }

/* Gallery in the right column: two up */
.l2__body .gal { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 960px) {
  .l2__grid { grid-template-columns: 1fr; gap: 32px; }
  .l2__stick { position: static; }
  .l2__aside { height: auto; }
  .l2__aside .post-filters { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .l2__toc { display: none; }
}
@media (max-width: 620px) {
  .l2acc summary { gap: 12px; padding: 20px 12px; }
  .l2acc__b { padding: 0 12px 22px 12px; }
  .l2num > li { grid-template-columns: 48px minmax(0, 1fr); }
  .l2rows__i { grid-template-columns: auto minmax(0, 1fr) 34px; gap: 12px; }
  .l2rows__go { width: 34px; height: 34px; }
  .l2__body .gal { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .l2acc details[open] .l2acc__b { animation: none; }
  .l2acc__ic, .l2acc__ic::before, .l2acc__ic::after, .l2rows__i, .l2rows__go { transition: none; }
}

/* Fixed placement: an empty number cell must not shift the icon column. */
.l2acc summary > .l2acc__no { grid-column: 1; }
.l2acc summary > span:nth-child(2) { grid-column: 2; }
.l2acc summary > .l2acc__ic { grid-column: 3; }
.l2acc summary > .l2acc__no:empty + span { grid-column: 1 / 3; }
.l2rows__i > .l2rows__n { grid-column: 1; }
.l2rows__i > div { grid-column: 2; }
.l2rows__i > .l2rows__go { grid-column: 3; }
.l2rows__i > .l2rows__n:empty + div { grid-column: 1 / 3; }
.l2rows__cta { display: inline-block; margin-top: 10px; font-size: 0.8125rem; font-weight: 500; color: var(--accent-ink); }
a.l2rows__i:hover .l2rows__cta { text-decoration: underline; text-underline-offset: 3px; }
.l2acc__b .acc__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }

/* Home: service sets as a vertical accordion with an image, side toggle in the aside */
.l2acc[hidden] { display: none !important; }
.l2acc--media .l2acc__b { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.l2acc__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.l2acc__media:empty { display: none; }
.l2acc--media .hacc__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.l2acc--media .hacc__chips span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--l-line); background: var(--l-surface, #fff); font-size: 0.8rem; color: var(--l-text-2); }
.l2acc--media .hacc__links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.l2__aside .toggle { margin-top: 30px; }
.l2__aside .disclosure { margin-top: 18px; font-size: 0.92rem; }
.l2__body .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .l2acc--media .l2acc__b { grid-template-columns: 1fr; }
  .l2__body .tiles { grid-template-columns: 1fr; }
}
main .section.l2 .l2acc .link-arrow { color: var(--l-text); }
main .section.l2 .l2acc .link-arrow:hover { color: var(--accent-ink); }
.l2acc__b .hacc__links .link-arrow { margin-top: 0; }