/* bywill.ai v6 (2 Nov 2026): prototype CTA, Journal section, tools logo sizing. Loads after r9.css. */

/* ---------- hero: single primary CTA + quiet secondary line ---------- */
.hero-secondary {
  align-items: center; color: var(--deep-green); display: inline-flex; font-size: .92rem; font-weight: 700; gap: .4rem;
  letter-spacing: -.01em; margin-top: 1rem; text-decoration: none; text-underline-offset: 4px;
}
.hero-secondary:hover, .hero-secondary:focus-visible { text-decoration: underline; }
.hero-secondary .icon { margin: 0; transition: transform 200ms ease; }
.hero-secondary:hover .icon { transform: translateX(3px); }

/* ---------- header CTA: longer label, keep it on one line ---------- */
.header-cta { white-space: nowrap; }

/* ---------- section 09: static prototype card (replaces the diagnostic form) ---------- */
.dx-proto .dx-card { min-height: 0; }
.dx-proto .dx-btn { text-decoration: none; }
.dx-proto .dx-btn .icon { margin: 0; }

/* ---------- tools: full-colour logos match the mask logos on mobile ---------- */
@media (max-width: 720px) {
  .tool-logo-img img { height: 20px; width: 20px; }
}

/* ---------- Latest from the Journal ---------- */
.journal { background: #fff; border-top: 1px solid var(--line); }
.journal-head { align-items: end; display: grid; gap: 1rem 6vw; grid-template-columns: 2fr 1fr; }
.journal-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.journal-head h2 { font-size: clamp(3rem, 5.6vw, 6.2rem); font-weight: 650; letter-spacing: -.075em; line-height: .89; margin: 0; }
.journal-head h2 em { color: var(--deep-green); font-family: Georgia, serif; font-weight: 400; }
.journal-head > p:last-child { color: #55554f; line-height: 1.65; margin: 0; max-width: 440px; }

.journal-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: clamp(2.8rem, 5vw, 4.5rem); }
.journal-card { margin: 0; min-width: 0; }
.journal-card > a { color: var(--ink); display: grid; gap: 1.3rem; text-decoration: none; }
.journal-cover { aspect-ratio: 16 / 9; background: var(--paper); border-radius: 14px; display: block; overflow: hidden; }
.journal-cover img { display: block; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1); width: 100%; }
.journal-body { display: grid; gap: .5rem; max-width: 34rem; }
.journal-meta { color: #6d6d66; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.journal-meta i { font-style: normal; margin: 0 .25rem; }
.journal-card h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.08; margin: .1rem 0 0; transition: color 200ms ease; }
.journal-sub { color: var(--deep-green); font-family: Georgia, serif; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-style: italic; line-height: 1.35; }
.journal-more { border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 800; justify-self: start; letter-spacing: .1em; margin-top: .6rem; padding-bottom: .2rem; text-transform: uppercase; }
.journal-card > a:hover .journal-cover img, .journal-card > a:focus-visible .journal-cover img { transform: scale(1.03); }
.journal-card > a:hover h3, .journal-card > a:focus-visible h3 { color: var(--deep-green); }
.journal-card > a:focus-visible { outline: 2px solid var(--deep-green); outline-offset: 6px; border-radius: 14px; }
.journal-foot { margin-top: clamp(2.6rem, 5vw, 4rem); }

