/* ============================================================
   Tiempo — shared components
   Section primitives, the button family, the FAQ accordion and the
   FAQ card carousel: the parts used by more than one deployed page.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'F37 Bobby', 'Georgia', serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--clockwork);
}

.nav-center a.active { opacity: 1; }

.nav-drawer.open { transform: translateX(0); }

.nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* ============================================================
   Section primitives — used by every new page
   ============================================================ */
.section {
  padding: var(--band-3xl) var(--pad-x);
}

.section--media { background: var(--media); color: var(--crema); }

.section--media h1, .section--media h2, .section--media h3 { color: var(--crema); }

.section--clockwork { background: var(--clockwork); color: var(--crema); }

.section--clockwork h1, .section--clockwork h2, .section--clockwork h3 { color: var(--crema); }

.section--crema { background: var(--crema); color: var(--grey-500); }

.read-col { max-width: var(--read-max); margin: 0 auto; }

.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--golden);
  margin-bottom: 16px;
}

/* ============================================================
   Buttons — the universal CTA pattern
   ============================================================ */
/* The site's CTA. These are the homepage hero button's values, which is the
   one every other Book-a-Call is measured against; page-about.css and
   page-work.css each carried a hand-copied version of this rule until this
   file was linked everywhere.
   line-height is pinned rather than inherited: pages set their body between
   1.75 and 1.85, which moved the same button between 48px and 50px. */
.btn-primary {
  display: inline-block;
  background-color: var(--clockwork);
  color: var(--crema);
  padding: 10px 26px;
  font-size: var(--fs-body);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.85;
  text-decoration: none;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-primary:hover { transform: scale(1.04); color: var(--crema); }

/* Rust on rust is invisible. Any --clockwork or --media band takes this. */
.btn-primary--invert {
  background-color: var(--crema);
  color: var(--clockwork);
  border-color: var(--crema);
}

.btn-primary--invert:hover { color: var(--clockwork); }

.btn-ghost {
  display: inline-block;
  background-color: transparent;
  color: var(--media);
  padding: 12px 28px;
  font-size: var(--fs-body);
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  letter-spacing: 0.01em;
  border-radius: 100px;
  border: 1px solid var(--media);
  transition: background 0.2s, color 0.2s;
}

.btn-ghost:hover { background: var(--media); color: var(--crema); }

.page-hero p.lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--grey-500);
  margin-bottom: 24px;
}

/* ============================================================
   FAQ accordion (every page has a FAQ section)
   ============================================================ */
.faq {
  padding: var(--band-2xl) var(--pad-x);
  background: var(--crema);
}

.faq__inner {
  max-width: var(--read-max);
  margin: 0 auto;
}

.faq__heading {
  font-size: var(--fs-h1);
  color: var(--clockwork);
  margin-bottom: 28px;
}

.faq__item {
  border-top: 1px solid var(--grey-200);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--grey-200);
}

.faq__item details {
  padding: 18px 4px;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-family: 'F37 Bobby', Georgia, serif;
  font-size: var(--fs-h3);
  color: var(--clockwork);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-family: 'DM Sans', sans-serif;
  color: var(--clockwork);
  font-size: 1.5rem;
  transition: transform 0.2s;
}

.faq__item details[open] summary::after { content: "−"; }

.faq__item details > div {
  padding-top: 12px;
  color: var(--clockwork);
  line-height: 1.7;
}

.service-cta-band .btn-primary {
  background: var(--crema);
  color: var(--clockwork);
  border-color: var(--crema);
}

.service-cta-band .btn-primary:hover { color: var(--clockwork); }

.footer-col a.is-disabled { opacity: 0.45; filter: blur(1.2px); cursor: default; pointer-events: none; }

@media (min-width: 768px) and (max-width: 1024px) {
  :root { --pad-x: 32px; }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; }
  .page-hero p.lede { font-size: 1rem; }
  .section { padding: var(--band-xl) var(--pad-x); }
  .faq__heading { font-size: var(--fs-h2); }
}

@media (hover: none) {
  .nav-cta:hover,
  .btn-primary:hover,
  .footer-cta-btn:hover { transform: none; }
}

/* ============================================================
   EXTENDED SECTION LIBRARY
   Reusable section variants. Every class here is demonstrated
   in site/_wip/components.html. Color variants follow the rule:
   crema surface = clockwork headings, dark surface = crema headings.
   ============================================================ */

.split-hero p.lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--grey-500);
  margin-bottom: 28px;
}

.split-hero--media p.lede { color: rgba(var(--crema-rgb), 0.7); }

.stat-hero p.lede {
  color: rgba(var(--crema-rgb), 0.7);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 620px;
}

@media (max-width: 767px) {
  .model { padding: var(--band-sm) var(--pad-x); }
}

@keyframes od-flow { to { stroke-dashoffset: -16; } }

@keyframes od-fade { to { opacity: 1; } }

@keyframes od-ring { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }

@keyframes od-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* Right and bottom stops stay off the edge: each cursor now carries a
   tag beside it, so the travel has to leave room for the label. */
@keyframes odd-cur-a {
  0%, 6%    { left: 14%; top: 62%; }
  22%, 30%  { left: 42%; top: 34%; }
  48%, 56%  { left: 66%; top: 54%; }
  74%, 82%  { left: 26%; top: 74%; }
  100%      { left: 14%; top: 62%; }
}

@keyframes odd-cur-b {
  0%, 8%    { left: 64%; top: 26%; }
  26%, 34%  { left: 46%; top: 66%; }
  54%, 62%  { left: 20%; top: 42%; }
  82%, 90%  { left: 70%; top: 60%; }
  100%      { left: 64%; top: 26%; }
}

@keyframes odd-cur-c {
  0%, 7%    { left: 38%; top: 74%; }
  28%, 36%  { left: 68%; top: 42%; }
  58%, 66%  { left: 30%; top: 28%; }
  86%, 93%  { left: 54%; top: 58%; }
  100%      { left: 38%; top: 74%; }
}

/* ============================================================
   FAQ cards — the homepage FAQ component, ported here so other
   pages can run the same format. Every card sits closed at
   --faq-card-h and opens to --faq-card-h-open on hover, focus, or
   tap. The track reserves the open height, so nothing reflows.
   ============================================================ */
.faq-section {
  background-color: var(--crema);
  padding: var(--band) var(--pad-x);
  overflow: visible;
  --faq-card-h: 256px;
  --faq-card-h-open: 512px;
}

.faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  position: relative;
  z-index: 3;
}

.faq-header h2 {
  font-size: var(--fs-h1);
  font-weight: 300;
  color: var(--clockwork);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.faq-track-wrap {
  position: relative;
  height: var(--faq-card-h-open);
  z-index: 2;
  display: flex;
  align-items: center;
  overflow-y: visible;
}

.faq-nav { display: flex; gap: 8px; }

.faq-nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--clockwork);
  background: transparent;
  color: var(--clockwork);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  font-size: var(--fs-body);
}

.faq-nav button:hover:not(.disabled) {
  background-color: var(--clockwork);
  border-color: var(--clockwork);
  color: var(--crema);
  transform: scale(1.05);
}

.faq-nav button.disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.faq-track {
  display: flex;
  gap: 12px;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.faq-card {
  flex: 0 0 calc((100% - 4 * 12px) / 5.35);
  height: var(--faq-card-h);
  background-color: var(--clockwork);
  border-radius: 14px;
  padding: 28px 22px 22px;
  color: var(--crema);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* The card is its own query container. The track hands it 160px at
     1025px and 283px at 1680px, so the copy has to size off the card
     rather than the viewport. */
  container-type: inline-size;
}

/* Clips itself rather than pushing the tag row out through the bottom
   edge, if copy ever outgrows the card again. */
.faq-card__q { margin-bottom: 0; overflow: hidden; }

.faq-card__q-label {
  font-family: 'F37 Bobby', 'Georgia', serif;
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}

.faq-card__q-text {
  font-family: 'F37 Bobby', 'Georgia', serif;
  /* 15px in the narrowest card, --fs-h3 once the card clears 224px of
     copy width. Held at 22px it ran to five lines in a 160px card. */
  font-size: clamp(0.9375rem, 9.8cqi, var(--fs-h3));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.faq-card__divider {
  width: 100%;
  height: 1px;
  background-color: rgba(var(--crema-rgb), 0.15);
  margin: 12px 0 0;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.faq-card__a-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-card__a-label {
  font-family: 'F37 Bobby', 'Georgia', serif;
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.faq-card__a-text {
  /* Scales with the card on the same principle as the question, so the
     open answer still lands inside --faq-card-h-open. */
  font-size: clamp(0.875rem, 7.2cqi, var(--fs-body));
  line-height: 1.5;
  font-family: 'DM Sans', sans-serif;
  color: rgba(var(--crema-rgb), 0.85);
}

.faq-card__bottom {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-card__tag {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--crema-rgb), 0.5);
  background: rgba(var(--crema-rgb), 0.08);
  padding: 3px 10px;
  border-radius: 100px;
}

.faq-card__num {
  font-family: 'F37 Bobby', 'Georgia', serif;
  font-size: var(--fs-body);
  opacity: 0.3;
}

@media (max-width: 1024px) {
  .faq-card { flex: 0 0 calc((100% - 2 * 12px) / 3.35); }
}

@media (max-width: 767px) {
  .faq-section { padding: var(--band-sm) var(--pad-x); }
  .faq-header h2 { font-size: var(--fs-h2); }
  .faq-track-wrap { height: auto; min-height: auto; overflow: visible; display: flex; align-items: stretch; }
  .faq-track {
    flex-direction: row; gap: 10px; transform: none !important; transition: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x mandatory; padding: 4px 0 16px;
  }
  .faq-track::-webkit-scrollbar { display: none; }
  .faq-card { flex: 0 0 100%; height: auto; min-height: auto; scroll-snap-align: start; }
  .faq-nav { display: none; }
}

/* ---- Entry motion. Columns cascade in behind the panel crossfade,
        on the site's standard 0.16,1,0.3,1 curve. Driven by an
        animation, not a transition, so dropping .active leaves the
        outgoing board fully painted while it fades. ---- */
@keyframes ucColRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ucFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Entry motion. Steps cascade, then the feed fills in message by
      message, so the thread reads as it arrives. ── */
@keyframes hiwRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hoRing { 0% { transform: scale(0.92); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }

/* One relay pulse per route, eased, dwelling at each node */
@keyframes mdPipe4 {
  0% { left: 8%; top: 44%; opacity: 0; }
  7% { opacity: 1; }
  20% { left: 36%; top: 44%; }
  30% { left: 36%; top: 44%; }
  50% { left: 68%; top: 44%; }
  60% { left: 68%; top: 44%; }
  78% { left: 92%; top: 44%; opacity: 1; }
  84%, 100% { left: 92%; top: 44%; opacity: 0; }
}

@keyframes stackPan {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pillsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes chatType {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2.5px); }
}

@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@keyframes waveBob { 0%, 100% { height: 22%; } 50% { height: 100%; } }

@keyframes txIn   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@keyframes taskIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }