PageSourceSearch

https://www.maddatu.com/

html maddatu.com collected 2026-10-09 22:40:24 UTC 109,461 bytes, 3,623 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta http-equiv="X-UA-Compatible" content="ie=edge">
9    <meta name="referrer" content="origin">
10
11    <title>Home</title>
12
13    <!--
13<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=2.43"></script>
13-->
14    
14<script src="/fe/js/jquery-3.6.0.min.js?ver=2.43"></script>
14
15    
15<script src="https://js.stripe.com/v3/"></script>
15
16
17            
17<script src="/fe/js/vue.min.js?ver=2.43"></script>
17
18    
19    
19<script src="/fe/js/axios.min.js?ver=2.43"></script>
19
20
21    
21<script src="/fe/js/[email protected]_dist_min_dropzone.min.js?ver=2.43"></script>
21
22    <link href="/fe/css/[email protected]_dist_min_dropzone.min.css?ver=2.43" rel="stylesheet">
23
24    <link rel="stylesheet" href="/fe/css/tailwind.css?ver=2.43">
25
26    <link rel="shortcut icon" type="image/png" sizes="32x32" href="https://membervault.s3-us-west-2.amazonaws.com/websitefae/favicon-32x32.png">
27    <link rel="apple-touch-icon" sizes="32x32" href="https://membervault.s3-us-west-2.amazonaws.com/websitefae/favicon-32x32.png">
28
29    <!-- font awesome icons -->
30    <link href="/fe/font-awesome/css/fontawesome.css" rel="stylesheet" />
31    <link href="/fe/font-awesome/css/brands.css" rel="stylesheet" />
32    <link href="/fe/font-awesome/css/solid.css" rel="stylesheet" />
33
34
35    <meta property="og:url" content="https://www.maddatu.com/" />
36    <meta property="og:type" content="product" />
37    <meta property="og:title" content="Home" />
38    <meta property="og:description" content="
39
40
41
42Looking for operational support you can rely on? maddatu keeps your business moving.
43
44
45By Chantelle Venter  6+ Years Supporting Established Businesses |  ..." />
46    <meta name="description" content="
47
48
49
50Looking for operational support you can rely on? maddatu keeps your business moving.
51
52
53By Chantelle Venter  6+ Years Supporting Established Businesses |  ..." />
54    <meta property="og:image" content="https://s3.membervaultcdn.com/websitefae/6a96e7249cfe1_maddatu white.png?v=1788274469" />
55    <meta property="fb:app_id" content="1565181327351981" />
56
57
58            <!--------------- GOOGLE FONTS -------------------->
59        <link rel="preconnect" href="https://fonts.gstatic.com">
60
61                    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
62            <style>
63                body {
64                    font-family: 'Quicksand', sans-serif;
65                }
66            </style>
67                    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
68            <style>
69                h1,
70                h2,
71                h3,
72                h4,
73                h5,
74                h6 {
75                    font-family: 'Quicksand', sans-serif;
76                }
77            </style>
78            
79
80    <style>
81        .mv_custom_button,
82        .mv_content a.mv_custom_button {
83            background-color: #F51679;
84            border-color: #F51679;
85            color: #FFFFFF;
86        }
87
88        .mv_custom_second_button,
89        .mv_content a.mv_custom_second_button {
90            color: #F51679;
91            border-color: #F51679;
92        }
93
94        .mv_custom_text {
95            color: #F51679;
96        }
97
98        .mv_custom_border {
99            border-color: #F51679;
100        }
101
102        .mv_custom_bg {
103            background-color: #F51679;
104            color: #FFFFFF;
105        }
106
107        .mv_content a {
108            color: #F51679;
109        }
110
111        .pagination .paginate_button.active {
112            background-color: #F51679;
113            border-color: #F51679;
114            color: #FFFFFF;
115        }
116    </style>
117
118    <style>
119        /*MODULE/PRODUCT TEXT FONT AND COLOUR*/
120/* Force text-green-600 to use your brand green */
121.text-green-600 {
122  color: #003f2e !important;
123}
124
125/* Force bg-green-600 to use your brand green */
126.bg-green-600 {
127  background-color: #003f2e !important;
128}
129
130/* Optional: override hover/focus if used */
131.hover\:text-green-600:hover {
132  color: #003f2e !important;
133}
134.hover\:bg-green-600:hover {
135  background-color: #003f2e !important;
136}
137h2.text-lg.font-semibold {
138  color: #003f2e !important;
139  font-family: 'Rosario', sans-serif !important;
140  font-weight: 700 !important; /* Makes it bold */
141}
142/*END OF MODULE/PRODUCT TEXT FONT AND COLOUR*/
143
144/*PINK CUSTOM BUTTON*/
145a.mv_custom_button.mv_pink_button {
146    background-color: #f51679;
147    color: #FFFFFF;
148    border-radius: 10px;
149    padding: 10px 20px;
150    display: inline-block;
151    font-size: 20px;
152    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.65);
153}
154
155/*2 COLUMNS*/
156/* Row Layout (no automatic centering) */
157.row {
158    display: flex;
159    flex-wrap: wrap; /* Allow wrapping on smaller screens */
160    justify-content: flex-start; /* Set to 'flex-start' for left alignment, 'center' or 'space-between' can be used if you want other alignments */
161}
162/* Column Styling */
163.column {
164    flex: 1 1 45%; /* Adjust column size */
165    padding: 10px;
166    display: flex;
167    flex-direction: column; /* Stack icon and text vertically */
168    justify-content: center;
169    align-items: center; /* Can adjust if you want different positioning */
170}
171
172/* For mobile screens */
173@media screen and (max-width: 600px) {
174    .row {
175        flex-direction: column; /* Stack columns vertically */
176    }
177    .column {
178        width: 100%; /* Ensure columns take full width on mobile */
179    }
180}
181
182/* CUSTOM FONTS */
183h2 { font-family: 'Emilys Candy', cursive; color: #f51679; }
184h3, h4, h5, h6 { font-family: 'Rosario', sans-serif; }
185
186/* WELCOME AREA */
187#mv_welcome_area {
188  background: #003f2e !important;
189  color: #ffffff !important;
190}
191
192#mv_welcome_area img.shadow-lg {
193  box-shadow: none;
194  float: right;
195  margin-left: 20px;
196  margin-bottom: 20px;
197}
198
199/*
200  MADDATU HOMEPAGE CONTENT STYLES
201  Page-content CSS only.
202
203  IMPORTANT:
204  - Existing Maddatu HTML classes are preserved.
205  - MemberVault header and footer are intentionally NOT styled here.
206  - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged.
207  - Quicksand is used only inside #main-content.
208  - Colour choices prioritise WCAG 2.2 AA and AAA where practical.
209*/
210
211@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
212
213#main-content {
214  --color-primary: #0f3d32;
215  --color-primary-dark: #07241E;
216  --color-accent: #f51679;
217  --color-accent-accessible: #f51679;
218  --color-bg-cream: #faf7f4;
219  --color-bg-white: #FFFFFF;
220  --color-text-dark: #333333;
221  --color-text-light: #faf7f4;
222  --color-border: #9E9E9E;
223  --color-border-light: #E5E5EE;
224  --color-focus-dark: #07241E;
225  --color-focus-light: #FFFFFF;
226  --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
227
228  font-family: var(--font-primary);
229  font-size: 100%;
230  line-height: 1.625;
231  color: var(--color-text-dark);
232  background: var(--color-bg-white);
233  margin: 0 !important;
234  padding: 0 !important;
235}
236
237#main-content,
238#main-content *,
239#main-content *::before,
240#main-content *::after {
241  box-sizing: border-box;
242}
243
244#main-content img {
245  max-width: 100%;
246}
247
248#main-content .image-placeholder {
249  display: flex;
250  align-items: center;
251  justify-content: center;
252  width: 100%;
253  min-height: 180px;
254  padding: 20px;
255  background-color: var(--color-bg-cream);
256  color: var(--color-primary);
257  border: 2px solid var(--color-accent);
258  font-size: 1rem;
259  font-weight: 700;
260  text-align: center;
261}
262
263#main-content a {
264  color: var(--color-accent-accessible);
265}
266
267/* Keyboard focus. No global focus reset so MemberVault remains unaffected. */
268#main-content :focus-visible,
269.skip-link:focus-visible {
270  outline: 3px solid var(--color-focus-light);
271  outline-offset: 4px;
272  box-shadow: 0 0 0 6px var(--color-focus-dark);
273}
274
275/* Skip link */
276.skip-link {
277  position: absolute;
278  left: -9999px;
279  top: 8px;
280  z-index: 10000;
281  width: auto;
282  height: auto;
283  padding: 12px 24px;
284  background: var(--color-accent-accessible);
285  color: #FFFFFF !important;
286  border-radius: 6px;
287  font-family: var(--font-primary);
288  font-size: 1rem;
289  font-weight: 700;
290  text-decoration: none;
291}
292
293.skip-link:focus-visible {
294  left: 8px;
295  top: 8px;
296  outline-color: #FFFFFF;
297  box-shadow: 0 0 0 6px var(--color-primary-dark);
298}
299
300/* Layout */
301#main-content .container {
302  width: 100%;
303  max-width: 1200px;
304  margin: 0 auto;
305  padding: 0 24px;
306}
307
308#main-content .section-padding {
309  padding: 90px 0;
310}
311
312#main-content .bg-cream {
313  background-color: var(--color-bg-cream);
314}
315
316#main-content .bg-white {
317  background-color: var(--color-bg-white);
318}
319
320#main-content .text-center {
321  text-align: center;
322}
323
324#main-content .max-width-800 {
325  max-width: 800px;
326  margin-right: auto;
327  margin-left: auto;
328}
329
330/* Typography */
331#main-content h1,
332#main-content h2,
333#main-content h3,
334#main-content h4 {
335  font-family: var(--font-primary);
336  color: var(--color-primary);
337  line-height: 1.2;
338  margin-top: 0;
339}
340
341#main-content h1 {
342  font-size: 3rem;
343  letter-spacing: -0.02em;
344  margin-bottom: 24px;
345  font-weight: 700;
346}
347
348#main-content h2 {
349  font-size: 2.25rem;
350  margin-bottom: 24px;
351  font-weight: 700;
352}
353
354#main-content h1,
355#main-content h3 {
356  color: var(--color-primary);
357}
358
359#main-content h2,
360#main-content h4 {
361  color: var(--color-accent);
362}
363
364#main-content h3 {
365  font-size: 1.625rem;
366  margin-bottom: 16px;
367  font-weight: 600;
368}
369
370#main-content h4 {
371  font-size: 1.25rem;
372  margin-bottom: 12px;
373  font-weight: 600;
374}
375
376#main-content p {
377  margin-top: 0;
378  margin-bottom: 24px;
379}
380
381#main-content em {
382  font-style: italic;
383}
384
385#main-content p.lead {
386  font-size: 1.25rem;
387  font-weight: 500;
388  line-height: 1.6;
389}
390
391/* Buttons: three existing classes remain three distinct styles. */
392#main-content .btn {
393  display: inline-flex;
394  align-items: center;
395  justify-content: center;
396  min-height: 48px;
397  font-family: var(--font-primary);
398  font-size: 1rem;
399  line-height: 1.2;
400  font-weight: 700;
401  text-decoration: none;
402  padding: 14px 28px;
403  border-radius: 6px;
404  border: 2px solid transparent;
405  cursor: pointer;
406  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
407}
408
409/* Pink filled */
410#main-content .btn-primary {
411  background-color: var(--color-accent-accessible);
412  color: #FFFFFF !important;
413  border-color: var(--color-accent-accessible);
414  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
415}
416
417#main-content .btn-primary:hover {
418  background-color: var(--color-primary-dark);
419  color: #FFFFFF !important;
420  border-color: var(--color-primary-dark);
421}
422
423/* Green filled */
424#main-content .btn-secondary {
425  background-color: var(--color-primary);
426  color: #FFFFFF !important;
427  border-color: var(--color-primary);
428  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
429}
430
431#main-content .btn-secondary:hover {
432  background-color: var(--color-primary-dark);
433  color: #FFFFFF !important;
434  border-color: var(--color-primary-dark);
435}
436
437/* Pink outline */
438#main-content .btn-outline {
439  background-color: #FFFFFF;
440  color: var(--color-accent-accessible) !important;
441  border-color: var(--color-accent-accessible);
442}
443
444#main-content .btn-outline:hover {
445  background-color: var(--color-accent-accessible);
446  color: #FFFFFF !important;
447  border-color: var(--color-accent-accessible);
448}
449
450#main-content .btn-full {
451  width: 100%;
452}
453
454/* Hero */
455#main-content .hero-section {
456  background-color: var(--color-primary-dark);
457  color: #FFFFFF;
458  padding: 80px 0;
459  overflow: hidden;
460  margin-top: 0 !important;
461}
462
463#main-content .hero-section h1 {
464  color: #ffffff;
465}
466
467#main-content .hero-grid {
468  display: grid;
469  grid-template-columns: 1.2fr 0.8fr;
470  gap: 60px;
471  align-items: center;
472}
473
474#main-content .hero-text-block {
475  text-align: left;
476}
477
478#main-content .byline-block {
479  display: flex;
480  align-items: center;
481  gap: 16px;
482  margin-bottom: 24px;
483  background-color: rgba(250, 247, 244, 0.06);
484  padding: 12px 18px;
485  border-radius: 8px;
486  border: 1px solid rgba(250, 247, 244, 0.45);
487}
488
489#main-content .byline-portrait-container {
490  width: 50px;
491  height: 50px;
492  border-radius: 50%;
493  overflow: hidden;
494  border: 2px solid var(--color-accent);
495  flex-shrink: 0;
496}
497
498#main-content .byline-portrait {
499  width: 100%;
500  height: 100%;
501  object-fit: cover;
502}
503
504#main-content .byline-text {
505  display: flex;
506  flex-direction: column;
507  font-size: 0.95rem;
508}
509
510#main-content .byline-author {
511  color: #FFFFFF;
512}
513
514#main-content .byline-desc {
515  color: #FFFFFF;
516}
517
518#main-content .byline-link {
519  color: #FFB3CB !important;
520  text-decoration: underline;
521  text-decoration-thickness: 0.12em;
522  text-underline-offset: 0.15em;
523  font-weight: 700;
524}
525
526#main-content .byline-link:hover {
527  color: #FFFFFF !important;
528}
529
530#main-content .hero-subheadline {
531  font-size: 1.4rem;
532  font-weight: 700;
533  color: #FFB3CB;
534  margin-bottom: 24px;
535  line-height: 1.55;
536}
537
538#main-content .answer-block {
539  background-color: rgba(250, 247, 244, 0.08);
540  border-left: 4px solid var(--color-accent);
541  padding: 16px 20px;
542  border-radius: 0 8px 8px 0;
543  margin-bottom: 30px;
544}
545
546#main-content .answer-block p {
547  margin: 0;
548  font-size: 1.05rem;
549  line-height: 1.6;
550  color: #FFFFFF;
551}
552
553#main-content .hero-image-block {
554  display: flex;
555  justify-content: center;
556  align-items: center;
557}
558
559#main-content .hero-large-img {
560  width: 100%;
561  max-width: 340px;
562  height: auto;
563  border-radius: 12px;
564  border: 4px solid var(--color-accent);
565  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
566}
567
568/* Problem */
569#main-content .problem-grid {
570  display: grid;
571  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
572  gap: 20px;
573  margin: 40px 0;
574}
575
576#main-content .problem-card {
577  background-color: var(--color-bg-white);
578  border-left: 4px solid var(--color-accent);
579  border-radius: 4px;
580  padding: 24px;
581  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
582  display: flex;
583  align-items: flex-start;
584  gap: 16px;
585  text-align: left;
586}
587
588#main-content .problem-bullet {
589  color: var(--color-accent-accessible);
590  font-size: 1.15rem;
591  flex-shrink: 0;
592  font-weight: 700;
593}
594
595#main-content .problem-text {
596  margin: 0;
597  font-weight: 500;
598  font-size: 1.05rem;
599}
600
601#main-content .problem-outro {
602  background-color: rgba(15, 61, 50, 0.04);
603  border: 1px dashed var(--color-primary);
604  border-radius: 8px;
605  padding: 30px;
606  max-width: 700px;
607  margin: 40px auto 0 auto;
608}
609
610#main-content .problem-outro p {
611  font-size: 1.15rem;
612  font-weight: 600;
613  color: var(--color-primary-dark);
614  margin-bottom: 20px;
615}
616
617/* Services */
618#main-content .services-subheading {
619  text-align: center;
620  margin-top: 50px;
621  margin-bottom: 35px;
622}
623
624#main-content .services-grid {
625  display: grid;
626  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
627  gap: 24px;
628  margin-bottom: 40px;
629}
630
631#main-content .service-card {
632  background-color: var(--color-bg-cream);
633  border: 1px solid var(--color-border);
634  border-radius: 8px;
635  padding: 30px;
636  display: flex;
637  flex-direction: column;
638  transition: transform 0.2s ease, box-shadow 0.2s ease;
639}
640
641#main-content .service-card:hover {
642  transform: translateY(-4px);
643  box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08);
644}
645
646#main-content .service-image-container {
647  width: 100%;
648  height: auto;
649  border-radius: 6px;
650  overflow: hidden;
651  border: 1px solid var(--color-border);
652  margin-bottom: 20px;
653}
654
655#main-content .service-card-img {
656  width: 100%;
657  height: auto;
658  display: block;
659}
660
661#main-content .service-title-row {
662  display: flex;
663  align-items: center;
664  gap: 12px;
665  margin-bottom: 12px;
666}
667
668#main-content .service-card-icon {
669  font-size: 1.4rem;
670  color: var(--color-primary);
671}
672
673#main-content .service-card h4 {
674  margin: 0;
675  font-size: 1.25rem;
676}
677
678#main-content .service-card p {
679  margin: 0;
680  font-size: 1rem;
681  line-height: 1.6;
682}
683
684#main-content .services-notice {
685  text-align: center;
686  font-style: italic;
687  font-size: 1rem;
688  color: var(--color-text-dark);
689  max-width: 750px;
690  margin: 40px auto 0 auto;
691}
692
693/* Pricing */
694#main-content .work-grid {
695  display: grid;
696  grid-template-columns: 1fr 1fr;
697  gap: 32px;
698  margin-top: 50px;
699  align-items: stretch;
700}
701
702#main-content .work-card {
703  background-color: var(--color-bg-white);
704  border: 1px solid var(--color-border);
705  border-radius: 12px;
706  padding: 40px;
707  display: flex;
708  flex-direction: column;
709  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
710}
711
712#main-content .work-card-banner {
713  width: 100%;
714  border-radius: 8px;
715  overflow: hidden;
716  border: 1px solid var(--color-border);
717  margin-bottom: 24px;
718}
719
720#main-content .work-card-banner-img {
721  width: 100%;
722  height: auto;
723  display: block;
724}
725
726#main-content .work-card h3 {
727  font-size: 1.85rem;
728  border-bottom: 2px solid var(--color-border);
729  padding-bottom: 15px;
730  margin-bottom: 20px;
731}
732
733#main-content .work-card-desc {
734  font-size: 1.05rem;
735  margin-bottom: 30px;
736}
737
738#main-content .pricing-tiers-list {
739  list-style: none;
740  padding: 0;
741  margin: 0 0 30px 0;
742}
743
744#main-content .pricing-tier-item {
745  background-color: var(--color-bg-cream);
746  border: 1px solid var(--color-border);
747  border-radius: 8px;
748  padding: 20px;
749  margin-bottom: 16px;
750}
751
752#main-content .pricing-tier-header {
753  display: flex;
754  justify-content: space-between;
755  align-items: baseline;
756  flex-wrap: wrap;
757  gap: 8px;
758  margin-bottom: 6px;
759}
760
761#main-content .pricing-tier-name {
762  font-weight: 700;
763  font-size: 1.15rem;
764  color: var(--color-primary-dark);
765}
766
767#main-content .pricing-tier-hours {
768  font-size: 0.9rem;
769  font-weight: 700;
770  background-color: var(--color-primary);
771  color: #FFFFFF;
772  padding: 4px 10px;
773  border-radius: 4px;
774}
775
776#main-content .pricing-tier-cost {
777  font-weight: 700;
778  font-size: 1.3rem;
779  color: var(--color-text-dark);
780}
781
782#main-content .pricing-tier-sub {
783  font-size: 0.95rem;
784  color: #404740;
785  font-weight: 400;
786}
787
788#main-content .pricing-tier-desc {
789  margin: 8px 0 0 0;
790  font-size: 1rem;
791  line-height: 1.5;
792}
793
794#main-content .projects-list-title {
795  color: var(--color-primary-dark);
796  margin-bottom: 15px;
797}
798
799#main-content .projects-list {
800  list-style: none;
801  padding: 0;
802  margin: 0 0 30px 0;
803}
804
805#main-content .projects-list li {
806  padding: 10px 0;
807  border-bottom: 1px solid var(--color-border-light);
808  display: flex;
809  align-items: center;
810  gap: 12px;
811  font-size: 1rem;
812}
813
814#main-content .projects-list li:last-child {
815  border-bottom: none;
816}
817
818#main-content .project-list-bullet {
819  color: var(--color-accent-accessible);
820  font-weight: 700;
821}
822
823#main-content .project-minimum-tier {
824  margin-top: auto;
825  margin-bottom: 30px;
826}
827
828#main-content .work-card .btn {
829  margin-top: auto;
830}
831
832/* Why / comparison table */
833#main-content .why-grid {
834  display: grid;
835  grid-template-columns: 1fr 1fr;
836  gap: 24px;
837  margin-top: 40px;
838  margin-bottom: 60px;
839}
840
841#main-content .why-item {
842  background-color: var(--color-bg-cream);
843  border: 1px solid var(--color-border);
844  border-radius: 8px;
845  padding: 24px;
846  display: flex;
847  align-items: flex-start;
848  gap: 16px;
849}
850
851#main-content .why-icon {
852  background-color: var(--color-accent);
853  color: #FFFFFF;
854  width: 32px;
855  height: 32px;
856  border-radius: 50%;
857  display: flex;
858  align-items: center;
859  justify-content: center;
860  flex-shrink: 0;
861  font-size: 0.9rem;
862}
863
864#main-content .why-item p {
865  margin: 0;
866  font-size: 1.05rem;
867  line-height: 1.5;
868}
869
870#main-content .table-container {
871  width: 100%;
872  margin-bottom: 70px;
873  border: 1px solid var(--color-border);
874  border-radius: 8px;
875  overflow: hidden;
876}
877
878#main-content .table-title {
879  background-color: var(--color-primary-dark);
880  color: #FFFFFF;
881  margin: 0;
882  padding: 20px 24px;
883  font-size: 1.35rem;
884  text-align: left;
885}
886
887#main-content .comparison-table-wrapper {
888  width: 100%;
889  overflow-x: auto;
890}
891
892#main-content .comparison-table {
893  width: 100%;
894  border-collapse: separate;
895  border-spacing: 0;
896  text-align: left;
897  background-color: var(--color-bg-white);
898  min-width: 600px;
899}
900
901#main-content .comparison-table th,
902#main-content .comparison-table td {
903  padding: 16px 24px;
904  border-bottom: 1px solid var(--color-border-light);
905  font-size: 1rem;
906  vertical-align: top;
907}
908
909#main-content .comparison-table thead th {
910  background-color: var(--color-primary);
911  color: #FFFFFF;
912  font-weight: 700;
913}
914
915#main-content .comparison-table tbody th {
916  font-weight: 600;
917  color: var(--color-primary-dark);
918}
919
920#main-content .comparison-table .highlight-column {
921  background-color: rgba(245, 22, 121, 0.06);
922  font-weight: 600;
923  color: var(--color-primary-dark);
924  border-left: 3px solid var(--color-accent);
925  border-right: 3px solid var(--color-accent);
926}
927
928#main-content .comparison-table thead .highlight-column {
929  border-top: 3px solid var(--color-accent);
930}
931
932#main-content .comparison-table tbody tr:last-child .highlight-column {
933  border-bottom: 3px solid var(--color-accent);
934}
935
936/* Testimonials */
937#main-content .proof-block-container {
938  border-top: 2px solid var(--color-border-light);
939  padding-top: 50px;
940}
941
942#main-content .proof-title {
943  text-align: center;
944  font-size: 1.65rem;
945  margin-bottom: 40px;
946}
947
948#main-content .testimonials-grid {
949  display: grid;
950  grid-template-columns: 1fr 1fr;
951  gap: 32px;
952}
953
954#main-content .testimonial-card {
955  background-color: var(--color-bg-cream);
956  border-top: 4px solid var(--color-primary);
957  border-radius: 6px;
958  padding: 35px;
959  margin: 0;
960  display: flex;
961  flex-direction: column;
962}
963
964#main-content .testimonial-card > img,
965#main-content .testimonial-placeholder-img {
966  width: 84px;
967  height: 84px;
968  border-radius: 50%;
969  object-fit: cover;
970  margin: 0 auto 20px auto;
971  border: 2px solid var(--color-accent);
972}
973
974#main-content .testimonial-quote {
975  font-style: italic;
976  font-size: 1.05rem;
977  line-height: 1.65;
978  margin-bottom: 20px;
979}
980
981
982#main-content .testimonial-author {
983  font-weight: 700;
984  font-size: 1rem;
985  color: var(--color-primary-dark);
986  margin-top: auto;
987  font-style: normal;
988}
989
990/* FAQ */
991#main-content .faq-list {
992  max-width: 800px;
993  margin: 40px auto 0 auto;
994}
995
996#main-content .faq-item {
997  background-color: var(--color-bg-white);
998  border: 1px solid var(--color-border);
999  border-radius: 6px;
1000  margin-bottom: 16px;
1001  overflow: hidden;
1002  transition: border-color 0.2s ease;
1003}
1004
1005#main-content .faq-item[open] {
1006  border-color: var(--color-primary);
1007}
1008
1009#main-content .faq-item summary {
1010  padding: 20px 24px;
1011  font-weight: 600;
1012  font-size: 1.1rem;
1013  color: var(--color-primary-dark);
1014  cursor: pointer;
1015  list-style: none;
1016  display: flex;
1017  justify-content: space-between;
1018  align-items: center;
1019  user-select: none;
1020}
1021
1022#main-content .faq-item summary::-webkit-details-marker {
1023  display: none;
1024}
1025
1026#main-content .faq-item summary::after {
1027  content: "+";
1028  font-size: 1.5rem;
1029  font-weight: 700;
1030  color: var(--color-primary);
1031  transition: transform 0.2s ease;
1032}
1033
1034#main-content .faq-item[open] summary::after {
1035  content: "−";
1036  transform: rotate(180deg);
1037}
1038
1039#main-content .faq-content {
1040  padding: 0 24px 20px 24px;
1041  border-top: 1px solid var(--color-border-light);
1042}
1043
1044#main-content .faq-content p {
1045  margin: 0;
1046  font-size: 1rem;
1047  line-height: 1.6;
1048}
1049
1050/* Contact */
1051#main-content .contact-grid {
1052  display: grid;
1053  grid-template-columns: 4fr 5fr;
1054  gap: 50px;
1055  margin-bottom: 50px;
1056}
1057
1058#main-content .contact-info {
1059  text-align: left;
1060}
1061
1062#main-content .contact-guide-box {
1063  background-color: var(--color-bg-cream);
1064  border: 1px solid var(--color-border);
1065  border-radius: 8px;
1066  padding: 30px;
1067  margin-top: 25px;
1068}
1069
1070#main-content .contact-guide-box h4 {
1071  margin-top: 0;
1072  font-size: 1.2rem;
1073  color: var(--color-primary-dark);
1074}
1075
1076#main-content .contact-checklist {
1077  list-style: none;
1078  padding: 0;
1079  margin: 0 0 20px 0;
1080}
1081
1082#main-content .contact-checklist li {
1083  position: relative;
1084  padding-left: 28px;
1085  margin-bottom: 12px;
1086  font-weight: 500;
1087  font-size: 1rem;
1088}
1089
1090#main-content .contact-checklist li::before {
1091  content: "✔";
1092  position: absolute;
1093  left: 0;
1094  top: 0;
1095  color: var(--color-accent-accessible);
1096  font-weight: 700;
1097}
1098
1099#main-content .contact-note {
1100  margin: 0;
1101  font-size: 1rem;
1102}
1103
1104#main-content .contact-form-container {
1105  background-color: var(--color-bg-cream);
1106  border: 1px solid var(--color-border);
1107  border-radius: 8px;
1108  padding: 40px;
1109  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
1110}
1111
1112#main-content .contact-form {
1113  width: 100%;
1114}
1115
1116#main-content .form-row {
1117  display: grid;
1118  grid-template-columns: 1fr 1fr;
1119  gap: 20px;
1120}
1121
1122#main-content .form-group {
1123  margin-bottom: 24px;
1124  text-align: left;
1125}
1126
1127#main-content .form-group label {
1128  display: block;
1129  font-weight: 600;
1130  font-size: 1rem;
1131  margin-bottom: 8px;
1132  color: var(--color-primary-dark);
1133}
1134
1135#main-content .form-group input[type="text"],
1136#main-content .form-group input[type="email"],
1137#main-content .form-group textarea {
1138  width: 100%;
1139  padding: 12px 16px;
1140  border: 2px solid var(--color-border);
1141  border-radius: 4px;
1142  font-family: var(--font-primary);
1143  font-size: 1rem;
1144  line-height: 1.5;
1145  color: var(--color-text-dark);
1146  background-color: var(--color-bg-white);
1147  transition: border-color 0.2s ease, box-shadow 0.2s ease;
1148}
1149
1150#main-content .form-group input[type="text"]:focus,
1151#main-content .form-group input[type="email"]:focus,
1152#main-content .form-group textarea:focus {
1153  border-color: var(--color-primary-dark);
1154  box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18);
1155  outline: 3px solid transparent;
1156}
1157
1158#main-content .form-group input::placeholder,
1159#main-content .form-group textarea::placeholder {
1160  color: #4A4A4A;
1161  opacity: 1;
1162}
1163
1164#main-content .form-group textarea {
1165  resize: vertical;
1166  min-height: 150px;
1167}
1168
1169
1170/* Motion */
1171@media (prefers-reduced-motion: reduce) {
1172  #main-content *,
1173  #main-content *::before,
1174  #main-content *::after,
1175  .skip-link {
1176    animation-delay: -1ms !important;
1177    animation-duration: 1ms !important;
1178    animation-iteration-count: 1 !important;
1179    transition-duration: 0s !important;
1180    scroll-behavior: auto !important;
1181  }
1182}
1183
1184/* Responsive */
1185@media (max-width: 900px) {
1186  #main-content .hero-grid {
1187    grid-template-columns: 1fr;
1188    text-align: center;
1189    gap: 40px;
1190  }
1191
1192  #main-content .hero-text-block {
1193    text-align: center;
1194  }
1195
1196  #main-content .byline-block {
1197    justify-content: center;
1198    text-align: left;
1199  }
1200
1201  #main-content .hero-image-block {
1202    order: -1;
1203  }
1204
1205  #main-content .hero-large-img {
1206    max-width: 260px;
1207  }
1208
1209  #main-content .work-grid,
1210  #main-content .contact-grid {
1211    grid-template-columns: 1fr;
1212  }
1213
1214  #main-content .contact-grid {
1215    gap: 40px;
1216  }
1217}
1218
1219@media (max-width: 768px) {
1220  #main-content h1 { font-size: 2.25rem; }
1221  #main-content h2 { font-size: 1.875rem; }
1222  #main-content h3 { font-size: 1.4rem; }
1223  #main-content p.lead { font-size: 1.15rem; }
1224
1225  #main-content .why-grid,
1226  #main-content .testimonials-grid {
1227    grid-template-columns: 1fr;
1228  }
1229}
1230
1231@media (max-width: 600px) {
1232  #main-content .container {
1233    padding: 0 20px;
1234  }
1235
1236  #main-content .section-padding {
1237    padding: 70px 0;
1238  }
1239
1240  #main-content .form-row {
1241    grid-template-columns: 1fr;
1242  }
1243
1244  #main-content .contact-form-container {
1245    padding: 28px 20px;
1246  }
1247
1248  #main-content .work-card {
1249    padding: 28px 20px;
1250  }
1251}
1252
1253
1254/* Placeholder sizing */
1255#main-content .byline-portrait {
1256  width: 50px;
1257  height: 50px;
1258  min-height: 50px;
1259  padding: 6px;
1260  border-radius: 50%;
1261  font-size: 0.7rem;
1262}
1263
1264#main-content .hero-large-img {
1265  width: 100%;
1266  max-width: 340px;
1267  min-height: 340px;
1268  border-radius: 12px;
1269  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
1270}
1271
1272#main-content .service-card-img {
1273  min-height: 180px;
1274}
1275
1276#main-content .work-card-banner-img {
1277  min-height: 180px;
1278}
1279
1280#main-content .testimonial-placeholder-img {
1281  width: 84px;
1282  height: 84px;
1283  min-height: 84px;
1284  padding: 8px;
1285  border-radius: 50%;
1286  margin: 0 auto 20px auto;
1287  font-size: 0.8rem;
1288}
1289
1290
1291/* MemberVault paste cleanup */
1292.mv-block > p:empty,
1293.mv-block > div:empty {
1294  display: none !important;
1295  height: 0 !important;
1296  min-height: 0 !important;
1297  margin: 0 !important;
1298  padding: 0 !important;
1299  border: 0 !important;
1300}
1301
1302#main-content {
1303  margin-top: 0 !important;
1304  margin-bottom: 0 !important;
1305  padding-top: 0 !important;
1306}
1307
1308/* Remove the 50px MemberVault content gap above the hero */
1309.mv-block > #main-content:first-child {
1310  margin-top: -50px !important;
1311}
1312
1313html{ font-size: 100%}    </style>
1314
1315    
1315<script>
1316        var g_bAnnouncementStatus = false;var g_bProductUniform = true;    </script>
1316
1317
1318            
1318<script>
1319            var js_first_name = 'User';
1320            var js_last_name = 'User';
1321            var js_email = 'Email';
1322        </script>
1322
1323    
1324    <!-- COPY CODE TO CLIPBOARD -->
1325<script>
1326function copyCode() {
1327   var codeElement = document.getElementById('myCode');
1328   var textArea = document.createElement('textarea');
1329   textArea.value = codeElement.textContent;
1330   document.body.appendChild(textArea);
1331   textArea.select();
1332   document.execCommand('copy');
1333   document.body.removeChild(textArea);
1334
1335   alert('Code copied to clipboard!');
1336}
1337</script>
1337
1338<!-- END - COPY CODE TO CLIPBOARD -->
1339
1340<!-- MAILERLITE UNIVERSAL -->
1341<script>
1342    (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
1343    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
1344    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
1345    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
1346    ml('account', '107223');
1347</script>
1347
1348<!-- END MAILERLITE UNIVERSAL -->
1349
1350<!-- HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES -->
1351<script>
1352document.addEventListener("DOMContentLoaded", function () {
1353    const welcomeArea = document.getElementById("mv_welcome_area");
1354
1355    if (!window.location.pathname.includes("/products")) {
1356        if (welcomeArea) {
1357            welcomeArea.style.display = "none";
1358        }
1359    }
1360});
1361</script>
1361
1362<!-- END - HIDE WELCOME AREA ON ALL PAGES EXPECT SERVICES -->
1363</head>
1364
1365<body class="bg-gray-100 text-gray-800 mv_not_logged_in mv_page_page mv_page_page_14178" style="background-color:#FFFFFF; color:#0F3D32;">
1366    <canvas id="confetti"></canvas>
1367    <div class="w-full overflow-x-hidden">
1368
1369        <header class="w-full fixed bg-gray-800 text-white content-center tracking-wider shadow-xl z-20 max-h-full " style="background-color:#FFFFFF; color:#0F3D32;">
1370            
1371            
1372                            <div class="relative flex w-full h-20 max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10">
1373
1374                    <a href="/" class="flex-initial flex h-full mv_logo">
1375                        <img class="max-h-full my-auto" src="https://s3.membervaultcdn.com/websitefae/maddatu white.png?v=1788254145" alt="maddatu - Support You Can Rely On"/>                    </a>
1376
1377                    <div class="flex-auto hidden lg:flex ml-4 text-center">
1378                        <ul class="w-full inline-block my-auto text-center">
1379                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1380                                    <a href="/home" >
1381                                        Home                                    </a>
1382                                </li>
1383                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1384                                    <a href="/about" >
1385                                        About                                    </a>
1386                                </li>
1387                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1388                                    <a href="/services" >
1389                                        Services                                    </a>
1390                                </li>
1391                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1392                                    <a href="/contact" >
1393                                        Contact                                    </a>
1394                                </li>
1395                                                            <li class="inline-block ml-4 mr-4 hover:border-b ">
1396                                    <a href="/blog" >
1397                                        Blog                                    </a>
1398                                </li>
1399                                                    </ul>
1400                    </div>
1401
1402                    <div class="relative flex-auto lg:flex-initial my-auto mv_user_nav flex flex-row-reverse flex-nowrap">
1403                        <a class="my-auto ml-4" href="javascript:toggleMainNav()">
1404                            <i class="fas fa-grip-lines"></i>
1405                        </a>
1406                                                    <a href="javascript:toggleLogin()" class="text-sm flex my-auto">
1407                                Sign In <i class="fas fa-angle-right hidden lg:flex ml-2 my-auto"></i>
1408                            </a>
1409                        
1410                        
1411                        
1412                    </div>
1413
1414                    <div id="mv_user_nav" class="hidden absolute right-0 top-0 rounded-lg bg-white shadow-lg p-4 pt-2 pb-2 w-80 text-left text-gray-800 mr-4 lg:mr-10" style="top: calc(100% - 16px)">
1415                        <span class="text-sm font-light">(error)</span>
1416                        <hr>
1417                        <a class="inline-block pb-2 pt-2 w-full" href="/products/profile">Profile</a>
1418                                                
1419                        <a class="inline-block pb-2 pt-2 w-full font-bold" href="/logout">Logout</a>
1420
1421                        <hr class="inline-block w-full">
1422
1423                        Notifications
1424                        <ul class="mv_notifications mt-2">
1425                                                        <li class="italic text-right" style="list-style: none;"><a class="underline" href="/products/notifications">see all notifications</a></li>
1426                        </ul>
1427
1428
1429
1430                    </div>
1431
1432                    <div id="mv_text_nav" class="hidden absolute right-0 top-0 rounded-lg bg-white shadow-lg p-4 pt-2 pb-2 w-44 text-left text-gray-800 mr-4 lg:mr-10" style="top: calc(100% - 16px)">
1433                                                    <a class="inline-block pb-2 pt-2 w-full" href="javascript:changeTextSize(100)">
1434                                <span class="mv_text_nav_dot" id="mv_text_nav_dot_100">
1435                                                                            <i class="far fa-dot-circle"></i>
1436                                                                    </span>
1437                                Text Size
1438                            </a>
1439                                                <a class="inline-block pb-2 pt-2 w-full" style="font-size: 115%" href="javascript:changeTextSize(115)">
1440                            <span class="mv_text_nav_dot" id="mv_text_nav_dot_115">
1441                                                                    <i class="far fa-circle"></i>
1442                                                            </span>
1443                            Text Size
1444                        </a>
1445                        <a class="inline-block pb-2 pt-2 w-full" style="font-size: 130%" href="javascript:changeTextSize(130)">
1446                            <span class="mv_text_nav_dot" id="mv_text_nav_dot_130">
1447                                                                    <i class="far fa-circle"></i>
1448                                                            </span>
1449                            Text Size
1450                        </a>
1451                        <a class="inline-block pb-2 pt-2 w-full" style="font-size: 145%" href="javascript:changeTextSize(145)">
1452                            <span class="mv_text_nav_dot" id="mv_text_nav_dot_145">
1453                                                                    <i class="far fa-circle"></i>
1454                                                            </span>
1455                            Text Size
1456                        </a>
1457                    </div>
1458
1459                </div>
1460                    </header>
1461        <div id="mv_welcome_area_padding" class="h-20 bg-gray-800 " style="background-color:#FFFFFF;"></div>
1462
1463        
1464
1465            <div id="mv_welcome_area" class="block w-full bg-gray-800 text-white content-center shadow-lg " style="background-color:#FFFFFF; color:#0F3D32;">
1466                <div class="flex flex-wrap w-full max-w-screen-xl mx-auto pb-4 lg:pl-6 lg:pr-6">
1467
1468                    
1469                    <div class="flex-none p-4 w-full text-center lg:text-left lg:w-1/2 lg:pl-10 ">
1470                        <h1 class="text-3xl font-bold mt-2">
1471                                                    </h1>
1472
1473                                                                                    <img class="inline-block rounded-lg shadow-lg mt-4 lg:hidden" src="https://s3.membervaultcdn.com/websitefae/MV - WF - Icons and photos (11).png?v=1750350962" alt="" loading="lazy">
1474                                                    
1475                        <div class="mt-4 text-center lg:text-left mv_content ">
1476                            <h1 dir="ltr"></h1>
1477<p></p>
1478<p></p>
1479<p></p>
1480<h1 dir="ltr">Strategic Systems Architecture for the Established Practice</h1>
1481<p></p>
1482<p dir="ltr">We provide the structural design and digital infrastructure needed to maintain operational calm while you scale your clinical impact.</p>
1483                            <div class="float-left w-full lg:-ml-2">
1484                                
1485                                                                    <a href="https://calendar.app.google/UFEv9YV7N4UbRnBWA" target="_BLANK" class="mv_secondary_button mv_custom_second_button mr-2 ml-2 mb-4" style="color: #F51679 ; background-color: #FFFFFF; border-color: #F51679;">
1486                                        Book a Call With Chantelle                                    </a>
1487                                                            </div>
1488
1489
1490                        </div>
1491                    </div>
1492
1493                                            <div class="flex-none w-1/2 mt-4 p-4 pr-10 hidden lg:inline-block">
1494                                                            <img class="rounded-lg shadow-lg" src="https://s3.membervaultcdn.com/websitefae/MV - WF - Icons and photos (11).png?v=1750350962" loading="lazy" alt="">
1495                                                    </div>
1496                                    </div>
1497            </div> <!-- End Welcome -->
1498        
1499<style>
1500    /*
1501  MADDATU HOMEPAGE CONTENT STYLES
1502  Page-content CSS only.
1503
1504  IMPORTANT:
1505  - Existing Maddatu HTML classes are preserved.
1506  - MemberVault header and footer are intentionally NOT styled here.
1507  - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged.
1508  - Quicksand is used only inside #main-content.
1509  - Colour choices prioritise WCAG 2.2 AA and AAA where practical.
1510*/
1511
1512@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
1513
1514#main-content {
1515  --color-primary: #0f3d32;
1516  --color-primary-dark: #07241E;
1517  --color-accent: #f51679;
1518  --color-accent-accessible: #f51679;
1519  --color-bg-cream: #faf7f4;
1520  --color-bg-white: #FFFFFF;
1521  --color-text-dark: #333333;
1522  --color-text-light: #faf7f4;
1523  --color-border: #9E9E9E;
1524  --color-border-light: #E5E5EE;
1525  --color-focus-dark: #07241E;
1526  --color-focus-light: #FFFFFF;
1527  --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
1528
1529  font-family: var(--font-primary);
1530  font-size: 100%;
1531  line-height: 1.625;
1532  color: var(--color-text-dark);
1533  background: var(--color-bg-white);
1534  margin: 0 !important;
1535  padding: 0 !important;
1536}
1537
1538#main-content,
1539#main-content *,
1540#main-content *::before,
1541#main-content *::after {
1542  box-sizing: border-box;
1543}
1544
1545#main-content img {
1546  max-width: 100%;
1547}
1548
1549#main-content .image-placeholder {
1550  display: flex;
1551  align-items: center;
1552  justify-content: center;
1553  width: 100%;
1554  min-height: 180px;
1555  padding: 20px;
1556  background-color: var(--color-bg-cream);
1557  color: var(--color-primary);
1558  border: 2px solid var(--color-accent);
1559  font-size: 1rem;
1560  font-weight: 700;
1561  text-align: center;
1562}
1563
1564#main-content a {
1565  color: var(--color-accent-accessible);
1566}
1567
1568#main-content :focus-visible,
1569.skip-link:focus-visible {
1570  outline: 3px solid var(--color-focus-light);
1571  outline-offset: 4px;
1572  box-shadow: 0 0 0 6px var(--color-focus-dark);
1573}
1574
1575.skip-link {
1576  position: absolute;
1577  left: -9999px;
1578  top: 8px;
1579  z-index: 10000;
1580  width: auto;
1581  height: auto;
1582  padding: 12px 24px;
1583  background: var(--color-accent-accessible);
1584  color: #FFFFFF !important;
1585  border-radius: 6px;
1586  font-family: var(--font-primary);
1587  font-size: 1rem;
1588  font-weight: 700;
1589  text-decoration: none;
1590}
1591
1592.skip-link:focus-visible {
1593  left: 8px;
1594  top: 8px;
1595  outline-color: #FFFFFF;
1596  box-shadow: 0 0 0 6px var(--color-primary-dark);
1597}
1598
1599/* Layout */
1600#main-content .container {
1601  width: 100%;
1602  max-width: 1200px;
1603  margin: 0 auto;
1604  padding: 0 24px;
1605}
1606
1607#main-content .section-padding {
1608  padding: 90px 0;
1609}
1610
1611#main-content .bg-cream {
1612  background-color: var(--color-bg-cream);
1613}
1614
1615#main-content .bg-white {
1616  background-color: var(--color-bg-white);
1617}
1618
1619#main-content .text-center {
1620  text-align: center;
1621}
1622
1623#main-content .max-width-800 {
1624  max-width: 800px;
1625  margin-right: auto;
1626  margin-left: auto;
1627}
1628
1629/* Typography */
1630#main-content h1,
1631#main-content h2,
1632#main-content h3,
1633#main-content h4 {
1634  font-family: var(--font-primary);
1635  color: var(--color-primary);
1636  line-height: 1.2;
1637  margin-top: 0;
1638}
1639
1640#main-content h1 {
1641  font-size: 3rem;
1642  letter-spacing: -0.02em;
1643  margin-bottom: 24px;
1644  font-weight: 700;
1645}
1646
1647#main-content h2 {
1648  font-size: 2.25rem;
1649  margin-bottom: 24px;
1650  font-weight: 700;
1651}
1652
1653#main-content h1,
1654#main-content h3 {
1655  color: var(--color-primary);
1656}
1657
1658#main-content h2,
1659#main-content h4 {
1660  color: var(--color-accent);
1661}
1662
1663#main-content h3 {
1664  font-size: 1.625rem;
1665  margin-bottom: 16px;
1666  font-weight: 600;
1667}
1668
1669#main-content h4 {
1670  font-size: 1.25rem;
1671  margin-bottom: 12px;
1672  font-weight: 600;
1673}
1674
1675#main-content p {
1676  margin-top: 0;
1677  margin-bottom: 24px;
1678}
1679
1680#main-content em {
1681  font-style: italic;
1682}
1683
1684#main-content p.lead {
1685  font-size: 1.25rem;
1686  font-weight: 500;
1687  line-height: 1.6;
1688}
1689
1690/* Buttons */
1691#main-content .btn {
1692  display: inline-flex;
1693  align-items: center;
1694  justify-content: center;
1695  min-height: 48px;
1696  font-family: var(--font-primary);
1697  font-size: 1rem;
1698  line-height: 1.2;
1699  font-weight: 700;
1700  text-decoration: none;
1701  padding: 14px 28px;
1702  border-radius: 6px;
1703  border: 2px solid transparent;
1704  cursor: pointer;
1705  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
1706}
1707
1708#main-content .btn-primary {
1709  background-color: var(--color-accent-accessible);
1710  color: #FFFFFF !important;
1711  border-color: var(--color-accent-accessible);
1712  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
1713}
1714
1715#main-content .btn-primary:hover {
1716  background-color: var(--color-primary-dark);
1717  color: #FFFFFF !important;
1718  border-color: var(--color-primary-dark);
1719}
1720
1721#main-content .btn-secondary {
1722  background-color: var(--color-primary);
1723  color: #FFFFFF !important;
1724  border-color: var(--color-primary);
1725  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
1726}
1727
1728#main-content .btn-secondary:hover {
1729  background-color: var(--color-primary-dark);
1730  color: #FFFFFF !important;
1731  border-color: var(--color-primary-dark);
1732}
1733
1734#main-content .btn-outline {
1735  background-color: #FFFFFF;
1736  color: var(--color-accent-accessible) !important;
1737  border-color: var(--color-accent-accessible);
1738}
1739
1740#main-content .btn-outline:hover {
1741  background-color: var(--color-accent-accessible);
1742  color: #FFFFFF !important;
1743  border-color: var(--color-accent-accessible);
1744}
1745
1746#main-content .btn-full {
1747  width: 100%;
1748}
1749
1750/* Hero */
1751#main-content .hero-section {
1752  background-color: var(--color-primary-dark);
1753  color: #FFFFFF;
1754  padding: 80px 0;
1755  overflow: hidden;
1756  margin-top: 0 !important;
1757}
1758
1759#main-content .hero-section h1 {
1760  color: #ffffff;
1761}
1762
1763#main-content .hero-grid {
1764  display: grid;
1765  grid-template-columns: 1.2fr 0.8fr;
1766  gap: 60px;
1767  align-items: center;
1768}
1769
1770#main-content .hero-text-block {
1771  text-align: left;
1772}
1773
1774#main-content .byline-block {
1775  display: flex;
1776  align-items: center;
1777  gap: 16px;
1778  margin-bottom: 24px;
1779  background-color: rgba(250, 247, 244, 0.06);
1780  padding: 12px 18px;
1781  border-radius: 8px;
1782  border: 1px solid rgba(250, 247, 244, 0.45);
1783}
1784
1785#main-content .byline-portrait-container {
1786  width: 50px;
1787  height: 50px;
1788  border-radius: 50%;
1789  overflow: hidden;
1790  border: 2px solid var(--color-accent);
1791  flex-shrink: 0;
1792}
1793
1794#main-content .byline-portrait {
1795  display: block;
1796  width: 100%;
1797  height: 100%;
1798  min-height: 0;
1799  padding: 0;
1800  border: 0;
1801  border-radius: 50%;
1802  object-fit: cover;
1803}
1804
1805#main-content .byline-text {
1806  display: flex;
1807  flex-direction: column;
1808  font-size: 0.95rem;
1809}
1810
1811#main-content .byline-author,
1812#main-content .byline-desc {
1813  color: #FFFFFF;
1814}
1815
1816#main-content .byline-link {
1817  color: #FFB3CB !important;
1818  text-decoration: underline;
1819  text-decoration-thickness: 0.12em;
1820  text-underline-offset: 0.15em;
1821  font-weight: 700;
1822}
1823
1824#main-content .byline-link:hover {
1825  color: #FFFFFF !important;
1826}
1827
1828#main-content .hero-subheadline {
1829  font-size: 1.4rem;
1830  font-weight: 700;
1831  color: #FFB3CB;
1832  margin-bottom: 24px;
1833  line-height: 1.55;
1834}
1835
1836#main-content .answer-block {
1837  background-color: rgba(250, 247, 244, 0.08);
1838  border-left: 4px solid var(--color-accent);
1839  padding: 16px 20px;
1840  border-radius: 0 8px 8px 0;
1841  margin-bottom: 30px;
1842}
1843
1844#main-content .answer-block p {
1845  margin: 0;
1846  font-size: 1.05rem;
1847  line-height: 1.6;
1848  color: #FFFFFF;
1849}
1850
1851#main-content .hero-image-block {
1852  display: flex;
1853  justify-content: center;
1854  align-items: center;
1855}
1856
1857#main-content .hero-large-img {
1858  display: block;
1859  width: 100%;
1860  max-width: 420px;
1861  height: auto;
1862  border-radius: 12px;
1863  border: 4px solid var(--color-accent);
1864  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
1865}
1866
1867/* Problem */
1868#main-content .problem-grid {
1869  display: grid;
1870  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1871  gap: 20px;
1872  margin: 40px 0;
1873}
1874
1875#main-content .problem-card {
1876  background-color: var(--color-bg-white);
1877  border-left: 4px solid var(--color-accent);
1878  border-radius: 4px;
1879  padding: 24px;
1880  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
1881  display: flex;
1882  align-items: flex-start;
1883  gap: 16px;
1884  text-align: left;
1885}
1886
1887#main-content .problem-bullet {
1888  color: var(--color-accent-accessible);
1889  font-size: 1.15rem;
1890  flex-shrink: 0;
1891  font-weight: 700;
1892}
1893
1894#main-content .problem-text {
1895  margin: 0;
1896  font-weight: 500;
1897  font-size: 1.05rem;
1898}
1899
1900#main-content .problem-outro {
1901  background-color: rgba(15, 61, 50, 0.04);
1902  border: 1px dashed var(--color-primary);
1903  border-radius: 8px;
1904  padding: 30px;
1905  max-width: 700px;
1906  margin: 40px auto 0 auto;
1907}
1908
1909#main-content .problem-outro p {
1910  font-size: 1.15rem;
1911  font-weight: 600;
1912  color: var(--color-primary-dark);
1913  margin-bottom: 20px;
1914}
1915
1916/* Services */
1917#main-content .services-subheading {
1918  text-align: center;
1919  margin-top: 50px;
1920  margin-bottom: 35px;
1921}
1922
1923#main-content .services-grid {
1924  display: grid;
1925  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1926  gap: 24px;
1927  margin-bottom: 40px;
1928}
1929
1930#main-content .service-card {
1931  background-color: var(--color-bg-cream);
1932  border: 1px solid var(--color-border);
1933  border-radius: 8px;
1934  padding: 30px;
1935  display: flex;
1936  flex-direction: column;
1937  transition: transform 0.2s ease, box-shadow 0.2s ease;
1938}
1939
1940#main-content .service-card:hover {
1941  transform: translateY(-4px);
1942  box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08);
1943}
1944
1945#main-content .service-image-container {
1946  width: 100%;
1947  height: auto;
1948  border-radius: 6px;
1949  overflow: hidden;
1950  border: 1px solid var(--color-border);
1951  margin-bottom: 20px;
1952}
1953
1954#main-content .service-card-img {
1955  width: 100%;
1956  height: auto;
1957  display: block;
1958}
1959
1960#main-content .service-title-row {
1961  display: flex;
1962  align-items: center;
1963  gap: 12px;
1964  margin-bottom: 12px;
1965}
1966
1967#main-content .service-card-icon {
1968  font-size: 1.4rem;
1969  color: var(--color-primary);
1970}
1971
1972#main-content .service-card h4 {
1973  margin: 0;
1974  font-size: 1.25rem;
1975}
1976
1977#main-content .service-card p {
1978  margin: 0;
1979  font-size: 1rem;
1980  line-height: 1.6;
1981}
1982
1983#main-content .services-notice {
1984  text-align: center;
1985  font-style: italic;
1986  font-size: 1rem;
1987  color: var(--color-text-dark);
1988  max-width: 750px;
1989  margin: 40px auto 0 auto;
1990}
1991
1992/* Pricing */
1993#main-content .work-grid {
1994  display: grid;
1995  grid-template-columns: 1fr 1fr;
1996  gap: 32px;
1997  margin-top: 50px;
1998  align-items: stretch;
1999}
2000
2001#main-content .work-card {
2002  background-color: var(--color-bg-white);
2003  border: 1px solid var(--color-border);
2004  border-radius: 12px;
2005  padding: 40px;
2006  display: flex;
2007  flex-direction: column;
2008  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
2009}
2010
2011#main-content .work-card-banner {
2012  width: 100%;
2013  border-radius: 8px;
2014  overflow: hidden;
2015  border: 1px solid var(--color-border);
2016  margin-bottom: 24px;
2017}
2018
2019#main-content .work-card-banner-img {
2020  width: 100%;
2021  height: auto;
2022  display: block;
2023}
2024
2025#main-content .work-card h3 {
2026  font-size: 1.85rem;
2027  border-bottom: 2px solid var(--color-border);
2028  padding-bottom: 15px;
2029  margin-bottom: 20px;
2030}
2031
2032#main-content .work-card-desc {
2033  font-size: 1.05rem;
2034  margin-bottom: 30px;
2035}
2036
2037#main-content .pricing-tiers-list {
2038  list-style: none;
2039  padding: 0;
2040  margin: 0 0 30px 0;
2041}
2042
2043#main-content .pricing-tier-item {
2044  background-color: var(--color-bg-cream);
2045  border: 1px solid var(--color-border);
2046  border-radius: 8px;
2047  padding: 20px;
2048  margin-bottom: 16px;
2049}
2050
2051#main-content .pricing-tier-header {
2052  display: flex;
2053  justify-content: space-between;
2054  align-items: baseline;
2055  flex-wrap: wrap;
2056  gap: 8px;
2057  margin-bottom: 6px;
2058}
2059
2060#main-content .pricing-tier-name {
2061  font-weight: 700;
2062  font-size: 1.15rem;
2063  color: var(--color-primary-dark);
2064}
2065
2066#main-content .pricing-tier-hours {
2067  font-size: 0.9rem;
2068  font-weight: 700;
2069  background-color: var(--color-primary);
2070  color: #FFFFFF;
2071  padding: 4px 10px;
2072  border-radius: 4px;
2073}
2074
2075#main-content .pricing-tier-cost {
2076  font-weight: 700;
2077  font-size: 1.3rem;
2078  color: var(--color-text-dark);
2079}
2080
2081#main-content .pricing-tier-sub {
2082  font-size: 0.95rem;
2083  color: #404740;
2084  font-weight: 400;
2085}
2086
2087#main-content .pricing-tier-desc {
2088  margin: 8px 0 0 0;
2089  font-size: 1rem;
2090  line-height: 1.5;
2091}
2092
2093#main-content .projects-list-title {
2094  color: var(--color-primary-dark);
2095  margin-bottom: 15px;
2096}
2097
2098#main-content .projects-list {
2099  list-style: none;
2100  padding: 0;
2101  margin: 0 0 30px 0;
2102}
2103
2104#main-content .projects-list li {
2105  padding: 10px 0;
2106  border-bottom: 1px solid var(--color-border-light);
2107  display: flex;
2108  align-items: center;
2109  gap: 12px;
2110  font-size: 1rem;
2111}
2112
2113#main-content .projects-list li:last-child {
2114  border-bottom: none;
2115}
2116
2117#main-content .project-list-bullet {
2118  color: var(--color-accent-accessible);
2119  font-weight: 700;
2120}
2121
2122#main-content .project-minimum-tier {
2123  margin-top: auto;
2124  margin-bottom: 30px;
2125}
2126
2127#main-content .work-card .btn {
2128  margin-top: auto;
2129}
2130
2131/* Why / comparison table */
2132#main-content .why-grid {
2133  display: grid;
2134  grid-template-columns: 1fr 1fr;
2135  gap: 24px;
2136  margin-top: 40px;
2137  margin-bottom: 60px;
2138}
2139
2140#main-content .why-item {
2141  background-color: var(--color-bg-cream);
2142  border: 1px solid var(--color-border);
2143  border-radius: 8px;
2144  padding: 24px;
2145  display: flex;
2146  align-items: flex-start;
2147  gap: 16px;
2148}
2149
2150#main-content .why-icon {
2151  background-color: var(--color-accent);
2152  color: #FFFFFF;
2153  width: 32px;
2154  height: 32px;
2155  border-radius: 50%;
2156  display: flex;
2157  align-items: center;
2158  justify-content: center;
2159  flex-shrink: 0;
2160  font-size: 0.9rem;
2161}
2162
2163#main-content .why-item p {
2164  margin: 0;
2165  font-size: 1.05rem;
2166  line-height: 1.5;
2167}
2168
2169#main-content .table-container {
2170  width: 100%;
2171  margin-bottom: 0;
2172  border: 1px solid var(--color-border);
2173  border-radius: 8px;
2174  overflow: hidden;
2175}
2176
2177#main-content .table-title {
2178  background-color: var(--color-primary-dark);
2179  color: #FFFFFF;
2180  margin: 0;
2181  padding: 20px 24px;
2182  font-size: 1.35rem;
2183  text-align: left;
2184}
2185
2186#main-content .comparison-table-wrapper {
2187  width: 100%;
2188  overflow-x: auto;
2189}
2190
2191#main-content .comparison-table {
2192  width: 100%;
2193  border-collapse: separate;
2194  border-spacing: 0;
2195  text-align: left;
2196  background-color: var(--color-bg-white);
2197  min-width: 600px;
2198}
2199
2200#main-content .comparison-table th,
2201#main-content .comparison-table td {
2202  padding: 16px 24px;
2203  border-bottom: 1px solid var(--color-border-light);
2204  font-size: 1rem;
2205  vertical-align: top;
2206}
2207
2208#main-content .comparison-table thead th {
2209  background-color: var(--color-primary);
2210  color: #FFFFFF;
2211  font-weight: 700;
2212}
2213
2214#main-content .comparison-table tbody th {
2215  font-weight: 600;
2216  color: var(--color-primary-dark);
2217}
2218
2219#main-content .comparison-table .highlight-column {
2220  background-color: rgba(245, 22, 121, 0.06);
2221  font-weight: 600;
2222  color: var(--color-primary-dark);
2223  border-left: 3px solid var(--color-accent);
2224  border-right: 3px solid var(--color-accent);
2225}
2226
2227#main-content .comparison-table thead .highlight-column {
2228  border-top: 3px solid var(--color-accent);
2229}
2230
2231#main-content .comparison-table tbody tr:last-child .highlight-column {
2232  border-bottom: 3px solid var(--color-accent);
2233}
2234
2235/* Testimonials */
2236#main-content .proof-block-container {
2237  border-top: 2px solid var(--color-border-light);
2238  padding-top: 30px;
2239}
2240
2241#main-content .proof-title {
2242  text-align: center;
2243  font-size: 1.65rem;
2244  margin-bottom: 30px;
2245}
2246
2247#main-content .testimonials-grid {
2248  display: grid;
2249  grid-template-columns: 1fr 1fr;
2250  gap: 32px;
2251}
2252
2253#main-content .testimonial-card {
2254  background-color: var(--color-bg-cream);
2255  border-top: 4px solid var(--color-primary);
2256  border-radius: 6px;
2257  padding: 35px;
2258  margin: 0;
2259  display: flex;
2260  flex-direction: column;
2261}
2262
2263#main-content .testimonial-card > img,
2264#main-content .testimonial-placeholder-img {
2265  display: block;
2266  width: 84px;
2267  height: 84px;
2268  min-width: 84px;
2269  min-height: 84px;
2270  padding: 0;
2271  border-radius: 50%;
2272  object-fit: cover;
2273  margin: 0 auto 20px auto;
2274  border: 2px solid var(--color-accent);
2275}
2276
2277#main-content .testimonial-quote {
2278  font-style: italic;
2279  font-size: 1.05rem;
2280  line-height: 1.65;
2281  margin-bottom: 20px;
2282}
2283
2284#main-content .testimonial-author {
2285  font-weight: 700;
2286  font-size: 1rem;
2287  color: var(--color-primary-dark);
2288  margin-top: auto;
2289  font-style: normal;
2290}
2291
2292/* FAQ */
2293#main-content .faq-list {
2294  max-width: 800px;
2295  margin: 40px auto 0 auto;
2296}
2297
2298#main-content .faq-item {
2299  background-color: var(--color-bg-white);
2300  border: 1px solid var(--color-border);
2301  border-radius: 6px;
2302  margin-bottom: 16px;
2303  overflow: hidden;
2304  transition: border-color 0.2s ease;
2305}
2306
2307#main-content .faq-item[open] {
2308  border-color: var(--color-primary);
2309}
2310
2311#main-content .faq-item summary {
2312  padding: 20px 24px;
2313  font-weight: 600;
2314  font-size: 1.1rem;
2315  color: var(--color-primary-dark);
2316  cursor: pointer;
2317  list-style: none;
2318  display: flex;
2319  justify-content: space-between;
2320  align-items: center;
2321  user-select: none;
2322}
2323
2324#main-content .faq-item summary::-webkit-details-marker {
2325  display: none;
2326}
2327
2328#main-content .faq-item summary::after {
2329  content: "+";
2330  font-size: 1.5rem;
2331  font-weight: 700;
2332  color: var(--color-primary);
2333  transition: transform 0.2s ease;
2334}
2335
2336#main-content .faq-item[open] summary::after {
2337  content: "−";
2338  transform: rotate(180deg);
2339}
2340
2341#main-content .faq-content {
2342  padding: 0 24px 20px 24px;
2343  border-top: 1px solid var(--color-border-light);
2344}
2345
2346#main-content .faq-content p {
2347  margin: 0;
2348  font-size: 1rem;
2349  line-height: 1.6;
2350}
2351
2352/* Contact */
2353#main-content .contact-grid {
2354  display: grid;
2355  grid-template-columns: 4fr 5fr;
2356  gap: 50px;
2357  margin-bottom: 50px;
2358}
2359
2360#main-content .contact-info {
2361  text-align: left;
2362}
2363
2364#main-content .contact-guide-box {
2365  background-color: var(--color-bg-cream);
2366  border: 1px solid var(--color-border);
2367  border-radius: 8px;
2368  padding: 30px;
2369  margin-top: 25px;
2370}
2371
2372#main-content .contact-guide-box h4 {
2373  margin-top: 0;
2374  font-size: 1.2rem;
2375  color: var(--color-primary-dark);
2376}
2377
2378#main-content .contact-checklist {
2379  list-style: none;
2380  padding: 0;
2381  margin: 0 0 20px 0;
2382}
2383
2384#main-content .contact-checklist li {
2385  position: relative;
2386  padding-left: 28px;
2387  margin-bottom: 12px;
2388  font-weight: 500;
2389  font-size: 1rem;
2390}
2391
2392#main-content .contact-checklist li::before {
2393  content: "✔";
2394  position: absolute;
2395  left: 0;
2396  top: 0;
2397  color: var(--color-accent-accessible);
2398  font-weight: 700;
2399}
2400
2401#main-content .contact-note {
2402  margin: 0;
2403  font-size: 1rem;
2404}
2405
2406#main-content .contact-form-container {
2407  background-color: var(--color-bg-cream);
2408  border: 1px solid var(--color-border);
2409  border-radius: 8px;
2410  padding: 40px;
2411  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
2412}
2413
2414#main-content .contact-form {
2415  width: 100%;
2416}
2417
2418#main-content .form-row {
2419  display: grid;
2420  grid-template-columns: 1fr 1fr;
2421  gap: 20px;
2422}
2423
2424#main-content .form-group {
2425  margin-bottom: 24px;
2426  text-align: left;
2427}
2428
2429#main-content .form-group label {
2430  display: block;
2431  font-weight: 600;
2432  font-size: 1rem;
2433  margin-bottom: 8px;
2434  color: var(--color-primary-dark);
2435}
2436
2437#main-content .form-group input[type="text"],
2438#main-content .form-group input[type="email"],
2439#main-content .form-group textarea {
2440  width: 100%;
2441  padding: 12px 16px;
2442  border: 2px solid var(--color-border);
2443  border-radius: 4px;
2444  font-family: var(--font-primary);
2445  font-size: 1rem;
2446  line-height: 1.5;
2447  color: var(--color-text-dark);
2448  background-color: var(--color-bg-white);
2449  transition: border-color 0.2s ease, box-shadow 0.2s ease;
2450}
2451
2452#main-content .form-group input[type="text"]:focus,
2453#main-content .form-group input[type="email"]:focus,
2454#main-content .form-group textarea:focus {
2455  border-color: var(--color-primary-dark);
2456  box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18);
2457  outline: 3px solid transparent;
2458}
2459
2460#main-content .form-group input::placeholder,
2461#main-content .form-group textarea::placeholder {
2462  color: #4A4A4A;
2463  opacity: 1;
2464}
2465
2466#main-content .form-group textarea {
2467  resize: vertical;
2468  min-height: 150px;
2469}
2470
2471/* Motion */
2472@media (prefers-reduced-motion: reduce) {
2473  #main-content *,
2474  #main-content *::before,
2475  #main-content *::after,
2476  .skip-link {
2477    animation-delay: -1ms !important;
2478    animation-duration: 1ms !important;
2479    animation-iteration-count: 1 !important;
2480    transition-duration: 0s !important;
2481    scroll-behavior: auto !important;
2482  }
2483}
2484
2485/* Responsive */
2486@media (max-width: 900px) {
2487  #main-content .hero-grid {
2488    grid-template-columns: 1fr;
2489    text-align: center;
2490    gap: 40px;
2491  }
2492
2493  #main-content .hero-text-block {
2494    text-align: center;
2495  }
2496
2497  #main-content .byline-block {
2498    justify-content: center;
2499    text-align: left;
2500  }
2501
2502  #main-content .hero-image-block {
2503    order: -1;
2504  }
2505
2506  #main-content .hero-large-img {
2507    max-width: 320px;
2508  }
2509
2510  #main-content .work-grid,
2511  #main-content .contact-grid {
2512    grid-template-columns: 1fr;
2513  }
2514
2515  #main-content .contact-grid {
2516    gap: 40px;
2517  }
2518}
2519
2520@media (max-width: 768px) {
2521  #main-content h1 {
2522    font-size: 2.25rem;
2523  }
2524
2525  #main-content h2 {
2526    font-size: 1.875rem;
2527  }
2528
2529  #main-content h3 {
2530    font-size: 1.4rem;
2531  }
2532
2533  #main-content p.lead {
2534    font-size: 1.15rem;
2535  }
2536
2537  #main-content .why-grid,
2538  #main-content .testimonials-grid {
2539    grid-template-columns: 1fr;
2540  }
2541}
2542
2543@media (max-width: 600px) {
2544  #main-content .container {
2545    padding: 0 20px;
2546  }
2547
2548  #main-content .section-padding {
2549    padding: 70px 0;
2550  }
2551
2552  #main-content .form-row {
2553    grid-template-columns: 1fr;
2554  }
2555
2556  #main-content .contact-form-container {
2557    padding: 28px 20px;
2558  }
2559
2560  #main-content .work-card {
2561    padding: 28px 20px;
2562  }
2563
2564  #main-content .hero-large-img {
2565    max-width: 280px;
2566  }
2567}
2568
2569/* Placeholder sizing */
2570#main-content .byline-portrait {
2571  display: block;
2572  width: 50px;
2573  height: 50px;
2574  min-height: 0;
2575  padding: 0;
2576  border: 0;
2577  border-radius: 50%;
2578  object-fit: cover;
2579}
2580
2581#main-content .hero-large-img {
2582  display: block;
2583  width: 100%;
2584  max-width: 420px;
2585  height: auto;
2586  border-radius: 12px;
2587}
2588
2589#main-content .work-card-banner-img {
2590  width: 100%;
2591  height: auto;
2592  display: block;
2593}
2594
2595#main-content .testimonial-placeholder-img {
2596  width: 84px;
2597  height: 84px;
2598  min-width: 84px;
2599  min-height: 84px;
2600  padding: 0;
2601  border-radius: 50%;
2602  margin: 0 auto 20px auto;
2603  font-size: 0.8rem;
2604}
2605
2606/* MemberVault paste cleanup */
2607.mv-block > p:empty,
2608.mv-block > div:empty {
2609  display: none !important;
2610  height: 0 !important;
2611  min-height: 0 !important;
2612  margin: 0 !important;
2613  padding: 0 !important;
2614  border: 0 !important;
2615}
2616
2617#main-content {
2618  margin-top: 0 !important;
2619  margin-bottom: 0 !important;
2620  padding-top: 0 !important;
2621}</style>
2622
2623<div class="border-b mv_breadcrumbs hidden hidden">
2624    <div class="max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10">
2625        <a href="/">
2626            <i class="fas fa-home"></i>
2627        </a>
2628        <i class="fas fa-caret-right ml-2 mr-2"></i>
2629        <a class="font-semibold" href="/pages/view/14178">
2630            Home        </a>
2631    </div>
2632
2633</div>
2634
2635<div class="flex flex-wrap max-w-screen-xl mx-auto lg:flex-nowrap lg:pl-6 lg:pr-6">
2636
2637
2638    <div class="w-full flex-auto">
2639        
2640        <div class="pl-4 pr-4 mv_content lg:pl-2 lg:pr-2">
2641            <div class="w-full relative mv-block" style="color: #0F3D32; "><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2642<?xml encoding="utf-8" ?><html><body><div id="main-content">
2643<section aria-label="Introduction" class="hero-section">
2644<div class="container hero-grid">
2645<div class="hero-text-block">
2646<h1>Looking for operational support you can rely on? <strong><em>maddatu</em></strong> keeps your business moving.</h1>
2647<div class="byline-block">
2648<div class="byline-portrait-container"><img src="https://s3.membervaultcdn.com/websitefae/6a97b91ddd3bc_Chantelle.png?v=1788328222" width="1000" height="1000" alt="Chantelle Venter" class="byline-portrait"></div>
2649<div class="byline-text"><span class="byline-author">By <strong>Chantelle Venter</strong></span> <span class="byline-desc"> 6+ Years Supporting Established Businesses | <a class="byline-link" href="https://www.maddatu.com/about"> Read my story &rarr; </a> </span></div>
2650</div>
2651<p class="hero-subheadline">Your business needs more than another pair of hands. You need someone you can trust to take care of the operational work that keeps everything moving.</p>
2652<div class="answer-block">
2653<p><strong><em>maddatu</em></strong> provides practical, dependable operational support for established small businesses. We handle the digital content, administration and day-to-day tasks that are easy to put off but need to get done, allowing you to focus fully on scaling your clinical or business impact.</p>
2654</div>
2655<div class="hero-cta"><a class="btn btn-outline" href="#contact"> Let's talk about what you need </a></div>
2656</div>
2657<div class="hero-image-block"><img src="https://s3.membervaultcdn.com/websitefae/MV%20-%20WF%20-%20Icons%20and%20photos%20(1).png?v=1750260127" title="Chantelle" alt="Chantelle Venter" class="hero-large-img"></div>
2658</div>
2659</section>
2660</div></body></html>
2661</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2662<?xml encoding="utf-8" ?><html><body><div id="main-content">
2663<section aria-labelledby="problem-heading" class="section-padding bg-cream">
2664<div class="container text-center">
2665<h2 id="problem-heading">What is currently waiting on your plate that you shouldn't have to manage?</h2>
2666<p class="lead">You have a business to run. You shouldn't have to manage every detail. There is always something waiting:</p>
2667<div class="problem-grid">
2668<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2669<p class="problem-text">An email sequence that needs setting up</p>
2670</div>
2671<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2672<p class="problem-text">A form that needs creating</p>
2673</div>
2674<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2675<p class="problem-text">A podcast episode that needs editing and publishing</p>
2676</div>
2677<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2678<p class="problem-text">A new client who needs onboarding</p>
2679</div>
2680<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2681<p class="problem-text">Content that needs uploading</p>
2682</div>
2683<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2684<p class="problem-text">A report that needs compiling</p>
2685</div>
2686<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2687<p class="problem-text">A list of small tasks that keeps growing</p>
2688</div>
2689<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2690<p class="problem-text">A website update</p>
2691</div>
2692<div class="problem-card"><span aria-hidden="true" class="problem-bullet">&#10004;</span>
2693<p class="problem-text">A course that needs publishing</p>
2694</div>
2695</div>
2696<div class="problem-outro">
2697<p>None of these jobs are necessarily difficult. The problem is that they still take time, attention and follow-through.</p>
2698<a class="btn btn-secondary" href="#contact">
2698 That is where I come in </a></div>
2699</div>
2700</section>
2701</div></body></html>
2702</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2703<?xml encoding="utf-8" ?><html><body><div id="main-content">
2704<section class="section-padding bg-white" aria-labelledby="solution-heading">
2705<div class="container">
2706<div class="text-center max-width-800">
2707<h2 id="solution-heading">How can one trusted partner handle the work that keeps your business moving?</h2>
2708<p class="lead">You do not need to work out which specialist to hire for every small job. You can bring the work to me, and I will take care of the practical execution using the tools and processes already in your business.</p>
2709</div>
2710<h3 class="services-subheading">What specific operational tasks can <strong><em>maddatu</em></strong> take off your plate?</h3>
2711<div class="services-grid"><!-- Card 1 -->
2712<div class="service-card">
2713<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Email%20campaigns%20and%20sequence%20administration.png?v=1788326557" width="1280" height="486" alt="Email campaigns and sequence administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2714<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#9993;</span>
2715<h4>Email campaigns and sequence administration</h4>
2716</div>
2717<p>Formatting supplied email copy, building newsletter templates, and setting up and testing pre-written automated marketing sequences.</p>
2718</div>
2719<!-- Card 2 -->
2720<div class="service-card">
2721<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Forms,%20quizzes%20and%20client-facing%20content.png?v=1788326663" width="1280" height="486" alt="Forms, quizzes and client-facing content" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2722<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#128221;</span>
2723<h4>Forms, quizzes and client-facing content</h4>
2724</div>
2725<p>Creating functional contact, intake, or evaluation forms, setting up client quizzes, and configuring automated confirmation emails using built-in platform features.</p>
2726</div>
2727<!-- Card 3 -->
2728<div class="service-card">
2729<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Podcast%20and%20content%20publishing.png?v=1788326678" width="1280" height="486" alt="Podcast and content publishing" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2730<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#127897;</span>
2731<h4>Podcast and content publishing</h4>
2732</div>
2733<p>Cleaning raw recordings, generating audiograms/graphics, drafting show notes from agreed templates, and publishing episodes to hosting platforms.</p>
2734</div>
2735<!-- Card 4 -->
2736<div class="service-card">
2737<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Event%20and%20summit%20administration.png?v=1788326691" width="1280" height="486" alt="Event and summit administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2738<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#128197;</span>
2739<h4>Event and summit administration</h4>
2740</div>
2741<p>Creating event speaker submission forms, collecting and organizing bios/assets, generating event graphics, and publishing schedules.</p>
2742</div>
2743<!-- Card 5 -->
2744<div class="service-card">
2745<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Client%20onboarding%20administration.png?v=1788326704" width="1280" height="486" alt="Client onboarding administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important;
2745 object-fit: fill !important;"></div>
2746<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#128101;</span>
2747<h4>Client onboarding administration</h4>
2748</div>
2749<p>Distributing contracts via signing platforms, issuing initial onboarding invoices, configuring user platform access, and coordinating cohort logistics.</p>
2750</div>
2751<!-- Card 6 -->
2752<div class="service-card">
2753<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Data,%20document%20and%20content%20administration.png?v=1788326716" width="1280" height="486" alt="Data, document and content administration" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2754<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#128202;</span>
2755<h4>Data, document and content administration</h4>
2756</div>
2757<p>Organizing digital folders, formatting documents, exporting/importing contact data, and executing clean manual platform-to-platform copy migrations.</p>
2758</div>
2759<!-- Card 7 -->
2760<div class="service-card">
2761<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/General%20operational%20tasks%20that%20need%20reliable%20follow-through.png?v=1788326732" width="1280" height="486" alt="General operational tasks requiring reliable follow-through" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2762<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#9881;</span>
2763<h4>General operational tasks that need reliable follow-through</h4>
2764</div>
2765<p>A broad variety of routine tasks that require continuous attention, practical follow-through, and reliable execution without micromanagement.</p>
2766</div>
2767<!-- Card 8 -->
2768<div class="service-card">
2769<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Course%20and%20digital%20content%20publishing.png?v=1788326749" width="1280" height="486" alt="Course and digital content publishing" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2770<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#127891;</span>
2771<h4>Course and digital content publishing</h4>
2772</div>
2773<p>Formatting online lessons, uploading and organizing supplied modules, formatting lessons, and adding workbook assets, graphics, and checklists.</p>
2774</div>
2775<!-- Card 9 -->
2776<div class="service-card">
2777<div class="service-image-container"><img src="https://s3.membervaultcdn.com/websitefae/Website%20content%20and%20routine%20maintenance.png?v=1788326762" width="1280" height="486" alt="Website content and routine maintenance" class="service-card-img" style="display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; object-fit: fill !important;"></div>
2778<div class="service-title-row"><span class="service-card-icon" aria-hidden="true">&#128187;</span>
2779<h4>Website content and routine maintenance</h4>
2780</div>
2781<p>Updating text copy, publishing new images or products, publishing media, performing plugin updates, and carrying out routine platform health checks.</p>
2782</div>
2783</div>
2784<p class="services-notice">These are examples, not a rigid menu. Your needs will change from month to month. Your support should be able to change with them.</p>
2785</div>
2786</section>
2787</div></body></html>
2788</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2789<?xml encoding="utf-8" ?><html><body><div id="main-content">
2790<section aria-labelledby="pricing-heading" class="section-padding bg-cream">
2791<div class="container">
2792<div class="text-center max-width-800">
2793<h2 id="pricing-heading">How can you collaborate with <strong><em>maddatu</em></strong> to support your growth?</h2>
2794<p class="lead">Whether you require predictable ongoing support or have a specific outcome to achieve, we have a structure to supp
2794ort you.</p>
2795</div>
2796<div class="work-grid">
2797<div class="work-card">
2798<div class="work-card-banner"><img src="https://s3.membervaultcdn.com/websitefae/Ongoing%20Support.png?v=1788327196" alt="Ongoing support" class="work-card-banner-img" style="width: 100%; height: auto !important; min-height: 0 !important; object-fit: contain; display: block;"></div>
2799<h3>Ongoing Support</h3>
2800<p class="work-card-desc">Reserve my time each month for the operational work your business needs. You can send tasks as they arise, and I keep track of the available capacity.</p>
2801<ul class="pricing-tiers-list">
2802<li class="pricing-tier-item">
2803<div class="pricing-tier-header"><span class="pricing-tier-name">Foundation</span> <span class="pricing-tier-hours">Up to 10 hours/month</span></div>
2804<div class="pricing-tier-cost">R6,500 <span class="pricing-tier-sub"> / $500 / &pound;400 per month </span></div>
2805<p class="pricing-tier-desc">For established businesses with a lighter but recurring flow of operational work.</p>
2806</li>
2807<li class="pricing-tier-item">
2808<div class="pricing-tier-header"><span class="pricing-tier-name">Core</span> <span class="pricing-tier-hours">Up to 20 hours/month</span></div>
2809<div class="pricing-tier-cost">R12,000 <span class="pricing-tier-sub"> / $950 / &pound;750 per month </span></div>
2810<p class="pricing-tier-desc">For businesses that regularly need varied support across content, administration and publishing.</p>
2811</li>
2812<li class="pricing-tier-item">
2813<div class="pricing-tier-header"><span class="pricing-tier-name">Partner</span> <span class="pricing-tier-hours">Up to 30 hours/month</span></div>
2814<div class="pricing-tier-cost">R17,000 <span class="pricing-tier-sub"> / $1,350 / &pound;1,050 per month </span></div>
2815<p class="pricing-tier-desc">For businesses where I am a regular part of the operational workflow and you need more consistent capacity.</p>
2816</li>
2817</ul>
2818<a class="btn btn-primary btn-full" href="https://www.maddatu.com/ongoing-support">Explore ongoing support</a></div>
2819<div class="work-card">
2820<div class="work-card-banner"><img src="https://s3.membervaultcdn.com/websitefae/Projects.png?v=1788327208" alt="Projects" class="work-card-banner-img" style="width: 100%; height: auto !important; min-height: 0 !important; object-fit: contain; display: block;"></div>
2821<h3>Projects</h3>
2822<p class="work-card-desc">Have a defined piece of work that needs to be completed? I can scope it, quote it and take it through to completion.</p>
2823<h4 class="projects-list-title">Project Families Handled:</h4>
2824<ul class="projects-list">
2825<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Course &amp; Digital Content Publishing</li>
2826<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Email Campaign &amp; Sequence Production</li>
2827<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Podcast Production &amp; Publishing Support</li>
2828<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Event &amp; Summit Administration</li>
2829<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Client Onboarding Administration</li>
2830<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Website Content Projects &amp; Migrations</li>
2831<li><span aria-hidden="true" class="project-list-bullet">&#10004;</span> Data, Document &amp; Migration Administration</li>
2832</ul>
2833<div class="pricing-tier-item project-minimum-tier"><span class="pricing-tier-name">Project Pricing Starting From:</span>
2834<div class="pricing-tier-cost" style="margin: 10px 0 0 0;">R4,500 <span class="pricing-tier-sub"> / $400 / &pound;325 </span></div>
2835<p class="pricing-tier-desc" style="margin-top: 5px;">Based on agreed scope and deliverables. I use internal time estimates to protect the project margin, but you are not required to manage the work by the hour.</p>
2836</div>
2837<a class="btn btn-secondary btn-full" href="https://www.maddatu.com/projects">Explore projects</a></div>
2838</div>
2839</div>
2840</section>
2841</div></body></html>
2842</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2843<?xml encoding="utf-8" ?><html><body><div id="main-content">
2844<section aria-labelledby="why-heading" class="section-padding bg-white">
2845<div class="container">
2846<div class="text-center max-width-800">
2847<h2 id="why-heading">Why do established service businesses choose <strong><em>maddatu</em></strong>?</h2>
2848<p class="lead">You deserve operational support that understands small business dynamics, maintains continuity, and handles technical tasks without micromanagement.</p>
2849</div>
2850<div class="why-grid">
2851<div class="why-item"><span aria-hidden="true" class="why-icon">&#10004;</span>
2852<p><strong>You get continuity</strong> rather than a different person for every single task.</p>
2853</div>
2854<div class="why-item"><span aria-hidden="true" class="why-icon">&#10004;</span>
2855<p><strong>You do not have to explain</strong> your business from scratch every time.</p>
2856</div>
2857<div class="why-item"><span aria-hidden="true" class="why-icon">&#10004;</span>
2858<p><strong>I can work across the tools</strong> you already use in your business.</p>
2859</div>
2860<div class="why-item"><span aria-hidden="true" class="why-icon">&#10004;</span>
2861<p><strong>I follow your processes</strong> and keep track of what needs to happen next.</p>
2862</div>
2863<div class="why-item"><span aria-hidden="true" class="why-icon">&#10004;</span>
2864<p><strong>When something is unclear</strong>, I ask the right question and work out the next practical step.</p>
2865</div>
2866<div class="why-item"><span aria-hidden="true" class="why-icon">&#10004;</span>
2867<p><strong>You get someone who cares</strong> about getting the work finished, not simply ticking off a task list.</p>
2868</div>
2869</div>
2870<div class="table-container">
2871<h3 class="table-title">Comparing Your Support Alternatives</h3>
2872<table class="comparison-table">
2873<thead>
2874<tr>
2875<th scope="col">Feature / Operational Focus</th>
2876<th scope="col">Low-Cost General VA</th>
2877<th scope="col">Rigid Digital Agency</th>
2878<th class="highlight-column" scope="col"><strong><em>maddatu</em></strong> Support</th>
2879</tr>
2880</thead>
2881<tbody>
2882<tr>
2883<th scope="row">Task Independence &amp; Ownership</th>
2884<td>Requires step-by-step supervision</td>
2885<td>Limited to highly structured scope</td>
2886<td class="highlight-column">Takes full responsibility and follow-through</td>
2887</tr>
2888<tr>
2889<th scope="row">Continuity &amp; Business Familiarity</th>
2890<td>High turnover, frequent restarts</td>
2891<td>Different account managers month-to-month</td>
2892<td class="highlight-column">Single trusted contact who understands your systems</td>
2893</tr>
2894<tr>
2895<th scope="row">Platform Adaptability</th>
2896<td>May struggle with multiple platforms</td>
2897<td>Forces you onto their preferred tools</td>
2898<td class="highlight-column">Works across the systems you already use</td>
2899</tr>
2900<tr>
2901<th scope="row">Commercial Transparency</th>
2902<td>Commoditized hourly rates</td>
2903<td>Opaque premium packages</td>
2904<td class="highlight-column">Prepaid monthly capacity or clear fixed project fees</td>
2905</tr>
2906</tbody>
2907</table>
2908</div>
2909</div>
2910</section>
2911</div></body></html>
2912</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2913<?xml encoding="utf-8" ?><html><body><div id="main-content">
2914<section class="section-padding bg-white" aria-labelledby="proof-heading">
2915<div class="container">
2916<div class="proof-block-container">
2917<h3 class="proof-title" id="proof-heading">Verified Proof From Our Clients</h3>
2918<div class="testimonials-grid">
2919<blockquote class="testimonial-card"><img src="https://s3.membervaultcdn.com/websitefae/6a97b8932a57c_Ashley.png?v=1788328084" width="1000" height="1000" alt="Ashley Costello" class="testimonial-placeholder-img">
2920<p class="testimonial-quote">"I have been working with Chantelle since April 2023, and every day she amazes me with her abilities. We initially met because of my MemberVault account, but since then, she has done so much for my business... I just started using a new system to help with client documentation, appointments, and invoices, and Chantelle went away and came back and taught me to use it. She also set up all templates, etc., cannot recommend her enough."</p>
2921<cite class="testimonial-author">&mdash; Ashley Costello, Established Client</cite></blockquote>
2922<blockquote class="testimonial-card"><img src="https://s3.membervaultcdn.com/websitefae/6a97b8a2ac92a_Jewel.png?v=1788328099" width="1000" height="1000" alt="Jewel Veitch" class="testimonial-placeholder-img">
2923<p class="testimonial-quote">"My experience working with <strong><em>maddatu</em></strong> was out of this world! I am not a tech person, and Chantelle made this process easy and fun. Words I would NEVER have used to describe it in the past. Chantelle exceeded my expectations with her guidance and knowledge. Collaboration has been super easy and stress-free! I would HIGHLY recommend you consider working with her, you will not be disappointed!"</p>
2924<cite class="testimonial-author">&mdash; Jewel Veitch, Established Client</cite></blockquote>
2925</div>
2926</div>
2927</div>
2928</section>
2929</div></body></html>
2930</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2931<?xml encoding="utf-8" ?><html><body><div id="main-content">
2932<section aria-labelledby="faq-heading" class="section-padding bg-cream">
2933<div class="container">
2934<div class="text-center max-width-800">
2935<h2 id="faq-heading">Frequently Asked Questions</h2>
2936<p class="lead">Clear, direct answers about working together, support structures, and platform details.</p>
2937</div>
2938<div class="faq-list"><details class="faq-item">
2939<summary>Do I need to know exactly what I need before contacting you?</summary>
2940<div class="faq-content">
2941<p>No. Tell me what you are trying to get done. We can work out whether it is best handled as ongoing support or a project.</p>
2942</div>
2943</details>
2943<details class="faq-item">
2944<summary>Do you only work on websites?</summary>
2945<div class="faq-content">
2946<p>No. Websites are one part of the work. I also support course publishing, email campaigns, content production, events, onboarding, administration, data and other operational tasks.</p>
2947</div>
2948</details><details class="faq-item">
2949<summary>Do you only work with one platform?</summary>
2950<div class="faq-content">
2951<p>No. I work with the tools that are already part of your business where practical.</p>
2952</div>
2953</details><details class="faq-item">
2954<summary>Can I give you different types of tasks each month?</summary>
2955<div class="faq-content">
2956<p>Yes. That is one of the main reasons ongoing support is structured around reserved capacity rather than a rigid list of tasks.</p>
2957</div>
2958</details><details class="faq-item">
2959<summary>What happens if I use all my monthly support time?</summary>
2960<div class="faq-content">
2961<p>I will let you know when you are approaching your limit. We can defer additional work, schedule it into the next period, or quote extra work separately.</p>
2962</div>
2963</details><details class="faq-item">
2964<summary>Do unused hours roll over?</summary>
2965<div class="faq-content">
2966<p>The default approach is that monthly capacity is for the current support period. A small rollover allowance can be agreed where appropriate, but unlimited accumulation is not part of the model.</p>
2967</div>
2968</details><details class="faq-item">
2969<summary>Can I start with a project and move into ongoing support?</summary>
2970<div class="faq-content">
2971<p>Yes. A project is often a useful way for us to work together before deciding whether ongoing support makes sense.</p>
2972</div>
2973</details><details class="faq-item">
2974<summary>Do you offer website development?</summary>
2975<div class="faq-content">
2976<p>My focus is on website content administration and routine maintenance rather than software development or custom coding.</p>
2977</div>
2978</details><details class="faq-item">
2979<summary>Can you work with my existing processes?</summary>
2980<div class="faq-content">
2981<p>Yes. In most cases I work within the systems and processes you already have rather than requiring you to rebuild everything.</p>
2982</div>
2983</details><details class="faq-item">
2984<summary>Will you tell me if you think something could work better?</summary>
2985<div class="faq-content">
2986<p>Yes. I will follow your instructions, but if I see a practical improvement worth considering, I will raise it with you. You remain responsible for the final business decision.</p>
2987</div>
2988</details><details class="faq-item">
2989<summary>How do projects get priced?</summary>
2990<div class="faq-content">
2991<p>Projects are priced according to the agreed scope and deliverables. I use internal time estimates to calculate the fee and protect the project margin.</p>
2992</div>
2993</details><details class="faq-item">
2994<summary>Who is ongoing support best for?</summary>
2995<div class="faq-content">
2996<p>It works best for established businesses with a recurring flow of operational work and a need for a reliable person who already understands their business.</p>
2997</div>
2998</details></div>
2999</div>
3000</section>
3001</div></body></html>
3002</div><div class="" style=""></div><div class="w-full " style=""><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
3003<?xml encoding="utf-8" ?><html><body><div id="main-content">
3004<section aria-labelledby="contact-heading" class="section-padding bg-white" id="contact">
3005<div class="container">
3006<div class="contact-grid">
3007<div class="contact-info">
3008<h2 id="contact-heading">Tell me what needs to get done.</h2>
3009<p>You do not need to know exactly what service you need before you contact me. Tell me what is currently taking up your time, what keeps getting pushed down the list, or what you need help getting finished.</p>
3010<div class="contact-guide-box">
3011<h4>A few useful details to think about:</h4>
3012<ul class="contact-checklist">
3013<li>What do you need done?</li>
3014<li>What platform or tools are involved, if you know them?</li>
3015<li>Is this a one-off project or something that happens regularly?</li>
3016<li>When would you ideally like it completed?</li>
3017</ul>
3018<p class="contact-note"><em>If you are not sure, that is fine. Start with the problem and we can work from there.</em></p>
3019</div>
3020</div>
3021<div class="contact-form-container">
3022<div id="mlb2-38308907" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-38308907">
3023<div class="ml-form-align-center">
3024<div class="ml-form-embedWrapper embedForm">
3025<div class="ml-form-embedBody ml-form-embedBodyDefault row-form"><form class="ml-block-form contact-form" action="https://assets.mailerlite.com/jsonp/107223/forms/181644614206227590/subscribe" data-code="" method="post">
3026<div class="form-row">
3027<div class="form-group"><label for="contact-first-name"> First Name </label> <input id="contact-first-name" type="text" name="fields[name]" autocomplete="given-name" required=""></div>
3028<div class="form-group"><label for="contact-last-name"> Last Name </label> <input id="contact-last-name" type="text" name="fields[last_name]" autocomplete="family-name" required=""></div>
3029</div>
3030<div class="form-group"><label for="contact-email"> Email Address </label> <input id="contact-email" type="email" name="fields[email]" autocomplete="email" required=""></div>
3031<div class="form-group"><label for="contact-message"> Tell me what is currently sitting on your plate and where you need support </label> <textarea id="contact-message" name="fields[tell_us_what_is_currently_happening_in_your_practice_and_where_you_need_support]" rows="7" required=""></textarea></div>
3032</form></div>
3033</div>
3034</div>
3035</div>
3036</div>
3037</div>
3038</div>
3039</section>
3040</div></body></html>
3041</div></div>        </div>
3042
3043        
3044
3045    </div>
3046
3047
3048</div>
3049</div>
3050<footer id="mv_footer" class="mv_footer border-t pb-10 text-sm ">
3051
3052	<div class="flex flex-wrap w-full max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10 font-light border-b justify-end ">
3053
3054					<div class="w-full lg:w-1/3 flex-none p-4 pr-10 text-center lg:text-left border-b lg:border-b-0">
3055				<h3 class="font-semibold mb-1">About</h3>
3056				<p>Maddatu provides practical, dependable operational support for established small businesses, handling the digital content, administration and day-to-day tasks that need to get done so you can focus fully on scaling your clinical or business impact.
3057
3058Website Fae Pty Ltd trading as Maddatu</p>
3059			</div>
3060		
3061					<div class="relative w-full lg:w-1/3 flex-none p-4 text-center border-b lg:border-b-0">
3062				<div class="inline-block text-center lg:text-left relative">
3063					<h3 class="font-semibold mb-1">Links</h3>
3064					<div class="w-full ">
3065													<a class="mb-1" href="https://maddatu.com/terms" target="_BLANK">
3066								Terms and Conditions							</a><br>
3067													<a class="mb-1" href="https://maddatu.com/privacy" target="_BLANK">
3068								Privacy Policy							</a><br>
3069													<a class="mb-1" href="https://maddatu.com/disclaimer" target="_BLANK">
3070								Disclaimer							</a><br>
3071													<a class="mb-1" href="https://maddatu.com/accessibility-statement" target="_BLANK">
3072								Accessibility Statement							</a><br>
3073											</div>
3074				</div>
3075			</div>
3076		
3077
3078
3079		<div class="w-full lg:w-1/3 flex-none p-4 text-center ">
3080			<div class="inline-block text-center lg:text-left">
3081				<h3 class="font-semibold mb-1">Social</h3>
3082				<div class="w-full">
3083
3084											<a class="mb-1 flex" href="https://facebook.com/maddatu.sa" target="_BLANK">
3085							<i class="fab fa-facebook-square inline-block my-auto mr-1"></i> Facebook
3086						</a>
3087																					<a class="mb-1 flex" href="https://instagram.com/maddatu.sa" target="_BLANK">
3088							<i class="fab fa-instagram inline-block my-auto mr-1"></i> Instagram
3089						</a>
3090																				
3091					
3092					
3093					
3094					
3095
3096				</div>
3097			</div>
3098		</div>
3099
3100
3101	</div>
3102
3103	<div class="w-full max-w-screen-xl p-4 mx-auto text-xs font-light">
3104		<div class="w-full flex flex-wrap pt-2">
3105			<div class="flex-none w-full text-center mt-2 lg:w-1/2 lg:text-left">
3106				&copy; 2026 - maddatu			</div>
3107			<div class="flex-none flex w-full pt-2 lg:w-1/2 lg:flex-row-reverse">
3108								<a href="https://membervault.co" class="flex-none mx-auto lg:mx-px flex hidden" target="_BLANK">
3109					<img class="my-auto w-6 h-6 mr-2 mv_footer_logo" src="/fe/images/fav/favicon-32x32.png" loading="lazy">
3110					<span class="my-auto">Powered By MemberVault</span>
3111				</a>
3112			</div>
3113		</div>
3114	</div>
3115
3116</footer>
3117
3118
3119
3120
3121
3122<div id="mv_main_nav" class="fixed bg-white text-gray-800 top-0 left-0 h-full shadow-2xl w-5/6 md:w-4/6 lg:w-2/6 overflow-scroll z-20" style="left:-100%">
3123
3124	<a href="javascript:toggleMainNav()" class="mv_close_button mt-2 mr-2">
3125		<i class="fas fa-times"></i>
3126	</a>
3127
3128	<div class="w-full p-4 border-b">
3129
3130		<form class="mv_search_container" method="get" action="/products">
3131			<a href="javascript:toggleTextSizeMobile()" class="mv_text_button mr-2">
3132				<i class="fas fa-text-height"></i>
3133			</a>
3134
3135			<i class="fas fa-search mr-1"></i>
3136			<input name="search" class="mv_search_box rounded pl-2 text-gray-800 w-32 opacity-50" type="text" placeholder="Search..." value="">
3137			<input type="submit" value="search" class="hidden mv_search_button rounded bg-gray-800 text-white opacity-50 pl-1 pr-1">
3138		</form>
3139
3140
3141
3142	</div>
3143
3144			<div class="flex text-center mt-4">
3145			<div class="flex-none w-full pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold">
3146				Menu
3147			</div>
3148		</div>
3149
3150		<ul class="w-full font-semibold">
3151							<li class="w-full border-b">
3152					<a href="/home" class="flex p-4">
3153						<span class="flex-none w-11/12 my-auto">
3154							Home						</span>
3155						<span class="flex-none w-1/12 my-auto text-right">
3156							<i class="fas fa-angle-right"></i>
3157						</span>
3158					</a>
3159				</li>
3160							<li class="w-full border-b">
3161					<a href="/about" class="flex p-4">
3162						<span class="flex-none w-11/12 my-auto">
3163							About						</span>
3164						<span class="flex-none w-1/12 my-auto text-right">
3165							<i class="fas fa-angle-right"></i>
3166						</span>
3167					</a>
3168				</li>
3169							<li class="w-full border-b">
3170					<a href="/services" class="flex p-4">
3171						<span class="flex-none w-11/12 my-auto">
3172							Services						</span>
3173						<span class="flex-none w-1/12 my-auto text-right">
3174							<i class="fas fa-angle-right"></i>
3175						</span>
3176					</a>
3177				</li>
3178							<li class="w-full border-b">
3179					<a href="/contact" class="flex p-4">
3180						<span class="flex-none w-11/12 my-auto">
3181							Contact						</span>
3182						<span class="flex-none w-1/12 my-auto text-right">
3183							<i class="fas fa-angle-right"></i>
3184						</span>
3185					</a>
3186				</li>
3187							<li class="w-full border-b">
3188					<a href="/blog" class="flex p-4">
3189						<span class="flex-none w-11/12 my-auto">
3190							Blog						</span>
3191						<span class="flex-none w-1/12 my-auto text-right">
3192							<i class="fas fa-angle-right"></i>
3193						</span>
3194					</a>
3195				</li>
3196					</ul>
3197	
3198	<div class="flex text-center">
3199		<a id="mv_main_nav_my_link" class="flex-none w-1/2 pt-4 pb-4 border-b border-b" href="javascript:void(0)" onclick="switchMainNav('my')">
3200			My Services		</a>
3201		<a id="mv_main_nav_available_link" class="flex-none w-1/2 pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold" href="javascript:void(0)" onclick="switchMainNav('available')">
3202			Available Services		</a>
3203	</div>
3204
3205
3206	<ul id="mv_main_nav_available_content" class="w-full font-semibold ">
3207					<li class="w-full border-b">
3208				<a href="/products/courses/view/1193365" class="flex p-4">
3209					<span class="flex-none w-11/12 my-auto">
3210						maddatu Ongoing Support					</span>
3211					<span class="flex-none w-1/12 my-auto text-right">
3212						<i class="fas fa-angle-right"></i>
3213					</span>
3214				</a>
3215			</li>
3216			</ul>
3217
3218	<ul id="mv_main_nav_my_content" class="w-full font-semibold hidden">
3219					<li class="w-full border-b">
3220				<a href="/login/?goto=/" class="flex p-4">
3221					Sign In to see your services				</a>
3222			</li>
3223			</ul>
3224
3225
3226	
3227</div>
3228
3229
3230
3231
3232<div id="mv_login" class="fixed right-0 top-0 w-full h-full bg-white text-gray-800 shadow-lg z-20 lg:w-2/6 overflow-scroll" style="right:-100%">
3233    <a href="javascript:toggleLogin()" class="mv_close_button">
3234        <i class="fas fa-times"></i>
3235    </a>
3236
3237    <div class="w-full bg-gray-200 p-4 text-center">
3238        <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md">
3239            <i class="fas fa-sign-in-alt text-white text-lg"></i>
3240        </div>
3241
3242        <div class="w-full mt-2 font-semibold">
3243            Sign In        </div>
3244    </div>
3245
3246            <div id="login_before" class="w-full p-4 pb-0 text-sm">
3247
3248            <h3 class="w-full  font-semibold">Sign In Details</h3>
3249
3250            <div class="flex flex-wrap mt-2">
3251                <input class="flex-none w-full border js_clean_email p-2 rounded" type="text" id="loginform_email" name="email" placeholder="Email" autocomplete="off" value="">
3252            </div>
3253            <div class="flex flex-wrap mt-2">
3254                <input class="flex-none w-full border p-2 rounded" type="password" id="loginform_password" name="email" placeholder="Password" autocomplete="off" value="">
3255            </div>
3256
3257            <div class="w-full relative text-red-700 font-bold hidden" id="loginform_error">
3258            </div>
3259
3260            <div class="w-full relative">
3261                <a href="javascript:void(0)" onclick="submitLoginForm()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4">
3262                    Sign In                </a>
3263            </div>
3264
3265        </div>
3266
3267        <div class="w-full flex p-4 pt-0 text-sm italic mt-4">
3268            <div class="flex-none w-1/2">
3269                            </div>
3270            <div class="flex-none w-1/2 text-right">
3271                <a class="" href="javascript:void(0)" onclick="toggleLoginForgot()">forgot password?</a>
3272            </div>
3273        </div>
3274    
3275    <div id="login_forgot" class="w-full p-4 pb-0 text-sm hidden">
3276
3277        <h3 class="w-full  font-semibold">Forgot Password?</h3>
3278        <p class="font-light">Enter your email address and we will send you a link to reset your password.</p>
3279
3280        <div class="flex flex-wrap mt-2">
3281            <input class="flex-none w-full border js_clean_email p-2 rounded" type="text" id="loginforgot_email" name="email" placeholder="Email" autocomplete="off" value="">
3282        </div>
3283
3284        <div class="w-full relative text-red-700 font-bold hidden" id="loginforgot_error">
3285        </div>
3286
3287        <div class="w-full relative">
3288            <a href="javascript:void(0)" id="login_forgot_button" onclick="submitLoginForgot()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4">
3289                Reset Password
3290            </a>
3291        </div>
3292
3293    </div>
3294
3295    <div class="loading"></div>
3296</div>
3297
3298
3299<div id="mv_reset" class="fixed right-0 top-0 w-full h-full bg-white text-gray-800 shadow-lg z-20 lg:w-2/6 overflow-scroll" style="right:-100%">
3300    <a href="javascript:toggleForgot()" class="mv_close_button">
3301        <i class="fas fa-times"></i>
3302    </a>
3303
3304    <div class="w-full bg-gray-200 p-4 text-center">
3305        <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md">
3306            <i class="fas fa-question text-white text-lg"></i>
3307        </div>
3308
3309        <div class="w-full mt-2 font-semibold">
3310            Forgot Password
3311        </div>
3312    </div>
3313
3314    <div id="reset_before" class="w-full p-4 pb-0 text-sm hidden">
3315
3316        <h3 class="w-full  font-semibold">Create New Password for </h3>
3317
3318        <div class="flex flex-wrap mt-2">
3319            <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password" name="password" placeholder="Password" autocomplete="off" value="">
3320        </div>
3321        <div class="flex flex-wrap mt-2">
3322            <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password2" name="password2" placeholder="Re-Type Password" autocomplete="off" value="">
3323        </div>
3324
3325        <div class="w-full relative">
3326            <a href="javascript:void(0)" onclick="submitResetForm()" class="mv_custom_button mt-4 block text-center w-full bg-green-600 border-2 border-green-600 text-white rounded-lg pt-2 pb-2 pl-4 pr-4">
3327                Reset Password
3328            </a>
3329        </div>
3330    </div>
3331
3332    <div class="w-full p-4 relative text-red-700 font-bold hidden" id="reset_error"></div>
3333
3334
3335    <div class="loading"></div>
3336</div>
3337
3338<script>
3339    function submitLoginForm() {
3340        var email = $('#loginform_email').val();
3341        var password = $('#loginform_password').val();
3342
3343                $('.loading').show();
3344        $.ajax({
3345                method: "POST",
3346                url: '/login/ajax_login',
3347                data: {
3348                    username: email,
3349                    password: password,
3350                    goto: '/products'
3351                }
3352            })
3353            .done(function(msg) {
3354                var response = JSON.parse(msg);
3355
3356                if (response.goto) {
3357                    window.location = response.goto;
3358                } else {
3359                    $('.loading').hide();
3360                    $('#loginform_error').show().html(response.message);
3361                }
3362            });
3363    }
3364
3365    function toggleLoginForgot() {
3366        if ($('#login_forgot').css('display') == 'none') {
3367            $('#login_forgot').show();
3368            $('#login_before').addClass('opacity-25');
3369        } else {
3370            $('#login_forgot').hide();
3371            $('#login_before').removeClass('opacity-25');
3372        }
3373    }
3374
3375    function submitLoginForgot() {
3376        var email = $('#loginforgot_email').val();
3377
3378        $('.loading').show();
3379        $.ajax({
3380                method: "POST",
3381                url: '/login/ajax_forgot',
3382                data: {
3383                    username: email,
3384                }
3385            })
3386            .done(function(msg) {
3387                var response = JSON.parse(msg);
3388
3389                $('.loading').hide();
3390                if (response.status == 'success') {
3391                    $('#loginforgot_error').removeClass('text-red-700').addClass('text-green-700');
3392                    $('#login_forgot_button').hide();
3393                }
3394                $('#loginforgot_error').show().html(response.message);
3395            });
3396
3397    }
3398
3399    function submitResetForm() {
3400        var password = $('#resetform_password').val();
3401        var password2 = $('#resetform_password2').val();
3402
3403        if (password != password2) {
3404            $('#reset_error').show().html('Passwords Don\'t Match!');
3405            return false;
3406        }
3407        if (password == '') {
3408            $('#reset_error').show().html('Password can\'t be blank!');
3409            return false;
3410        }
3411
3412        $('.loading').show();
3413
3414        $.ajax({
3415                method: "POST",
3416                url: '/login/ajax_do_reset',
3417                data: {
3418                    user: '',
3419                    password: password,
3420                    hash: ''
3421                }
3422            })
3423            .done(function(msg) {
3424                var response = JSON.parse(msg);
3425
3426                $('.loading').hide();
3427
3428                $('#reset_before').hide();
3429                if (response.status == 'success') {
3430                    $('#reset_error').removeClass('text-red-700').addClass('text-green-700');
3431                }
3432                $('#reset_error').show().html(response.message);
3433            });
3434    }
3435
3436    $(".js_clean_email").keyup(function() {
3437        $(this).val(cleanEmail($(this).val()));
3438    });
3439</script>
3439
3440
3441
3442
3443
3444<div id="mv_cover" class="hidden fixed left-0 top-0 w-full h-full bg-black opacity-75 z-10">&nbsp;</div>
3445
3446<script src="/fe/js/app.js?ver=2.43"></script>
vendor: 1 bytes, line 3446
3446
3447<script src="/fe/js/sweetalert2.all.min.js?ver=2.43"></script>
vendor: 1 bytes, line 3447
3447
3448<script>
3449    // global variables
3450    const confetti = document.getElementById('confetti');
3451    const confettiCtx = confetti.getContext('2d');
3452    let container, confettiElements = [];
3453
3454    // helper
3455    rand = (min, max) => Math.random() * (max - min) + min;
3456
3457    // params to play with
3458    const confettiParams = {
3459        // number of confetti per "explosion"
3460        number: 200,
3461        // min and max size for each rectangle
3462        size: {
3463            x: [5, 20],
3464            y: [10, 18]
3465        },
3466        // power of explosion
3467        initSpeed: 50,
3468        // defines how fast particles go down after blast-off
3469        gravity: 0.65,
3470        // how wide is explosion
3471        drag: 0.08,
3472        // how slow particles are falling
3473        terminalVelocity: 20,
3474        // how fast particles are rotating around themselves
3475        flipSpeed: 0.017,
3476    };
3477    const colors = [{
3478            front: '#FFFFFF',
3479            back: '#FFFFFF'
3480        },
3481        {
3482            front: '#0F3D32',
3483            back: '#0F3D32'
3484        },
3485        {
3486            front: '#FFFFFF',
3487            back: '#FFFFFF'
3488        },
3489        {
3490            front: '#0F3D32',
3491            back: '#0F3D32'
3492        },
3493        {
3494            front: '#F51679',
3495            back: '#F51679'
3496        },
3497        {
3498            front: '#FFFFFF',
3499            back: '#FFFFFF'
3500        },
3501    ];
3502
3503    // -----------------------------------------------------------
3504
3505    setupCanvas();
3506    /*
3507    addConfetti({
3508        clientX: container.w * 0.5,
3509        clientY: container.h * 0.5
3510    });
3511    */
3512    updateConfetti();
3513
3514    //window.addEventListener('click', addConfetti);
3515    window.addEventListener('resize', () => {
3516        setupCanvas();
3517        hideConfetti();
3518    });
3519
3520    // -----------------------------------------------------------
3521
3522    // Confetti constructor
3523    function Conf() {
3524        this.randomModifier = rand(-1, 1);
3525        this.colorPair = colors[Math.floor(rand(0, colors.length))];
3526        this.dimensions = {
3527            x: rand(confettiParams.size.x[0], confettiParams.size.x[1]),
3528            y: rand(confettiParams.size.y[0], confettiParams.size.y[1]),
3529        };
3530        this.position = {
3531            x: clickPosition[0],
3532            y: clickPosition[1]
3533        };
3534        this.rotation = rand(0, 2 * Math.PI);
3535        this.scale = {
3536            x: 1,
3537            y: 1
3538        };
3539        this.velocity = {
3540            x: rand(-confettiParams.initSpeed, confettiParams.initSpeed) * 0.4,
3541            y: rand(-confettiParams.initSpeed, confettiParams.initSpeed)
3542        };
3543        this.flipSpeed = rand(0.2, 1.5) * confettiParams.flipSpeed;
3544
3545        if (this.position.y <= container.h) {
3546            this.velocity.y = -Math.abs(this.velocity.y);
3547        }
3548
3549        this.terminalVelocity = rand(1, 1.5) * confettiParams.terminalVelocity;
3550
3551        this.update = function() {
3552            this.velocity.x *= 0.98;
3553            this.position.x += this.velocity.x;
3554
3555            this.velocity.y += (this.randomModifier * confettiParams.drag);
3556            this.velocity.y += confettiParams.gravity;
3557            this.velocity.y = Math.min(this.velocity.y, this.terminalVelocity);
3558            this.position.y += this.velocity.y;
3559
3560            this.scale.y = Math.cos((this.position.y + this.randomModifier) * this.flipSpeed);
3561            this.color = this.scale.y > 0 ? this.colorPair.front : this.colorPair.back;
3562        }
3563    }
3564
3565    function updateConfetti() {
3566        confettiCtx.clearRect(0, 0, container.w, container.h);
3567
3568        confettiElements.forEach((c) => {
3569            c.update();
3570            confettiCtx.translate(c.position.x, c.position.y);
3571            confettiCtx.rotate(c.rotation);
3572            const width = (c.dimensions.x * c.scale.x);
3573            const height = (c.dimensions.y * c.scale.y);
3574            confettiCtx.fillStyle = c.color;
3575            confettiCtx.fillRect(-0.5 * width, -0.5 * height, width, height);
3576            confettiCtx.setTransform(1, 0, 0, 1, 0, 0)
3577        });
3578
3579        confettiElements.forEach((c, idx) => {
3580            if (c.position.y > container.h ||
3581                c.position.x < -0.5 * container.x ||
3582                c.position.x > 1.5 * container.x) {
3583                confettiElements.splice(idx, 1)
3584            }
3585        });
3586        window.requestAnimationFrame(updateConfetti);
3587    }
3588
3589    function setupCanvas() {
3590        container = {
3591            w: window.innerWidth,
3592            h: window.innerHeight
3593        };
3594        confetti.width = container.w;
3595        confetti.height = container.h;
3596
3597        //console.log(container);
3598    }
3599
3600    function addConfetti(e) {
3601        //var centerX = window.innerWidth / 2;
3602        //var centerY = window.innerHeight / 2;
3603
3604        var centerX = window.innerWidth;
3605        var centerY = window.innerHeight;
3606
3607        //clickPosition = [ e.clientX, e.clientY ];
3608        clickPosition = [centerX, centerY];
3609        for (let i = 0; i < confettiParams.number; i++) {
3610            confettiElements.push(new Conf())
3611        }
3612    }
3613
3614    function hideConfetti() {
3615        confettiElements = [];
3616        window.cancelAnimationFrame(updateConfetti)
3617    }
3618</script>
3618
3619
3620
3621</body>
3622
3623</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.