/* Shared alignment and "this is clickable" cues. Loaded last on every page so it wins over page CSS. */

:root {
  --page-max: 1296px;
  --gutter: clamp(20px, 5vw, 72px);
  --edge: max(var(--gutter), calc((100vw - var(--page-max)) / 2));
}

/* ── One left edge for nav, hero, sections and footer ───────── */

#mainNav { padding-inline: var(--edge); }
.nav-links > li:last-child { right: var(--edge); }

.hero,
section,
.service-page main > section,
.about-page main > section {
  padding-inline: var(--edge);
}

.content-hero { padding-inline: var(--edge); }
.content-shell { width: 100%; margin-inline: 0; }
.content-shell.article-layout { padding-inline: var(--edge); }

section:not(.hero) > * { width: 100%; max-width: none; margin-inline: 0; }
section:not(.hero) > .truth-strip p,
.truth-strip > * { margin-inline: auto; }
.truth-strip > * { max-width: 1050px; }

/* Keep readable measure on text-heavy blocks, but anchored to the shared left edge. */
.direct-process,
.direct-heading,
.article-body,
.sec-intro { margin-inline: 0; }

footer { padding-inline: var(--edge); }
.footer-brand,
.footer-cols,
.footer-base { width: 100%; margin-inline: 0; }

@media (min-width: 1101px) {
  footer { padding-inline: var(--edge); }
}

@media (max-width: 720px) {
  #mainNav, .hero, section, footer, .content-hero { padding-inline: 20px; }
}

/* ── Navigation ─────────────────────────────────────────────── */

.nav-logo { transition: opacity 0.2s; }
.nav-logo:hover { opacity: 0.7; }

@media (min-width: 1101px) {
  .nav-links a:not(.nav-cta) {
    position: relative;
    color: var(--ink);
  }
  .nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: var(--forest-mid);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
  }
  .nav-links a:not(.nav-cta):hover::after,
  .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
}
.nav-links a:not(.nav-cta):hover,
.nav-links a[aria-current="page"] { color: var(--forest-mid); }

.nav-cta,
.btn-solid,
.btn-ghost,
.form-submit { cursor: pointer; }

.btn-ghost { border-color: var(--forest-mid); color: var(--forest-mid); }
.btn-ghost:hover { background: var(--forest-soft); }

.btn-solid:not(.btn-primary):not(.tier-cta)::after,
.nav-cta::after { content: none; }

.btn-solid:active, .btn-ghost:active, .nav-cta:active { transform: translateY(0); }

/* ── Text links ─────────────────────────────────────────────── */

.text-link,
.resource-more a,
.sec-more a,
.problem-ledger a,
.proof-card a,
.content-cta > a:last-child:not(.btn-solid),
.hero-pricehint a,
.breadcrumb a,
.article-body a,
.cap-item p a,
.footer-brand a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.sec-more a,
.cap-item p a,
.footer-brand a { border-bottom: 0; padding-bottom: 0; }

.text-link,
.sec-more a,
.problem-ledger a,
.proof-card a { color: var(--forest-mid); }

.text-link:hover,
.resource-more a:hover,
.sec-more a:hover,
.problem-ledger a:hover,
.proof-card a:hover,
.article-body a:hover,
.breadcrumb a:hover,
.cap-item p a:hover { color: var(--forest); text-decoration-thickness: 2.5px; }

.text-link::after,
.problem-ledger a::after,
.proof-card a::after { content: "\2192"; display: inline-block; margin-left: 6px; text-decoration: none; transition: transform 0.2s; }
.text-link:hover::after,
.problem-ledger a:hover::after,
.proof-card a:hover::after { transform: translateX(3px); }

.footer-cols a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.footer-cols a:hover { text-decoration-color: currentColor; }
.footer-brand a:hover { text-decoration-color: currentColor; }

/* ── Whole-card links ───────────────────────────────────────── */

