/* Zavenor — site styles */

/* Warm Swiss Operator design tokens (page-level visual system) */
:root {
    --bg: #F4F0E6;
    --surface: #FBF8F0;
    --footer-bg: #0F1D2E;

    --text: #14181C;
    --text-2: #2A2F36;
    --text-mute: #6A6E6A;
    --footer-text: #F4F0E6;
    --footer-mute: #8A98AD;

    --border: #D8D2C2;
    --border-strong: #14181C;

    --accent: #A8472D;
    --accent-soft: #D3C4A3;

    --btn-primary-bg: #14181C;
    --btn-primary-fg: #F4F0E6;
    --btn-primary-hover: #A8472D;
    --btn-secondary-border: #14181C;

    --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --fs-display: clamp(40px, 6vw, 72px);
    --fs-h2: clamp(28px, 3.6vw, 40px);
    --fs-h3: clamp(20px, 2vw, 22px);
    --fs-body: 16px;
    --fs-small: 13.5px;
    --fs-label: 11px;

    --lh-display: 1.02;
    --lh-h2: 1.05;
    --lh-h3: 1.2;
    --lh-body: 1.6;
    --lh-label: 1;
}

/* Legacy accent variables — re-pointed to the warm operator palette so existing
   .text-avenor-accent / .badge-hero / .marker-avenor-accent / .nav-link / .card-top-accent
   etc. inherit the new accent without rewriting templates. */
:root {
    --avenor-accent: var(--accent);
    --avenor-accent-ink: var(--text);
    --avenor-accent-hover: var(--btn-primary-hover);
    --avenor-accent-faint: var(--surface);
    --avenor-accent-border: var(--border);
    --avenor-accent-on-dark: var(--footer-mute);

    /* Shared layout rhythm (zv) — aligns section padding, grids, surfaces */
    --zv-border-soft: rgb(241 245 249);
    --zv-border-main: rgb(226 232 240);
    --zv-muted-panel: rgb(249 250 251);
    --zv-muted-panel-a: rgba(249, 250, 251, 0.85);
    --zv-radius-xl: 1rem;
    --zv-radius-lg: 0.75rem;
    --zv-shadow-surface: 0 1px 2px rgba(15, 23, 42, 0.05);
    --zv-shadow-surface-sm: 0 1px 3px rgba(15, 23, 42, 0.06);

    --zv-py-section: 2.5rem;
    --zv-py-section-lg: 3rem;
    --zv-py-compact: 2rem;
    --zv-py-compact-lg: 2.5rem;
    --zv-py-hero: 3rem;
    --zv-py-hero-lg: 4rem;
}

.text-avenor-accent {
    color: var(--avenor-accent-ink);
}

.bg-avenor-accent-faint {
    background-color: var(--avenor-accent-faint);
}

.border-avenor-accent {
    border-color: var(--avenor-accent);
}

