/* TAWANOK 60:30:10 — white canvas, black structure, warm gold accents.
   The balance applies to interface elements; project photography keeps its original color. */
body.public-page {
  --surface: #ffffff;
  --surface-soft: #f5f5f5;
  --surface-card: #ffffff;
  --surface-card-hover: #fafafa;
  --ink: #171717;
  --ink-soft: #383838;
  --text: #171717;
  --text-soft: #383838;
  --muted: #626262;
  --muted-soft: #737373;
  --line: #dedede;
  --line-strong: #a6a6a6;
  --brand-gold: #b58a4a;
  --brand-gold-hover: #c6a064;
  --accent: #855d25;
  --accent-soft: #d7b982;
  --accent-bg: #f8f4ec;
  --accent-line: #b58a4a;
  --studio-cream: #ffffff;
  --studio-warm: #f5f5f5;
  --studio-gold: #855d25;
  --studio-gold-soft: #f8f4ec;
  --studio-charcoal: #171717;
  --shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  color: var(--ink);
  background: var(--surface);
}

body.public-page .public-header {
  background: #ffffff;
  border-bottom: 1px solid var(--ink);
}
body.public-page .public-nav a,
body.public-page .nav-group-trigger {
  color: var(--ink);
}
body.public-page .public-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand-gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
body.public-page .public-nav a:hover,
body.public-page .nav-group-trigger:hover {
  color: var(--accent);
}

