/* Reading Digital — production stylesheet.
   Neutral tokens transcribed from brand-handoff/tokens.css. Accent tokens
   are the enterprise blue — the palette is now shared across both
   bradreading.com and Reading Digital (one visual system, two sites, two
   different entry points/copy per audience). Exact values taken from the
   bradreading.com design files (Brad Reading.dc.html), not approximated,
   so both sites match precisely: #1D4ED8 accent, #1536B8 deep, #7BA5FF
   on dark grounds. If either brand guide changes, re-sync by hand. */

:root {
  --rd-ink:            #0F141F;
  --rd-ground:         #FFFFFF;
  --rd-canvas:         #FAFAFB;
  --rd-surface:        #F3F5F8;
  --rd-line:           #E4E6EC;
  --rd-line-strong:    #C7CCD8;

  --rd-text:           #0F141F;
  --rd-text-body:      #232937;
  --rd-text-secondary: #3C4453;
  --rd-text-muted:     #5A6273;
  --rd-text-subtle:    #6B7280;

  --rd-primary:        #1536B8;
  --rd-accent:         #1D4ED8;
  --rd-accent-mid:     #1A44C4;
  --rd-accent-light:   #7BA5FF;
  --rd-accent-lift:    #7BA5FF;
  --rd-accent-wash:    #E8EEFC;

  --rd-high:           #8C3B2E;
  --rd-medium:         #8A6A1F;
  --rd-low:            #1D4ED8;

  --rd-font:           'Space Grotesk', Helvetica, Arial, sans-serif;
  --rd-font-mono:      'JetBrains Mono', ui-monospace, monospace;

  --rd-size-display:   56px;  --rd-lh-display: 1.05;  --rd-ls-display: -0.04em;
  --rd-size-h1:        36px;  --rd-lh-h1:      1.15;  --rd-ls-h1:      -0.03em;
  --rd-size-h2:        24px;  --rd-lh-h2:      1.25;  --rd-ls-h2:      -0.02em;
  --rd-size-h3:        18px;  --rd-lh-h3:      1.3;   --rd-ls-h3:      -0.02em;
  --rd-size-body:      16px;  --rd-lh-body:    1.6;
  --rd-size-small:     13px;  --rd-lh-small:   1.5;
  --rd-size-label:     11px;  --rd-ls-label:   0.18em;

  --rd-space-1: 4px;   --rd-space-2: 8px;   --rd-space-3: 12px;
  --rd-space-4: 16px;  --rd-space-5: 20px;  --rd-space-6: 24px;
  --rd-space-8: 32px;  --rd-space-10: 40px; --rd-space-12: 48px;
  --rd-space-16: 64px; --rd-space-20: 80px;

  --rd-radius-sm:  2px;
  --rd-radius:     3px;
  --rd-radius-lg:  6px;
  --rd-border:     1px solid var(--rd-line);
  --rd-focus:      0 0 0 2px #FFFFFF, 0 0 0 4px #1D4ED8;

  --rd-shadow-1: 0 1px 2px rgba(15, 20, 31, 0.06);
  --rd-shadow-2: 0 4px 12px rgba(15, 20, 31, 0.08);
  --rd-shadow-3: 0 16px 40px rgba(15, 20, 31, 0.12);

  --rd-measure:    62ch;
  --rd-container:  1160px;
  --rd-gutter:     40px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--rd-font);
  color: var(--rd-text-body);
  background: var(--rd-ground);
  line-height: var(--rd-lh-body);
  font-size: var(--rd-size-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rd-accent); text-decoration: none; }
a:hover { color: var(--rd-ink); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--rd-focus); border-radius: var(--rd-radius-sm); }
img { max-width: 100%; display: block; }
.eyebrow, .mono-label {
  font-family: var(--rd-font-mono);
  font-size: var(--rd-size-label);
  letter-spacing: var(--rd-ls-label);
  text-transform: uppercase;
}

/* Responsive breakpoints — matched to the NSW Design System's 5-tier grid
   (xs 0-575, sm 576-767, md 768-991, lg 992-1199, xl 1200+). Written here as
   max-width equivalents of each tier's lower bound, since this stylesheet
   uses max-width queries throughout. */

.container { max-width: var(--rd-container); margin: 0 auto; padding: 0 var(--rd-gutter); }
@media (max-width: 767px) { .container { padding: 0 24px; } }

/* Nav */
.rd-nav { position: sticky; top: 0; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rd-line); z-index: 50; }
.rd-nav-inner { max-width: var(--rd-container); margin: 0 auto; padding: 0 var(--rd-gutter); height: 72px; display: flex; align-items: center; gap: 32px; }
@media (max-width: 767px) { .rd-nav-inner { padding: 0 20px; gap: 12px; } }
.rd-logo { display: flex; align-items: center; gap: 11px; color: var(--rd-ink); }
.rd-logo svg { flex-shrink: 0; }
.rd-logo-word { font-size: 16px; letter-spacing: -0.035em; white-space: nowrap; }
.rd-logo-word .light { font-weight: 400; color: var(--rd-text-subtle); }
.rd-logo-word .bold { font-weight: 700; }
@media (max-width: 575px) { .rd-logo-word { display: none; } }