.offer-step,
.related-service-link,
.service-resource-link,
.resource-card,
.service-card,
.card,
.cap-item { cursor: pointer; }

/* Arrow on every row-style link so it reads as a destination, not a label. */
.offer-step h3,
.related-service-link h3,
.service-resource-link h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.offer-step h3::after,
.related-service-link h3::after,
.service-resource-link h3::after {
  content: "\2192";
  margin-left: auto;
  color: var(--forest-mid);
  font-family: var(--sans);
  font-weight: 600;
  transition: transform 0.2s;
}
.offer-step:hover h3::after,
.related-service-link:hover h3::after,
.service-resource-link:hover h3::after { transform: translateX(4px); }

.offer-step { padding-inline: 14px; margin-inline: -14px; border-radius: var(--radius); transition: background 0.2s; }
.offer-step:hover h3,
.related-service-link:hover h3,
.service-resource-link:hover h3 { color: var(--forest-mid); }

.related-service-link,
.service-resource-link { padding-inline: 14px; margin-inline: -14px; transition: background 0.2s; }
.related-service-link:hover,
.service-resource-link:hover { background: var(--forest-soft); }
.related-service-link:hover h3,
.service-resource-link:hover h3 { text-decoration: none; }

.resource-card { transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s; }
.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.resource-card strong::after,
.service-card-more span { transition: transform 0.2s; }
.resource-card strong::after { content: " \2192"; display: inline-block; }
.resource-card:hover strong::after { transform: translateX(4px); }
.resource-card:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.service-card:hover .service-card-more { text-decoration: underline; text-underline-offset: 4px; }
.service-card:hover .service-card-more span { transform: translateX(4px); display: inline-block; }

.card-link { border-bottom: 1.5px solid currentColor; }
.card:hover .card-link span { transform: translate(2px, -2px); }

/* ── Focus ──────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 3px; border-radius: 2px; }

@media (hover: none) {
  .offer-step:hover, .related-service-link:hover, .service-resource-link:hover { background: transparent; }
}

@media (max-width: 1100px) {
  .nav-links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--forest-mid); background: var(--forest-soft); }
  .nav-links a:not(.nav-cta):hover { background: var(--forest-soft); }
}

@media (max-width: 720px) {
  .offer-step,
  .related-service-link,
  .service-resource-link { margin-inline: 0; padding-inline: 0; }
}

/* ── Orange = "this goes somewhere" ─────────────────────────── */

