/* Re Place Patron — design tokens. Source: https://re-place.org.au global-settings.css (fetched 16 Oct 2026) */
:root{
  /* Brand (exact values from live site CSS) */
  --rp-teal:#003D4D;        /* --bde-palette-green-1 */
  --rp-green:#389D7E;       /* --bde-palette-green-3 / primary button bg on site */
  --rp-gold:#EDB04A;        /* --bde-palette-gold */
  --rp-blue:#86C1C7;        /* --bde-palette-blue */
  --rp-lilac:#CF85A9;       /* --bde-palette-lilac */
  --rp-red:#CF4D4C;         /* --bde-palette-red */
  --rp-plum:#4D003D;        /* --accent */
  --rp-bg:#f7f8f8;          /* --bg */
  --rp-bg-shade:#eceded;    /* --bg-shade1 */
  --rp-border:#b1b4b5;      /* --border */
  /* Derived for WCAG AA (NOT on live site) */
  --rp-green-dark:#2B7A62;  /* white text 5.0:1 — brand green #389D7E is only 3.4:1 with white */
  --rp-red-dark:#A8302F;    /* error text on white */
  --rp-text:#1f2a2e;        /* fallback body text (site uses Tailwind grey-700 #374151) */
  --rp-muted:#4b5563;
  /* Type: headings Dosis (site --bde-heading-font-family); body system-ui stack (site --bde-body-font-family) */
  --font-head:"Dosis",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:10px; --shadow:0 2px 10px rgba(0,61,77,.08); --max:1080px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--rp-text);background:var(--rp-bg);line-height:1.55}
