/* ==========================================================================
   VJ Barnes Osteopathy — Bootstrap 5.3 compatibility layer
   --------------------------------------------------------------------------
   The site was originally built against the Tailwind CDN. This stylesheet
   sits alongside Bootstrap 5.3 and reimplements every Tailwind utility class
   the markup uses, so the class attributes can stay intact while Bootstrap
   handles the reset, grid and JS components.
   All colour tokens continue to come from :root --brand-* set in head.php.
   ========================================================================== */

/* ---- Base + typography -------------------------------------------------- */
:root { --sand-50:#F8F5EF; --sand-200:#E8DFC9; }
html.scroll-smooth { scroll-behavior: smooth; }
body.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-sans   { font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; }
.font-display{ font-family: 'Fraunces', 'Georgia', serif; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold   { font-weight: 700 !important; }
.italic { font-style: italic !important; }
.not-italic { font-style: normal !important; }
.uppercase { text-transform: uppercase !important; }
.tracking-wider { letter-spacing: .05em !important; }
.tracking-\[0\.14em\]{ letter-spacing:.14em; }
.tracking-\[0\.16em\]{ letter-spacing:.16em; }
.tracking-\[0\.18em\]{ letter-spacing:.18em; }
.tracking-\[0\.22em\]{ letter-spacing:.22em; }
.leading-none { line-height: 1 !important; }
.leading-tight{ line-height: 1.15 !important; }
.leading-snug { line-height: 1.35 !important; }
.leading-relaxed{ line-height: 1.7 !important; }
.leading-\[1\.04\]{ line-height:1.04 !important; }
.leading-\[1\.05\]{ line-height:1.05 !important; }

/* selection */
.selection\:bg-brand-200::selection { background: var(--brand-200); }
.selection\:text-brand-900::selection { color: var(--brand-900); }
*::selection { background: var(--brand-200); color: var(--brand-900); }

/* ---- Text sizes (Tailwind scale) --------------------------------------- */
.text-xs { font-size: .75rem !important; line-height: 1rem; }
.text-sm { font-size: .875rem !important; line-height: 1.25rem; }
.text-base { font-size: 1rem !important; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem; }
.text-2xl{ font-size: 1.5rem !important; line-height: 2rem; }
.text-3xl{ font-size: 1.875rem !important; line-height: 2.25rem; }
.text-4xl{ font-size: 2.25rem !important; line-height: 2.5rem; }
.text-5xl{ font-size: 3rem !important; line-height: 1; }
.text-6xl{ font-size: 3.75rem !important; line-height: 1; }
.text-7xl{ font-size: 4.5rem !important; line-height: 1; }
.text-8xl{ font-size: 6rem !important; line-height: 1; }
.text-\[9\.5px\]  { font-size: 9.5px !important; }
.text-\[10px\]    { font-size: 10px !important; }
.text-\[11px\]    { font-size: 11px !important; }
.text-\[12px\]    { font-size: 12px !important; }
.text-\[13px\]    { font-size: 13px !important; }
.text-\[14px\]    { font-size: 14px !important; }
.text-\[14\.5px\] { font-size: 14.5px !important; }
.text-\[15px\]    { font-size: 15px !important; }
.text-\[7rem\]    { font-size: 7rem !important; }

/* ---- Brand palette (colour utilities) ---------------------------------- */
.text-brand-100 { color: var(--brand-100); }
.text-brand-200 { color: var(--brand-200); }
.text-brand-300 { color: var(--brand-300); }
.text-brand-600 { color: var(--brand-600); }
.text-brand-700 { color: var(--brand-700); }
.text-brand-800 { color: var(--brand-800); }
.text-brand-100\/80  { color: rgb(var(--brand-100-rgb) / .80); }
.text-brand-100\/90  { color: rgb(var(--brand-100-rgb) / .90); }
.text-brand-50\/90   { color: rgb(var(--brand-50-rgb)  / .90); }
.text-brand-300\/60  { color: rgb(var(--brand-300-rgb) / .60); }
.text-brand-300\/30  { color: rgb(var(--brand-300-rgb) / .30); }
.text-brand-300\/15  { color: rgb(var(--brand-300-rgb) / .15); }
.text-brand-600\/12  { color: rgb(var(--brand-600-rgb) / .12); }
.text-brand-600\/30  { color: rgb(var(--brand-600-rgb) / .30); }

.bg-brand-50   { background-color: var(--brand-50); }
.bg-brand-300  { background-color: var(--brand-300); }
.bg-brand-400  { background-color: var(--brand-400); }
.bg-brand-500  { background-color: var(--brand-500); }
.bg-brand-600  { background-color: var(--brand-600); }
.bg-brand-700  { background-color: var(--brand-700); }
.bg-brand-300\/20 { background-color: rgb(var(--brand-300-rgb) / .20); }
.bg-brand-300\/70 { background-color: rgb(var(--brand-300-rgb) / .70); }
.bg-brand-400\/10 { background-color: rgb(var(--brand-400-rgb) / .10); }
.bg-brand-500\/10 { background-color: rgb(var(--brand-500-rgb) / .10); }
.bg-brand-600\/60 { background-color: rgb(var(--brand-600-rgb) / .60); }

.bg-sand-50 { background-color: var(--sand-50); }
.bg-white { background-color: #fff !important; }
.bg-white\/10 { background-color: rgba(255,255,255,.10); }
.bg-white\/15 { background-color: rgba(255,255,255,.15); }
.bg-white\/70 { background-color: rgba(255,255,255,.70); }
.bg-white\/95 { background-color: rgba(255,255,255,.95); }
.bg-white\/\[0\.04\] { background-color: rgba(255,255,255,.04); }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-300 { background-color: #cbd5e1; }
.bg-slate-900\/50 { background-color: rgba(15,23,42,.5); }
.bg-emerald-500 { background-color: #10b981; }
.bg-accent-500 { background-color: #d97706; }
.bg-yellow-400\/15 { background-color: rgba(250,204,21,.15); }

.text-white { color: #fff !important; }
.text-white\/85 { color: rgba(255,255,255,.85); }
.text-white\/90 { color: rgba(255,255,255,.90); }
.text-white\/95 { color: rgba(255,255,255,.95); }
.text-transparent { color: transparent !important; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-emerald-500 { color: #10b981; }
.text-rose-500 { color: #f43f5e; }
.text-rose-600 { color: #e11d48; }
.text-yellow-400 { color: #facc15; }
.text-yellow-500 { color: #eab308; }

/* ---- Gradients (Tailwind bg-gradient-* + from/via/to) ------------------ */
.bg-gradient-to-r  { background-image: linear-gradient(to right,  var(--tw-gradient-stops)); }
.bg-gradient-to-t  { background-image: linear-gradient(to top,    var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
[class*="bg-gradient-to-"] { --tw-gradient-from: transparent; --tw-gradient-via: ; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via, ), var(--tw-gradient-to); }

/* from-* */
.from-transparent { --tw-gradient-from: transparent; }
.from-white       { --tw-gradient-from: #fff; }
.from-brand-50    { --tw-gradient-from: var(--brand-50); }
.from-brand-300   { --tw-gradient-from: var(--brand-300); }
.from-brand-300\/20 { --tw-gradient-from: rgb(var(--brand-300-rgb) / .20); }
.from-brand-300\/25 { --tw-gradient-from: rgb(var(--brand-300-rgb) / .25); }
.from-brand-300\/30 { --tw-gradient-from: rgb(var(--brand-300-rgb) / .30); }
.from-brand-300\/40 { --tw-gradient-from: rgb(var(--brand-300-rgb) / .40); }
.from-brand-400\/30 { --tw-gradient-from: rgb(var(--brand-400-rgb) / .30); }
.from-brand-600   { --tw-gradient-from: var(--brand-600); }
.from-brand-600\/40 { --tw-gradient-from: rgb(var(--brand-600-rgb) / .40); }
.from-brand-700   { --tw-gradient-from: var(--brand-700); }
.from-brand-800   { --tw-gradient-from: var(--brand-800); }
.from-brand-900   { --tw-gradient-from: var(--brand-900); }
.from-brand-900\/90 { --tw-gradient-from: rgb(var(--brand-900-rgb) / .90); }
.from-brand-900\/95 { --tw-gradient-from: rgb(var(--brand-900-rgb) / .95); }
.from-sand-50     { --tw-gradient-from: var(--sand-50); }
.from-sand-200\/60{ --tw-gradient-from: rgba(232,223,201,.60); }
.from-slate-950\/40 { --tw-gradient-from: rgba(2,6,23,.40); }
.from-slate-950\/50 { --tw-gradient-from: rgba(2,6,23,.50); }
.from-slate-950\/70 { --tw-gradient-from: rgba(2,6,23,.70); }
.from-slate-950\/85 { --tw-gradient-from: rgba(2,6,23,.85); }

/* via-* */
.via-transparent { --tw-gradient-via: transparent; }
.via-brand-200\/20 { --tw-gradient-via: rgb(var(--brand-200-rgb) / .20); }
.via-brand-200\/30 { --tw-gradient-via: rgb(var(--brand-200-rgb) / .30); }
.via-brand-300\/40 { --tw-gradient-via: rgb(var(--brand-300-rgb) / .40); }
.via-brand-400    { --tw-gradient-via: var(--brand-400); }
.via-brand-500    { --tw-gradient-via: var(--brand-500); }
.via-brand-600\/15 { --tw-gradient-via: rgb(var(--brand-600-rgb) / .15); }
.via-brand-600\/30 { --tw-gradient-via: rgb(var(--brand-600-rgb) / .30); }
.via-brand-800\/90 { --tw-gradient-via: rgb(var(--brand-800-rgb) / .90); }
.via-brand-900\/70 { --tw-gradient-via: rgb(var(--brand-900-rgb) / .70); }
.via-brand-950    { --tw-gradient-via: #042f2e; }
.via-slate-950\/20 { --tw-gradient-via: rgba(2,6,23,.20); }
.via-slate-950\/40 { --tw-gradient-via: rgba(2,6,23,.40); }

/* to-* */
.to-transparent { --tw-gradient-to: transparent; }
.to-brand-100\/40 { --tw-gradient-to: rgb(var(--brand-100-rgb) / .40); }
.to-brand-300    { --tw-gradient-to: var(--brand-300); }
.to-brand-50\/40 { --tw-gradient-to: rgb(var(--brand-50-rgb) / .40); }
.to-brand-800    { --tw-gradient-to: var(--brand-800); }
.to-brand-900    { --tw-gradient-to: var(--brand-900); }
.to-brand-900\/30{ --tw-gradient-to: rgb(var(--brand-900-rgb) / .30); }
.to-brand-900\/40{ --tw-gradient-to: rgb(var(--brand-900-rgb) / .40); }
.to-brand-950\/95{ --tw-gradient-to: rgba(4,47,46,.95); }
.to-sand-50      { --tw-gradient-to: var(--sand-50); }
.to-sand-200     { --tw-gradient-to: #E8DFC9; }
.to-sand-200\/30 { --tw-gradient-to: rgba(232,223,201,.30); }
.to-sand-200\/40 { --tw-gradient-to: rgba(232,223,201,.40); }
.to-slate-950    { --tw-gradient-to: #020617; }

/* Arbitrary radial gradients seen inline */
.bg-\[radial-gradient\(60\%_60\%_at_20\%_30\%\,\#5eead4_0\%\,transparent_60\%\)\,radial-gradient\(40\%_40\%_at_85\%_75\%\,\#d8b88a_0\%\,transparent_55\%\)\]{
  background-image: radial-gradient(60% 60% at 20% 30%,#5eead4 0%,transparent 60%),radial-gradient(40% 40% at 85% 75%,#d8b88a 0%,transparent 55%);
}
.bg-\[radial-gradient\(60\%_60\%_at_30\%_20\%\,\#5eead4_0\%\,transparent_60\%\)\,radial-gradient\(40\%_40\%_at_80\%_70\%\,\#d8b88a_0\%\,transparent_55\%\)\]{
  background-image: radial-gradient(60% 60% at 30% 20%,#5eead4 0%,transparent 60%),radial-gradient(40% 40% at 80% 70%,#d8b88a 0%,transparent 55%);
}
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.mix-blend-soft-light { mix-blend-mode: soft-light; }

/* ---- Display / positioning / layout ------------------------------------ */
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.flex  { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid  { display: grid !important; }
.hidden{ display: none !important; }

.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0 !important; }
.items-baseline { align-items: baseline !important; }
.items-center   { align-items: center !important; }
.items-start    { align-items: flex-start !important; }
.items-end      { align-items: flex-end !important; }
.self-center    { align-self: center !important; }
.justify-center { justify-content: center !important; }
.justify-between{ justify-content: space-between !important; }
.place-items-center { place-items: center !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.inset-0  { inset: 0 !important; }
.inset-x-0{ left:0 !important; right:0 !important; }
.inset-x-8{ left:2rem !important; right:2rem !important; }
.-inset-1\.5{ inset:-.375rem !important; }
.-inset-2 { inset:-.5rem !important; }
.-inset-3 { inset:-.75rem !important; }
.-inset-4 { inset:-1rem !important; }
.-inset-5 { inset:-1.25rem !important; }
.-inset-x-2{ left:-.5rem !important; right:-.5rem !important; }
.-inset-y-3{ top:-.75rem !important; bottom:-.75rem !important; }
.top-0 { top: 0 !important; }
.top-3 { top: .75rem !important; }
.top-4 { top: 1rem !important; }
.top-5 { top: 1.25rem !important; }
.top-6 { top: 1.5rem !important; }
.top-8 { top: 2rem !important; }
.top-10{ top: 2.5rem !important; }
.top-12{ top: 3rem !important; }
.top-14{ top: 3.5rem !important; }
.top-20{ top: 5rem !important; }
.top-1\/3 { top: 33.333% !important; }
.-top-2 { top:-.5rem !important; }
.-top-4 { top:-1rem !important; }
.-top-5 { top:-1.25rem !important; }
.-top-10{ top:-2.5rem !important; }
.-top-12{ top:-3rem !important; }
.-top-20{ top:-5rem !important; }
.-top-32{ top:-8rem !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-1 { bottom: .25rem !important; }
.bottom-4 { bottom: 1rem !important; }
.bottom-5 { bottom: 1.25rem !important; }
.bottom-10{ bottom: 2.5rem !important; }
.bottom-12{ bottom: 3rem !important; }
.bottom-20{ bottom: 5rem !important; }
.-bottom-5 { bottom:-1.25rem !important; }
.-bottom-6 { bottom:-1.5rem !important; }
.-bottom-16{ bottom:-4rem !important; }
.left-0 { left: 0 !important; }
.left-1\/2 { left: 50% !important; }
.left-1\/3 { left: 33.333% !important; }
.left-1\/4 { left: 25% !important; }
.left-4 { left: 1rem !important; }
.left-5 { left: 1.25rem !important; }
.left-6 { left: 1.5rem !important; }
.left-10{ left: 2.5rem !important; }
.-left-1 { left:-.25rem !important; }
.-left-4 { left:-1rem !important; }
.-left-6 { left:-1.5rem !important; }
.-left-16{ left:-4rem !important; }
.-left-24{ left:-6rem !important; }
.-left-32{ left:-8rem !important; }
.right-0 { right: 0 !important; }
.right-1 { right: .25rem !important; }
.right-3 { right: .75rem !important; }
.right-4 { right: 1rem !important; }
.right-5 { right: 1.25rem !important; }
.right-8 { right: 2rem !important; }
.right-10{ right: 2.5rem !important; }
.right-12{ right: 3rem !important; }
.right-14{ right: 3.5rem !important; }
.right-1\/4{ right: 25% !important; }
.-right-1 { right:-.25rem !important; }
.-right-2 { right:-.5rem !important; }
.-right-5 { right:-1.25rem !important; }
.-right-10{ right:-2.5rem !important; }
.-right-12{ right:-3rem !important; }
.-right-24{ right:-6rem !important; }
.-right-32{ right:-8rem !important; }
.-translate-x-1\/2 { transform: translateX(-50%) !important; }

.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.-z-10{ z-index: -10 !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.isolate { isolation: isolate !important; }
.pointer-events-none { pointer-events: none !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-grab { cursor: grab !important; }
.active\:cursor-grabbing:active { cursor: grabbing !important; }
.touch-none { touch-action: none !important; }
.will-change-transform { will-change: transform; }
.select-none { user-select: none !important; }
.list-none  { list-style: none !important; padding-left: 0 !important; }
.outline-none:focus { outline: none !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.align-top { vertical-align: top !important; }

/* ---- Spacing (Tailwind scale) ------------------------------------------ */
.m-auto { margin: auto !important; }
.mx-auto { margin-left:auto !important; margin-right:auto !important; }
.mx-1  { margin-left:.25rem !important; margin-right:.25rem !important; }
.mx-1\.5{ margin-left:.375rem !important; margin-right:.375rem !important; }
.-mx-2 { margin-left:-.5rem !important; margin-right:-.5rem !important; }
.-mx-4 { margin-left:-1rem !important; margin-right:-1rem !important; }
.ml-0\.5 { margin-left: .125rem !important; }
.ml-1  { margin-left: .25rem !important; }
.ml-auto { margin-left: auto !important; }
.mt-0\.5 { margin-top: .125rem !important; }
.mt-1  { margin-top: .25rem !important; }
.mt-1\.5{ margin-top: .375rem !important; }
.mt-2  { margin-top: .5rem !important; }
.mt-3  { margin-top: .75rem !important; }
.mt-4  { margin-top: 1rem !important; }
.mt-5  { margin-top: 1.25rem !important; }
.mt-6  { margin-top: 1.5rem !important; }
.mt-7  { margin-top: 1.75rem !important; }
.mt-8  { margin-top: 2rem !important; }
.mt-10 { margin-top: 2.5rem !important; }
.mt-12 { margin-top: 3rem !important; }
.mt-14 { margin-top: 3.5rem !important; }
.mb-2  { margin-bottom: .5rem !important; }
.mb-3  { margin-bottom: .75rem !important; }
.mb-6  { margin-bottom: 1.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.my-8  { margin-top:2rem !important; margin-bottom:2rem !important; }
.my-10 { margin-top:2.5rem !important; margin-bottom:2.5rem !important; }

.p-3 { padding: .75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-7 { padding: 1.75rem !important; }
.p-8 { padding: 2rem !important; }
.px-1 { padding-left:.25rem !important; padding-right:.25rem !important; }
.px-2 { padding-left:.5rem !important; padding-right:.5rem !important; }
.px-2\.5{ padding-left:.625rem !important; padding-right:.625rem !important; }
.px-3 { padding-left:.75rem !important; padding-right:.75rem !important; }
.px-3\.5{ padding-left:.875rem !important; padding-right:.875rem !important; }
.px-4 { padding-left:1rem !important; padding-right:1rem !important; }
.px-5 { padding-left:1.25rem !important; padding-right:1.25rem !important; }
.px-6 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
.px-7 { padding-left:1.75rem !important; padding-right:1.75rem !important; }
.py-0\.5{ padding-top:.125rem !important; padding-bottom:.125rem !important; }
.py-1 { padding-top:.25rem !important; padding-bottom:.25rem !important; }
.py-1\.5{ padding-top:.375rem !important; padding-bottom:.375rem !important; }
.py-2 { padding-top:.5rem !important; padding-bottom:.5rem !important; }
.py-2\.5{ padding-top:.625rem !important; padding-bottom:.625rem !important; }
.py-3 { padding-top:.75rem !important; padding-bottom:.75rem !important; }
.py-3\.5{ padding-top:.875rem !important; padding-bottom:.875rem !important; }
.py-4 { padding-top:1rem !important; padding-bottom:1rem !important; }
.py-5 { padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
.py-6 { padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
.py-16{ padding-top:4rem !important; padding-bottom:4rem !important; }
.py-20{ padding-top:5rem !important; padding-bottom:5rem !important; }
.py-32{ padding-top:8rem !important; padding-bottom:8rem !important; }
.pt-3 { padding-top:.75rem !important; }
.pt-4 { padding-top:1rem !important; }
.pt-6 { padding-top:1.5rem !important; }
.pt-12{ padding-top:3rem !important; }
.pt-20{ padding-top:5rem !important; }
.pb-2 { padding-bottom:.5rem !important; }
.pb-4 { padding-bottom:1rem !important; }
.pb-6 { padding-bottom:1.5rem !important; }
.pb-16{ padding-bottom:4rem !important; }
.pb-24{ padding-bottom:6rem !important; }
.pl-6 { padding-left:1.5rem !important; }
.pr-2 { padding-right:.5rem !important; }
.pr-10{ padding-right:2.5rem !important; }

.gap-0 { gap: 0 !important; }
.gap-0\.5{ gap:.125rem !important; }
.gap-1 { gap:.25rem !important; }
.gap-1\.5{ gap:.375rem !important; }
.gap-2 { gap:.5rem !important; }
.gap-2\.5{ gap:.625rem !important; }
.gap-3 { gap:.75rem !important; }
.gap-4 { gap:1rem !important; }
.gap-5 { gap:1.25rem !important; }
.gap-6 { gap:1.5rem !important; }
.gap-8 { gap:2rem !important; }
.gap-10{ gap:2.5rem !important; }
.gap-12{ gap:3rem !important; }

.space-y-5 > * + * { margin-top: 1.25rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }

/* ---- Sizes -------------------------------------------------------------- */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-1\/2 { width: 50% !important; }
.w-2\/3 { width: 66.6667% !important; }
.w-px { width: 1px !important; }
.w-1 { width:.25rem !important; }
.w-1\.5 { width:.375rem !important; }
.w-2 { width:.5rem !important; }
.w-2\.5 { width:.625rem !important; }
.w-3 { width:.75rem !important; }
.w-3\.5 { width:.875rem !important; }
.w-4 { width:1rem !important; }
.w-5 { width:1.25rem !important; }
.w-6 { width:1.5rem !important; }
.w-7 { width:1.75rem !important; }
.w-8 { width:2rem !important; }
.w-9 { width:2.25rem !important; }
.w-10{ width:2.5rem !important; }
.w-11{ width:2.75rem !important; }
.w-12{ width:3rem !important; }
.w-14{ width:3.5rem !important; }
.w-16{ width:4rem !important; }
.w-20{ width:5rem !important; }
.w-24{ width:6rem !important; }
.w-28{ width:7rem !important; }
.w-32{ width:8rem !important; }
.w-40{ width:10rem !important; }
.w-44{ width:11rem !important; }
.w-48{ width:12rem !important; }
.w-64{ width:16rem !important; }
.w-72{ width:18rem !important; }
.w-80{ width:20rem !important; }
.w-96{ width:24rem !important; }
.w-\[28rem\]{ width:28rem !important; }
.w-\[92vw\] { width:92vw !important; }

.h-full { height: 100% !important; }
.h-px   { height: 1px !important; }
.h-1  { height:.25rem !important; }
.h-1\.5 { height:.375rem !important; }
.h-2  { height:.5rem !important; }
.h-2\.5 { height:.625rem !important; }
.h-3  { height:.75rem !important; }
.h-3\.5 { height:.875rem !important; }
.h-4  { height:1rem !important; }
.h-5  { height:1.25rem !important; }
.h-6  { height:1.5rem !important; }
.h-7  { height:1.75rem !important; }
.h-8  { height:2rem !important; }
.h-9  { height:2.25rem !important; }
.h-10 { height:2.5rem !important; }
.h-11 { height:2.75rem !important; }
.h-12 { height:3rem !important; }
.h-14 { height:3.5rem !important; }
.h-16 { height:4rem !important; }
.h-20 { height:5rem !important; }
.h-24 { height:6rem !important; }
.h-32 { height:8rem !important; }
.h-40 { height:10rem !important; }
.h-44 { height:11rem !important; }
.h-48 { height:12rem !important; }
.h-72 { height:18rem !important; }
.h-80 { height:20rem !important; }
.h-96 { height:24rem !important; }
.h-2\/5{ height:40% !important; }
.h-\[28rem\]{ height:28rem !important; }
.h-\[48px\] { height:48px !important; }
.h-\[80px\] { height:80px !important; }
.min-h-\[56px\]{ min-height:56px !important; }
.max-h-\[78vh\]{ max-height:78vh !important; }

.max-w-md  { max-width: 28rem !important; }
.max-w-sm  { max-width: 24rem !important; }
.max-w-xl  { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }

/* ---- Borders / rings / rounding --------------------------------------- */
.border { border: 1px solid var(--brand-200); }
.border-0 { border: 0 !important; }
.border-2 { border-width: 2px !important; }
.border-b { border-bottom: 1px solid; }
.border-t { border-top: 1px solid; }
.border-y { border-top: 1px solid; border-bottom: 1px solid; }
.border-b-2 { border-bottom-width: 2px !important; border-bottom-style: solid; }
.border-slate-200    { border-color: #e2e8f0 !important; }
.border-slate-200\/70{ border-color: rgba(226,232,240,.7) !important; }
.border-brand-300\/25{ border-color: rgb(var(--brand-300-rgb) / .25) !important; }
.border-brand-300\/30{ border-color: rgb(var(--brand-300-rgb) / .30) !important; }
.border-brand-600    { border-color: var(--brand-600) !important; }
.border-brand-600\/40{ border-color: rgb(var(--brand-600-rgb) / .40) !important; }

.rounded    { border-radius: .25rem !important; }
.rounded-md { border-radius: .375rem !important; }
.rounded-lg { border-radius: .5rem !important; }
.rounded-xl { border-radius: .75rem !important; }
.rounded-2xl{ border-radius: 1rem !important; }
.rounded-3xl{ border-radius: 1.5rem !important; }
.rounded-full{border-radius: 9999px !important; }
.rounded-b-full{border-bottom-left-radius:9999px !important; border-bottom-right-radius:9999px !important; }
.rounded-\[1\.5rem\]{ border-radius:1.5rem !important; }
.rounded-\[2rem\]   { border-radius:2rem !important; }
.rounded-\[2\.25rem\]{ border-radius:2.25rem !important; }

.ring-1 { box-shadow: 0 0 0 1px var(--_ring, rgba(148,163,184,.3)); }
.ring-2 { box-shadow: 0 0 0 2px var(--_ring, rgba(148,163,184,.3)); }
.ring-4 { box-shadow: 0 0 0 4px var(--_ring, #fff); }
.ring-\[6px\] { box-shadow: 0 0 0 6px var(--_ring, #fff); }
.ring-white  { --_ring: #fff; }
.ring-white\/10 { --_ring: rgba(255,255,255,.10); }
.ring-white\/15 { --_ring: rgba(255,255,255,.15); }
.ring-white\/20 { --_ring: rgba(255,255,255,.20); }
.ring-brand-100    { --_ring: var(--brand-100); }
.ring-brand-200\/60{ --_ring: rgb(var(--brand-200-rgb) / .60); }
.ring-brand-500    { --_ring: var(--brand-500); }
.ring-brand-900    { --_ring: var(--brand-900); }
.ring-sand-50      { --_ring: var(--sand-50); }
.ring-sand-200\/60 { --_ring: rgba(232,223,201,.60); }
.ring-slate-200    { --_ring: #e2e8f0; }
.ring-slate-200\/60{ --_ring: rgba(226,232,240,.60); }
.ring-slate-200\/70{ --_ring: rgba(226,232,240,.70); }
.ring-yellow-400\/30{--_ring: rgba(250,204,21,.30); }
.divide-y > * + *  { border-top: 1px solid #e2e8f0; }
.divide-slate-200 > * + * { border-top-color: #e2e8f0; }

/* ---- Shadow / opacity / blur / effects -------------------------------- */
.shadow      { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1) !important; }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1) !important; }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25) !important; }
.shadow-soft { box-shadow: 0 4px 24px -8px rgba(15,118,110,.18) !important; }
.drop-shadow { filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06)); }
.opacity-0  { opacity: 0 !important; }
.opacity-15 { opacity: .15 !important; }
.opacity-20 { opacity: .20 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-30 { opacity: .30 !important; }
.opacity-70 { opacity: .70 !important; }
.opacity-\[0\.06\] { opacity: .06 !important; }
.opacity-\[0\.07\] { opacity: .07 !important; }
.backdrop-blur    { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.blur-md  { filter: blur(12px); }
.blur-xl  { filter: blur(24px); }
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.\[box-shadow\:inset_0_0_70px_25px_rgba\(15\,23\,42\,0\.2\)\]{ box-shadow: inset 0 0 70px 25px rgba(15,23,42,.2); }

/* ---- Aspect ratios ----------------------------------------------------- */
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-\[16\/10\]{ aspect-ratio: 16 / 10; }
.aspect-\[3\/4\]  { aspect-ratio: 3 / 4; }
.aspect-\[4\/3\]  { aspect-ratio: 4 / 3; }
.aspect-\[4\/5\]  { aspect-ratio: 4 / 5; }
.aspect-\[5\/3\]  { aspect-ratio: 5 / 3; }
.aspect-\[5\/4\]  { aspect-ratio: 5 / 4; }
.object-cover { object-fit: cover !important; }

/* ---- Grid -------------------------------------------------------------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

/* ---- Text alignment / decoration --------------------------------------- */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.underline   { text-decoration: underline !important; }
.hover\:underline:hover { text-decoration: underline !important; }
.line-clamp-6 { display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.placeholder\:text-slate-400::placeholder { color: #94a3b8; }

/* ---- Transitions / transforms ----------------------------------------- */
.transition           { transition: all .2s ease; }
.transition-all       { transition: all .2s ease; }
.transition-opacity   { transition: opacity .2s ease; }
.transition-transform { transition: transform .2s ease; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }
.ease-out { transition-timing-function: cubic-bezier(0,0,.2,1); }

.animate-spin { animation: vjb-spin 1s linear infinite; }
@keyframes vjb-spin { to { transform: rotate(360deg); } }

/* Hover transforms */
.hover\:-translate-y-0\.5:hover { transform: translateY(-.125rem); }
.hover\:-translate-y-1:hover    { transform: translateY(-.25rem); }
.hover\:scale-105:hover         { transform: scale(1.05); }
.hover\:gap-3:hover             { gap: .75rem; }
.hover\:pl-5:hover              { padding-left: 1.25rem !important; }

/* Group hover chains */
.group:hover .group-hover\:scale-105        { transform: scale(1.05); }
.group:hover .group-hover\:scale-\[1\.02\]  { transform: scale(1.02); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(.125rem); }
.group:hover .group-hover\:opacity-100      { opacity: 1 !important; }
.group:hover .group-hover\:gap-2            { gap: .5rem; }
.group:hover .group-hover\:bg-brand-600     { background-color: var(--brand-600) !important; }
.group:hover .group-hover\:bg-white\/25     { background-color: rgba(255,255,255,.25); }
.group:hover .group-hover\:text-brand-600   { color: var(--brand-600) !important; }
.group:hover .group-hover\:text-brand-700   { color: var(--brand-700) !important; }
.group\/btn:hover .group-hover\/btn\:translate-x-0\.5 { transform: translateX(.125rem); }
.group:active .group-active\:scale-95       { transform: scale(.95); }
.group[open] .group-open\:rotate-180        { transform: rotate(180deg); }

/* Hover colours + backgrounds */
.hover\:bg-accent-600:hover { background-color: #c2410c !important; }
.hover\:bg-brand-50:hover   { background-color: var(--brand-50) !important; }
.hover\:bg-brand-600:hover  { background-color: var(--brand-600) !important; }
.hover\:bg-slate-100:hover  { background-color: #f1f5f9 !important; }
.hover\:bg-slate-200:hover  { background-color: #e2e8f0 !important; }
.hover\:bg-white\/15:hover  { background-color: rgba(255,255,255,.15); }
.hover\:bg-white\/20:hover  { background-color: rgba(255,255,255,.20); }
.hover\:bg-white\/60:hover  { background-color: rgba(255,255,255,.60); }
.hover\:bg-yellow-400\/25:hover { background-color: rgba(250,204,21,.25); }
.hover\:border-brand-500:hover  { border-color: var(--brand-500) !important; }
.hover\:from-brand-600:hover    { --tw-gradient-from: var(--brand-600); }
.hover\:to-brand-700:hover      { --tw-gradient-to: var(--brand-700); }
.hover\:ring-brand-500:hover    { --_ring: var(--brand-500); }
.hover\:shadow-2xl:hover        { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25) !important; }
.hover\:shadow-soft:hover       { box-shadow: 0 4px 24px -8px rgba(15,118,110,.18) !important; }
.hover\:text-brand-600:hover    { color: var(--brand-600) !important; }
.hover\:text-brand-700:hover    { color: var(--brand-700) !important; }
.hover\:text-white:hover        { color: #fff !important; }

/* Focus */
.focus\:not-sr-only:focus,
.focus\:absolute:focus  { position: absolute; }
.focus\:top-4:focus     { top: 1rem; }
.focus\:left-4:focus    { left: 1rem; }
.focus\:z-50:focus      { z-index: 50; }
.focus\:bg-white:focus  { background: #fff; }
.focus\:text-brand-800:focus { color: var(--brand-800); }
.focus\:px-4:focus      { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus      { padding-top:.5rem; padding-bottom:.5rem; }
.focus\:rounded-md:focus{ border-radius:.375rem; }
.focus\:shadow:focus    { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1); }
.focus\:ring-2:focus    { box-shadow: 0 0 0 2px var(--_focus, rgba(20,184,166,.6)); }
.focus\:ring-brand-500\/60:focus { --_focus: rgb(var(--brand-500-rgb) / .60); }

.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-60:disabled { opacity: .6; }

/* Screen-reader only (bootstrap has .visually-hidden; keep tailwind alias) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Prose spacing utility used on article page */
.prose-spaced > * + * { margin-top: 1rem; }
.prose-spaced h2 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin-top: 2rem; }
.prose-spaced h3 { font-family: 'Fraunces', serif; font-size: 1.25rem; margin-top: 1.5rem; }
.prose-spaced p  { color: #475569; line-height: 1.75; }

/* Grid template for name : content sections */
.sm\:grid-cols-\[auto\,1fr\] { grid-template-columns: auto 1fr; }

/* ==========================================================================
   RESPONSIVE VARIANTS
   Tailwind breakpoints: sm=640px, md=768px, lg=1024px, xl=1280px.
   ========================================================================== */
@media (min-width: 640px){
  .sm\:block  { display: block !important; }
  .sm\:hidden { display: none !important; }
  .sm\:inline { display: inline !important; }
  .sm\:flex-row { flex-direction: row !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:justify-between { justify-content: space-between !important; }
  .sm\:justify-start   { justify-content: flex-start !important; }
  .sm\:mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .sm\:mt-4 { margin-top: 1rem !important; }
  .sm\:mt-14{ margin-top: 3.5rem !important; }
  .sm\:p-6 { padding: 1.5rem !important; }
  .sm\:p-7 { padding: 1.75rem !important; }
  .sm\:p-8 { padding: 2rem !important; }
  .sm\:p-10{ padding: 2.5rem !important; }
  .sm\:p-12{ padding: 3rem !important; }
  .sm\:px-3 { padding-left:.75rem !important; padding-right:.75rem !important; }
  .sm\:px-6 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
  .sm\:px-10{ padding-left:2.5rem !important; padding-right:2.5rem !important; }
  .sm\:py-5 { padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
  .sm\:py-8 { padding-top:2rem !important; padding-bottom:2rem !important; }
  .sm\:py-20{ padding-top:5rem !important; padding-bottom:5rem !important; }
  .sm\:py-24{ padding-top:6rem !important; padding-bottom:6rem !important; }
  .sm\:py-28{ padding-top:7rem !important; padding-bottom:7rem !important; }
  .sm\:pl-10{ padding-left:2.5rem !important; }
  .sm\:gap-4 { gap: 1rem !important; }
  .sm\:gap-6 { gap: 1.5rem !important; }
  .sm\:gap-7 { gap: 1.75rem !important; }
  .sm\:gap-8 { gap: 2rem !important; }
  .sm\:text-base { font-size:1rem !important; }
  .sm\:text-lg   { font-size:1.125rem !important; }
  .sm\:text-xl   { font-size:1.25rem !important; }
  .sm\:text-2xl  { font-size:1.5rem !important; }
  .sm\:text-3xl  { font-size:1.875rem !important; }
  .sm\:text-4xl  { font-size:2.25rem !important; }
  .sm\:text-5xl  { font-size:3rem !important; line-height:1; }
  .sm\:text-8xl  { font-size:6rem !important; line-height:1; }
  .sm\:text-left { text-align:left !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:h-\[64px\] { height: 64px !important; }
  .sm\:h-\[88px\] { height: 88px !important; }
  .sm\:h-20 { height: 5rem !important; }
  .sm\:h-36 { height: 9rem !important; }
  .sm\:h-96 { height: 24rem !important; }
  .sm\:w-\[360px\] { width: 360px !important; }
  .sm\:w-36 { width: 9rem !important; }
  .sm\:right-5 { right: 1.25rem !important; }
  .sm\:-top-4 { top: -1rem !important; }
  .sm\:-bottom-8 { bottom: -2rem !important; }
  .sm\:-left-4 { left: -1rem !important; }
  .sm\:-right-2 { right: -.5rem !important; }
  .sm\:-inset-x-4 { left: -1rem !important; right: -1rem !important; }
  .sm\:-inset-y-4 { top: -1rem !important; bottom: -1rem !important; }
}

@media (min-width: 768px){
  .md\:hidden { display: none !important; }
  .md\:flex   { display: flex !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:aspect-auto { aspect-ratio: auto !important; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0,1fr)); }
  .md\:min-h-\[440px\]{ min-height: 440px !important; }
}

@media (min-width: 1024px){
  .lg\:hidden { display: none !important; }
  .lg\:flex   { display: flex !important; }
  .lg\:sticky { position: sticky !important; }
  .lg\:top-24 { top: 6rem !important; }
  .lg\:top-28 { top: 7rem !important; }
  .lg\:bottom-6 { bottom: 1.5rem !important; }
  .lg\:pb-0  { padding-bottom: 0 !important; }
  .lg\:pb-24 { padding-bottom: 6rem !important; }
  .lg\:pt-20 { padding-top: 5rem !important; }
  .lg\:py-24 { padding-top:6rem !important; padding-bottom:6rem !important; }
  .lg\:py-28 { padding-top:7rem !important; padding-bottom:7rem !important; }
  .lg\:px-8  { padding-left:2rem !important; padding-right:2rem !important; }
  .lg\:gap-5  { gap: 1.25rem !important; }
  .lg\:gap-10 { gap: 2.5rem !important; }
  .lg\:gap-14 { gap: 3.5rem !important; }
  .lg\:gap-16 { gap: 4rem !important; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:h-\[68px\]  { height: 68px !important; }
  .lg\:h-\[92px\]  { height: 92px !important; }
  .lg\:max-w-none { max-width: none !important; }
  .lg\:order-1 { order: 1 !important; }
  .lg\:order-2 { order: 2 !important; }
  .lg\:text-\[1\.6rem\]  { font-size: 1.6rem !important; }
  .lg\:text-\[3\.25rem\] { font-size: 3.25rem !important; }
  .lg\:text-4xl { font-size:2.25rem !important; }
  .lg\:text-5xl { font-size:3rem !important; line-height:1; }
  .lg\:text-6xl { font-size:3.75rem !important; line-height:1; }
}

@media (min-width: 1280px){
  .xl\:gap-8 { gap: 2rem !important; }
  .xl\:text-\[3\.75rem\] { font-size: 3.75rem !important; }
}

/* ==========================================================================
   DARK MODE — use .dark class OR data-bs-theme="dark" so we support both.
   ========================================================================== */
:is(.dark, [data-bs-theme="dark"]) body,
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-950 { background-color: #020617; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-900   { background-color: #0f172a !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-800   { background-color: #1e293b !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-700   { background-color: #334155 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-900\/40 { background-color: rgba(15,23,42,.40) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-900\/95 { background-color: rgba(15,23,42,.95) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-slate-800\/60 { background-color: rgba(30,41,59,.60) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-brand-900\/30{ background-color: rgb(var(--brand-900-rgb) / .30) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-brand-900\/40{ background-color: rgb(var(--brand-900-rgb) / .40) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:border-slate-700{ border-color: #334155 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:border-slate-800{ border-color: #1e293b !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:divide-slate-700\/70 > * + * { border-top-color: rgba(51,65,85,.70) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-brand-700\/40 { --_ring: rgb(var(--brand-700-rgb) / .40); }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-slate-700    { --_ring: #334155; }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-slate-700\/60{ --_ring: rgba(51,65,85,.60); }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-slate-800    { --_ring: #1e293b; }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-slate-900    { --_ring: #0f172a; }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-slate-950    { --_ring: #020617; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-brand-200 { color: var(--brand-200) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-brand-300 { color: var(--brand-300) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-brand-300\/15 { color: rgb(var(--brand-300-rgb) / .15) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-brand-300\/30 { color: rgb(var(--brand-300-rgb) / .30) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-slate-100 { color: #f1f5f9 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-slate-200 { color: #e2e8f0 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-slate-300 { color: #cbd5e1 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-slate-400 { color: #94a3b8 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-slate-600 { color: #475569 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:text-white     { color: #fff !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:from-brand-300 { --tw-gradient-from: var(--brand-300); }
:is(.dark, [data-bs-theme="dark"]) .dark\:from-brand-900\/30 { --tw-gradient-from: rgb(var(--brand-900-rgb) / .30); }
:is(.dark, [data-bs-theme="dark"]) .dark\:from-slate-900 { --tw-gradient-from: #0f172a; }
:is(.dark, [data-bs-theme="dark"]) .dark\:from-slate-950 { --tw-gradient-from: #020617; }
:is(.dark, [data-bs-theme="dark"]) .dark\:via-slate-950\/80 { --tw-gradient-via: rgba(2,6,23,.80); }
:is(.dark, [data-bs-theme="dark"]) .dark\:to-brand-500 { --tw-gradient-to: var(--brand-500); }
:is(.dark, [data-bs-theme="dark"]) .dark\:to-slate-800\/40 { --tw-gradient-to: rgba(30,41,59,.40); }
:is(.dark, [data-bs-theme="dark"]) .dark\:to-slate-900\/40 { --tw-gradient-to: rgba(15,23,42,.40); }
:is(.dark, [data-bs-theme="dark"]) .dark\:to-slate-900\/50 { --tw-gradient-to: rgba(15,23,42,.50); }
:is(.dark, [data-bs-theme="dark"]) .dark\:to-slate-900\/60 { --tw-gradient-to: rgba(15,23,42,.60); }
:is(.dark, [data-bs-theme="dark"]) .dark\:to-slate-950\/30 { --tw-gradient-to: rgba(2,6,23,.30); }
:is(.dark, [data-bs-theme="dark"]) .dark\:focus\:bg-slate-900:focus { background: #0f172a; }
:is(.dark, [data-bs-theme="dark"]) .dark\:hover\:bg-brand-900\/30:hover { background-color: rgb(var(--brand-900-rgb) / .30) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:hover\:bg-slate-700:hover { background-color: #334155 !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:hover\:bg-slate-800:hover { background-color: #1e293b !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:hover\:bg-slate-800\/70:hover { background-color: rgba(30,41,59,.70) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:hover\:bg-slate-900\/40:hover { background-color: rgba(15,23,42,.40) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:hover\:text-brand-300:hover { color: var(--brand-300) !important; }
:is(.dark, [data-bs-theme="dark"]) .group:hover .dark\:group-hover\:text-brand-300 { color: var(--brand-300) !important; }

/* ==========================================================================
   BOOTSTRAP CDN OVERRIDES
   Bootstrap resets some things aggressively (e.g. h1/h2 sizes). Restore.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', 'Georgia', serif; margin: 0; }
p, address { margin: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
input, textarea, select { font: inherit; }

/* Ensure Bootstrap container doesn't clash with max-w-* utilities */

/* ==========================================================================
   PATCH 2026-08-09 — Missing classes found on live homepage after conversion.
   These were not caught by the initial shim generation.
   ========================================================================== */

/* Accent palette (fixed brand coral — not theme-swappable) */
:root {
  --accent-50:#fbf1ec; --accent-100:#f5d9cc; --accent-200:#edb59d;
  --accent-300:#e0906f; --accent-400:#d47656; --accent-500:#C86347;
  --accent-600:#ab5439; --accent-700:#8f4530; --accent-800:#723627;
  --accent-900:#562a1e; --accent-950:#2c1610;
  --brand-950:#022c30;
  --sand-50: #FBF5EA;
  --sand-100:#F5EBD8;
  --sand-200:#EFDBB8;
}

/* Text colours */
.text-accent-700 { color: var(--accent-700) !important; }
.text-sand-50    { color: var(--sand-50) !important; }
.text-sand-50\/85{ color: rgb(251 245 234 / 0.85) !important; }
.hover\:text-brand-800:hover { color: var(--brand-800) !important; }

/* Background colours */
.bg-brand-800    { background-color: var(--brand-800) !important; }
.bg-white\/90    { background-color: rgb(255 255 255 / 0.90) !important; }

/* Gradient stops (accent) */
.from-accent-500 { --tw-gradient-from: var(--accent-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.to-accent-600   { --tw-gradient-to: var(--accent-600); }
.hover\:from-accent-600:hover { --tw-gradient-from: var(--accent-600); }
.hover\:to-accent-600:hover   { --tw-gradient-to: var(--accent-600); }
.hover\:bg-accent-50:hover { background-color: var(--accent-50) !important; }
.group:hover .group-hover\:bg-accent-600 { background-color: var(--accent-600) !important; }

/* Text sizes — arbitrary values */
.text-\[11\.5px\] { font-size: 11.5px !important; }
.text-\[12\.5px\] { font-size: 12.5px !important; }
.text-\[18px\]    { font-size: 18px !important; }
.text-\[26px\]    { font-size: 26px !important; }
.text-\[34px\]    { font-size: 34px !important; }
.text-\[50px\]    { font-size: 50px !important; line-height: 1.04; }

/* Tracking */
.tracking-\[0\.01em\] { letter-spacing: 0.01em !important; }
.tracking-\[0\.28em\] { letter-spacing: 0.28em !important; }
.tracking-tight       { letter-spacing: -0.025em !important; }

/* Leading */
.leading-\[1\.08\] { line-height: 1.08 !important; }
.leading-\[1\.55\] { line-height: 1.55 !important; }
.leading-\[1\.65\] { line-height: 1.65 !important; }

/* Sizing */
.h-auto           { height: auto !important; }
.max-w-lg         { max-width: 32rem !important; }
.min-h-\[640px\]  { min-height: 640px !important; }

/* Grid — arbitrary column templates */
.grid-cols-\[52\%_48\%\] { grid-template-columns: 52% 48% !important; }
.items-stretch          { align-items: stretch !important; }

/* Positioning */
.inset-y-0 { top: 0 !important; bottom: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-50 { z-index: 50 !important; }
.translate-y-full { transform: translateY(100%) !important; }
.active\:scale-\[0\.99\]:active { transform: scale(0.99) !important; }

/* Rounded */
.rounded-t-3xl { border-top-left-radius: 1.5rem !important; border-top-right-radius: 1.5rem !important; }

/* Shadows — arbitrary */
.shadow-\[0_14px_30px_-10px_rgba\(200\,99\,71\,0\.55\)\] {
  box-shadow: 0 14px 30px -10px rgba(200,99,71,0.55) !important;
}
.shadow-\[0_14px_30px_-10px_rgba\(200\,99\,71\,0\.55\)\,inset_0_1px_0_rgba\(255\,255\,255\,0\.22\)\] {
  box-shadow: 0 14px 30px -10px rgba(200,99,71,0.55), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.shadow-\[0_18px_50px_-20px_rgba\(15\,23\,42\,0\.18\)\] {
  box-shadow: 0 18px 50px -20px rgba(15,23,42,0.18) !important;
}
.shadow-\[0_-8px_24px_-12px_rgba\(15\,23\,42\,0\.18\)\] {
  box-shadow: 0 -8px 24px -12px rgba(15,23,42,0.18) !important;
}

/* Duration */
.duration-200 { transition-duration: 200ms !important; }

/* Selection */
.selection\:bg-accent-200 ::selection { background: var(--accent-200) !important; }
.selection\:text-brand-950 ::selection { color: var(--brand-950) !important; }

/* Responsive: sm ≥ 640 */
@media (min-width: 640px) {
  .sm\:grid-cols-3      { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:h-11             { height: 2.75rem !important; }
  .sm\:w-11             { width: 2.75rem !important; }
  .sm\:text-\[15px\]    { font-size: 15px !important; }
  .sm\:text-\[17px\]    { font-size: 17px !important; }
  .sm\:text-\[32px\]    { font-size: 32px !important; }
  .sm\:text-\[42px\]    { font-size: 42px !important; }
}

/* Responsive: lg ≥ 1024 */
@media (min-width: 1024px) {
  .lg\:block            { display: block !important; }
  .lg\:text-\[44px\]    { font-size: 44px !important; }
  .lg\:text-\[52px\]    { font-size: 52px !important; line-height: 1.04; }
}

/* Responsive: xl ≥ 1280 */
@media (min-width: 1280px) {
  .xl\:text-\[56px\]    { font-size: 56px !important; line-height: 1.04; }
}

/* Dark-mode brand colours introduced above */
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-brand-950       { background-color: var(--brand-950) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:bg-brand-950\/90   { background-color: rgb(2 44 48 / 0.90) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:border-brand-800   { border-color: var(--brand-800) !important; }
:is(.dark, [data-bs-theme="dark"]) .dark\:ring-brand-950     { --_ring: var(--brand-950); }

/* ==========================================================================
   PATCH 2026-08-09 — Spacing/padding utilities missing across all pages.
   ========================================================================== */
.mb-0   { margin-bottom: 0 !important; }
.mb-10  { margin-bottom: 2.5rem !important; }
.mt-9   { margin-top: 2.25rem !important; }
.pb-8   { padding-bottom: 2rem !important; }
.pb-32  { padding-bottom: 8rem !important; }
.pt-8   { padding-top: 2rem !important; }
.pl-5   { padding-left: 1.25rem !important; }
.pl-12  { padding-left: 3rem !important; }
.pr-9   { padding-right: 2.25rem !important; }
.pr-12  { padding-right: 3rem !important; }
.gap-3\.5   { gap: 0.875rem !important; }
.gap-x-6    { column-gap: 1.5rem !important; }
.gap-y-6    { row-gap: 1.5rem !important; }
.pt-\[100px\] { padding-top: 100px !important; }
.pt-\[140px\] { padding-top: 140px !important; }
.pb-\[max\(env\(safe-area-inset-bottom\)\,0\.25rem\)\] { padding-bottom: max(env(safe-area-inset-bottom), 0.25rem) !important; }
.pb-\[max\(env\(safe-area-inset-bottom\)\,1rem\)\]    { padding-bottom: max(env(safe-area-inset-bottom), 1rem) !important; }

/* Responsive sm ≥ 640 */
@media (min-width: 640px) {
  .sm\:mb-14        { margin-bottom: 3.5rem !important; }
  .sm\:pl-6         { padding-left: 1.5rem !important; }
  .sm\:px-8         { padding-left: 2rem !important; padding-right: 2rem !important; }
  .sm\:py-7         { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .sm\:pt-\[88px\]  { padding-top: 88px !important; }
}

/* Responsive lg ≥ 1024 */
@media (min-width: 1024px) {
  .lg\:-mt-16       { margin-top: -4rem !important; }
  .lg\:gap-x-8      { column-gap: 2rem !important; }
  .lg\:pt-0         { padding-top: 0 !important; }
  .lg\:pt-\[92px\]  { padding-top: 92px !important; }
  .lg\:px-10        { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
  .lg\:py-8         { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* Responsive xl ≥ 1280 */
@media (min-width: 1280px) {
  .xl\:pl-20        { padding-left: 5rem !important; }
}

/* ==========================================================================
   PATCH v3 — force light body background site-wide.
   The site's design is light-only. Do not let Bootstrap's default or the
   OS dark-mode preference bleed a dark colour behind uncovered sections
   (fixes the black band between the hero and practitioner section).
   ========================================================================== */
html, body {
  background-color: #FBF5EA !important;   /* sand-50 */
  color: #14141e;
}
:is(.dark, [data-bs-theme="dark"]) body {
  /* Even if .dark ever gets toggled, stay on cream — no dark palette exists in the design. */
  background-color: #FBF5EA !important;
  color: #14141e;
}
/* Bootstrap 5.3 root vars — force to light values regardless of scheme */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: #FBF5EA;
  --bs-body-color: #14141e;
}