/* Eyebrow / kicker labels (uppercase micro-type) */
.text-eyebrow {
    color: var(--avenor-accent-ink);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Hero pill: soft tint, accent text */
.badge-hero {
    background-color: var(--avenor-accent-faint);
    color: var(--avenor-accent-ink);
    border: 1px solid var(--avenor-accent-border);
}

/* Contact form honeypot: off-screen, zero layout impact; keep name=fax_number */
.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.contact-honeypot input {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
}

/* Screen reader only — minimal Tailwind build may omit .sr-only from utility CSS */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reserve space when fixed bottom lead bar is shown (marketing pages only).
   Bar stacks on narrow screens (copy + full-width CTA); pad generously so content/footer stay clear. */
.lead-bar-main-clearance {
  padding-bottom: calc(11.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
  .lead-bar-main-clearance {
    padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
  }
}
footer.lead-bar-footer-clearance {
  padding-bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
  footer.lead-bar-footer-clearance {
    padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Demo templates: unified post-sample background + primary CTA row */
.demo-post-sample-zone {
  padding-top: var(--zv-py-section);
  padding-bottom: var(--zv-py-section);
  border-top: 1px solid var(--zv-border-soft);
  border-bottom: 1px solid var(--zv-border-soft);
  background-color: var(--zv-muted-panel-a);
}
@media (min-width: 640px) {
  .demo-post-sample-zone {
    padding-top: var(--zv-py-section-lg);
    padding-bottom: var(--zv-py-section-lg);
  }
}
.demo-final-actions {
  padding-top: var(--zv-py-section);
  padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
  border-top: 1px solid var(--zv-border-soft);
  background-color: #fff;
}
.demo-final-actions__inner {
  box-sizing: border-box;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: stretch;
}
@media (min-width: 640px) {
  .demo-final-actions__inner {
    flex-direction: row;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Impressum: draft / TODO regulatory block — must not read as finalized legal disclosure */
.legal-impressum-todo-panel {
  border-radius: 0.75rem;
  border: 1px solid rgba(217, 119, 6, 0.7);
  background-color: #fffbeb;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.18), 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 1rem 1.25rem;
}
@media (min-width: 640px) {
  .legal-impressum-todo-panel {
    padding: 1.25rem 1.5rem;
  }
}
.legal-impressum-todo-banner {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c2d12;
  margin-bottom: 0.75rem;
}
.legal-impressum-todo-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New,
    monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #1c1917;
}

/* Inline links (e.g. privacy near forms) */
.link-avenor-accent {
    color: var(--avenor-accent-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.link-avenor-accent:hover {
    color: var(--avenor-accent-hover);
}

/* Language switch: active locale */
.lang-active {
    color: var(--avenor-accent-ink);
    font-weight: 600;
}

.lang-inactive:hover {
    color: var(--avenor-accent-ink);
}

/* Fit list bullets / small markers */
.marker-avenor-accent {
    background-color: var(--avenor-accent);
}

/* Subtle top rule on stacked cards / callouts */
.card-top-accent {
    border-top: 2px solid var(--avenor-accent-border);
}

/* Hero secondary — alias of .btn-secondary for legacy templates */
.btn-hero-secondary {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    background-color: transparent;
    color: var(--avenor-accent-ink);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--avenor-accent-border);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.zv-home-hero {
  text-align: left;
}

[data-section="home-hero"] {
  position: relative;
}

/* Home hero: structured, less "poster centered" on desktop */
@media (min-width: 1024px) {
  [data-section="home-hero"].zv-section--hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .zv-home-hero {
    max-width: 64rem;
  }

  .zv-home-hero .zv-display-hero {
    max-width: 22ch;
  }

  .zv-home-hero .zv-intro-lead,
  .zv-home-hero .zv-micro {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 62ch;
  }

  .zv-home-hero .zv-intro-lead {
    margin-top: 0.85rem;
  }

  .zv-home-hero .zv-micro {
    text-align: left;
    margin-top: 0.85rem;
  }

  .zv-home-hero .zv-cta-row {
    justify-content: flex-start;
    margin-top: 1.75rem;
  }
}

/* Home hero: subtle structure (hairline + calm grid) */
@media (min-width: 1024px) {
  [data-section="home-hero"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(20, 24, 28, 0.04) 0, rgba(20, 24, 28, 0.04) 1px, transparent 1px) 72% 0 / 1px 100% no-repeat,
      linear-gradient(0deg, rgba(20, 24, 28, 0.018) 0, rgba(20, 24, 28, 0.018) 1px, transparent 1px) 0 0 / 100% 56px repeat;
    opacity: 0.25;
  }
}

/* Home: section rhythm + structural separation (avoid "floating cards" feeling) */
[data-section^="home-"].zv-section {
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}

/* Home sections: small spacing normalization (avoid awkward gaps) */
[data-section="home-why"].zv-section,
[data-section="home-work"].zv-section,
[data-section="home-services"].zv-section,
[data-section="home-projects-pricing"].zv-section,
[data-section="home-how-project"].zv-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
  [data-section="home-why"].zv-section,
  [data-section="home-work"].zv-section,
  [data-section="home-services"].zv-section,
  [data-section="home-projects-pricing"].zv-section,
  [data-section="home-how-project"].zv-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

[data-section="home-why"] {
  background-color: transparent !important;
}

[data-section="home-services"].bg-slate-50,
[data-section="home-how-project"].bg-slate-50,
[data-section="home-closing"].zv-bg-muted {
  background-color: rgba(251, 248, 240, 0.55) !important;
}

/* Work cards: more structured labels + clearer separation + tighter actions */
[data-section="home-work"] .zv-surface-muted {
  background-color: var(--surface);
}

[data-section="home-work"] .text-eyebrow {
  display: inline-block;
  padding: 0 0 0.2rem 0;
  border: 0;
  border-bottom: 1px solid rgba(216, 210, 194, 0.75);
  border-radius: 0;
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

[data-section="home-work"] p.text-slate-600.text-sm {
  margin-top: 0.35rem;
}

[data-section="home-work"] p.text-slate-600.text-sm span.text-eyebrow {
  padding: 0;
  border: 0;
  border-bottom: 0;
  font-weight: 600;
  background: transparent;
}

[data-section="home-work"] p.text-slate-600.text-sm + p.text-slate-600.text-sm {
  padding-top: 0.65rem;
  margin-top: 0.65rem;
  border-top: 1px solid var(--border);
}

[data-section="home-work"] .zv-work-card-meta {
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
  align-items: center;
  justify-content: flex-start;
}

[data-section="home-work"] .zv-work-card-meta a {
  min-width: 0;
}

/* Pricing cards (home): more deliberate frame, less generic "card" */
[data-section="home-projects-pricing"] .fit-project-card {
  background: transparent;
  border-color: var(--border-strong);
}

[data-section="home-projects-pricing"] .fit-project-card + .fit-project-card {
  border-top: 0;
}

[data-section="home-projects-pricing"] .fit-project-cards {
  gap: 0;
}

[data-section="home-projects-pricing"] .fit-project-card {
  border-radius: 0;
}

[data-section="home-projects-pricing"] .fit-project-card:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

[data-section="home-projects-pricing"] .fit-project-card:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.btn-hero-secondary:hover {
    background-color: var(--avenor-accent-faint);
    border-color: var(--avenor-accent);
    color: var(--avenor-accent-ink);
    transform: translateY(-1px);
}

.btn-hero-secondary:focus-visible {
    outline: 2px solid var(--avenor-accent);
    outline-offset: 2px;
}

/* Quiet vertical accent for aside callouts */
.callout-accent-left {
    border-left: 3px solid var(--avenor-accent);
}

/* Lead strip: subtle top accent */
.lead-bar-accent {
    border-top: 1px solid var(--avenor-accent-border);
}

/* Footer links on dark: hover uses muted blue, not loud */
.footer-link:hover {
    color: var(--avenor-accent-on-dark);
}

/* Nav link underline */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--avenor-accent);
    opacity: 0.55;
    transition: width 0.25s ease, opacity 0.25s ease;
}

.nav-link:hover::after {
    width: 100%;
    opacity: 0.85;
}

/* Card hover – subtle elevation */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.1);
}

/* Trust card – soft hover */
.trust-card {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.trust-card:hover {
    background-color: rgba(248, 250, 252, 0.95);
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.06);
}

/* Primary button – deep muted blue, calm hover */
.btn-primary {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    background-color: var(--avenor-accent);
    color: white;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--avenor-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(28, 53, 84, 0.28);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--avenor-accent-ink);
    outline-offset: 2px;
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.btn-primary.text-sm {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

.btn-primary.text-sm:hover {
    transform: translateY(-1px);
}

.btn-secondary.text-sm {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

/* Portfolio card – scale + overlay */
.portfolio-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.portfolio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.1);
}

/* Work / portfolio: equal header bands + abstract pattern previews (no imagery) */
.portfolio-card__header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 11rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgb(226 232 240);
}

.portfolio-card__preview {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem 0.35rem;
    min-height: 6rem;
}

.portfolio-card__eyebrow {
    flex-shrink: 0;
    text-align: center;
    padding: 0 0.75rem 0.875rem;
    margin: 0;
    letter-spacing: 0.06em;
}

.portfolio-card-body {
    padding: 1.125rem 1.25rem 1.25rem;
}

@media (min-width: 640px) {
    .portfolio-card-body {
        padding: 1.25rem 1.25rem 1.25rem;
    }
}

.portfolio-card-meta dl {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.portfolio-card-meta dt {
    margin: 0;
}

.portfolio-card-meta dd {
    margin: 0.15rem 0 0;
    line-height: 1.45;
}

.portfolio-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    margin-top: auto;
    padding-top: 0.875rem;
    align-items: flex-end;
}

/* Offer page — stacked layout strip */
.portfolio-card-preview-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    width: min(100%, 7.5rem);
}

.portfolio-card-preview-offer-bar {
    width: 100%;
    height: 0.3375rem;
    border-radius: 2px;
    background: rgb(100 116 139);
}

.portfolio-card-preview-offer-line {
    height: 0.1875rem;
    border-radius: 9999px;
    background: rgb(203 213 225);
}

.portfolio-card-preview-offer-line--full {
    width: 100%;
}

.portfolio-card-preview-offer-line--mid {
    width: 74%;
}

.portfolio-card-preview-offer-line--short {
    width: 52%;
}

.portfolio-card-preview-offer-cta {
    width: 40%;
    height: 1.125rem;
    margin-top: 0.2rem;
    border-radius: 3px;
    border: 1px solid rgba(47, 86, 130, 0.28);
    background: rgba(47, 86, 130, 0.07);
}

/* Inquiry / booking — calendar chips + fields */
.portfolio-card-preview-booking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-card-preview-booking-cal {
    display: flex;
    gap: 0.22rem;
}

.portfolio-card-preview-booking-cal span {
    display: block;
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 2px;
    background: rgb(226 232 240);
}

.portfolio-card-preview-booking-cal span:nth-child(4),
.portfolio-card-preview-booking-cal span:nth-child(5) {
    background: rgba(47, 86, 130, 0.32);
    box-shadow: 0 0 0 1px rgba(47, 86, 130, 0.25);
}

.portfolio-card-preview-booking-fields {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    width: 5.625rem;
}

.portfolio-card-preview-booking-field {
    height: 0.375rem;
    border-radius: 2px;
    background: rgb(203 213 225);
    width: 100%;
}

.portfolio-card-preview-booking-field--narrow {
    width: 62%;
}

/* Team KPI — mini tiles + spark */
.portfolio-card-preview-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.42rem;
}