h1,h2,h3{font-family:var(--font-head);color:var(--rp-teal);line-height:1.15;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:1.6rem} h3{font-size:1.2rem}
a{color:var(--rp-teal)} a:hover{color:var(--rp-green-dark)}
:focus-visible{outline:3px solid var(--rp-gold);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.btn{display:inline-block;border:2px solid transparent;border-radius:999px;padding:.7em 1.4em;font:600 1rem var(--font-body);cursor:pointer;text-decoration:none;text-align:center}
.btn-primary{background:var(--rp-green-dark);color:#fff}.btn-primary:hover{background:var(--rp-teal);color:#fff}
.btn-secondary{background:#fff;color:var(--rp-teal);border-color:var(--rp-teal)}.btn-secondary:hover{background:var(--rp-bg-shade)}
.btn-danger{background:#fff;color:var(--rp-red-dark);border-color:var(--rp-red-dark)}.btn-danger:hover{background:#fdecec}
.btn-sm{padding:.35em .9em;font-size:.9rem}
.hero{background:#379d7e;color:#fff;padding:56px 0}
.hero h1{color:#fff}.hero p{font-size:1.15rem;max-width:640px}
.hero-layout{display:grid;gap:24px;align-items:center}
.hero-photo{margin:0}
.hero-photo img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.eyebrow{display:inline-block;background:var(--rp-gold);color:var(--rp-teal);font-weight:700;border-radius:999px;padding:.2em .8em;font-size:.85rem;margin-bottom:12px}
.progress{background:rgba(255,255,255,.2);border-radius:999px;height:14px;overflow:hidden;max-width:520px}
/* Gold #EDB04A on #379d7e is ~1.7:1. A darker track keeps the gold fill readable; eyebrow text stays teal on gold. */
.hero .progress{background:rgba(0,0,0,.38)}
.progress span{display:block;height:100%;background:var(--rp-gold)}
.seats{font-weight:700;font-size:1.1rem;margin:.5em 0}
section{padding:40px 0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:1px solid var(--rp-bg-shade)}
.plan{position:relative;display:flex;flex-direction:column;gap:8px}
.plan .price{font-family:var(--font-head);font-size:2.6rem;font-weight:700;color:var(--rp-teal)}
.plan .price small{font-size:1rem;color:var(--rp-muted)}
.plan.featured{border:3px solid var(--rp-green)}
.badge{display:inline-block;border-radius:999px;padding:.15em .7em;font-size:.8rem;font-weight:700}
.badge-gold{background:var(--rp-gold);color:var(--rp-teal)}
.badge-active{background:#d6efe6;color:#1d5c49}.badge-pastdue{background:#fde8c8;color:#7a4b00}.badge-cancelled{background:#eceded;color:#3d4246}
.example{background:#fff7e0;border:1px dashed #b07a10;color:#5c3d00;padding:.4em .8em;border-radius:6px;font-size:.85rem}
.placeholder{background:#ffe9f1;border:1px dashed #a3416b;color:#6b1f40;padding:0 .3em;border-radius:3px;font-weight:600}
.notice{border-left:5px solid var(--rp-green);background:#eef7f3;padding:14px 16px;border-radius:6px}
.notice.warn{border-color:var(--rp-gold);background:#fff7e0}
form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
label{font-weight:600}
input,select{font:inherit;padding:.65em .8em;border:1px solid #767b7d;border-radius:8px;background:#fff;min-width:0}
input:focus-visible,select:focus-visible{outline:3px solid var(--rp-gold);border-color:var(--rp-teal)}
.narrow{max-width:460px;margin:48px auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rp-bg-shade);vertical-align:middle}
th{font-family:var(--font-head);color:var(--rp-teal);background:#f0f4f4}
.table-wrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.toolbar .field{margin:0;flex:1;min-width:200px}
.site-footer{background:var(--rp-teal);color:#dfeeee;padding:28px 0;margin-top:40px;font-size:.9rem}
.site-footer a{color:#fff}
dialog{border:none;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.3);max-width:440px}
dialog::backdrop{background:rgba(0,30,38,.55)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mock-toggle{position:fixed;bottom:12px;right:12px;background:#fff;border:2px dashed var(--rp-plum);border-radius:8px;padding:8px 12px;font-size:.85rem;z-index:10}
@media (max-width:640px){.hero{padding:36px 0}.mock-toggle{position:static;margin:12px}}
@media (min-width:800px){
 .hero-layout{grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:36px}
}
.plan .badge{align-self:flex-start}
/* Header option A — 60px row, hamburger drawer below 860px */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--rp-bg-shade);box-shadow:var(--shadow)}
.hd-row{display:flex;align-items:center;gap:8px;height:60px;padding:0 12px;max-width:var(--max);margin:0 auto}
.hd .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--rp-teal);font-family:var(--font-head);font-weight:700;font-size:1.1rem;min-height:44px}
.hd .brand img{height:48px;width:auto}
.hd .badge{font:600 .7rem/1 var(--font-body);background:var(--rp-plum);color:#fff;padding:4px 7px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.sp{flex:1}
.hd :focus-visible{outline:3px solid var(--rp-gold);outline-offset:2px;border-radius:6px}
.iconbtn{min-width:44px;min-height:44px;border:0;background:none;color:var(--rp-teal);display:grid;place-items:center;cursor:pointer;border-radius:8px}
.iconbtn svg{width:24px;height:24px}
.hd .nav a,.hd .nav button{color:var(--rp-teal);text-decoration:none;font:600 1rem var(--font-body);min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:8px;background:none;border:0;width:auto;text-align:left;cursor:pointer}
.hd .nav a[aria-current="page"]{color:var(--rp-green-dark);box-shadow:inset 0 -3px 0 var(--rp-green-dark)}
.hd .btn-sm{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid var(--rp-teal);color:var(--rp-teal);background:#fff;cursor:pointer}
.hd .btn-sm.solid{background:var(--rp-green-dark);border-color:var(--rp-green-dark);color:#fff}
.hd .desk{display:none}
.hd form.desk{margin:0}
.drawer{display:none;border-top:1px solid var(--rp-bg-shade);background:#fff;padding:8px 12px 16px}
.drawer.open{display:block}
.drawer .nav a,.drawer .nav button{padding:0 12px;font-size:1.05rem;width:100%}
.drawer .nav form{margin:0}
.drawer .nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--rp-green-dark);background:#eef6f3}
.drawer hr{border:0;border-top:1px solid var(--rp-bg-shade);margin:8px 0}
.drawer .who{color:var(--rp-muted);font-size:.85rem;padding:4px 12px}
@media (min-width:860px){
 .hd-row{height:68px;padding:0 24px;gap:16px}
 .hd .brand img{height:52px}
 .hd .mob{display:none!important}
 .hd .desk{display:flex;align-items:center;gap:4px}
 .drawer{display:none!important}
}