/* Only primary actions receive a filled gold surface. */
body.public-page .button-primary,
body.public-page .article-cta-btn,
body.public-page .mobile-sticky-cta a.is-primary {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
}
body.public-page .button-primary:hover,
body.public-page .article-cta-btn:hover,
body.public-page .mobile-sticky-cta a.is-primary:hover {
  background: var(--brand-gold-hover);
  border-color: var(--brand-gold-hover);
  color: var(--ink);
}
body.public-page .button-secondary,
body.public-page .button-ghost {
  background: #ffffff;
  border-color: var(--ink);
  color: var(--ink);
}
body.public-page .button-secondary:hover,
body.public-page .button-ghost:hover {
  background: var(--ink);
  color: #ffffff;
}
body.public-page :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
body.public-page .mobile-sticky-cta {
  background: #ffffff;
  border-color: var(--ink);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
body.public-page .mobile-sticky-cta a:not(.is-primary) {
  background: #ffffff;
  border-color: var(--ink);
  color: var(--ink);
}

/* Short gold rules replace broad cream or gold gradients. */
body.public-page .studio-hero,
body.public-page .studio-section-warm,
body.public-page .pricing-hero {
  background: #ffffff;
  border-color: var(--line);
}
body.public-page .studio-hero::after {
  background: var(--ink);
}
body.public-page .studio-overline,
body.public-page .home-stage .eyebrow {
  color: var(--ink) !important;
}
body.public-page .studio-overline::before {
  width: 32px;
  height: 3px;
  background: var(--brand-gold);
}
body.public-page .home-stage .eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  background: var(--brand-gold);
  vertical-align: middle;
}
body.public-page .home-stage h1 {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
body.public-page .home-orbit-nav .home-orbit-link {
  border-color: var(--line-strong) !important;
}
body.public-page .home-orbit-nav .home-orbit-link:hover {
  border-color: var(--ink) !important;
  background: var(--surface-soft) !important;
}
body.public-page .home-orbit-nav .home-orbit-link:first-child {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}
body.public-page .home-orbit-nav .home-orbit-link:first-child span,
body.public-page .home-orbit-nav .home-orbit-link:first-child small {
  color: #ffffff !important;
}
body.public-page .home-orbit-nav .home-orbit-link:first-child::after {
  color: var(--accent-soft);
}
body.public-page .home-orbit-nav .home-orbit-link[href="contact"] {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
}
body.public-page .home-orbit-nav .home-orbit-link[href="contact"] span,
body.public-page .home-orbit-nav .home-orbit-link[href="contact"] small,
body.public-page .home-orbit-nav .home-orbit-link[href="contact"]::after {
  color: var(--ink) !important;
}
body.public-page .home-orbit-nav .home-orbit-link[href="contact"]:hover {
  background: var(--brand-gold-hover) !important;
}

/* White reading surfaces with clear architectural lines. */
body.public-page :is(.studio-service-card, .studio-principle-card, .studio-step-card,
  .studio-proof-card, .studio-form, .studio-faq-list details, .pricing-permit-card) {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: none;
}
body.public-page :is(.studio-service-card, .studio-step-card)::before {
  background: none;
}
body.public-page .studio-contact-card {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #ffffff;
}
body.public-page .studio-contact-card :is(p, strong, span, .studio-overline) {
  color: #ffffff !important;
}
body.public-page .studio-contact-methods a {
  background: transparent;
  border-color: #626262;
  color: #ffffff;
}
body.public-page .studio-contact-methods a:hover {
  background: #292929;
  border-color: var(--brand-gold);
}
body.public-page .studio-contact-card :is(a, button):focus-visible {
  outline-color: var(--accent-soft);
}
body.public-page :is(.studio-section-dark, .studio-cta-panel-dark) {
  background: var(--ink);
}
body.public-page .studio-cta-panel-dark .studio-overline {
  color: #ffffff !important;
}
body.public-page .studio-cta-panel-dark :is(a, button):focus-visible {
  outline-color: var(--accent-soft);
}

/* One dark package anchors the comparison; gold is reserved for badges/actions. */
body.public-page .pricing-package-card.is-recommended {
  background: #ffffff !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
}
body.public-page .pricing-package-card.is-premium {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
  color: #ffffff;
}
body.public-page .pricing-package-card.is-premium::before {
  background: none !important;
}
body.public-page .pricing-package-card.is-premium :is(h3, p, li, strong, .pricing-unit) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.public-page .pricing-package-card.is-premium .pricing-amount {
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.public-page .pricing-package-card.is-premium .pricing-card-note {
  background: #292929;
}
body.public-page .pricing-package-card.is-premium .pricing-package-badge,
body.public-page :is(.pricing-premium-ribbon, .pricing-recommend-ribbon) {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
body.public-page .pricing-package-card.is-premium .pricing-card-select {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink);
}
body.public-page .pricing-package-card.is-premium .pricing-card-select.button-primary {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
}
body.public-page .pricing-package-card.is-active {
  outline: 3px solid var(--brand-gold);
  outline-offset: 3px;
}
body.public-page .pricing-comparison-table thead th {
  background: var(--ink);
  border-color: #626262;
  color: #ffffff;
}
body.public-page .pricing-comparison-table thead :is(strong, span, small) {
  color: #ffffff;
}

/* Black footer and closing section frame the white content. */
body.public-page .portfolio-bottom-cta-dark,
body.public-page .public-footer {
  background: var(--ink) !important;
  border-color: #383838 !important;
  color: #ffffff;
}
body.public-page .public-footer {
  padding-top: 36px;
  padding-bottom: 36px;
}
body.public-page .public-footer .footer-bar {
  position: relative;
  padding-top: 24px;
}
body.public-page .public-footer .footer-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--brand-gold);
}
body.public-page .public-footer :is(p, strong, .footer-links a),
body.public-page .portfolio-bottom-cta-dark :is(h2, p) {
  color: #ffffff !important;
}
body.public-page .public-footer .footer-links a:hover,
body.public-page .portfolio-bottom-cta-dark .eyebrow {
  color: var(--accent-soft) !important;
}
body.public-page .portfolio-bottom-cta-dark .button {
  background: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--ink) !important;
}
body.public-page :is(.public-footer, .portfolio-bottom-cta-dark) :is(a, button):focus-visible {
  outline-color: var(--accent-soft);
}

@media (max-width: 780px) {
  body.public-page .home-stage h1 {
    max-width: none;
    width: 100%;
  }
  body.public-page .public-nav {
    background: #ffffff;
  }
  body.public-page .public-nav a[aria-current="page"] {
    background: var(--ink);
    color: #ffffff;
    text-decoration: none;
    border-left: 3px solid var(--brand-gold);
  }
}