Charity costs added

css/estimates.css

@@ -190,6 +190,43 @@
     border-top: 1px solid rgba(255,255,255,0.08);
 }
 
+/* Charity concessions footnote - sits at the end of each pricing section */
+.charity-note {
+    margin-top: 20px;
+    padding-top: 12px;
+    border-top: 1px dashed rgba(251,191,36,0.25);
+    text-align: center;
+}
+.charity-note-lead {
+    font-size: 0.74rem;
+    color: rgba(255,255,255,0.45);
+    margin-bottom: 8px;
+}
+.charity-note-lead i { color: var(--gold); margin-right: 4px; }
+.charity-note-lead strong { color: rgba(255,255,255,0.7); font-weight: 700; }
+.charity-table {
+    display: inline-flex;
+    gap: 28px;
+    font-size: 0.72rem;
+}
+.charity-col {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.charity-item {
+    display: flex;
+    gap: 8px;
+    white-space: nowrap;
+}
+.charity-name { color: rgba(255,255,255,0.6); }
+.charity-price { color: var(--gold); font-weight: 700; }
+@media (max-width: 600px) {
+    .charity-table { flex-direction: column; gap: 4px; font-size: 0.68rem; }
+    .charity-col { gap: 4px; }
+    .charity-item { white-space: normal; justify-content: center; }
+}
+
 /* Wizard's Bench - wide card */
 .bench-card {
     background: rgba(255,255,255,0.07);
@@ -304,6 +341,12 @@
     font-weight: 800;
     color: var(--gold);
     line-height: 1.15;
+    margin-bottom: 8px;
+}
+.ward-term {
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: rgba(255,255,255,0.55);
     margin-bottom: 20px;
 }
 .ward-price span {
@@ -312,6 +355,60 @@
     color: rgba(255,255,255,0.4);
 }
 
+/* Extra hours note under the ward grid */
+.ward-extra {
+    margin-top: 32px;
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: var(--radius);
+    padding: 28px 32px;
+}
+.ward-extra-title {
+    font-family: var(--font-head);
+    font-size: 1.05rem;
+    font-weight: 800;
+    color: var(--white);
+    margin-bottom: 8px;
+}
+.ward-extra-title i { color: var(--gold); margin-right: 9px; }
+.ward-extra-lead {
+    color: rgba(255,255,255,0.6);
+    font-size: 0.93rem;
+    line-height: 1.7;
+    margin-bottom: 20px;
+}
+.ward-extra-rates {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.ward-extra-rates li {
+    background: rgba(255,255,255,0.05);
+    border-radius: calc(var(--radius) / 2);
+    padding: 16px 18px;
+}
+.ward-extra-rate {
+    display: block;
+    font-family: var(--font-head);
+    font-size: 1.6rem;
+    font-weight: 800;
+    color: var(--gold);
+    line-height: 1.1;
+    margin-bottom: 4px;
+}
+.ward-extra-desc {
+    font-size: 0.85rem;
+    line-height: 1.45;
+    color: rgba(255,255,255,0.55);
+}
+@media (max-width: 900px) {
+    .ward-extra-rates { grid-template-columns: 1fr; }
+    .ward-extra { padding: 24px; }
+}
+
 /* Enquire button on each package */
 .pricing-enquire {
     margin-top: 18px;
@@ -320,7 +417,7 @@
     font-size: 0.85rem;
     padding: 12px 18px;
 }
-.bench-enquire { margin-top: 22px; }
+.bench-enquire { display: inline-flex; margin-top: 20px; }
 .ward-enquire { margin-top: 20px; }
 
 /* "See full details" trigger */
@@ -333,7 +430,9 @@
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.03em;
-    display: inline-flex;
+    /* block-level so it never shares a line with the enquire button */
+    display: flex;
+    width: fit-content;
     align-items: center;
     gap: 7px;
     margin-top: 16px;
@@ -347,9 +446,6 @@
 .pkg-modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(10,6,30,0.78);
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -357,9 +453,31 @@
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.25s ease, visibility 0.25s ease;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+/* The darkening lives on its own layer so it can fade slowly
+   without dragging the modal's opacity down with it. */
+.pkg-modal-overlay::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(10,6,30,0.78);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    opacity: 0;
+    /* closing fade */
+    transition: opacity 0.25s ease;
+}
+.pkg-modal-overlay.open {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.2s ease, visibility 0s;
+}
+/* opening darken is deliberately slow */
+.pkg-modal-overlay.open::before {
+    opacity: 1;
+    transition: opacity 1.4s ease;
 }
-.pkg-modal-overlay.open { opacity: 1; visibility: visible; }
 .pkg-modal {
     background: linear-gradient(160deg, #2D1F6E 0%, #1E1550 100%);
     border: 1px solid rgba(251,191,36,0.25);