.hero-brand-label { display: none; font-size: 16px; letter-spacing: -0.035em; margin-bottom: 14px; }
.hero-brand-label .light { font-weight: 400; color: var(--rd-text-subtle); }
.hero-brand-label .bold { font-weight: 700; color: var(--rd-ink); }
@media (max-width: 575px) { .hero-brand-label { display: block; } }
.rd-nav-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.rd-nav-links a { color: var(--rd-text-secondary); }
.rd-nav-links a:hover { color: var(--rd-ink); }
.rd-nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
@media (max-width: 767px) { .rd-nav-actions { gap: 6px; } }
@media (max-width: 767px) { .rd-nav-links { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: var(--rd-radius); font-size: 16px; font-weight: 600; border: 0; cursor: pointer; font-family: var(--rd-font); transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--rd-accent); color: #FFFFFF !important; }
.btn-primary:hover { background: var(--rd-ink); color: #FFFFFF !important; }
.btn-secondary { background: #FFFFFF; color: var(--rd-ink) !important; border: 1px solid var(--rd-line-strong); }
.btn-secondary:hover { border-color: var(--rd-ink); background: var(--rd-surface); color: var(--rd-ink) !important; }
.btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; font-size: 13px; font-weight: 500; border-radius: var(--rd-radius); border: 1px solid var(--rd-line-strong); color: var(--rd-ink) !important; background: #fff; white-space: nowrap; }
.btn-sm:hover { border-color: var(--rd-ink); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(2px); }
.btn svg, .btn-sm svg { flex-shrink: 0; }
.nav-cta { padding: 10px 16px; font-size: 13px; white-space: nowrap; }
@media (max-width: 767px) { .nav-cta, .btn-sm { padding: 8px 10px; } }

/* Nav actions collapse to icon + short label below md, so the phone
   number and CTA never wrap across two lines on a phone-width nav bar. */
.nav-label-short { display: none; }
@media (max-width: 767px) {
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
}

/* Hero */
.hero { padding-top: 88px; padding-bottom: 96px; position: relative; }
.hero-eyebrow { color: var(--rd-accent); margin-bottom: 20px; display: block; }
.hero h1 { font-size: clamp(34px, 5.5vw, var(--rd-size-display)); font-weight: 600; letter-spacing: var(--rd-ls-display); line-height: var(--rd-lh-display); max-width: 850px; margin-bottom: 22px; text-wrap: pretty; color: var(--rd-ink); }
.hero .lede { font-size: clamp(16px, 2vw, 19px); color: var(--rd-text-secondary); max-width: 640px; line-height: 1.6; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Sections */
.section { padding-top: 80px; padding-bottom: 80px; }
.section-alt { background: var(--rd-canvas); }
.section-eyebrow { color: var(--rd-accent); margin-bottom: 14px; display: block; }
.section h2 { font-size: clamp(26px, 3.6vw, var(--rd-size-display)); font-weight: 600; letter-spacing: var(--rd-ls-display); line-height: 1.12; max-width: 720px; margin-bottom: 18px; color: var(--rd-ink); text-wrap: pretty; }
.section .lede { font-size: 17px; color: var(--rd-text-secondary); max-width: var(--rd-measure); line-height: 1.6; margin-bottom: 40px; }

/* Two-column story with pull quote */
.story-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; margin-top: 8px; }
@media (max-width: 767px) { .story-grid { grid-template-columns: 1fr; gap: 24px; } }
.story-pull { font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--rd-primary); border-left: 3px solid var(--rd-accent); padding: 4px 0 4px 22px; }
.story-body p { font-size: 16px; color: var(--rd-text-secondary); line-height: 1.65; margin-bottom: 16px; }
.story-body p:last-child { margin-bottom: 0; }

/* Cards / grid */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
@media (max-width: 991px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .card-grid { grid-template-columns: 1fr; } }
.card-grid.card-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) { .card-grid.card-grid-2 { grid-template-columns: 1fr; } }
.card { background: #FFFFFF; border: 1px solid var(--rd-line); border-radius: var(--rd-radius-lg); padding: 28px; }
.card-num { font-family: var(--rd-font-mono); font-size: 12px; font-weight: 500; color: var(--rd-accent); letter-spacing: 0.05em; margin-bottom: 14px; }
.card h3 { font-size: var(--rd-size-h3); font-weight: 600; letter-spacing: var(--rd-ls-h3); margin-bottom: 8px; color: var(--rd-ink); }
.card p { font-size: 14px; color: var(--rd-text-secondary); line-height: 1.6; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.card ul li { font-size: 14px; color: var(--rd-text-secondary); line-height: 1.5; padding-left: 18px; position: relative; }
.card ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--rd-accent); border-radius: 50%; }

/* Technology chips */
.tech-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tech-chip { font-family: var(--rd-font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--rd-primary); border: 1px solid var(--rd-line-strong); background: #FFFFFF; border-radius: var(--rd-radius-sm); padding: 8px 13px; }

/* Project cards */
.project-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
.project-card { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr); gap: 24px; background: #FFFFFF; border: 1px solid var(--rd-line); border-radius: var(--rd-radius-lg); overflow: hidden; }
@media (max-width: 575px) { .project-card { grid-template-columns: 1fr; } }
a.project-card:hover { border-color: var(--rd-line-strong); }
.project-card .project-shot { background: #FFFFFF; aspect-ratio: 4/3; overflow: hidden; align-self: center; padding: 20px; }
.project-card .project-shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.project-card .project-body { padding: 28px 28px 28px 0; }
@media (max-width: 575px) { .project-card .project-body { padding: 28px; } }
.project-card .eyebrow { color: var(--rd-accent); margin-bottom: 8px; display: block; }
.project-card h3 { font-size: var(--rd-size-h3); font-weight: 600; letter-spacing: var(--rd-ls-h3); margin-bottom: 6px; color: var(--rd-ink); }
.project-card .project-url { font-family: var(--rd-font-mono); font-size: 12px; color: var(--rd-text-subtle); margin-bottom: 10px; }
.project-card p { font-size: 14px; color: var(--rd-text-secondary); line-height: 1.6; }

/* Comparison block (build vs buy) */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
@media (max-width: 767px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card { background: #FFFFFF; border: 1px solid var(--rd-line); border-radius: var(--rd-radius-lg); padding: 30px; }
.compare-card.is-accent { border-color: var(--rd-accent); background: var(--rd-accent-wash); }
.compare-eyebrow { font-family: var(--rd-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-text-subtle); margin-bottom: 10px; }
.compare-card.is-accent .compare-eyebrow { color: var(--rd-primary); }
.compare-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; color: var(--rd-ink); }
.compare-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.compare-card ul li { font-size: 14px; color: var(--rd-text-secondary); line-height: 1.55; padding-left: 20px; position: relative; }
.compare-card ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-text-subtle); }
.compare-card.is-accent ul li::before { background: var(--rd-accent); }

/* Infra stat strip */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 767px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card { padding: 24px; background: var(--rd-canvas); border-left: 3px solid var(--rd-accent); border-radius: var(--rd-radius); }
.stat-num { font-family: var(--rd-font-mono); font-size: 38px; font-weight: 500; color: var(--rd-primary); line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-size: 13px; color: var(--rd-text-secondary); margin-top: 10px; line-height: 1.5; }

/* Process timeline */
.timeline { list-style: none; margin-top: 16px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 1px; background: var(--rd-line-strong); }
.timeline-step { display: grid; grid-template-columns: 36px 1fr; gap: 22px; align-items: start; padding: 14px 0; position: relative; }
.timeline-marker { width: 36px; height: 36px; background: #FFFFFF; border: 1.5px solid var(--rd-accent); color: var(--rd-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; font-family: var(--rd-font-mono); position: relative; z-index: 1; }
.timeline-body h3 { font-size: 15px; font-weight: 600; margin-bottom: 3px; color: var(--rd-ink); }
.timeline-body p { font-size: 14px; color: var(--rd-text-secondary); line-height: 1.55; }

/* Investment (deliberately light — no figures yet, see brief) */
.investment-block { background: #FFFFFF; border: 1px solid var(--rd-line); border-radius: var(--rd-radius-lg); padding: 40px; max-width: 780px; }
.investment-block p { font-size: 16px; color: var(--rd-text-body); line-height: 1.7; }
.investment-block p + p { margin-top: 14px; }
.investment-block .quiet { font-size: 14px; color: var(--rd-text-muted); font-style: italic; margin-top: 20px; }

/* Final CTA */
.cta-block { background: linear-gradient(135deg, var(--rd-primary) 0%, #0B2A8C 100%); color: #FFFFFF; border-radius: var(--rd-radius-lg); padding: 56px 48px; text-align: center; }
.cta-block h2 { color: #FFFFFF; margin: 0 auto 14px; }
.cta-block p { font-size: 17px; color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 30px; line-height: 1.55; }
.cta-block .btn-primary { background: #FFFFFF; color: var(--rd-primary) !important; }
.cta-block .btn-primary:hover { background: var(--rd-accent-wash); }
.cta-block .btn-secondary { background: transparent; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.4); }
.cta-block .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: #FFFFFF; }

/* Footer */
.rd-foot { padding: 48px 0 40px; border-top: 1px solid var(--rd-line); margin-top: 40px; font-size: 13px; color: var(--rd-text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.rd-foot a { color: var(--rd-text-secondary); }
.rd-foot a:hover { color: var(--rd-accent); }