@media (max-width: 900px) {
  .journal-head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .journal-head h2 { font-size: clamp(2.8rem, 12vw, 3.6rem); }
  .journal-grid { gap: 2.4rem; grid-template-columns: 1fr; }
  .journal-card > a { gap: 1rem; }
  .journal-foot .button { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-cover img, .journal-card h3, .hero-secondary .icon { transition: none; }
  .journal-card > a:hover .journal-cover img, .hero-secondary:hover .icon { transform: none; }
}

/* ---------- r13 client logos: "Trusted by" conveyor belt (r14: directly under Four ways to optimise, before Consulting) ----------
   r15: only a small "Trusted by" heading + the belt, no rules/lines. Pure CSS loop (two identical sets, rail moves -50%),
   always running: no hover/focus pause, no JS start, keeps moving with reduced motion (slower). Fixed row height = no CLS. */
.clients-ticker {
  background: transparent; border: 0; margin: 0 auto; max-width: none;
  overflow: hidden; padding: 26px 0 18px; position: relative; text-align: center;
}
.ct-label {
  color: #4d5a45; font: 600 .74rem/1.3 "Work Sans", Arial, sans-serif; letter-spacing: .14em; margin: 0 auto 6px;
  padding: 0 1rem; text-transform: uppercase;
}
.ct-window {
  height: 76px; margin: 0 auto; max-width: 1280px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ct-rail { animation: ct-scroll 60s linear infinite; animation-play-state: running !important; display: flex; height: 100%; width: max-content; will-change: transform; }
.ct-set { align-items: center; display: flex; flex: none; gap: 3.6rem; list-style: none; margin: 0; padding: 0 3.6rem 0 0; }
.ct-set li { align-items: center; display: flex; flex: none; height: 76px; justify-content: center; }
.ct-set img {
  display: block; filter: grayscale(1) contrast(1.05); height: 36px; max-width: 150px; object-fit: contain; opacity: .62; width: auto;
  mix-blend-mode: multiply; transition: filter 250ms ease, opacity 250ms ease;
}
.ct-set .ct-tall img { height: 46px; }
.ct-set .ct-wide img { height: 28px; max-width: 180px; }
/* Low-res source files: cap so they never upscale past ~2x their pixels (no blur). */
.ct-set .ct-lr-afl img { height: 32px; }
.ct-set .ct-lr-gordon img { height: 42px; }
.ct-set .ct-lr-ptc img { height: 34px; }
.ct-set li:hover img { filter: none; opacity: 1; }

@keyframes ct-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 720px) {
  .clients-ticker { padding: 20px 0 12px; }
  .ct-label { font-size: .66rem; letter-spacing: .12em; }
  .ct-window { height: 60px; }
  .ct-set { gap: 2.4rem; padding-right: 2.4rem; }
  .ct-set li { height: 60px; }
  .ct-set img { height: 28px; max-width: 118px; }
  .ct-set .ct-tall img { height: 36px; }
  .ct-set .ct-wide img { height: 21px; max-width: 136px; }
  .ct-set .ct-lr-afl img { height: 26px; }
  .ct-set .ct-lr-gordon img { height: 34px; }
  .ct-set .ct-lr-ptc img { height: 28px; }
  .ct-rail { animation-duration: 45s; }
}

/* Reduced motion: still a moving belt (Will asked for it), at a calmer pace, no hover transitions. */
@media (prefers-reduced-motion: reduce) {
  .ct-rail { animation: ct-scroll 110s linear infinite !important; animation-play-state: running; }
    .ct-set img { transition: none; }
}

/* r11: Consulting placeholder (#consulting). Cal.com embed will replace .consult-side contents later. */
.consulting { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.consult-box {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: center;
  border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.6rem, 4vw, 3.2rem); background: var(--paper);
}
.consult-copy h2 { margin: 1rem 0 1.1rem; }
.consult-copy p:last-child { max-width: 38rem; margin: 0; }
.consult-side { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; border-left: 1px solid var(--line); padding-left: clamp(1.4rem, 3vw, 2.6rem); }
.consult-price { margin: 0; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.consult-price strong { font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
.consult-price span { font-size: .85rem; font-weight: 700; opacity: .7; }
.button.consult-soon { width: auto; border: 1px dashed rgba(15, 15, 15, .4); background: transparent; color: var(--ink); opacity: .75; cursor: not-allowed; }
.consult-note { margin: 0; font-size: .8rem; opacity: .65; }
@media (max-width: 820px) {
  .consult-box { grid-template-columns: 1fr; }
  .consult-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.4rem; }
}
.consult-copy h2 { font-family: "Archivo", "Work Sans", system-ui, sans-serif; font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }