/* Self-hosted fonts — eliminates render-blocking Google Fonts requests */
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   robsanders.com.au — Site Stylesheet
   Shared across all pages.
   Page-specific CSS stays in each page's <style> block.
═══════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── ROOT ─── */
:root {
  --orange:     #FFE500;
  --orange-rgb: 255, 229, 0;
  --orange-h:   #E6CF00;
  --orange-ext: #E6CF00;
  --red:      #C0392B;
  --dark:     #111111;
  --dark2:    #2C2C2C;
  --mid:      rgba(255,255,255,0.55);
  --light:    rgba(255,255,255,0.35);
  --border:   rgba(255,255,255,0.10);
  --bg-alt:   #1A1A1A;
  --white:    #FFFFFF;
  --display:  'Fraunces', Georgia, serif;
  --tight:    'Plus Jakarta Sans', sans-serif;
  --body:     'Plus Jakarta Sans', sans-serif;
  --max:      1280px;
  --pad:      clamp(20px, 4vw, 64px);
}

/* ─── BASE ─── */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--body); background: #0D0D0D; color: rgba(255,255,255,0.85); line-height: 1.65; font-size: 16px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
strong { font-weight: 600; color: #fff; }

/* ─── NAV ─── */
.nav { position: sticky; top: 0; z-index: 200; background: rgba(13,13,13,0.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.nav-logo-text { font-family: var(--display); font-size: 17px; font-weight: 700; color: #fff; }
.nav-logo-text span { color: var(--orange); }
.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a { font-size: 14px; font-weight: 500; color: var(--mid); transition: color 0.15s; text-decoration: none; }
.nav-menu a:hover { color: #fff; }
.nav-menu a.active { color: #fff; font-weight: 600; }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tight); font-size: 14px; font-weight: 700; color: #0D0D0D; background: var(--orange); padding: 10px 22px; border-radius: 6px; border: 2px solid var(--orange); transition: background 0.15s, color 0.15s; white-space: nowrap; text-decoration: none; }
.nav-btn:hover { background: transparent; color: var(--orange); }
.nav-menu .nav-btn { color: #0D0D0D; }
.nav-menu .nav-btn:hover { color: var(--orange); }
@media (max-width: 768px) { .nav-menu { display: none; } }

/* ─── HERO — INNER PAGES (dark) ─── */
.hero, .page-hero { background: #0A0A0A; background-image: linear-gradient(135deg, rgba(var(--orange-rgb),0.08) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(var(--orange-rgb),0.05) 0%, transparent 65%); border-bottom: 1px solid var(--orange); position: relative; overflow: hidden; }
.hero { padding: 96px var(--pad); }
.hero::before, .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.hero-inner, .page-hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(var(--orange-rgb),0.1); color: var(--orange); border: 1px solid rgba(var(--orange-rgb),0.25); padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tight); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
.hero-tag-line { width: 32px; height: 2px; background: var(--orange); }
.hero h1 { font-family: var(--display); font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.1; letter-spacing: -2px; color: #FFFFFF; margin-bottom: 20px; text-wrap: balance; }
.hero h1 span, .hero h1 em { color: var(--orange); }
.hero h1 em { font-style: italic; }
.page-hero h1 { font-family: var(--display); font-size: clamp(40px, 5.5vw, 68px); font-weight: 700; letter-spacing: -2.5px; line-height: 1.0; color: #fff; text-wrap: balance; }
.page-hero h1 em { font-style: italic; color: var(--orange); }
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.55); max-width: 560px; line-height: 1.7; }

/* ─── BREADCRUMB ─── */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 28px; }
.breadcrumb a { color: var(--orange); text-decoration: none; transition: opacity 0.15s; }
.breadcrumb a:hover { opacity: 0.75; }
.breadcrumb span { color: rgba(255,255,255,0.25); }

/* ─── CTA STRIP ─── */
.cta-strip { background: #111111; padding: 72px var(--pad); }
.cta-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.cta-inner h2 { font-family: var(--display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; letter-spacing: -1px; color: var(--white); margin-bottom: 12px; }
.cta-inner p { font-size: 17px; color: rgba(255,255,255,0.55); margin-bottom: 32px; }

/* ─── FOOTER ─── */
.footer { background: var(--dark); padding: 56px var(--pad) 40px; border-top: 3px solid var(--orange); }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
.footer-logo { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.footer-logo span { color: var(--orange); }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.6; }
.footer-col h3, .footer-col h4 { font-family: var(--tight); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.55); transition: color 0.15s; text-decoration: none; }
.footer-links a:hover { color: rgba(255,255,255,0.9); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer-copy a { color: rgba(255,255,255,0.4); transition: color 0.15s; text-decoration: underline; }
.footer-copy a:hover { color: rgba(255,255,255,0.7); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; } }

/* ═══════════════════════════════════════════════════════════════
   SECTION LAYOUT — shared across all pages
═══════════════════════════════════════════════════════════════ */
.section { padding: 96px var(--pad); }
.section-alt { background: #111111; }
.wrap { max-width: var(--max); margin: 0 auto; }
.section-label { font-family: var(--tight); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-label::after { content: ''; display: block; width: 40px; height: 2px; background: var(--orange); }
.section-h2 { font-family: var(--display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; letter-spacing: -1.5px; line-height: 1.15; color: #fff; margin-bottom: 20px; }
.section-h2 span { color: var(--orange); }
.section-intro { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.5); max-width: 680px; }
.section-center { text-align: center; }
.section-center .section-label { justify-content: center; }
.section-center .section-label::after { display: none; }
.section-center .section-intro { margin: 0 auto; }

/* ─── CLIENTS / WORKED WITH BAR ─── */
.clients { background: #0D0D0D; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 24px var(--pad); }
.clients-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.clients-label { font-family: var(--tight); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.25); white-space: nowrap; flex-shrink: 0; }
.clients-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.clients-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1; }
.client-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.10); border-radius: 100px; padding: 4px 10px 4px 4px; font-family: var(--tight); font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); text-decoration: none; transition: border-color 0.2s, color 0.2s; white-space: nowrap; }
.client-pill:hover { border-color: rgba(var(--orange-rgb),0.35); color: rgba(255,255,255,0.85); }
.client-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; opacity: 1; background: #fff; }

/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGES — shared layout and component styles
   Applies to all insight article pages.
═══════════════════════════════════════════════════════════════ */

/* ─── POST HERO ─── */
.post-hero { background: #0A0A0A; background-image: linear-gradient(135deg, rgba(var(--orange-rgb),0.08) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(var(--orange-rgb),0.05) 0%, transparent 65%); border-bottom: 1px solid var(--orange); padding: 80px var(--pad); position: relative; overflow: hidden; }
.post-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.post-hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.cat-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tight); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
.cat-badge::before { content: ''; width: 32px; height: 2px; background: var(--orange); display: block; flex-shrink: 0; }
.post-title { font-family: var(--display); font-size: clamp(36px, 5vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -2px; color: #FFFFFF; max-width: 800px; margin-bottom: 20px; }

/* ─── AUTHOR BYLINE ─── */
.post-author-byline { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.byline-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid rgba(var(--orange-rgb),0.35); flex-shrink: 0; }
.byline-info { display: flex; flex-direction: column; gap: 2px; }
.byline-name { font-family: var(--tight); font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.15s; }
.byline-name:hover { color: var(--orange); }
.byline-role { font-size: 12px; color: rgba(255,255,255,0.4); }
.byline-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.15); margin: 0 6px; }
.byline-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.45); }
.byline-sep { color: rgba(255,255,255,0.2); }
.byline-read { color: rgba(255,255,255,0.45); }
.byline-date { color: rgba(255,255,255,0.45); }

/* ─── ARTICLE LAYOUT ─── */
.article { background: #0D0D0D; }
.article-wrap { background: #0D0D0D; }
.article-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--pad) 80px; }
.article-inner p { font-size: 17px; color: var(--mid); line-height: 1.85; margin-bottom: 22px; }
.article-inner h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin: 48px 0 16px; color: #fff; }
.article-inner h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 36px 0 12px; color: #fff; }
.article-inner ul, .article-inner ol { margin: 0 0 22px 24px; }
.article-inner ul li, .article-inner ol li { font-size: 17px; color: var(--mid); line-height: 1.85; margin-bottom: 10px; }
.article-inner strong { color: #fff; font-weight: 600; }
.article-inner a { color: var(--orange); text-decoration: underline; }
.article-inner a:hover { color: var(--orange); }
.article-inner a[href^="/"]:hover { color: var(--orange-h); }
.article-inner img { border-radius: 12px; margin: 32px 0; }
.article-body { max-width: var(--max); margin: 0 auto; padding: 56px var(--pad) 80px; }
.article-body h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin: 48px 0 16px; color: #fff; }
.article-body h3 { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 36px 0 12px; color: #fff; }
.article-body p { font-size: 17px; color: var(--mid); line-height: 1.85; margin-bottom: 22px; }
.article-body ul, .article-body ol { margin: 0 0 22px 24px; }
.article-body ul li, .article-body ol li { font-size: 17px; color: var(--mid); line-height: 1.85; margin-bottom: 10px; }
.article-body strong { color: #fff; font-weight: 600; }
.article-body a { color: var(--orange); text-decoration: underline; }
.article-body a:not([href^="/"]) { color: var(--orange-ext); }
.article-body a:hover { color: var(--orange); }
.article-body a:not([href^="/"]):hover { color: var(--orange-ext); }
.article-body a[href^="/"]:hover { color: var(--orange-h); }

/* ─── BACK LINK ─── */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--mid); margin-bottom: 40px; text-decoration: none; transition: color 0.15s; }
.back-link:hover { color: #fff; text-decoration: none; }

/* ─── COMPONENTS ─── */
.callout { background: #1E1E1E; border-left: 4px solid var(--orange); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 32px 0; }
.callout p { margin-bottom: 0 !important; font-size: 16px !important; }
.tip-box { background: #1A1208; border: 1.5px solid rgba(var(--orange-rgb),0.25); border-radius: 10px; padding: 20px 24px; margin: 32px 0; }
.tip-box p { margin-bottom: 0 !important; font-size: 16px !important; }
.tip-box-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); margin-bottom: 8px; }
.warning-box, .warn-box { background: #200A0A; border: 1.5px solid rgba(185,28,28,0.4); border-radius: 10px; padding: 20px 24px; margin: 32px 0; }
.warning-box p, .warn-box p { margin-bottom: 0 !important; font-size: 16px !important; }
.warning-box-label, .warn-box-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #F87171; margin-bottom: 8px; }
.section-divider { border: none; border-top: 1px solid var(--border); margin: 52px 0; }

/* ─── SOURCES ─── */
.sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.sources-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--light); margin-bottom: 10px; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources ul li { font-size: 14px; color: var(--light); line-height: 1.7; margin-bottom: 6px; }
.sources a { color: var(--mid); font-size: 14px; text-decoration: none; }
.sources a:hover { color: #fff; text-decoration: underline; }

/* ─── FAQ ─── */
.faq-section { padding: 56px var(--pad); background: var(--bg-alt); border-top: 1px solid var(--border); }
.faq-inner { max-width: var(--max); margin: 0 auto; }
.faq-section h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; color: #fff; }
.faq-section > .faq-inner > p { font-size: 15px; color: var(--mid); margin-bottom: 32px; }
.faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: #1A1A1A; overflow: hidden; }
.faq-item summary { padding: 18px 22px; font-family: var(--tight); font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,0.85); gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--orange); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-answer { padding: 0 22px 20px; font-size: 15px; color: var(--mid); line-height: 1.8; }

/* ─── POST CTA ─── */
.post-cta { background: #111111; color: #fff; padding: clamp(48px, 6vw, 72px) var(--pad); text-align: center; }
.post-cta-inner { max-width: 580px; margin: 0 auto; }
.post-cta h2 { font-family: var(--display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; letter-spacing: -1px; margin-bottom: 12px; color: var(--white); }
.post-cta p { font-size: 17px; color: rgba(255,255,255,0.55); margin-bottom: 32px; }
.cta-btn { display: inline-flex; align-items: center; font-family: var(--tight); font-size: 16px; font-weight: 700; color: #0D0D0D; background: var(--orange); padding: 14px 32px; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.cta-btn:hover { background: var(--orange-h); transform: translateY(-1px); text-decoration: none; }
/* Inline article CTAs: keep the button's own dark text, not the prose link colour/underline (.article-inner a / .article-body a would otherwise render the label yellow-on-yellow). */
.article-inner a.cta-btn, .article-body a.cta-btn { color: #0D0D0D; text-decoration: none; }
.article-inner a.cta-btn:hover, .article-body a.cta-btn:hover { color: #0D0D0D; background: var(--orange-h); text-decoration: none; transform: translateY(-1px); }

/* ─── RELATED ARTICLES ─── */
.related-section { background: #0D0D0D; padding: 48px var(--pad); }
.related-inner { max-width: var(--max, 1180px); margin: 0 auto; }
.related-label { font-family: var(--tight); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card { border: 1.5px solid rgba(255,255,255,0.10); border-radius: 12px; overflow: hidden; background: #1A1A1A; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.2s; }
.related-card:hover { box-shadow: 0 4px 24px rgba(var(--orange-rgb),0.15); transform: translateY(-2px); }
.related-header { height: 180px; position: relative; flex-shrink: 0; overflow: hidden; }
.related-header .related-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.related-header.basics { background: linear-gradient(135deg, #451a03 0%, #92400e 50%, #D97706 100%); }
.related-header.ai { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 50%, #0ea5e9 100%); }
.related-header.shopping { background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #059669 100%); }
.related-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.related-cat { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 5px; }
.related-title { font-family: var(--tight); font-size: 14px; font-weight: 800; line-height: 1.3; color: rgba(255,255,255,0.9); letter-spacing: -0.3px; margin: 0 0 8px 0; }
.related-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6; flex: 1; margin-bottom: 12px; }
.related-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.related-date { font-size: 11px; color: rgba(255,255,255,0.35); }
.related-read-more { font-size: 12px; font-weight: 700; color: var(--orange); }
@media (max-width: 700px) { .related-grid { grid-template-columns: 1fr; } }

/* ─── ARTICLE FOOTER VARIANT ─── */
.footer-brand-name { font-family: var(--tight); font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.footer-brand-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.7; margin-bottom: 14px; }
.footer-email { font-size: 13px; color: var(--orange); font-weight: 600; text-decoration: none; }
.footer-email:hover { text-decoration: underline; }