/* Shared visual rules. Load after template CSS; templates own layout, not tokens. */
:root {
  --brand-ink: #10212d;
  --brand-orange: #f18727;
  --brand-orange-hover: #ffa455;
  --radius: 12px;
  --radius-control: 8px;
  --space-section: 56px;
  --space-group: 32px;
  --space-gutter: clamp(20px, 4vw, 40px);
  --type-title: clamp(2.125rem, 4vw, 3.5rem);
  --type-section: clamp(1.75rem, 3vw, 2.5rem);
}

:root, [data-theme="dark"] {
  --header: var(--brand-ink);
  --header-ink: #f5f7f9;
}

body #header {
  background: var(--brand-ink);
  border-bottom: 1px solid #ffffff20;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Every page opens on the same ink surface, in either reading theme. */
html body #banner.page-banner,
body .service-intro {
  min-height: 0 !important;
  padding: var(--space-section) var(--space-gutter) !important;
  background: var(--brand-ink);
  color: #f5f7f9;
  border-bottom: 1px solid #ffffff20;
}
html body #banner.page-banner::before,
html body #banner.page-banner::after { content: none; display: none; }
html body #banner.page-banner > .inner,
body .service-intro > .home-inner { width: min(100%, var(--max)); margin-inline: auto; }
html body #banner.page-banner > .inner {
  column-gap: var(--space-group);
  row-gap: 16px;
}
html body #banner.page-banner > .inner:not(:has(figure, .cloud-status)) { display: block; }
html body #banner.page-banner > .inner:not(:has(figure, .cloud-status)) > p { margin-top: 16px; }
html body #banner.page-banner h1,
html body #banner.page-banner .cloud-hero-copy h1,
body .service-intro h1 {
  font-size: var(--type-title);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: inherit;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
html body #banner.page-banner .inner > p,
html body #banner.page-banner .cloud-hero-copy > p,
body .service-intro .hero-lead {
  color: #d8e3e9;
  font-size: 18px;
  line-height: 1.65;
  max-width: 70ch;
}
body .service-intro h1 { margin: 0 0 16px; max-width: 24ch; }
body .service-intro .service-photo-layout { gap: var(--space-group); }
body.home-redesign .home-hero { background: var(--brand-ink); padding-top: var(--space-section); padding-inline: max(var(--space-gutter), calc((100vw - var(--max)) / 2)); }
body.home-redesign .home-hero h1 { letter-spacing: -.03em; }

/* One action geometry and palette, including hover and keyboard focus. */
body :is(.button, .package-btn, .footer-contact-button, .cookie-accept),
body.home-redesign .hero-actions .button,
body #banner .button {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-control);
  background: var(--brand-orange);
  color: var(--brand-ink) !important;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: normal;
  text-align: center;
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease;
}
body :is(.button, .package-btn, .footer-contact-button, .cookie-accept):is(:hover, :focus-visible),
body.home-redesign .hero-actions .button:is(:hover, :focus-visible),
body #banner .button:is(:hover, :focus-visible) {
  background: var(--brand-orange-hover);
  border-color: var(--brand-orange-hover);
  color: var(--brand-ink) !important;
  transform: none;
}

/* Paired in-content actions need a clear primary/secondary hierarchy. */
body .page-content p > .button + .button,
body .content-block p > .button + .button {
  margin-left: 8px;
  border-color: var(--line);
  background: transparent;
  color: var(--ink) !important;
}
body .page-content p > .button + .button:is(:hover, :focus-visible),
body .content-block p > .button + .button:is(:hover, :focus-visible) {
  border-color: var(--brand-orange);
  background: var(--accent-soft);
  color: var(--ink) !important;
}
body .security-feature a.button {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff !important;
}
body .security-feature a.button:is(:hover, :focus-visible) {
  background: #203d50;
  border-color: #203d50;
  color: #fff !important;
}
#header .nav-contact { background: var(--brand-orange); border-color: var(--brand-orange); border-radius: var(--radius-control); }