:root { --signal-dark: #C94520; }

/* Homepage service rows become visible cards with an orange arrow button. */
.offer-path { gap: 14px 20px; }
.offer-step {
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  margin-inline: 0;
  padding: 18px 18px 18px 20px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.offer-step:hover {
  background: var(--white);
  border-color: var(--signal);
  box-shadow: 0 10px 28px rgba(228, 87, 46, 0.12);
  transform: translateY(-2px);
}
.offer-step h3::after { content: none; }
.offer-step::after {
  content: "\2192";
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
  transition: transform 0.2s, background 0.2s;
}
.offer-step:hover::after { background: var(--signal-dark); transform: translateX(3px); }
.offer-step:hover h3 { color: var(--signal-dark); }

/* Row links elsewhere: orange arrows and hover. */
.related-service-link h3::after,
.service-resource-link h3::after { color: var(--signal); }
.related-service-link:hover h3,
.service-resource-link:hover h3 { color: var(--signal-dark); }
.related-service-link:hover,
.service-resource-link:hover { background: rgba(228, 87, 46, 0.06); }

/* Text links and card links. */
.text-link,
.sec-more a,
.problem-ledger a,
.proof-card a,
.resource-more a,
.resource-card strong,
.card-link,
.service-card-more,
.content-cta > a:last-child:not(.btn-solid) { color: var(--signal-dark); }
.text-link:hover,
.sec-more a:hover,
.problem-ledger a:hover,
.proof-card a:hover,
.resource-more a:hover { color: var(--signal-dark); }
.card-link { border-bottom-color: var(--signal); }
.resource-card:hover,
.service-card:hover,
.card:hover { border-color: var(--signal); }
.resource-card:hover { background: var(--white); }
.nav-links a:not(.nav-cta)::after { background: var(--signal); }

@media (max-width: 720px) {
  .offer-step { padding: 16px; margin-inline: 0; }
}

/* ── Mobile: thumb-sized targets, no iOS input zoom, readable small print ── */

@media (max-width: 720px) {
  .card-link,
  .breadcrumb a,
  .article-body a,
  .footer-brand a { display: inline-flex; align-items: center; min-height: 44px; }
  .article-body p a,
  .article-body li a { display: inline; min-height: 0; }

  .nav-logo { display: inline-block; padding-block: 10px; }

  input, select, textarea { font-size: 16px !important; }

  .audit-badge,
  .service-card-price,
  .tier-unit,
  .tier-badge { font-size: 0.75rem; }

  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-solid,
  .hero-ctas .btn-ghost { width: 100%; }
}

/* Touch has no hover: give a pressed state instead of sticky lifted cards. */
@media (hover: none) {
  .offer-step:hover, .service-card:hover, .resource-card:hover, .card:hover { transform: none; box-shadow: none; }
  .offer-step:active, .service-card:active, .resource-card:active, .card:active,
  .related-service-link:active, .service-resource-link:active { border-color: var(--signal); background: rgba(228, 87, 46, 0.06); }
  .btn-solid:active, .nav-cta:active { filter: brightness(0.92); }
}

/* The dropdown menu is absolutely positioned inside the nav grid; span the whole nav so it fills the screen width. */
@media (max-width: 1100px) {
  .nav-links { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: auto; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); background: var(--canvas); }
  .nav-links .nav-cta { white-space: nowrap; }
}

/* ── Sticky mobile CTA (added by script.js) ─────────────────── */

.sticky-cta { display: none; }

@media (max-width: 720px) {
  .sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 8px 8px 8px 18px;
    background: var(--signal);
    color: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(22, 22, 20, 0.28);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s, opacity 0.25s;
  }
  .sticky-cta-arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    color: var(--signal-dark);
  }
  .sticky-cta:active { filter: brightness(0.92); }
  .sticky-cta.is-hidden,
  body.nav-open .sticky-cta { transform: translateY(140%); opacity: 0; pointer-events: none; }
  body { padding-bottom: 76px; }
  footer { margin-bottom: -76px; padding-bottom: 76px; }
}

/* ── Cookie banner ──────────────────────────────────────────── */

.cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
  width: min(560px, calc(100vw - 32px));
  padding: 16px 18px;
  background: var(--forest);
  color: var(--white);
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(22, 22, 20, 0.35);
  font-size: 0.84rem;
  line-height: 1.5;
}
.cookie-banner p { flex: 1 1 260px; }
.cookie-banner a { color: #CDE9D8; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: 10px; flex: 1 1 auto; justify-content: flex-end; }
.cookie-accept,
.cookie-decline {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font: 600 0.8rem var(--sans);
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: var(--white);
}
.cookie-accept { background: var(--signal); border-color: var(--signal); }
.cookie-accept:hover { background: var(--signal-dark); border-color: var(--signal-dark); }
.cookie-decline:hover { background: rgba(255, 255, 255, 0.12); }
.cookie-banner button:focus-visible { outline-color: var(--white); }

.cookie-settings {
  padding: 8px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.cookie-settings:hover { color: var(--white); }

@media (max-width: 720px) {
  .cookie-banner { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .cookie-actions > button { flex: 1; }
  /* the sticky audit button steps aside while the banner is up */
  body.has-cookie-banner .sticky-cta { transform: translateY(140%); opacity: 0; pointer-events: none; }
}