.portfolio-card-preview-kpi-row {
    display: flex;
    gap: 0.32rem;
}

.portfolio-card-preview-kpi-mini {
    width: 2.125rem;
    height: 1.6875rem;
    border-radius: 4px;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.portfolio-card-preview-kpi-mini::after {
    content: '';
    position: absolute;
    left: 0.3125rem;
    right: 0.3125rem;
    bottom: 0.375rem;
    height: 0.25rem;
    border-radius: 1px;
    background: rgb(148 163 184);
}

.portfolio-card-preview-kpi-spark {
    display: block;
    width: 4.875rem;
    height: auto;
}

.portfolio-card-preview-kpi-spark path {
    fill: none;
    stroke: rgb(71 85 105);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Inquiry follow-up — slim board columns */
.portfolio-card-preview-board {
    display: flex;
    gap: 0.32rem;
    align-items: stretch;
}

.portfolio-card-preview-board-col {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    width: 1.9375rem;
    min-height: 4.5rem;
    padding: 0.3125rem 0.25rem;
    border-radius: 4px;
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
}

.portfolio-card-preview-board-chip {
    height: 0.5rem;
    border-radius: 2px;
    background: #fff;
    border: 1px solid rgb(226 232 240);
}

/* Portfolio button – brighter on hover */
.btn-portfolio {
    transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.portfolio-card:hover .btn-portfolio {
    background-color: var(--avenor-accent-hover);
    box-shadow: 0 4px 12px -2px rgba(28, 53, 84, 0.22);
}

/* Secondary button – outlined accent */
.btn-secondary {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    background-color: transparent;
    color: var(--avenor-accent-ink);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--avenor-accent-border);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--avenor-accent-faint);
    border-color: var(--avenor-accent);
    color: var(--avenor-accent-ink);
    transform: translateY(-1px);
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--avenor-accent);
    outline-offset: 2px;
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.btn-small {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: var(--avenor-accent);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.btn-small:hover {
    background-color: var(--avenor-accent-hover);
    transform: translateY(-1px);
}

.btn-small:focus-visible {
    outline: 2px solid var(--avenor-accent-ink);
    outline-offset: 2px;
}

.btn-small:disabled,
.btn-small[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* Small outlined CTA (pairs with .btn-small) */
.btn-small-secondary {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: transparent;
    color: var(--avenor-accent-ink);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--avenor-accent-border);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn-small-secondary:hover {
    background-color: var(--avenor-accent-faint);
    border-color: var(--avenor-accent);
    color: var(--avenor-accent-ink);
    transform: translateY(-1px);
}

.btn-small-secondary:focus-visible {
    outline: 2px solid var(--avenor-accent);
    outline-offset: 2px;
}

.btn-small-secondary:disabled,
.btn-small-secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* Demo step numerals / solid accent chips (not primary CTAs; avoids slate-900 pills) */
.bg-accent-solid {
    background-color: var(--avenor-accent);
    color: #fff;
}

/* Booking demo: calendar day chips */
button.day-card:hover:not(.day-card-selected) {
    background-color: var(--avenor-accent-faint);
    border-color: var(--avenor-accent);
    color: var(--avenor-accent-ink);
}

button.day-card:focus-visible {
    outline: 2px solid var(--avenor-accent);
    outline-offset: 2px;
}

.day-card-selected,
.day-card.day-card-selected {
    background-color: var(--avenor-accent) !important;
    color: #fff !important;
    border-color: var(--avenor-accent) !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Ensure main content text is always visible (fallback for Tailwind/CDN issues) */
main {
  color: var(--text);
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: var(--text);
}

main p,
main span,
main li,
main dt,
main dd {
  color: var(--text-2);
}

main .text-gray-600,
main .text-slate-600 {
  color: var(--text-mute) !important;
}

main .text-gray-700,
main .text-slate-700 {
  color: var(--text-2) !important;
}

main .text-gray-500,
main .text-slate-500 {
  color: var(--text-mute) !important;
}

main .text-slate-800 {
  color: var(--text) !important;
}

main .text-slate-900 {
  color: var(--text) !important;
}

main .text-slate-400,
main .text-slate-300 {
  color: var(--text-mute) !important;
}

/* Accent utility colors must win over generic `main span` / `main p` rules */
main .text-eyebrow {
  color: var(--avenor-accent-ink);
}

main .text-avenor-accent {
  color: var(--avenor-accent-ink);
}

main .badge-hero {
  color: var(--avenor-accent-ink);
}

main a.btn-hero-secondary,
main a.btn-secondary,
main a.btn-small-secondary {
  color: var(--avenor-accent-ink);
}

/* --- Accessibility: skip link (visible on keyboard focus) --- */
.skip-to-main {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 100;
}

.skip-to-main:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.625rem 1.25rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 1px solid var(--avenor-accent-border);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--avenor-accent-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
  text-decoration: none;
}

.skip-to-main:focus-visible {
  outline: 2px solid var(--avenor-accent);
  outline-offset: 2px;
}

/* Current page in primary nav */
.nav-link--current {
  color: var(--avenor-accent-ink);
  font-weight: 600;
}

.nav-link--current::after {
  width: 100%;
  opacity: 0.85;
}

/* Keyboard focus: header brand, language switch */
.site-brand-link:focus-visible,
.lang-switch-link:focus-visible {
  outline: 2px solid var(--avenor-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Nav / footer / inline links (focus-visible only; mouse clicks stay calm) */
a.nav-link:focus-visible {
  outline: 2px solid var(--avenor-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

a.footer-link:focus-visible {
  outline: 2px solid var(--avenor-accent-on-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

a.link-avenor-accent:focus-visible {
  outline: 2px solid var(--avenor-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.contact-input-focus:focus-visible {
  outline: 2px solid var(--avenor-accent-ink);
  outline-offset: 2px;
}

.mailto-link:focus-visible {
  outline: 2px solid var(--avenor-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

footer .mailto-link:focus-visible {
  outline-color: var(--avenor-accent-on-dark);
}

/* Contact page: compact trust cards above form */
.contact-trust-cards {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .contact-trust-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.contact-trust-card {
  padding: 1rem 1.125rem;
  border-radius: var(--zv-radius-lg);
  border: 1px solid var(--zv-border-main);
  background-color: #f8fafc;
  text-align: left;
}

.contact-trust-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.35rem 0;
  line-height: 1.35;
}

.contact-trust-card-line {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #475569;
  margin: 0;
}

/* Home: compact project fit / starting-point pricing cards */
.fit-project-cards {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .fit-project-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.fit-project-card {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.125rem;
  border-radius: var(--zv-radius-lg);
  border: 1px solid var(--zv-border-main);
  background-color: #ffffff;
  text-align: left;
  box-shadow: var(--zv-shadow-surface);
}

.fit-project-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.4rem 0;
  line-height: 1.35;
}

.fit-project-card-line {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #475569;
  margin: 0 0 0.65rem 0;
  flex: 1 1 auto;
}

.fit-project-card-price {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.65rem 0;
  line-height: 1.35;
}

.fit-project-card-cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Footer: low-pressure contact micro-line */
.footer-micro-cta {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #94a3b8;
  text-align: center;
  margin: 0 0 1.25rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

@media (min-width: 640px) {
  .footer-micro-cta {
    text-align: left;
  }
}

.footer-micro-cta-link {
  color: #cbd5e1;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, 0.45);
  text-underline-offset: 2px;
}

.footer-micro-cta-link:hover {
  color: #e2e8f0;
  text-decoration-color: rgba(226, 232, 240, 0.7);
}

/* Contact success: numbered next steps */
.success-next-steps {
  margin-top: 2rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.success-next-steps-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  margin: 0 0 1rem 0;
}

.success-next-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.success-next-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background-color: #fff;
}

.success-next-step-num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: var(--avenor-accent-faint);
  color: var(--avenor-accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.success-next-step-body {
  min-width: 0;
}

.success-next-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 0.2rem 0;
  line-height: 1.35;
}

.success-next-step-line {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #475569;
  margin: 0;
}

/* Inquiry tracker demo — compact Kanban-style board (responsive, no mobile overflow) */
.workflow-board__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 1024px) {
  .workflow-board__grid {
    gap: 0.875rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
}

.workflow-board__column {
  min-width: 0;
  padding: 0.875rem 0.9375rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-top: 3px solid var(--avenor-accent);
  background: rgba(248, 250, 252, 0.85);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.workflow-board__column-title {
  margin: 0 0 0.625rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0f172a;
  line-height: 1.3;
}

.workflow-board__card {
  margin: 0;
  padding: 0.75rem 0.8125rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.workflow-board__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.workflow-board__meta {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #64748b;
}

.workflow-board__meta--owner {
  margin-top: 0.5rem;
}

.workflow-board__meta-key {
  font-weight: 600;
  color: #334155;
  margin-right: 0.25rem;
}

.workflow-board__chip {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
}

.workflow-board__chip--neutral {
  background: #f1f5f9;
  color: #0f172a;
}

.workflow-board__chip--attention {
  background: #fef9c3;
  color: #713f12;
}

.workflow-board__chip--progress {
  background: #e0f2fe;
  color: #075985;
}

.workflow-board__chip--done {
  background: #d1fae5;
  color: #065f46;
}

.workflow-board__next {
  margin: 0.65rem 0 0;
  padding-top: 0.625rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #475569;
}

.workflow-board__next-label {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
}

/* Services scope summary cards + pricing tier cues (pattern pages) */
.offer-scope-card,
.pricing-tier-card {
  text-align: left;
}

.offer-scope-card h3 {
  letter-spacing: -0.015em;
}

.pricing-tier-card {
  transition: border-color 0.15s ease;
  border-radius: var(--zv-radius-lg);
  border: 1px solid var(--zv-border-soft);
  background-color: #fff;
  box-shadow: var(--zv-shadow-surface);
}

.scope-note {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: #64748b;
}

@media (min-width: 640px) {
  .scope-note {
    font-size: 0.75rem;
  }
}

/* --- ZV layout system: containers, sections, intros, surfaces, CTAs --- */

.zv-container {
  box-sizing: border-box;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .zv-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .zv-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.zv-container--6 {
  max-width: 72rem;
}

.zv-container--5 {
  max-width: 64rem;
}

.zv-container--4 {
  max-width: 56rem;
}

.zv-container--prose {
  max-width: 48rem;
}

.zv-container--narrow {
  max-width: 42rem;
}

.zv-section {
  padding-top: var(--zv-py-section);
  padding-bottom: var(--zv-py-section);
}

@media (min-width: 640px) {
  .zv-section {
    padding-top: var(--zv-py-section-lg);
    padding-bottom: var(--zv-py-section-lg);
  }
}

.zv-section--compact {
  padding-top: var(--zv-py-compact);
  padding-bottom: var(--zv-py-compact);
}

@media (min-width: 640px) {
  .zv-section--compact {
    padding-top: var(--zv-py-compact-lg);
    padding-bottom: var(--zv-py-compact-lg);
  }
}

.zv-section--hero {
  padding-top: var(--zv-py-hero);
  padding-bottom: var(--zv-py-hero);
}

@media (min-width: 640px) {
  .zv-section--hero {
    padding-top: var(--zv-py-hero-lg);
    padding-bottom: var(--zv-py-hero-lg);
  }
}

.zv-section--flush-top {
  padding-top: 0;
}

.zv-section--closing {
  padding-bottom: clamp(2.5rem, 5vw, 3.25rem);
}

.zv-section-follow {
  padding-top: 0;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.zv-split {
  border-top: 1px solid var(--zv-border-soft);
}

.zv-split-strong {
  border-top: 1px solid var(--zv-border-main);
}

.zv-bg-muted {
  background-color: var(--zv-muted-panel-a);
}

.zv-intro-block {
  max-width: 100%;
}

.zv-intro-block--narrow {
  max-width: 65ch;
}

.zv-intro-block--readable {
  max-width: 56rem;
}

.zv-display-1 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: #0f172a;
  font-size: 1.875rem;
}

@media (min-width: 640px) {
  .zv-display-1 {
    font-size: 2.25rem;
    line-height: 1.12;
  }
}

@media (min-width: 1024px) {
  .zv-display-1 {
    font-size: 3rem;
  }
}

.zv-display-hero {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: #0f172a;
  font-size: 2.25rem;
}

@media (min-width: 640px) {
  .zv-display-hero {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .zv-display-hero {
    font-size: 3.75rem;
  }
}

.zv-intro-lead {
  margin-top: 0.875rem;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .zv-intro-lead {
    margin-top: 1.25rem;
  }
}

.zv-kicker-strong {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1e293b;
  max-width: 65ch;
}

@media (min-width: 640px) {
  .zv-kicker-strong {
    margin-top: 1rem;
    font-size: 1.125rem;
  }
}

.zv-intro-meta {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #475569;
  max-width: 65ch;
}

.zv-micro {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #64748b;
}

.zv-heading-section {
  margin: 0 0 0.5rem;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0f172a;
}

.zv-heading-section--sm {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  margin-bottom: 0.4rem;
}

.zv-heading-in-card {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

@media (min-width: 640px) {
  .zv-heading-in-card {
    font-size: 1.0625rem;
  }
}

.zv-label-block {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
}

.zv-subhead {
  margin: 1.5rem 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
}

.zv-stack-block {
  margin-top: 0.25rem;
  margin-bottom: 0;
  line-height: 1.65;
}

.zv-lead-muted {
  margin: 0 0 2rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #475569;
}

.zv-section-intro {
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .zv-section-intro {
    margin-bottom: 2.25rem;
  }
}

.zv-section-intro--center {
  text-align: center;
}

.zv-section-intro .zv-lead-muted {
  margin-left: auto;
  margin-right: auto;
}

.zv-copy-measure {
  max-width: 65ch;
}

.zv-surface {
  border-radius: var(--zv-radius-xl);
  border: 1px solid var(--zv-border-soft);
  background-color: #fff;
  box-shadow: var(--zv-shadow-surface-sm);
}

.zv-surface--quiet {
  box-shadow: var(--zv-shadow-surface);
}

.zv-surface-muted {
  border-radius: var(--zv-radius-xl);
  border: 1px solid var(--zv-border-soft);
  background-color: var(--zv-muted-panel-a);
}

.zv-surface-pad {
  padding: 1.25rem 1.35rem;
}

@media (min-width: 640px) {
  .zv-surface-pad {
    padding: 1.5rem;
  }
}

.zv-mini-tile {
  padding: 0.75rem 0.875rem;
  border-radius: var(--zv-radius-lg);
  border: 1px solid var(--zv-border-soft);
  background-color: rgba(248, 250, 252, 0.95);
  font-size: 0.75rem;
  line-height: 1.45;
}

@media (min-width: 640px) {
  .zv-mini-tile {
    font-size: 0.875rem;
  }
}

.zv-cta-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .zv-cta-row {
    flex-direction: row;
    align-items: center;
  }

  .zv-cta-row--center {
    justify-content: center;
  }

  .zv-cta-row--start {
    justify-content: flex-start;
  }
}

.zv-cta-row--tight {
  gap: 0.625rem;
}

.zv-intro-hero-shell {
  position: relative;
  display: flex;
  min-height: 40vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.zv-demo-info {
  padding-top: var(--zv-py-compact);
  padding-bottom: var(--zv-py-compact);
}

@media (min-width: 640px) {
  .zv-demo-info {
    padding-top: var(--zv-py-compact-lg);
    padding-bottom: var(--zv-py-compact-lg);
  }
}

.zv-final-band {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--zv-border-main);
  text-align: center;
}

.zv-work-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.75rem;
  align-items: flex-end;
}

.zv-pattern-grid-label {
  margin: 0 0 0.875rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #0f172a;
}

/* =====================================================================
   Warm Swiss Operator — global visual layer
   Applied last so it wins against earlier declarations in this file and
   against Tailwind utility classes (style.css is loaded after tailwind.css).
   No new HTML tags inside translations, no external fonts/CDNs.
   ===================================================================== */

/* Page surface + base typography */
html {
  background-color: var(--bg);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.font-sans { font-family: var(--font-sans); }

main { color: var(--text-2); }

/* Headings: rebalance to the new scale and tone */
main h1 {
  font-family: var(--font-sans);
  color: var(--text);
  letter-spacing: -0.02em;
}
main h2 {
  font-family: var(--font-sans);
  color: var(--text);
  letter-spacing: -0.015em;
}
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--font-sans);
  color: var(--text);
  letter-spacing: -0.01em;
}

.zv-display-1,
.zv-display-hero,
.zv-heading-section,
.zv-heading-section--sm,
.zv-heading-in-card,
.zv-label-block,
.zv-subhead,
.zv-pattern-grid-label {
  color: var(--text);
}

.zv-display-hero {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
}

.zv-display-1 {
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.zv-heading-section { line-height: var(--lh-h2); }

.zv-kicker-strong { color: var(--text-2); }
.zv-intro-meta,
.zv-lead-muted,
.zv-micro { color: var(--text-mute); }

/* Eyebrow / mono micro-labels — restrained, used as meta only */
.text-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--lh-label);
}

main .text-eyebrow { color: var(--text-mute); }

/* Hero badge — squared editorial tag instead of pill */
.badge-hero {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background-color: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: var(--lh-label);
  font-weight: 500;
}
main .badge-hero { color: var(--text); }

/* Tailwind utility re-skinning (used widely across templates) */
.bg-white { background-color: var(--bg); }
.bg-white\/95 { background-color: rgba(244, 240, 230, 0.92); }
.bg-slate-50,
.bg-slate-50\/80,
.bg-slate-100 { background-color: var(--surface); }
.bg-gray-50 { background-color: var(--surface); }
.bg-gray-50\/50,
.bg-gray-50\/80 { background-color: var(--surface); }
.bg-avenor-accent-faint { background-color: rgba(168, 71, 45, 0.05); }

/* Footer keeps a deep, distinct ground */
.bg-slate-900 { background-color: var(--footer-bg); }
.bg-slate-900\/5 { background-color: rgba(15, 29, 46, 0.05); }

/* Soften decorative gradient washes used on demo hero shells */
.from-gray-50\/70 { --tw-gradient-from: rgba(216, 210, 194, 0.18) var(--tw-gradient-from-position); --tw-gradient-to: rgba(216, 210, 194, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-white { --tw-gradient-to: rgba(244, 240, 230, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(244, 240, 230, 0) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-gray-50\/30 { --tw-gradient-to: rgba(216, 210, 194, 0.08) var(--tw-gradient-to-position); }

/* Section dividers — replace soft slate with warm hairlines */
.border-slate-100 { border-color: var(--border); }
.border-slate-200 { border-color: var(--border); }
.border-gray-100 { border-color: var(--border); }
.border-gray-200 { border-color: var(--border); }

/* Form inputs: use --surface so the writing surface lifts off --bg */
input.bg-white,
textarea.bg-white,
select.bg-white {
  background-color: var(--surface);
  border-radius: 0.25rem;
  border-color: var(--border);
  color: var(--text);
  font-family: var(--font-sans);
}

input.bg-white:focus,
textarea.bg-white:focus,
select.bg-white:focus {
  border-color: var(--border-strong);
}

.contact-input-focus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Editorial focus rings */
.focus\:ring-slate-900\/10:focus,
.focus\:ring-dark\/10:focus {
  --tw-ring-color: rgba(168, 71, 45, 0.18);
}
.focus\:border-slate-900:focus,
.focus\:border-dark:focus {
  border-color: var(--border-strong);
}

/* Sticky header: warm paper, hairline rule */
header.sticky {
  background-color: rgba(244, 240, 230, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
header.sticky .site-brand-link {
  color: var(--text);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
header.sticky .nav-link {
  color: var(--text-2);
  font-weight: 500;
}
header.sticky .nav-link:hover { color: var(--text); }
header.sticky .nav-link::after {
  background-color: var(--accent);
  height: 1.5px;
}
header.sticky .nav-link--current { color: var(--text); font-weight: 600; }
header.sticky .lang-switch-link { color: var(--text-mute); }
header.sticky .lang-active { color: var(--text); }

/* Buttons — sharper, editorial, stronger contrast */
.btn-primary {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid var(--btn-primary-bg);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
  transform: none;
  box-shadow: none;
}
.btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary.text-sm { padding: 0.6rem 1.15rem; font-size: 0.875rem; }
.btn-primary.text-sm:hover { transform: none; }

.btn-secondary,
.btn-hero-secondary {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: transparent;
  color: var(--text);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-secondary:hover,
.btn-hero-secondary:hover {
  background-color: var(--text);
  color: var(--btn-primary-fg);
  border-color: var(--text);
  transform: none;
}
.btn-secondary:focus-visible,
.btn-hero-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-secondary.text-sm { padding: 0.6rem 1.15rem; font-size: 0.875rem; }

main a.btn-secondary,
main a.btn-hero-secondary,
main a.btn-small-secondary {
  color: var(--text);
}
main a.btn-secondary:hover,
main a.btn-hero-secondary:hover,
main a.btn-small-secondary:hover {
  color: var(--btn-primary-fg);
}

/* Secondary buttons rendered with `bg-white` utility — ensure they remain warm */
.btn-secondary.bg-white,
.btn-hero-secondary.bg-white,
.btn-small-secondary.bg-white { background-color: transparent; }
.btn-secondary.bg-white:hover,
.btn-hero-secondary.bg-white:hover,
.btn-small-secondary.bg-white:hover { background-color: var(--text); }

.btn-small {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid var(--btn-primary-bg);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-small:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  transform: none;
}
.btn-small:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-small-secondary {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  background-color: transparent;
  color: var(--text);
  border: 1px solid var(--btn-secondary-border);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-small-secondary:hover {
  background-color: var(--text);
  color: var(--btn-primary-fg);
  border-color: var(--text);
  transform: none;
}
.btn-small-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Surfaces — replace soft shadows + large radii with hairline frames */
.zv-surface,
.zv-surface--quiet {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}

.zv-surface-muted {
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}

.zv-mini-tile {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.zv-final-band { border-top-color: var(--border-strong); }
.zv-split { border-top-color: var(--border); }
.zv-split-strong { border-top-color: var(--border-strong); }

/* Home: project-fit price cards — clean framed rows */
.fit-project-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}
.fit-project-card-title,
.fit-project-card-price { color: var(--text); }
.fit-project-card-line { color: var(--text-mute); }

/* Contact: trust cards above the form */
.contact-trust-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.contact-trust-card-title { color: var(--text); }
.contact-trust-card-line { color: var(--text-mute); }

/* Pricing tier cards (services page) */
.pricing-tier-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}
.card-top-accent { border-top: 2px solid var(--accent); }

/* Portfolio cards */
.portfolio-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: none;
}
.portfolio-card.rounded-2xl { border-radius: 2px; }
.portfolio-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-strong);
}
.portfolio-card__header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Marker bullets and small accent rules */
.marker-avenor-accent { background-color: var(--accent); }
.callout-accent-left { border-left: 3px solid var(--accent); }
.lead-bar-accent { border-top: 1px solid var(--border-strong); }

/* Trust card hover (about page etc.) */
.trust-card:hover {
  background-color: var(--surface);
  box-shadow: none;
}

/* About page side card */
main aside .bg-slate-50,
main aside .border-slate-100 {
  border-color: var(--border);
}

/* Demo: post-sample zone + final actions strip */
.demo-post-sample-zone {
  background-color: var(--surface);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
.demo-final-actions {
  background-color: transparent;
  border-top-color: var(--border-strong);
}

/* Workflow board (project monitoring) — tighter, warmer */
.workflow-board__column {
  background: var(--surface);
  border-color: var(--border);
  border-top-color: var(--accent);
  border-radius: 2px;
  box-shadow: none;
}
.workflow-board__column-title { color: var(--text); font-family: var(--font-mono); }
.workflow-board__card {
  background: var(--bg);
  border-color: var(--border);
  border-radius: 2px;
  box-shadow: none;
}
.workflow-board__title { color: var(--text); }
.workflow-board__meta { color: var(--text-mute); }
.workflow-board__meta-key { color: var(--text-2); }

/* Inline editorial links */
.link-avenor-accent {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
.link-avenor-accent:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Success page numbered next-steps */
.success-next-step {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.success-next-step-num {
  background-color: var(--text);
  color: var(--bg);
  border-radius: 2px;
  font-family: var(--font-mono);
}
.success-next-step-title { color: var(--text); }
.success-next-step-line { color: var(--text-mute); }
.success-next-steps-title { color: var(--text); }

/* Contact next-step preamble (above form) */
[data-section="contact-next"] h2 {
  font-family: var(--font-mono);
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
[data-section="contact-next"] li,
[data-section="contact-next"] ol { color: var(--text-2); }

/* Footer — deep navy, warm cream text, distinctive */
footer.bg-slate-900 {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--border-strong);
}
footer.bg-slate-900 p,
footer.bg-slate-900 a { color: var(--footer-text); }
footer.bg-slate-900 .text-slate-400,
footer.bg-slate-900 .text-slate-500,
footer.bg-slate-900 .text-slate-300 {
  color: var(--footer-mute) !important;
}
footer.bg-slate-900 .footer-link { color: var(--footer-text); }
footer.bg-slate-900 .footer-link:hover { color: var(--accent-soft); }
footer.bg-slate-900 .footer-micro-cta {
  color: var(--footer-mute);
  border-bottom-color: rgba(138, 152, 173, 0.25);
}
footer.bg-slate-900 .footer-micro-cta-link {
  color: var(--footer-text);
  text-decoration-color: rgba(244, 240, 230, 0.5);
}
footer.bg-slate-900 .footer-micro-cta-link:hover {
  color: var(--accent-soft);
  text-decoration-color: var(--accent-soft);
}

/* Sticky lead bar — warm paper, dark hairline, no big shadow */
.lead-bar-main-clearance + footer + div.fixed,
div.fixed.bottom-0.left-0.right-0.z-40 {
  background-color: var(--bg);
  border-top: 1px solid var(--border-strong);
  box-shadow: none;
}
div.fixed.bottom-0.left-0.right-0.z-40 .text-slate-900 { color: var(--text); }
div.fixed.bottom-0.left-0.right-0.z-40 .text-slate-600 { color: var(--text-mute); }

/* Lead bar: mobile-only (desktop/tablet hide + remove clearance padding) */
@media (min-width: 640px) {
  div.fixed.bottom-0.left-0.right-0.z-40 {
    display: none !important;
  }

  main.lead-bar-main-clearance {
    padding-bottom: 2.25rem !important;
  }

  footer.lead-bar-footer-clearance {
    padding-bottom: 0 !important;
  }
}

/* Skip link uses warm paper too */
.skip-to-main:focus {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
  border-radius: 2px;
}

/* Legal pages: keep calm single-column reading flow */
[data-section]:not([data-section="home-hero"]) {
  /* no-op: keep section structure intact */
}

main h1.text-3xl,
main h1.sm\:text-4xl,
main h1.lg\:text-5xl {
  color: var(--text);
  letter-spacing: -0.015em;
}

/* Headline on legal pages (impressum/datenschutz use plain Tailwind classes) */
section .text-3xl.font-bold.text-slate-900 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

/* Datenschutz S7 (sub-block-rich content rendered with |safe) — preserve calm readability */
section .text-base.font-semibold.text-slate-900 { color: var(--text); }

/* Legal paragraphs */
.whitespace-pre-line { color: var(--text-2); }

/* Impressum draft / TODO panel — keep its warning intent but de-rounded */
.legal-impressum-todo-panel {
  border-radius: 2px;
  box-shadow: none;
}

/* Day-card chips on booking demo — sharper */
button.day-card {
  border-radius: 2px;
}
button.day-card:hover:not(.day-card-selected) {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.day-card-selected,
.day-card.day-card-selected {
  background-color: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

/* Secondary "scope" / quiet Tailwind underline (demo-landing pricing-hint anchor) */
main a.underline.decoration-slate-300 {
  text-decoration-color: var(--accent);
  color: var(--text);
}
main a.underline.decoration-slate-300:hover { color: var(--accent); }

/* Service block bottom rules — replace slate-200 borders w/ warm strong rule */
section.border-b.border-slate-200 { border-bottom-color: var(--border); }

/* Headings inside cards on services / portfolio that use raw Tailwind */
main .text-lg.font-semibold,
main .text-lg.font-bold { color: var(--text); }

/* Strong, quiet rule under contact form (border-t border-slate-200) */
.border-slate-200 { border-color: var(--border); }

/* Mailto direct line on contact page */
main a.text-avenor-accent { color: var(--accent); }
main a.text-avenor-accent:hover { color: var(--btn-primary-bg); }

/* Honor focus-visible color on nav/footer links */
a.nav-link:focus-visible,
a.lang-switch-link:focus-visible,
.site-brand-link:focus-visible {
  outline-color: var(--accent);
}
a.footer-link:focus-visible {
  outline-color: var(--accent-soft);
}

/* -----------------------------------------------------------------
   Final visual QA — narrow viewports, long copy (DE), layout safety
   ----------------------------------------------------------------- */

main {
  overflow-wrap: break-word;
}

main .zv-surface,
main .zv-surface-muted,
main .fit-project-card,
main .portfolio-card,
main .pricing-tier-card,
[data-section="services-pricing"] .grid > * {
  min-width: 0;
}

main a.btn-primary,
main a.btn-secondary,
main a.btn-small,
main a.btn-small-secondary,
main a.btn-hero-secondary,
main button.btn-primary {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

div.fixed.bottom-0.left-0.right-0.z-40 p {
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 1023px) {
  .zv-home-hero .zv-micro {
    text-align: left;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
  }

  [data-section="home-hero"] .zv-cta-row {
    margin-top: 1.5rem;
  }
}

@media (max-width: 389px) {
  [data-section="home-hero"].zv-section--hero {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

@media (max-width: 767px) {
  header nav ul.flex.flex-wrap {
    column-gap: 0.5rem;
    row-gap: 0.35rem;
    justify-content: flex-end;
  }
}

.portfolio-card-actions a {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 639px) {
  footer.bg-slate-900 nav.flex.flex-wrap {
    row-gap: 0.625rem;
    column-gap: 1rem;
  }
}