/* Content rhythm is shared by legacy, service, and homepage layouts. */
body .home-section,
body.home-redesign .home-section,
body:not(:has(.home-hero)) .page-content,
body.about-page:not(:has(.home-hero)) .page-content { padding: var(--space-section) var(--space-gutter); }
body:not(:has(.home-hero)) .page-content { background: var(--bg); }
body .service-body { padding: var(--space-section) var(--space-gutter); }
body .service-body.home-inner { width: min(calc(100% - 2 * var(--space-gutter)), var(--max)); padding-inline: 0; }
body .content-block { margin-block: 0 var(--space-section); }
body .content-block:last-child { margin-bottom: 0; }
body main > .content-block { margin-block: var(--space-section); }
body:not(:has(.home-hero)) .page-content > .inner > h2,
body.about-page:not(:has(.home-hero)) .page-content > .inner > h2 { margin-top: var(--space-section); padding-top: 0; border-top: 0; }
body:not(:has(.home-hero)) .page-content > .inner > h2:first-child,
body.about-page:not(:has(.home-hero)) .page-content > .inner > h2:first-child { margin-top: 0; }
body .section-heading h2,
body .content-expansion > h2,
body .footer-lead h2,
body.home-redesign .section-heading h2,
body .content-block > h2,
body:not(:has(.home-hero)) .page-content > .inner > h2,
body.about-page :is(.knowledge-section, .speaking-section) h2 {
  font-size: var(--type-section);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin-bottom: 16px;
}
body .section-heading { margin-bottom: 24px; }
body .content-expansion { margin-top: var(--space-section); }
body .content-expansion > h2 { margin-top: var(--space-section); padding-top: 0; border-top: 0; }
body .content-expansion > h2:first-child { margin-top: 0; }
body :is(.content-block, .page-content) p { max-width: 75ch; }
body.about-page :is(.knowledge-section, .speaking-section) { margin-block: var(--space-section); padding-top: var(--space-group); }

/* Bounded cards share shape and depth; open homepage lists stay open. */
body :is(.solution-card, .insight-card, .need-card, .package-card, .service-panel, .contact-card),
body:not(:has(.home-hero)) :is(.solution-card, .insight-card),
body:not(:has(.home-hero)) .page-content .contact-card,
body .it-checklist fieldset,
body .checklist-score {
  border-radius: var(--radius);
  box-shadow: none;
}
body .need-card { border: 1px solid var(--line); }
body:not(:has(.home-hero)) :is(.solution-card, .insight-card)::before { content: none; }
body.home-redesign .need-card { border-radius: 0; }
body .need-card h3,
body.home-redesign :is(#problemak, #kinek-segitunk, .security-feature) .need-card h3 {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
body :is(.contact-promise, .contact-expectations) { border-left: 1px solid var(--line); border-radius: var(--radius); }

/* Photographs keep their subject-specific cropping, with a shared frame. */
body :is(.page-visual, .service-photo, .audience-photo, .speaking-map, .speaking-photo) img,
body .professional-proof img,
body.about-page .founder-profile .founder-photo,
body.home-redesign .hero-photo {
  border-radius: var(--radius);
  box-shadow: none;
}
html body .page-visual { border: 0; background: transparent; box-shadow: none; }
body .page-visual.stock-photo figcaption { color: #d8e3e9; }

body #footer.home-footer { background: var(--brand-ink); padding-inline: var(--space-gutter); }
body #footer.home-footer::before { content: none; }
body .home-footer-inner { align-items: start; padding-block: 48px 40px; gap: clamp(32px, 6vw, 80px); }
body .footer-kicker { display: none; }
body .footer-lead h2 { max-width: 16ch; font-size: clamp(2.1rem, 4vw, 3.8rem); }
body .footer-lead > p:last-child { margin-top: 16px; }
body .footer-direct { width: min(100%, 520px); justify-self: end; }
body .footer-contact-row { grid-template-columns: 70px minmax(0, 1fr); gap: 20px; padding-block: 12px; }
body .footer-contact-button { width: fit-content; min-width: 250px; margin-top: 20px; }
body .footer-contact-button:hover span { transform: none; }
body .footer-resources { background: transparent; }
body .cookie-accept { font-size: 13px; }
body :is(.service-intro, #banner, #footer) :focus-visible { outline-color: #ffb16c; }

@media (max-width: 760px) {
  :root { --space-section: 32px; --space-group: 24px; }
  body .service-intro .hero-lead,
  html body #banner.page-banner .inner > p { font-size: 16px; }
  body .need-card h3,
  body.home-redesign :is(#problemak, #kinek-segitunk, .security-feature) .need-card h3 { font-size: 20px; }
  body .home-footer-inner { padding-block: 32px; }
  body .footer-direct { width: 100%; justify-self: stretch; }
  body .footer-contact-button { width: 100%; }
  body .page-content p > .button + .button,
  body .content-block p > .button + .button { margin-top: 8px; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.button, .package-btn) { transition: none; }
}