/* ======================================================================
   Muru Bridge — murubridge.com
   Brand tokens: Deep Purple #2E174A · Gold #C8971A (text-safe #8A6812 on
   white) · White. Typeface: Arial (brand kit — Inter is logo-only).
   No accent stripes/colour bars — whitespace + icon-in-circle motif only.
   ====================================================================== */

:root{
  --purple:        #2E174A;
  --purple-tint:   #3c2160;
  --gold:          #C8971A;
  --gold-text:     #8A6812; /* AAA-safe gold for body text on white */
  --white:         #FFFFFF;
  --lavender:      #F4F2F7;
  --offwhite:      #FAFAFA;
  --slate-dark:    #1E1B26;
  --ink:           #231830;  /* near-black body copy on light backgrounds */
  --ink-muted:     #5b5468;

  --max-w: 1120px;
  --gutter: 1.25rem;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(46,23,74,0.10);
  --shadow-sm: 0 4px 14px rgba(46,23,74,0.08);

  --font: Arial, Helvetica, "Liberation Sans", sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px; /* matches the deck's 12pt-minimum phone-readability rule at web scale */
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ margin: 0 0 0.6em 0; line-height: 1.15; font-weight: 700; }
p{ margin: 0 0 1em 0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

/* Skip link for keyboard/screen-reader users */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--white); color:var(--purple);
  padding:0.75em 1.25em; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.section{ padding: 5.5rem 0; }
.section--tight{ padding: 4rem 0; }
.section--purple{ background: var(--purple); color: var(--white); }
.section--purple .eyebrow{ color: var(--gold); }
.section--purple a{ color: var(--white); }
.section--lavender{ background: var(--lavender); }
.section--white{ background: var(--white); }

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  display:block;
  font-weight:700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--gold-text);
  margin-bottom: 1rem;
}

