/* ============================================================
   CreatorTax — Modern Creator refresh (override layer)
   Linked AFTER each page's inline <style> so these rules win.
   Components only — no layout/markup/route changes.
   ============================================================ */

/* Plus Jakarta Sans — SELF-HOSTED (no dependency on Google Fonts CDN).
   url() is resolved relative to THIS stylesheet, so the same paths work
   from every page depth (root and /content-creator-hub/ etc.). */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-600-italic.woff2') format('woff2'); }

:root {
  --accent:        var(--ct-orange);   /* per-page platform accent; orange by default */
  --accent-deep:   var(--ct-orange-deep);
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm:     10px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --radius-pill:   100px;
  --shadow-card:   0 2px 6px rgba(27, 20, 16, 0.05);
  --shadow-raised: 0 8px 24px rgba(27, 20, 16, 0.08);
  --shadow-hover:  0 16px 40px rgba(27, 20, 16, 0.12);
  --shadow-orange: 0 8px 22px rgba(255, 107, 53, 0.28);
}

html { scroll-behavior: smooth; }
body { background: var(--ct-off-white); }

/* ============================================================
   CreatorTax — Type Lock
   Drop-in stylesheet that guarantees the headline/typography
   matches the CreatorTax design. Loads Plus Jakarta Sans with the
   TRUE bold (800) weight, then forces it onto every heading,
   button, and the marquee with !important so no page can override it.

   HOW TO USE (developer / Claude Code):
   1. Save this file in the site, e.g. /css/creatortax-type.css
   2. On EVERY .html page, add this as the LAST stylesheet in <head>
      (after the page's own <style> and after creator-refresh.css):
        <link rel="stylesheet" href="/css/creatortax-type.css">
   3. That's it. The @import below loads the real bold weights, and
      the rules below force the correct look everywhere.
   ============================================================ */

/* @import hoisted to the top of this file (CSS requires @import first):
   https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&display=swap */

/* ---- Base font for the whole site ---- */
html, body,
p, a, li, span, label, input, textarea, select, button {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ---- Headlines: heavy, tight, designed (this is the key bit) ---- */
h1, h2, h3, h4,
.hero h1, .hero-title, .section-title, .display, .headline {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;        /* TRUE extra-bold — was rendering not-bold */
  font-synthesis: none !important;    /* never fake bold; use the real 800 cut */
  -webkit-font-smoothing: antialiased;
}

/* Big hero display headline — tightest tracking + leading */
h1, .hero h1, .hero-title, .display, .headline {
  letter-spacing: -2px !important;
  line-height: 1.04 !important;
}

/* Section titles — slightly less tight */
h2, h3, .section-title {
  letter-spacing: -0.6px !important;
  line-height: 1.1 !important;
}

/* Buttons / nav — semibold, normal tracking */
button, .btn, .nav-link {
  font-weight: 600 !important;
}

/* Eyebrow pills + the moving marquee strip — bold uppercase, tracked */
.eyebrow, .pill-eyebrow, .marquee-item, .ticker-item {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.marquee-item, .ticker-item { letter-spacing: 0.02em !important; }
.eyebrow, .pill-eyebrow { letter-spacing: 1.8px !important; }

/* In-page anchor links land below the sticky nav, with a smooth glide */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 88px; }

/* ---------- Nav → light, sticky, blurred ---------- */
nav {
  background: rgba(246, 246, 248, 0.82) !important;
  border-bottom: 1px solid var(--ct-line) !important;
  padding: 0.7rem 0 !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
}
.nav-links { display: flex; gap: 1.6rem; align-items: center; flex-wrap: nowrap; }
.nav-link { color: var(--ct-black) !important; font-weight: 600 !important; text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--ct-orange-deep) !important; }
.nav-link::after { background: var(--ct-orange) !important; height: 2px !important; }

/* Consistent left-aligned logo on mobile across all pages (match About) */
@media (max-width: 768px) {
  .nav-container { padding: 0 1rem !important; }
}

/* Logo image (replaces CSS-text wordmark) — larger on desktop so the
   "created by certified chartered accountants" subline is legible */
.nav-logo-img { height: 51px; width: auto; display: block; }
.logo-container { flex-direction: row !important; align-items: center; }
@media (max-width: 768px) { .nav-logo-img { height: 44px; } }

/* Footer trust badges — shrink CA ANZ + Xero on mobile so the wide
   Xero lockup fits the screen instead of cropping */
@media (max-width: 768px) {
  .footer-trust { gap: 1.5rem !important; margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
  footer img[src*="ca-anz"]     { height: 48px !important; }
  footer img[src*="xero-logos"] { height: 56px !important; }
  footer img[src*="tpb-registered"] { height: 48px !important; }
}

/* ---------- Buttons → pill, sentence case, soft lift ---------- */
.nav-cta, .hero-cta, .price-cta, .cta-banner-btn, .btn, .cta-button, .package-cta {
  border-radius: var(--radius-pill) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease) !important;
}
.package-cta {
  background: var(--ct-orange) !important;
  color: #fff !important;
  box-shadow: var(--shadow-orange) !important;
}
.package-card:hover .package-cta { background: var(--ct-orange-deep) !important; }
.nav-cta {
  background: var(--ct-orange) !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 0.62rem 1.5rem !important;
  font-size: 0.95rem !important;
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.28) !important;
}
.nav-cta:hover {
  background: var(--ct-orange-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255, 107, 53, 0.32) !important;
}
/* Primary CTAs stay brand orange even on platform-accented niche pages */
.hero-cta {
  display: inline-flex !important; align-items: center; gap: 0.5rem;
  background: var(--ct-orange) !important;
  color: #fff !important;
  box-shadow: var(--shadow-orange) !important;
  padding: 0.9rem 1.6rem !important;
  font-size: 1.05rem !important;
  white-space: nowrap;
}
.hero-cta:hover {
  background: var(--ct-orange-deep) !important;
  transform: translateY(-3px) !important;
}
@media (max-width: 768px) {
  .hero-cta, .hero-cta-ghost { padding: 0.75rem 1.25rem !important; font-size: 0.95rem !important; }
}

/* Accent (orange on homepage, platform colour on niche pages) for highlights */
.hero .highlight {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
.hero-turnaround { color: var(--accent) !important; }
.price-cta {
  background: var(--ct-black) !important;
  color: #fff !important;
  box-shadow: var(--shadow-card) !important;
}
.price-cta:hover {
  background: var(--ct-orange) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-orange) !important;
}
.cta-banner-btn {
  background: var(--ct-black) !important;
  box-shadow: var(--shadow-raised) !important;
}
.cta-banner-btn:hover { transform: translateY(-3px) !important; }

/* ---------- Cards → rounded, hairline, soft shadow, calm hover ---------- */
.step-card, .testimonial-card, .privacy-card, .service-card, .feature-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-raised) !important;
  border: 1px solid var(--ct-hairline) !important;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
}
.step-card::before { background: var(--accent) !important; }
.step-card:hover, .testimonial-card:hover, .privacy-card:hover,
.service-card:hover, .feature-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Pricing cards on light surfaces */
.price-card {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--ct-line) !important;
  box-shadow: var(--shadow-card) !important;
  background: #fff !important;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease) !important;
}
.price-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-hover) !important; }
.price-card.popular {
  border: 2px solid var(--ct-orange) !important;
  background: #fff !important;
  box-shadow: var(--shadow-raised) !important;
}
.popular-badge {
  background: var(--ct-orange) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-orange) !important;
  text-transform: uppercase !important;
}

/* ---------- Footer → cool charcoal ---------- */
footer {
  background: var(--ct-plum) !important;
  border-top: 1px solid var(--ct-hairline) !important;
  color: var(--ct-light-gray) !important;
}
.footer-section h4 { color: var(--ct-orange) !important; }
.footer-logo-img { height: 36px; width: auto; display: block; margin-bottom: 0.75rem; }

/* ============ Refined site footer (.site-footer) ============ */
.site-footer { background: var(--ct-plum); color: var(--ct-light-gray); border-top: 1px solid var(--ct-hairline); padding: 0 !important; }
.ft-main { max-width: 1180px; margin: 0 auto; padding: 4.5rem 2rem 2.5rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; text-align: left; }
.ft-brand { max-width: 340px; }
.ft-logo { height: 40px; width: auto; display: block; margin-bottom: 1.2rem; }
.ft-tagline { font-size: 0.95rem; line-height: 1.7; color: var(--ct-muted); margin: 0 0 1.6rem; }
.ft-contact { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.3rem; }
.ft-contact a, .ft-social { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ct-light-gray); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }
.ft-contact a:hover, .ft-social:hover { color: var(--ct-orange); }
.ft-contact svg, .ft-social svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ct-orange); }
.ft-social { font-weight: 600; }
.ft-col h4 { color: var(--ct-orange); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; margin: 0 0 1.2rem; }
.ft-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.ft-col a { color: var(--ct-light-gray); text-decoration: none; font-size: 0.92rem; transition: color 0.2s, padding-left 0.2s; }
.ft-col a:hover { color: var(--ct-orange); padding-left: 4px; }
.ft-trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 3rem; padding: 2.25rem 2rem; border-top: 1px solid var(--ct-hairline); max-width: 1180px; margin: 0 auto; }
.ft-trust img { width: auto; opacity: 0.9; filter: grayscale(15%); transition: opacity 0.2s; }
.ft-trust img:hover { opacity: 1; }
.ft-bottom { text-align: center; padding: 1.5rem 2rem 2.75rem; border-top: 1px solid var(--ct-hairline); }
.ft-bottom p { font-size: 0.85rem; color: var(--ct-muted); margin: 0; line-height: 1.7; }
.ft-bottom a { color: var(--ct-orange); text-decoration: none; }
.ft-bottom a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .ft-main { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; padding: 3.5rem 1.5rem 2rem; }
  .ft-brand { grid-column: 1 / -1; max-width: none; }
  .ft-trust { gap: 1.75rem; padding: 2rem 1.5rem; }
}
@media (max-width: 600px) {
  .ft-main { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 1.4rem 1rem; text-align: left; }
  .ft-brand { grid-column: auto; max-width: none; text-align: left; }
  .ft-brand .ft-logo { margin: 0 0 1rem; height: 36px; }
  .ft-tagline { display: none; }
  .ft-contact { align-items: flex-start; gap: 0.55rem; margin-bottom: 1rem; }
  .ft-social { justify-content: flex-start; }
  .ft-col-svc { display: none; }
  .ft-col h4 { font-size: 0.72rem; letter-spacing: 1.2px; margin-bottom: 0.8rem; }
  .ft-col ul { gap: 0.6rem; }
  .ft-col a { font-size: 0.9rem; }
  .ft-col a:hover { padding-left: 0; }
  .ft-trust { gap: 1.25rem; padding: 1.5rem 1.4rem; justify-content: flex-start; }
  .ft-trust img { height: 40px !important; }
  .ft-trust img[src*="xero"] { height: 50px !important; }
  .ft-bottom { padding: 1.2rem 1.4rem 1.75rem; text-align: left; }
  .ft-bottom p { font-size: 0.78rem; }
}

/* ---------- Focus ring (orange, was teal) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .nav-cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

/* CTA banner: orange gradient with subtle depth (was orange→teal) */
.cta-banner { background: linear-gradient(120deg, var(--ct-orange), var(--ct-orange-light)) !important; }

/* ============================================================
   Reference hero rebuild — light, near-black headline, accent
   highlight, photo + spinning stamp + orange ring on the right.
   Dark charcoal stays only on marquee, testimonials, footer.
   ============================================================ */
.hero {
  background: var(--ct-off-white) !important;
  padding: 5rem 2rem 4rem !important;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero::after { display: none !important; }
.hero h1 { color: var(--ct-black) !important; }
.hero h1 .hl, .hero h1 .highlight, .hero h1 span {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}
.hero p, .hero-subtitle, .hero .hero-sub { color: var(--ct-dark-gray) !important; }
.hero-turnaround { color: var(--accent) !important; }

.hero-inner {
  max-width: 1140px; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 3.5rem;
  align-items: center; text-align: left; position: relative; z-index: 1;
}
.hero-copy { min-width: 0; }
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.95rem; border-radius: 100px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.8px; background: var(--ct-orange-soft); color: var(--ct-orange-deep);
}
.hero-eyebrow { margin-bottom: 1.4rem; }
.hero-inner h1 {
  font-size: 4.2rem !important; font-weight: 800 !important; line-height: 1.04 !important;
  letter-spacing: -2px !important; margin: 0 0 1.4rem !important;
}
.hero-sub { font-size: 1.25rem !important; line-height: 1.5 !important; max-width: 34em; margin: 0 0 2rem !important; }
.hero-cta-row { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; }
.hero-cta-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1px solid var(--ct-line); color: var(--ct-black);
  padding: 0.9rem 1.6rem; border-radius: 100px; font-weight: 600; text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.hero-cta-ghost:hover { border-color: var(--ct-black); transform: translateY(-2px); }
.hero-badges { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-badges img { height: 42px; width: auto; }
.hero-badges .ca { height: 26px; }
.hero-badges span { font-size: 0.82rem; color: var(--ct-muted); font-weight: 600; }

.hero-photo { position: relative; }
.hero-img {
  width: 100%; height: 520px; object-fit: cover; border-radius: 24px;
  box-shadow: var(--shadow-raised); display: block; position: relative; z-index: 1;
}
.hero-ring {
  position: absolute; width: 380px; height: 380px; border: 2.5px solid var(--accent);
  border-radius: 50%; right: -42px; bottom: -50px; z-index: 0; pointer-events: none;
}
.stamp {
  position: absolute; top: -28px; right: -24px; width: 110px; height: 110px; z-index: 4;
  animation: ct-spin 20s linear infinite; filter: drop-shadow(0 6px 14px rgba(22,22,28,0.18));
}
@keyframes ct-spin { to { transform: rotate(360deg); } }
.stamp circle.bg { fill: var(--accent); }
.stamp text { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 8.4px; letter-spacing: 1px; text-transform: uppercase; }
.stamp .ctr { font-weight: 800; font-size: 19px; fill: #fff; letter-spacing: -0.5px; }
.stamp .ctr-sub { font-weight: 800; font-size: 8px; fill: #fff; letter-spacing: 1.5px; text-transform: uppercase; }
.hero-stat {
  position: absolute; left: 18px; bottom: 18px; background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 18px; padding: 0.9rem 1.2rem; box-shadow: var(--shadow-raised); z-index: 3;
}
.hs-fig { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; color: var(--ct-black); line-height: 1; letter-spacing: -1px; }
.hs-fig span { color: var(--ct-orange); font-size: 1.1rem; vertical-align: super; }
.hs-lab { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--ct-muted); margin-top: 0.25rem; }

@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-inner h1 { font-size: 3rem !important; }
  .hero-photo { margin-top: 0.5rem; }
  .hero-img { height: 360px; }
  .hero-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- How It Works steps → light white cards (reference) ---------- */
.step-card { background: #fff !important; border-top: 3px solid var(--ct-orange) !important; }
.step-card h3 { color: var(--ct-black) !important; }
.step-card p { color: var(--ct-dark-gray) !important; }
.step-number {
  background: var(--ct-orange-soft) !important;
  color: var(--ct-orange-deep) !important;
  border-radius: 50% !important;
  -webkit-text-fill-color: initial;
}
.step-card::before { display: none !important; }