h1{ font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3{ font-size: 1.2rem; }

.lede{ font-size: 1.1rem; color: var(--ink-muted); max-width: 46em; }
.section--purple .lede{ color: #d9cfe6; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-weight:700;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover, .btn:focus-visible{ transform: translateY(-1px); }
.btn-primary{
  background: var(--gold);
  color: var(--purple);
}
.btn-primary:hover, .btn-primary:focus-visible{ background:#dba924; box-shadow: var(--shadow-sm); }
.btn-outline{
  background: transparent;
  border-color: currentColor;
}
.section--purple .btn-outline{ color: var(--white); }
.btn-outline:hover, .btn-outline:focus-visible{ background: rgba(255,255,255,0.08); }
.btn-sub{
  display:block;
  font-size: 0.85rem;
  margin-top: 0.6rem;
  color: var(--ink-muted);
}
.section--purple .btn-sub{ color: #c9bcdc; }

/* ---------- Header / logo ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(46,23,74,0.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 0.6rem; padding-bottom: 0.6rem;
}
.site-header img{ height: 34px; width:auto; }
.site-header .btn{ padding: 0.6em 1.2em; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  color: var(--white);
  background: var(--purple);
  overflow: hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(30,15,52,0.94) 0%, rgba(30,15,52,0.88) 42%, rgba(30,15,52,0.55) 100%);
}
.hero__inner{ position:relative; padding-top: 4.5rem; padding-bottom: 3rem; }
.hero h1{ max-width: 16em; }
.hero .lede{ color:#e7defa; }
.hero__ctas{ margin-top:1.75rem; }

.fact-cards{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2.75rem 0 0.5rem;
  margin: 0 -var(--gutter);
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.fact-card{
  scroll-snap-align: start;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.fact-card img{ width:30px; height:30px; margin-bottom: 0.9rem; }
.fact-card .label{ font-weight:700; letter-spacing:0.08em; font-size:0.78rem; color: var(--gold); text-transform:uppercase; }
.fact-card .stat{ font-size: 2.1rem; font-weight:700; margin: 0.25rem 0 0.5rem; }
.fact-card .desc{ font-size:0.92rem; color:#d9cfe6; }
.fact-card .src{ display:block; margin-top:0.75rem; font-size:0.75rem; color:#b6a7cf; }
@media (min-width: 760px){
  .fact-cards{ grid-auto-flow: row; grid-template-columns: repeat(3,1fr); overflow:visible; margin:0; padding-left:0; padding-right:0; padding-top:2.75rem; }
}

/* ---------- Five forces ---------- */
.forces-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width:640px){ .forces-grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:980px){ .forces-grid{ grid-template-columns: repeat(5,1fr);} }
.force-card{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
}
.icon-circle{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.12);
  margin-bottom:1rem;
}
.icon-circle img{ width:24px; height:24px; }
.force-card h3{ font-size:1.05rem; margin-bottom:0.4rem; }
.force-card p{ font-size:0.92rem; color:#d9cfe6; margin:0; }
.source-note{ font-size:0.8rem; color:#b6a7cf; margin-top:2rem; max-width:52em; }
.section--white .source-note, .section--lavender .source-note{ color: var(--ink-muted); }

.timeline-wrap{ margin-top:3rem; }
.timeline-wrap .kicker{ font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.78rem; color: var(--gold); margin-bottom:1rem; display:block; }
.timeline{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:0.75rem;
}
.timeline-item{
  scroll-snap-align:start;
  flex: 0 0 200px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding:1.1rem;
}
.timeline-item .date{ font-weight:700; color: var(--gold); font-size:1.05rem; }
.timeline-item .desc{ font-size:0.85rem; color:#d9cfe6; margin-top:0.4rem; }

/* ---------- Governance vs management ---------- */
.gov-grid{ display:grid; gap:1.5rem; margin-top:2.5rem; }
@media (min-width:640px){ .gov-grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:980px){ .gov-grid{ grid-template-columns: repeat(3,1fr);} }
.gov-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.gov-card h3{ color: var(--purple); }
.gov-card p{ color: var(--ink-muted); font-size:0.98rem; }
.gov-card .src{ font-size:0.8rem; color: var(--gold-text); }
.gov-note{ margin-top:2rem; font-weight:700; color: var(--purple); max-width:48em; }

/* ---------- How we work ---------- */
.steps{ margin-top:2.5rem; display:grid; gap:1.75rem; }
.step{
  display:grid; grid-template-columns: auto 1fr; gap:1.25rem;
  background: var(--white); border-radius: var(--radius); padding:1.75rem;
  box-shadow: var(--shadow-sm);
}
.step .num{
  width:44px; height:44px; border-radius:50%;
  background: var(--purple); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.1rem; flex-shrink:0;
}
.step h3{ color: var(--purple); margin-bottom:0.5rem; }
.step p{ color: var(--ink-muted); font-size:0.98rem; }
.step .benefit{
  margin-top:0.75rem; font-weight:700; color: var(--gold-text); font-size:0.92rem;
}

/* ---------- Who we are ---------- */
.directors{ display:grid; gap:2rem; margin-top:2.5rem; }
@media (min-width:700px){ .directors{ grid-template-columns: repeat(2,1fr);} }
.director-card{ display:flex; gap:1.25rem; align-items:flex-start; }
.director-card img{
  width:92px; height:92px; border-radius:50%; object-fit:cover;
  box-shadow: var(--shadow-sm);
  flex-shrink:0;
}
.director-card h3{ margin-bottom:0.15rem; }
.director-card .role{ color: var(--gold-text); font-weight:700; font-size:0.88rem; margin-bottom:0.5rem; display:block; }
.director-card p{ font-size:0.95rem; color: var(--ink-muted); }

.commitments-intro{ margin-top:3.5rem; text-align:center; }
.commit-grid{ display:grid; gap:1.25rem; margin-top:2rem; }
@media (min-width:640px){ .commit-grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:980px){ .commit-grid{ grid-template-columns: repeat(3,1fr);} }
.commit-card{ text-align:left; }
.commit-card .icon-circle{ background: var(--lavender); width:96px; height:96px; }
.commit-card .icon-circle img{ width:48px; height:48px; }
.commit-card h3{ color: var(--purple); font-size:1.05rem; }
.commit-card p{ font-size:0.92rem; color: var(--ink-muted); }

/* ---------- Naming story ---------- */
.name-section .wrap{ max-width: 860px; }
.name-badge{ width:64px; margin-bottom:1.5rem; }
.name-section p{ color: var(--ink-muted); font-size:1.02rem; }
.name-closing{ font-weight:700; color: var(--purple); font-size:1.15rem; margin-top:1.5rem; }

/* ---------- Same questions ---------- */
.questions-list{ margin-top:2.5rem; display:grid; gap:1rem; }
@media (min-width:760px){ .questions-list{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1100px){ .questions-list{ grid-template-columns: repeat(3,1fr); } }
.q-item{
  display:grid; grid-template-columns:auto 1fr; gap:0.75rem; align-items:flex-start;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding:0.85rem 1rem;
}
.q-item .q-num{ font-weight:700; color: var(--gold); font-size:1.1rem; }
.q-item p{ margin:0; }
.questions-close{ margin-top:2rem; font-size:1.05rem; font-weight:700; max-width:46em; }

/* ---------- AI & data ---------- */
.ai-grid{ display:grid; gap:2.5rem; margin-top:2.5rem; }
@media (min-width:860px){ .ai-grid{ grid-template-columns: repeat(2,1fr);} }
.ai-grid h3{ color: var(--gold); font-size:1.15rem; margin-bottom:0.9rem; }
.ai-grid p{ color:#d9cfe6; font-size:0.98rem; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:2.5rem; margin-top:2.5rem; }
@media (min-width:860px){ .contact-grid{ grid-template-columns: 1.1fr 0.9fr; } }
.contact-form-card{
  background: var(--white); border-radius: var(--radius); padding:1.75rem;
  box-shadow: var(--shadow);
}
.contact-direct{ background: var(--lavender); border-radius: var(--radius); padding:1.75rem; }
.contact-direct h3{ color: var(--purple); margin-bottom:1rem; }
.contact-person{ display:flex; align-items:center; gap:0.75rem; margin-bottom:0.9rem; font-weight:700; color: var(--purple); }
.contact-person img{ width:20px; height:20px; }
.contact-person a{ font-weight:400; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--purple); color:#d9cfe6; padding: 3.5rem 0 2rem; }
.site-footer .top{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; }
.site-footer .brand{ display:flex; align-items:center; gap:0.75rem; }
.site-footer .brand img{ width:40px; height:40px; }
.site-footer .brand .name{ color: var(--white); font-weight:700; font-size:1.1rem; }
.site-footer .tagline{ color:#b6a7cf; font-size:0.9rem; margin-top:0.2rem; }
.site-footer .acknowledgement{ max-width:30em; font-size:0.88rem; color:#b6a7cf; }
.footer-links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a{ font-size:0.92rem; }
.footer-links a:hover{ color: var(--gold); }
.footer-bottom{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.12);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:0.82rem; color:#9988b3;
}
.footer-social img{ width:48px; height:48px; }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Privacy page specifics ---------- */
.policy-page{ background: var(--offwhite); }
.policy-header{ background: var(--purple); color:var(--white); padding: 3rem 0 2.5rem; }
.policy-header .wrap{ max-width: 820px; }
.policy-meta{ font-size:0.85rem; color:#c9bcdc; margin-top:0.5rem; }
.policy-abn{ font-weight:700; color: var(--gold); margin-top:0.9rem; }
.policy-body{ max-width: 820px; margin:0 auto; padding: 3rem var(--gutter) 5rem; }
.policy-body h2{ color: var(--purple); margin-top:2.4rem; font-size:1.4rem; }
.policy-body h3{ color: var(--purple); margin-top:1.6rem; font-size:1.1rem; }
.policy-body p, .policy-body li{ color:#352a45; font-size:1rem; }
.policy-body ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1em; }
.policy-body table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.92rem; }
.policy-body th, .policy-body td{ border:1px solid #ddd3ea; padding:0.6rem 0.75rem; text-align:left; }
.policy-body th{ background: var(--lavender); }
.policy-toc{ background:var(--white); border-radius: var(--radius); padding:1.5rem 1.75rem; box-shadow: var(--shadow-sm); margin-bottom:2rem; }
.policy-toc h2{ margin-top:0; font-size:1.1rem; }
.policy-toc ol{ list-style:decimal; padding-left:1.2rem; columns: 2; column-gap:2rem; font-size:0.92rem; }
.policy-toc a{ color: var(--purple); }
.policy-note{
  background: var(--lavender); box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem; border-radius: var(--radius); font-size:0.92rem; margin: 1.5rem 0;
}
.back-home{ display:inline-block; margin-bottom:1.5rem; font-weight:700; color: var(--white); }
.back-home:hover{ color: var(--gold); }

/* Deter casual copy/selection of policy body text. This is a deterrent, not
   real protection — it does not block view-source, browser reader modes,
   screenshots, or assistive technology (which reads the underlying DOM text
   regardless of these settings, so screen-reader access is unaffected). */
.policy-protected{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}