PageSourceSearch

https://www.maddatu.com/about

html maddatu.com collected 2026-10-09 22:40:28 UTC 90,413 bytes, 3,399 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>About</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/about" />
36    <meta property="og:type" content="product" />
37    <meta property="og:title" content="About" />
38    <meta property="og:description" content="
39
40
41
42Looking for an operational partner who gets the work done? I help business owners execute their ideas.
43
44
45By Chantelle Venter Founder &amp; Operational ..." />
46    <meta name="description" content="
47
48
49
50Looking for an operational partner who gets the work done? I help business owners execute their ideas.
51
52
53By Chantelle Venter Founder &amp; Operational ..." />
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_14179" 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 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<style>
1465    /*
1466  MADDATU HOMEPAGE CONTENT STYLES
1467  Page-content CSS only.
1468
1469  IMPORTANT:
1470  - Existing Maddatu HTML classes are preserved.
1471  - MemberVault header and footer are intentionally NOT styled here.
1472  - No global html/body/header/footer rules are used so MemberVault's site chrome remains unchanged.
1473  - Quicksand is used only inside #main-content.
1474  - Colour choices prioritise WCAG 2.2 AA and AAA where practical.
1475*/
1476
1477@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
1478
1479#main-content {
1480  --color-primary: #0f3d32;
1481  --color-primary-dark: #07241E;
1482  --color-accent: #f51679;
1483  --color-accent-accessible: #f51679;
1484  --color-bg-cream: #faf7f4;
1485  --color-bg-white: #FFFFFF;
1486  --color-text-dark: #333333;
1487  --color-text-light: #faf7f4;
1488  --color-border: #9E9E9E;
1489  --color-border-light: #E5E5EE;
1490  --color-focus-dark: #07241E;
1491  --color-focus-light: #FFFFFF;
1492  --font-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
1493
1494  font-family: var(--font-primary);
1495  font-size: 100%;
1496  line-height: 1.625;
1497  color: var(--color-text-dark);
1498  background: var(--color-bg-white);
1499  margin: 0 !important;
1500  padding: 0 !important;
1501}
1502
1503#main-content,
1504#main-content *,
1505#main-content *::before,
1506#main-content *::after {
1507  box-sizing: border-box;
1508}
1509
1510#main-content img {
1511  max-width: 100%;
1512}
1513
1514#main-content .image-placeholder {
1515  display: flex;
1516  align-items: center;
1517  justify-content: center;
1518  width: 100%;
1519  min-height: 180px;
1520  padding: 20px;
1521  background-color: var(--color-bg-cream);
1522  color: var(--color-primary);
1523  border: 2px solid var(--color-accent);
1524  font-size: 1rem;
1525  font-weight: 700;
1526  text-align: center;
1527}
1528
1529#main-content a {
1530  color: var(--color-accent-accessible);
1531}
1532
1533#main-content :focus-visible,
1534.skip-link:focus-visible {
1535  outline: 3px solid var(--color-focus-light);
1536  outline-offset: 4px;
1537  box-shadow: 0 0 0 6px var(--color-focus-dark);
1538}
1539
1540.skip-link {
1541  position: absolute;
1542  left: -9999px;
1543  top: 8px;
1544  z-index: 10000;
1545  width: auto;
1546  height: auto;
1547  padding: 12px 24px;
1548  background: var(--color-accent-accessible);
1549  color: #FFFFFF !important;
1550  border-radius: 6px;
1551  font-family: var(--font-primary);
1552  font-size: 1rem;
1553  font-weight: 700;
1554  text-decoration: none;
1555}
1556
1557.skip-link:focus-visible {
1558  left: 8px;
1559  top: 8px;
1560  outline-color: #FFFFFF;
1561  box-shadow: 0 0 0 6px var(--color-primary-dark);
1562}
1563
1564/* Layout */
1565#main-content .container {
1566  width: 100%;
1567  max-width: 1200px;
1568  margin: 0 auto;
1569  padding: 0 24px;
1570}
1571
1572#main-content .section-padding {
1573  padding: 90px 0;
1574}
1575
1576#main-content .bg-cream {
1577  background-color: var(--color-bg-cream);
1578}
1579
1580#main-content .bg-white {
1581  background-color: var(--color-bg-white);
1582}
1583
1584#main-content .text-center {
1585  text-align: center;
1586}
1587
1588#main-content .max-width-800 {
1589  max-width: 800px;
1590  margin-right: auto;
1591  margin-left: auto;
1592}
1593
1594/* Typography */
1595#main-content h1,
1596#main-content h2,
1597#main-content h3,
1598#main-content h4 {
1599  font-family: var(--font-primary);
1600  color: var(--color-primary);
1601  line-height: 1.2;
1602  margin-top: 0;
1603}
1604
1605#main-content h1 {
1606  font-size: 3rem;
1607  letter-spacing: -0.02em;
1608  margin-bottom: 24px;
1609  font-weight: 700;
1610}
1611
1612#main-content h2 {
1613  font-size: 2.25rem;
1614  margin-bottom: 24px;
1615  font-weight: 700;
1616}
1617
1618#main-content h1,
1619#main-content h3 {
1620  color: var(--color-primary);
1621}
1622
1623#main-content h2,
1624#main-content h4 {
1625  color: var(--color-accent);
1626}
1627
1628#main-content h3 {
1629  font-size: 1.625rem;
1630  margin-bottom: 16px;
1631  font-weight: 600;
1632}
1633
1634#main-content h4 {
1635  font-size: 1.25rem;
1636  margin-bottom: 12px;
1637  font-weight: 600;
1638}
1639
1640#main-content p {
1641  margin-top: 0;
1642  margin-bottom: 24px;
1643}
1644
1645#main-content em {
1646  font-style: italic;
1647}
1648
1649#main-content p.lead {
1650  font-size: 1.25rem;
1651  font-weight: 500;
1652  line-height: 1.6;
1653}
1654
1655/* Buttons */
1656#main-content .btn {
1657  display: inline-flex;
1658  align-items: center;
1659  justify-content: center;
1660  min-height: 48px;
1661  font-family: var(--font-primary);
1662  font-size: 1rem;
1663  line-height: 1.2;
1664  font-weight: 700;
1665  text-decoration: none;
1666  padding: 14px 28px;
1667  border-radius: 6px;
1668  border: 2px solid transparent;
1669  cursor: pointer;
1670  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
1671}
1672
1673#main-content .btn-primary {
1674  background-color: var(--color-accent-accessible);
1675  color: #FFFFFF !important;
1676  border-color: var(--color-accent-accessible);
1677  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
1678}
1679
1680#main-content .btn-primary:hover {
1681  background-color: var(--color-primary-dark);
1682  color: #FFFFFF !important;
1683  border-color: var(--color-primary-dark);
1684}
1685
1686#main-content .btn-secondary {
1687  background-color: var(--color-primary);
1688  color: #FFFFFF !important;
1689  border-color: var(--color-primary);
1690  box-shadow: 0 4px 8px rgba(15, 61, 50, 0.15);
1691}
1692
1693#main-content .btn-secondary:hover {
1694  background-color: var(--color-primary-dark);
1695  color: #FFFFFF !important;
1696  border-color: var(--color-primary-dark);
1697}
1698
1699#main-content .btn-outline {
1700  background-color: #FFFFFF;
1701  color: var(--color-accent-accessible) !important;
1702  border-color: var(--color-accent-accessible);
1703}
1704
1705#main-content .btn-outline:hover {
1706  background-color: var(--color-accent-accessible);
1707  color: #FFFFFF !important;
1708  border-color: var(--color-accent-accessible);
1709}
1710
1711#main-content .btn-full {
1712  width: 100%;
1713}
1714
1715/* Hero */
1716#main-content .hero-section {
1717  background-color: var(--color-primary-dark);
1718  color: #FFFFFF;
1719  padding: 80px 0;
1720  overflow: hidden;
1721  margin-top: 0 !important;
1722}
1723
1724#main-content .hero-section h1 {
1725  color: #ffffff;
1726}
1727
1728#main-content .hero-grid {
1729  display: grid;
1730  grid-template-columns: 1.2fr 0.8fr;
1731  gap: 60px;
1732  align-items: center;
1733}
1734
1735#main-content .hero-text-block {
1736  text-align: left;
1737}
1738
1739#main-content .byline-block {
1740  display: flex;
1741  align-items: center;
1742  gap: 16px;
1743  margin-bottom: 24px;
1744  background-color: rgba(250, 247, 244, 0.06);
1745  padding: 12px 18px;
1746  border-radius: 8px;
1747  border: 1px solid rgba(250, 247, 244, 0.45);
1748}
1749
1750#main-content .byline-portrait-container {
1751  width: 50px;
1752  height: 50px;
1753  border-radius: 50%;
1754  overflow: hidden;
1755  border: 2px solid var(--color-accent);
1756  flex-shrink: 0;
1757}
1758
1759#main-content .byline-portrait {
1760  display: block;
1761  width: 100%;
1762  height: 100%;
1763  min-height: 0;
1764  padding: 0;
1765  border: 0;
1766  border-radius: 50%;
1767  object-fit: cover;
1768}
1769
1770#main-content .byline-text {
1771  display: flex;
1772  flex-direction: column;
1773  font-size: 0.95rem;
1774}
1775
1776#main-content .byline-author,
1777#main-content .byline-desc {
1778  color: #FFFFFF;
1779}
1780
1781#main-content .byline-link {
1782  color: #FFB3CB !important;
1783  text-decoration: underline;
1784  text-decoration-thickness: 0.12em;
1785  text-underline-offset: 0.15em;
1786  font-weight: 700;
1787}
1788
1789#main-content .byline-link:hover {
1790  color: #FFFFFF !important;
1791}
1792
1793#main-content .hero-subheadline {
1794  font-size: 1.4rem;
1795  font-weight: 700;
1796  color: #FFB3CB;
1797  margin-bottom: 24px;
1798  line-height: 1.55;
1799}
1800
1801#main-content .answer-block {
1802  background-color: rgba(250, 247, 244, 0.08);
1803  border-left: 4px solid var(--color-accent);
1804  padding: 16px 20px;
1805  border-radius: 0 8px 8px 0;
1806  margin-bottom: 30px;
1807}
1808
1809#main-content .answer-block p {
1810  margin: 0;
1811  font-size: 1.05rem;
1812  line-height: 1.6;
1813  color: #FFFFFF;
1814}
1815
1816#main-content .hero-image-block {
1817  display: flex;
1818  justify-content: center;
1819  align-items: center;
1820}
1821
1822#main-content .hero-large-img {
1823  display: block;
1824  width: 100%;
1825  max-width: 420px;
1826  height: auto;
1827  border-radius: 12px;
1828  border: 4px solid var(--color-accent);
1829  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
1830}
1831
1832/* Problem */
1833#main-content .problem-grid {
1834  display: grid;
1835  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1836  gap: 20px;
1837  margin: 40px 0;
1838}
1839
1840#main-content .problem-card {
1841  background-color: var(--color-bg-white);
1842  border-left: 4px solid var(--color-accent);
1843  border-radius: 4px;
1844  padding: 24px;
1845  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
1846  display: flex;
1847  align-items: flex-start;
1848  gap: 16px;
1849  text-align: left;
1850}
1851
1852#main-content .problem-bullet {
1853  color: var(--color-accent-accessible);
1854  font-size: 1.15rem;
1855  flex-shrink: 0;
1856  font-weight: 700;
1857}
1858
1859#main-content .problem-text {
1860  margin: 0;
1861  font-weight: 500;
1862  font-size: 1.05rem;
1863}
1864
1865#main-content .problem-outro {
1866  background-color: rgba(15, 61, 50, 0.04);
1867  border: 1px dashed var(--color-primary);
1868  border-radius: 8px;
1869  padding: 30px;
1870  max-width: 700px;
1871  margin: 40px auto 0 auto;
1872}
1873
1874#main-content .problem-outro p {
1875  font-size: 1.15rem;
1876  font-weight: 600;
1877  color: var(--color-primary-dark);
1878  margin-bottom: 20px;
1879}
1880
1881/* Services */
1882#main-content .services-subheading {
1883  text-align: center;
1884  margin-top: 50px;
1885  margin-bottom: 35px;
1886}
1887
1888#main-content .services-grid {
1889  display: grid;
1890  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
1891  gap: 24px;
1892  margin-bottom: 40px;
1893}
1894
1895#main-content .service-card {
1896  background-color: var(--color-bg-cream);
1897  border: 1px solid var(--color-border);
1898  border-radius: 8px;
1899  padding: 30px;
1900  display: flex;
1901  flex-direction: column;
1902  transition: transform 0.2s ease, box-shadow 0.2s ease;
1903}
1904
1905#main-content .service-card:hover {
1906  transform: translateY(-4px);
1907  box-shadow: 0 8px 16px rgba(15, 61, 50, 0.08);
1908}
1909
1910#main-content .service-image-container {
1911  width: 100%;
1912  height: auto;
1913  border-radius: 6px;
1914  overflow: hidden;
1915  border: 1px solid var(--color-border);
1916  margin-bottom: 20px;
1917}
1918
1919#main-content .service-card-img {
1920  width: 100%;
1921  height: auto;
1922  display: block;
1923}
1924
1925#main-content .service-title-row {
1926  display: flex;
1927  align-items: center;
1928  gap: 12px;
1929  margin-bottom: 12px;
1930}
1931
1932#main-content .service-card-icon {
1933  font-size: 1.4rem;
1934  color: var(--color-primary);
1935}
1936
1937#main-content .service-card h4 {
1938  margin: 0;
1939  font-size: 1.25rem;
1940}
1941
1942#main-content .service-card p {
1943  margin: 0;
1944  font-size: 1rem;
1945  line-height: 1.6;
1946}
1947
1948#main-content .services-notice {
1949  text-align: center;
1950  font-style: italic;
1951  font-size: 1rem;
1952  color: var(--color-text-dark);
1953  max-width: 750px;
1954  margin: 40px auto 0 auto;
1955}
1956
1957/* Pricing */
1958#main-content .work-grid {
1959  display: grid;
1960  grid-template-columns: 1fr 1fr;
1961  gap: 32px;
1962  margin-top: 50px;
1963  align-items: stretch;
1964}
1965
1966#main-content .work-card {
1967  background-color: var(--color-bg-white);
1968  border: 1px solid var(--color-border);
1969  border-radius: 12px;
1970  padding: 40px;
1971  display: flex;
1972  flex-direction: column;
1973  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
1974}
1975
1976#main-content .work-card-banner {
1977  width: 100%;
1978  border-radius: 8px;
1979  overflow: hidden;
1980  border: 1px solid var(--color-border);
1981  margin-bottom: 24px;
1982}
1983
1984#main-content .work-card-banner-img {
1985  width: 100%;
1986  height: auto;
1987  display: block;
1988}
1989
1990#main-content .work-card h3 {
1991  font-size: 1.85rem;
1992  border-bottom: 2px solid var(--color-border);
1993  padding-bottom: 15px;
1994  margin-bottom: 20px;
1995}
1996
1997#main-content .work-card-desc {
1998  font-size: 1.05rem;
1999  margin-bottom: 30px;
2000}
2001
2002#main-content .pricing-tiers-list {
2003  list-style: none;
2004  padding: 0;
2005  margin: 0 0 30px 0;
2006}
2007
2008#main-content .pricing-tier-item {
2009  background-color: var(--color-bg-cream);
2010  border: 1px solid var(--color-border);
2011  border-radius: 8px;
2012  padding: 20px;
2013  margin-bottom: 16px;
2014}
2015
2016#main-content .pricing-tier-header {
2017  display: flex;
2018  justify-content: space-between;
2019  align-items: baseline;
2020  flex-wrap: wrap;
2021  gap: 8px;
2022  margin-bottom: 6px;
2023}
2024
2025#main-content .pricing-tier-name {
2026  font-weight: 700;
2027  font-size: 1.15rem;
2028  color: var(--color-primary-dark);
2029}
2030
2031#main-content .pricing-tier-hours {
2032  font-size: 0.9rem;
2033  font-weight: 700;
2034  background-color: var(--color-primary);
2035  color: #FFFFFF;
2036  padding: 4px 10px;
2037  border-radius: 4px;
2038}
2039
2040#main-content .pricing-tier-cost {
2041  font-weight: 700;
2042  font-size: 1.3rem;
2043  color: var(--color-text-dark);
2044}
2045
2046#main-content .pricing-tier-sub {
2047  font-size: 0.95rem;
2048  color: #404740;
2049  font-weight: 400;
2050}
2051
2052#main-content .pricing-tier-desc {
2053  margin: 8px 0 0 0;
2054  font-size: 1rem;
2055  line-height: 1.5;
2056}
2057
2058#main-content .projects-list-title {
2059  color: var(--color-primary-dark);
2060  margin-bottom: 15px;
2061}
2062
2063#main-content .projects-list {
2064  list-style: none;
2065  padding: 0;
2066  margin: 0 0 30px 0;
2067}
2068
2069#main-content .projects-list li {
2070  padding: 10px 0;
2071  border-bottom: 1px solid var(--color-border-light);
2072  display: flex;
2073  align-items: center;
2074  gap: 12px;
2075  font-size: 1rem;
2076}
2077
2078#main-content .projects-list li:last-child {
2079  border-bottom: none;
2080}
2081
2082#main-content .project-list-bullet {
2083  color: var(--color-accent-accessible);
2084  font-weight: 700;
2085}
2086
2087#main-content .project-minimum-tier {
2088  margin-top: auto;
2089  margin-bottom: 30px;
2090}
2091
2092#main-content .work-card .btn {
2093  margin-top: auto;
2094}
2095
2096/* Why / comparison table */
2097#main-content .why-grid {
2098  display: grid;
2099  grid-template-columns: 1fr 1fr;
2100  gap: 24px;
2101  margin-top: 40px;
2102  margin-bottom: 60px;
2103}
2104
2105#main-content .why-item {
2106  background-color: var(--color-bg-cream);
2107  border: 1px solid var(--color-border);
2108  border-radius: 8px;
2109  padding: 24px;
2110  display: flex;
2111  align-items: flex-start;
2112  gap: 16px;
2113}
2114
2115#main-content .why-icon {
2116  background-color: var(--color-accent);
2117  color: #FFFFFF;
2118  width: 32px;
2119  height: 32px;
2120  border-radius: 50%;
2121  display: flex;
2122  align-items: center;
2123  justify-content: center;
2124  flex-shrink: 0;
2125  font-size: 0.9rem;
2126}
2127
2128#main-content .why-item p {
2129  margin: 0;
2130  font-size: 1.05rem;
2131  line-height: 1.5;
2132}
2133
2134#main-content .table-container {
2135  width: 100%;
2136  margin-bottom: 0;
2137  border: 1px solid var(--color-border);
2138  border-radius: 8px;
2139  overflow: hidden;
2140}
2141
2142#main-content .table-title {
2143  background-color: var(--color-primary-dark);
2144  color: #FFFFFF;
2145  margin: 0;
2146  padding: 20px 24px;
2147  font-size: 1.35rem;
2148  text-align: left;
2149}
2150
2151#main-content .comparison-table-wrapper {
2152  width: 100%;
2153  overflow-x: auto;
2154}
2155
2156#main-content .comparison-table {
2157  width: 100%;
2158  border-collapse: separate;
2159  border-spacing: 0;
2160  text-align: left;
2161  background-color: var(--color-bg-white);
2162  min-width: 600px;
2163}
2164
2165#main-content .comparison-table th,
2166#main-content .comparison-table td {
2167  padding: 16px 24px;
2168  border-bottom: 1px solid var(--color-border-light);
2169  font-size: 1rem;
2170  vertical-align: top;
2171}
2172
2173#main-content .comparison-table thead th {
2174  background-color: var(--color-primary);
2175  color: #FFFFFF;
2176  font-weight: 700;
2177}
2178
2179#main-content .comparison-table tbody th {
2180  font-weight: 600;
2181  color: var(--color-primary-dark);
2182}
2183
2184#main-content .comparison-table .highlight-column {
2185  background-color: rgba(245, 22, 121, 0.06);
2186  font-weight: 600;
2187  color: var(--color-primary-dark);
2188  border-left: 3px solid var(--color-accent);
2189  border-right: 3px solid var(--color-accent);
2190}
2191
2192#main-content .comparison-table thead .highlight-column {
2193  border-top: 3px solid var(--color-accent);
2194}
2195
2196#main-content .comparison-table tbody tr:last-child .highlight-column {
2197  border-bottom: 3px solid var(--color-accent);
2198}
2199
2200/* Testimonials */
2201#main-content .proof-block-container {
2202  border-top: 2px solid var(--color-border-light);
2203  padding-top: 30px;
2204}
2205
2206#main-content .proof-title {
2207  text-align: center;
2208  font-size: 1.65rem;
2209  margin-bottom: 30px;
2210}
2211
2212#main-content .testimonials-grid {
2213  display: grid;
2214  grid-template-columns: 1fr 1fr;
2215  gap: 32px;
2216}
2217
2218#main-content .testimonial-card {
2219  background-color: var(--color-bg-cream);
2220  border-top: 4px solid var(--color-primary);
2221  border-radius: 6px;
2222  padding: 35px;
2223  margin: 0;
2224  display: flex;
2225  flex-direction: column;
2226}
2227
2228#main-content .testimonial-card > img,
2229#main-content .testimonial-placeholder-img {
2230  display: block;
2231  width: 84px;
2232  height: 84px;
2233  min-width: 84px;
2234  min-height: 84px;
2235  padding: 0;
2236  border-radius: 50%;
2237  object-fit: cover;
2238  margin: 0 auto 20px auto;
2239  border: 2px solid var(--color-accent);
2240}
2241
2242#main-content .testimonial-quote {
2243  font-style: italic;
2244  font-size: 1.05rem;
2245  line-height: 1.65;
2246  margin-bottom: 20px;
2247}
2248
2249#main-content .testimonial-author {
2250  font-weight: 700;
2251  font-size: 1rem;
2252  color: var(--color-primary-dark);
2253  margin-top: auto;
2254  font-style: normal;
2255}
2256
2257/* FAQ */
2258#main-content .faq-list {
2259  max-width: 800px;
2260  margin: 40px auto 0 auto;
2261}
2262
2263#main-content .faq-item {
2264  background-color: var(--color-bg-white);
2265  border: 1px solid var(--color-border);
2266  border-radius: 6px;
2267  margin-bottom: 16px;
2268  overflow: hidden;
2269  transition: border-color 0.2s ease;
2270}
2271
2272#main-content .faq-item[open] {
2273  border-color: var(--color-primary);
2274}
2275
2276#main-content .faq-item summary {
2277  padding: 20px 24px;
2278  font-weight: 600;
2279  font-size: 1.1rem;
2280  color: var(--color-primary-dark);
2281  cursor: pointer;
2282  list-style: none;
2283  display: flex;
2284  justify-content: space-between;
2285  align-items: center;
2286  user-select: none;
2287}
2288
2289#main-content .faq-item summary::-webkit-details-marker {
2290  display: none;
2291}
2292
2293#main-content .faq-item summary::after {
2294  content: "+";
2295  font-size: 1.5rem;
2296  font-weight: 700;
2297  color: var(--color-primary);
2298  transition: transform 0.2s ease;
2299}
2300
2301#main-content .faq-item[open] summary::after {
2302  content: "−";
2303  transform: rotate(180deg);
2304}
2305
2306#main-content .faq-content {
2307  padding: 0 24px 20px 24px;
2308  border-top: 1px solid var(--color-border-light);
2309}
2310
2311#main-content .faq-content p {
2312  margin: 0;
2313  font-size: 1rem;
2314  line-height: 1.6;
2315}
2316
2317/* Contact */
2318#main-content .contact-grid {
2319  display: grid;
2320  grid-template-columns: 4fr 5fr;
2321  gap: 50px;
2322  margin-bottom: 50px;
2323}
2324
2325#main-content .contact-info {
2326  text-align: left;
2327}
2328
2329#main-content .contact-guide-box {
2330  background-color: var(--color-bg-cream);
2331  border: 1px solid var(--color-border);
2332  border-radius: 8px;
2333  padding: 30px;
2334  margin-top: 25px;
2335}
2336
2337#main-content .contact-guide-box h4 {
2338  margin-top: 0;
2339  font-size: 1.2rem;
2340  color: var(--color-primary-dark);
2341}
2342
2343#main-content .contact-checklist {
2344  list-style: none;
2345  padding: 0;
2346  margin: 0 0 20px 0;
2347}
2348
2349#main-content .contact-checklist li {
2350  position: relative;
2351  padding-left: 28px;
2352  margin-bottom: 12px;
2353  font-weight: 500;
2354  font-size: 1rem;
2355}
2356
2357#main-content .contact-checklist li::before {
2358  content: "✔";
2359  position: absolute;
2360  left: 0;
2361  top: 0;
2362  color: var(--color-accent-accessible);
2363  font-weight: 700;
2364}
2365
2366#main-content .contact-note {
2367  margin: 0;
2368  font-size: 1rem;
2369}
2370
2371#main-content .contact-form-container {
2372  background-color: var(--color-bg-cream);
2373  border: 1px solid var(--color-border);
2374  border-radius: 8px;
2375  padding: 40px;
2376  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
2377}
2378
2379#main-content .contact-form {
2380  width: 100%;
2381}
2382
2383#main-content .form-row {
2384  display: grid;
2385  grid-template-columns: 1fr 1fr;
2386  gap: 20px;
2387}
2388
2389#main-content .form-group {
2390  margin-bottom: 24px;
2391  text-align: left;
2392}
2393
2394#main-content .form-group label {
2395  display: block;
2396  font-weight: 600;
2397  font-size: 1rem;
2398  margin-bottom: 8px;
2399  color: var(--color-primary-dark);
2400}
2401
2402#main-content .form-group input[type="text"],
2403#main-content .form-group input[type="email"],
2404#main-content .form-group textarea {
2405  width: 100%;
2406  padding: 12px 16px;
2407  border: 2px solid var(--color-border);
2408  border-radius: 4px;
2409  font-family: var(--font-primary);
2410  font-size: 1rem;
2411  line-height: 1.5;
2412  color: var(--color-text-dark);
2413  background-color: var(--color-bg-white);
2414  transition: border-color 0.2s ease, box-shadow 0.2s ease;
2415}
2416
2417#main-content .form-group input[type="text"]:focus,
2418#main-content .form-group input[type="email"]:focus,
2419#main-content .form-group textarea:focus {
2420  border-color: var(--color-primary-dark);
2421  box-shadow: 0 0 0 3px rgba(7, 36, 30, 0.18);
2422  outline: 3px solid transparent;
2423}
2424
2425#main-content .form-group input::placeholder,
2426#main-content .form-group textarea::placeholder {
2427  color: #4A4A4A;
2428  opacity: 1;
2429}
2430
2431#main-content .form-group textarea {
2432  resize: vertical;
2433  min-height: 150px;
2434}
2435
2436/* Motion */
2437@media (prefers-reduced-motion: reduce) {
2438  #main-content *,
2439  #main-content *::before,
2440  #main-content *::after,
2441  .skip-link {
2442    animation-delay: -1ms !important;
2443    animation-duration: 1ms !important;
2444    animation-iteration-count: 1 !important;
2445    transition-duration: 0s !important;
2446    scroll-behavior: auto !important;
2447  }
2448}
2449
2450/* Responsive */
2451@media (max-width: 900px) {
2452  #main-content .hero-grid {
2453    grid-template-columns: 1fr;
2454    text-align: center;
2455    gap: 40px;
2456  }
2457
2458  #main-content .hero-text-block {
2459    text-align: center;
2460  }
2461
2462  #main-content .byline-block {
2463    justify-content: center;
2464    text-align: left;
2465  }
2466
2467  #main-content .hero-image-block {
2468    order: -1;
2469  }
2470
2471  #main-content .hero-large-img {
2472    max-width: 320px;
2473  }
2474
2475  #main-content .work-grid,
2476  #main-content .contact-grid {
2477    grid-template-columns: 1fr;
2478  }
2479
2480  #main-content .contact-grid {
2481    gap: 40px;
2482  }
2483}
2484
2485@media (max-width: 768px) {
2486  #main-content h1 {
2487    font-size: 2.25rem;
2488  }
2489
2490  #main-content h2 {
2491    font-size: 1.875rem;
2492  }
2493
2494  #main-content h3 {
2495    font-size: 1.4rem;
2496  }
2497
2498  #main-content p.lead {
2499    font-size: 1.15rem;
2500  }
2501
2502  #main-content .why-grid,
2503  #main-content .testimonials-grid {
2504    grid-template-columns: 1fr;
2505  }
2506}
2507
2508@media (max-width: 600px) {
2509  #main-content .container {
2510    padding: 0 20px;
2511  }
2512
2513  #main-content .section-padding {
2514    padding: 70px 0;
2515  }
2516
2517  #main-content .form-row {
2518    grid-template-columns: 1fr;
2519  }
2520
2521  #main-content .contact-form-container {
2522    padding: 28px 20px;
2523  }
2524
2525  #main-content .work-card {
2526    padding: 28px 20px;
2527  }
2528
2529  #main-content .hero-large-img {
2530    max-width: 280px;
2531  }
2532}
2533
2534/* Placeholder sizing */
2535#main-content .byline-portrait {
2536  display: block;
2537  width: 50px;
2538  height: 50px;
2539  min-height: 0;
2540  padding: 0;
2541  border: 0;
2542  border-radius: 50%;
2543  object-fit: cover;
2544}
2545
2546#main-content .hero-large-img {
2547  display: block;
2548  width: 100%;
2549  max-width: 420px;
2550  height: auto;
2551  border-radius: 12px;
2552}
2553
2554#main-content .work-card-banner-img {
2555  width: 100%;
2556  height: auto;
2557  display: block;
2558}
2559
2560#main-content .testimonial-placeholder-img {
2561  width: 84px;
2562  height: 84px;
2563  min-width: 84px;
2564  min-height: 84px;
2565  padding: 0;
2566  border-radius: 50%;
2567  margin: 0 auto 20px auto;
2568  font-size: 0.8rem;
2569}
2570
2571/* MemberVault paste cleanup */
2572.mv-block > p:empty,
2573.mv-block > div:empty {
2574  display: none !important;
2575  height: 0 !important;
2576  min-height: 0 !important;
2577  margin: 0 !important;
2578  padding: 0 !important;
2579  border: 0 !important;
2580}
2581
2582#main-content {
2583  margin-top: 0 !important;
2584  margin-bottom: 0 !important;
2585  padding-top: 0 !important;
2586}
2587
2588#main-content .why-icon {
2589  background-color: var(--color-primary);
2590  color: #FFFFFF;
2591}</style>
2592
2593<div class="border-b mv_breadcrumbs  hidden">
2594    <div class="max-w-screen-xl mx-auto p-4 lg:pl-10 lg:pr-10">
2595        <a href="/">
2596            <i class="fas fa-home"></i>
2597        </a>
2598        <i class="fas fa-caret-right ml-2 mr-2"></i>
2599        <a class="font-semibold" href="/pages/view/14179">
2600            About        </a>
2601    </div>
2602
2603</div>
2604
2605<div class="flex flex-wrap max-w-screen-xl mx-auto lg:flex-nowrap lg:pl-6 lg:pr-6">
2606
2607
2608    <div class="w-full flex-auto">
2609        
2610        <div class="pl-4 pr-4 mv_content lg:pl-2 lg:pr-2">
2611            <div class="w-full relative mv-block" style=""><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">
2612<?xml encoding="utf-8" ?><html><body><div id="main-content">
2613<section class="hero-section" aria-label="Introduction">
2614<div class="container hero-grid">
2615<div class="hero-text-block">
2616<h1>Looking for an operational partner who gets the work done? I help business owners execute their ideas.</h1>
2617<div class="byline-block">
2618<div class="byline-portrait-container"><img src="https://s3.membervaultcdn.com/websitefae/6a9802fb2b653_Chantelle.png?v=1788347132" alt="Chantelle Venter" class="byline-portrait"></div>
2619<div class="byline-text"><span class="byline-author">By <strong>Chantelle Venter</strong></span> <span class="byline-desc">Founder &amp; Operational Systems Partner | <a href="https://www.maddatu.com/services" class="byline-link">View services &rarr;</a></span></div>
2620</div>
2621<p class="hero-subheading">I am Chantelle, the person behind <strong><em>maddatu</em></strong>. I take care of the practical work that keeps your business moving.</p>
2622<div class="answer-block">
2623<p><strong><em>maddatu</em></strong> provides practical operational support for established small businesses. I handle the digital content, administration and day-to-day tasks that sit between your ideas and finished results&mdash;including website updates, course publishing, email campaigns, onboarding, and routine maintenance using your existing tools.</p>
2624</div>
2625<div class="hero-cta"><a href="https://www.maddatu.com/contact" class="btn btn-outline">Work with me</a></div>
2626</div>
2627<div class="hero-image-block"><img src="https://s3.membervaultcdn.com/websitefae/6a9802e18e778_MV%20-%20WF%20-%20Icons%20and%20photos%20(13).png?v=1788347106" alt="Chantelle Venter" class="hero-large-img"></div>
2628</div>
2629</section>
2630</div></body></html>
2631</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">
2632<?xml encoding="utf-8" ?><html><body><div id="main-content">
2633<section class="section-padding bg-cream" aria-labelledby="problem-heading">
2634<div class="container text-center">
2635<h2 id="problem-heading">Why do established business owners struggle to finish the jobs between an idea and a result?</h2>
2636<p class="lead">The difficulty isn't that these tasks are too complex. The problem is that they still take time, attention and follow-through that busy business owners simply do not have.</p>
2637<div class="problem-grid">
2638<div class="problem-card"><span class="problem-bullet" aria-hidden="true">&#10004;</span>
2639<p class="problem-text">Preparing and configuring email sequences</p>
2640</div>
2641<div class="problem-card"><span class="problem-bullet" aria-hidden="true">&#10004;</span>
2642<p class="problem-text">Organising online events and speaker assets</p>
2643</div>
2644<div class="problem-card"><span class="problem-bullet" aria-hidden="true">&#10004;</span>
2645<p class="problem-text">Onboarding a new client cohort</p>
2646</div>
2647<div class="problem-card"><span class="problem-bullet" aria-hidden="true">&#10004;</span>
2648<p class="problem-text">Taking care of a list of tasks that keeps growing</p>
2649</div>
2650<div class="problem-card"><span class="problem-bullet" aria-hidden="true">&#10004;</span>
2651<p class="problem-text">Publishing and formatting online courses</p>
2652</div>
2653<div class="problem-card"><span class="problem-bullet" aria-hidden="true">&#10004;</span>
2654<p class="problem-text">Updating website copy and text</p>
2655</div>
2656</div>
2657<div class="problem-outro">
2658<p>The common thread is not one particular platform or service. It is making sure the work gets done properly and on time.</p>
2659<a href="https://www.maddatu.com/contact" class="btn btn-secondary">That is where I come in</a></div>
2660</div>
2661</section>
2662</div></body></html>
2663</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">
2664<?xml encoding="utf-8" ?><html><body><div id="main-content">
2665<section class="section-padding bg-white" aria-labelledby="solution-
2665heading">
2666<div class="container text-center max-width-800">
2667<h2 id="solution-heading">How can we bridge the gap between your ideas and finished results?</h2>
2668<p class="lead">I work within your existing business, understand how you currently operate, and take responsibility for the practical work you hand over to me.</p>
2669<div class="why-grid" style="margin-bottom: 0;">
2670<div class="why-item">
2671<div class="why-icon" aria-hidden="true">1</div>
2672<p style="text-align: left;"><strong>I work best when things are varied.</strong> I am comfortable moving between different types of work and learning the tools a client already uses.</p>
2673</div>
2674<div class="why-item">
2675<div class="why-icon" aria-hidden="true">2</div>
2676<p style="text-align: left;"><strong>I do not expect every business to work the same way.</strong> I do not believe you need to rebuild your entire setup just to get support.</p>
2677</div>
2678</div>
2679</div>
2680</section>
2681</div></body></html>
2682</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">
2683<?xml encoding="utf-8" ?><html><body><div id="main-content">
2684<section class="section-padding bg-cream" aria-labelledby="comparison-heading">
2685<div class="container">
2686<div class="text-center max-width-800">
2687<h2 id="comparison-heading">How does <strong><em>maddatu</em></strong> operational support differ from a general virtual assistant?</h2>
2688<p class="lead">Many business owners hire a virtual assistant, but find themselves spending more time managing the person than getting tasks done. Here is the distinction:</p>
2689</div>
2690<div class="table-container">
2691<h3 class="table-title">Our Working Relationship &amp; Delivery Boundaries</h3>
2692<table class="comparison-table" aria-label="Comparison between General Virtual Assistant and maddatu Operational Partner">
2693<thead>
2694<tr>
2695<th scope="col">Operational Dimension</th>
2696<th scope="col">General Virtual Assistant</th>
2697<th scope="col" class="highlight-column"><strong><em>maddatu</em></strong> Operational Partner</th>
2698</tr>
2699</thead>
2700<tbody>
2701<tr>
2702<th scope="row">Task Complexity &amp; Variety</th>
2703<td>Focused on highly repetitive, single-platform admin tasks.</td>
2704<td class="highlight-column">Capable of moving between websites, courses, email campaigns, onboarding, and admin.</td>
2705</tr>
2706<tr>
2707<th scope="row">Supervision &amp; Direction</th>
2708<td>Requires detailed, step-by-step instructions and constant checks.</td>
2709<td class="highlight-column">Works independently from high-level goals without needing constant supervision.</td>
2710</tr>
2711<tr>
2712<th scope="row">System Requirements</th>
2713<td>Often expects pre-packaged, rigid processes to follow.</td>
2714<td class="highlight-column">Respects and works within your existing business systems and tools without forcing a rebuild.</td>
2715</tr>
2716<tr>
2717<th scope="row">Core Philosophy</th>
2718<td>Ticking off a checklist of administrative minutes.</td>
2719<td class="highlight-column">Cares about getting the work finished properly and on time.</td>
2720</tr>
2721</tbody>
2722</table>
2723</div>
2724<div class="problem-outro" style="background-color: var(--color-bg-white);">
2725<p><strong>A note about how I work:</strong> I am not a general inbox assistant waiting for a list of repetitive tasks. I work alongside established business owners who need someone capable of handling varied operational work without needing constant supervision.</p>
2726</div>
2727</div>
2728</section>
2729</div></body></html>
2730</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">
2731<?xml encoding="utf-8" ?><html><body><div id="main-content">
2732<section class="section-padding bg-white" aria-labelledby="expectations-heading">
2733<div class="container">
2734<div class="text-center max-width-800">
2735<h2 id="expectations-heading">What can you expect when partnering with <strong><em>maddatu</em></strong>?</h2>
2736<p class="lead">I establish predictable structures, clear communication lines, and calm follow-through in all client relationships.</p>
2737</div>
2738<div class="why-grid">
2739<div class="why-item">
2740<div class="why-icon" aria-hidden="true">&#10004;</div>
2741<div>
2742<h4 style="margin: 0 0 4px 0;">Clear communication</h4>
2743<p>You will always remain informed about task statuses, capacity limits, and inputs needed from you.</p>
2744</div>
2745</div>
2746<div class="why-item">
2747<div class="why-icon" aria-hidden="true">&#10004;</div>
2748<div>
2749<h4 style="margin: 0 0 4px 0;">Reliable follow-through</h4>
2750<p>No loose ends. Once a task is in my queue, it is carried through to completion without you having to chase me.</p>
2751</div>
2752</div>
2753<div class="why-item">
2754<div class="why-icon" aria-hidden="true">&#10004;</div>
2755<div>
2756<h4 style="margin: 0 0 4px 0;">Practical problem solving</h4>
2757<p>I focus on finding the cleanest, most practical path to move from an idea to a polished result.</p>
2758</div>
2759</div>
2760<div class="why-item">
2761<div class="why-icon" aria-hidden="true">&#10004;</div>
2762<div>
2763<h4 style="margin: 0 0 4px 0;">Attention to detail</h4>
2764<p>Meticulous review of text copies, links, automated email configurations, and platform settings before publishing.</p>
2765</div>
2766</div>
2767<div class="why-item">
2768<div class="why-icon" aria-hidden="true">&#10004;</div>
2769<div>
2770<h4 style="margin: 0 0 4px 0;">Respect for the way you already work</h4>
2771<p>I operate within your current systems, adapting to your workflows rather than requiring you to rebuild everything.</p>
2772</div>
2773</div>
2774<div class="why-item">
2775<div class="why-icon" aria-hidden="true">&#10004;</div>
2776<div>
2777<h4 style="margin: 0 0 4px 0;">A willingness to suggest a better approach</h4>
2778<p>I follow your instructions, but if I see a practical improvement that will genuinely help your business, I will raise it for discussion.</p>
2779</div>
2780</div>
2781</div>
2782</div>
2783</section>
2784</div></body></html>
2785</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">
2786<?xml encoding="utf-8" ?><html><body><div id="main-content">
2787<section class="section-padding bg-cream" aria-labelledby="faq-heading">
2788<div class="container">
2789<div class="text-center max-width-800">
2790<h2 id="faq-heading">Frequently Asked Questions about our Operational Support</h2>
2791<p class="lead">Direct, plain-English answers to clarify how we work behind the scenes.</p>
2792</div>
2793<div class="faq-list"><details class="faq-item">
2794<summary>Do I need to rebuild my systems to work with you?</summary>
2795<div class="faq-content">
2796<p>
2796No. I do not believe you need to rebuild your entire setup just to get support. I work within the systems and processes you already have in your business where practical, learning the tools you already use.</p>
2797</div>
2798</details><details class="faq-item">
2799<summary>What is the common thread of your work?</summary>
2800<div class="faq-content">
2801<p>The common thread is not one particular platform or service. It is making sure the work gets done properly, on time, and with reliable follow-through.</p>
2802</div>
2803</details><details class="faq-item">
2804<summary>Do you work as a general virtual assistant?</summary>
2805<div class="faq-content">
2806<p>No. I am not a general inbox assistant waiting for a list of repetitive tasks. I work alongside established small business owners who need someone highly capable of handling varied operational tasks, content publishing, and platform administration without needing constant supervision.</p>
2807</div>
2808</details><details class="faq-item">
2809<summary>What types of tasks can you move between?</summary>
2810<div class="faq-content">
2811<p>I work across website updates, course publishing, email sequence configurations, onboarding administration, document organization, forms, events, and other administrative tasks that sit between your ideas and final results.</p>
2812</div>
2813</details></div>
2814</div>
2815</section>
2816</div></body></html>
2817</div></div>        </div>
2818
2819        
2820
2821    </div>
2822
2823
2824</div>
2825</div>
2826<footer id="mv_footer" class="mv_footer border-t pb-10 text-sm ">
2827
2828	<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 ">
2829
2830					<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">
2831				<h3 class="font-semibold mb-1">About</h3>
2832				<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.
2833
2834Website Fae Pty Ltd trading as Maddatu</p>
2835			</div>
2836		
2837					<div class="relative w-full lg:w-1/3 flex-none p-4 text-center border-b lg:border-b-0">
2838				<div class="inline-block text-center lg:text-left relative">
2839					<h3 class="font-semibold mb-1">Links</h3>
2840					<div class="w-full ">
2841													<a class="mb-1" href="https://maddatu.com/terms" target="_BLANK">
2842								Terms and Conditions							</a><br>
2843													<a class="mb-1" href="https://maddatu.com/privacy" target="_BLANK">
2844								Privacy Policy							</a><br>
2845													<a class="mb-1" href="https://maddatu.com/disclaimer" target="_BLANK">
2846								Disclaimer							</a><br>
2847													<a class="mb-1" href="https://maddatu.com/accessibility-statement" target="_BLANK">
2848								Accessibility Statement							</a><br>
2849											</div>
2850				</div>
2851			</div>
2852		
2853
2854
2855		<div class="w-full lg:w-1/3 flex-none p-4 text-center ">
2856			<div class="inline-block text-center lg:text-left">
2857				<h3 class="font-semibold mb-1">Social</h3>
2858				<div class="w-full">
2859
2860											<a class="mb-1 flex" href="https://facebook.com/maddatu.sa" target="_BLANK">
2861							<i class="fab fa-facebook-square inline-block my-auto mr-1"></i> Facebook
2862						</a>
2863																					<a class="mb-1 flex" href="https://instagram.com/maddatu.sa" target="_BLANK">
2864							<i class="fab fa-instagram inline-block my-auto mr-1"></i> Instagram
2865						</a>
2866																				
2867					
2868					
2869					
2870					
2871
2872				</div>
2873			</div>
2874		</div>
2875
2876
2877	</div>
2878
2879	<div class="w-full max-w-screen-xl p-4 mx-auto text-xs font-light">
2880		<div class="w-full flex flex-wrap pt-2">
2881			<div class="flex-none w-full text-center mt-2 lg:w-1/2 lg:text-left">
2882				&copy; 2026 - maddatu			</div>
2883			<div class="flex-none flex w-full pt-2 lg:w-1/2 lg:flex-row-reverse">
2884								<a href="https://membervault.co" class="flex-none mx-auto lg:mx-px flex hidden" target="_BLANK">
2885					<img class="my-auto w-6 h-6 mr-2 mv_footer_logo" src="/fe/images/fav/favicon-32x32.png" loading="lazy">
2886					<span class="my-auto">Powered By MemberVault</span>
2887				</a>
2888			</div>
2889		</div>
2890	</div>
2891
2892</footer>
2893
2894
2895
2896
2897
2898<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%">
2899
2900	<a href="javascript:toggleMainNav()" class="mv_close_button mt-2 mr-2">
2901		<i class="fas fa-times"></i>
2902	</a>
2903
2904	<div class="w-full p-4 border-b">
2905
2906		<form class="mv_search_container" method="get" action="/products">
2907			<a href="javascript:toggleTextSizeMobile()" class="mv_text_button mr-2">
2908				<i class="fas fa-text-height"></i>
2909			</a>
2910
2911			<i class="fas fa-search mr-1"></i>
2912			<input name="search" class="mv_search_box rounded pl-2 text-gray-800 w-32 opacity-50" type="text" placeholder="Search..." value="">
2913			<input type="submit" value="search" class="hidden mv_search_button rounded bg-gray-800 text-white opacity-50 pl-1 pr-1">
2914		</form>
2915
2916
2917
2918	</div>
2919
2920			<div class="flex text-center mt-4">
2921			<div class="flex-none w-full pt-4 pb-4 border-b-2 mv_custom_text mv_custom_border font-semibold">
2922				Menu
2923			</div>
2924		</div>
2925
2926		<ul class="w-full font-semibold">
2927							<li class="w-full border-b">
2928					<a href="/home" class="flex p-4">
2929						<span class="flex-none w-11/12 my-auto">
2930							Home						</span>
2931						<span class="flex-none w-1/12 my-auto text-right">
2932							<i class="fas fa-angle-right"></i>
2933						</span>
2934					</a>
2935				</li>
2936							<li class="w-full border-b">
2937					<a href="/about" class="flex p-4">
2938						<span class="flex-none w-11/12 my-auto">
2939							About						</span>
2940						<span class="flex-none w-1/12 my-auto text-right">
2941							<i class="fas fa-angle-right"></i>
2942						</span>
2943					</a>
2944				</li>
2945							<li class="w-full border-b">
2946					<a href="/services" class="flex p-4">
2947						<span class="flex-none w-11/12 my-auto">
2948							Services						</span>
2949						<span class="flex-none w-1/12 my-auto text-right">
2950							<i class="fas fa-angle-right"></i>
2951						</span>
2952					</a>
2953				</li>
2954							<li class="w-full border-b">
2955					<a href="/contact" class="flex p-4">
2956						<span class="flex-none w-11/12 my-auto">
2957							Contact						</span>
2958						<span class="flex-none w-1/12 my-auto text-right">
2959							<i class="fas fa-angle-right"></i>
2960						</span>
2961					</a>
2962				</li>
2963							<li class="w-full border-b">
2964					<a href="/blog" class="flex p-4">
2965						<span class="flex-none w-11/12 my-auto">
2966							Blog						</span>
2967						<span class="flex-none w-1/12 my-auto text-right">
2968							<i class="fas fa-angle-right"></i>
2969						</span>
2970					</a>
2971				</li>
2972					</ul>
2973	
2974	<div class="flex text-center">
2975		<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')">
2976			My Services		</a>
2977		<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')">
2978			Available Services		</a>
2979	</div>
2980
2981
2982	<ul id="mv_main_nav_available_content" class="w-full font-semibold ">
2983					<li class="w-full border-b">
2984				<a href="/products/courses/view/1193365" class="flex p-4">
2985					<span class="flex-none w-11/12 my-auto">
2986						maddatu Ongoing Support					</span>
2987					<span class="flex-none w-1/12 my-auto text-right">
2988						<i class="fas fa-angle-right"></i>
2989					</span>
2990				</a>
2991			</li>
2992			</ul>
2993
2994	<ul id="mv_main_nav_my_content" class="w-full font-semibold hidden">
2995					<li class="w-full border-b">
2996				<a href="/login/?goto=/about" class="flex p-4">
2997					Sign In to see your services				</a>
2998			</li>
2999			</ul>
3000
3001
3002	
3003</div>
3004
3005
3006
3007
3008<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%">
3009    <a href="javascript:toggleLogin()" class="mv_close_button">
3010        <i class="fas fa-times"></i>
3011    </a>
3012
3013    <div class="w-full bg-gray-200 p-4 text-center">
3014        <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md">
3015            <i class="fas fa-sign-in-alt text-white text-lg"></i>
3016        </div>
3017
3018        <div class="w-full mt-2 font-semibold">
3019            Sign In        </div>
3020    </div>
3021
3022            <div id="login_before" class="w-full p-4 pb-0 text-sm">
3023
3024            <h3 class="w-full  font-semibold">Sign In Details</h3>
3025
3026            <div class="flex flex-wrap mt-2">
3027                <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="">
3028            </div>
3029            <div class="flex flex-wrap mt-2">
3030                <input class="flex-none w-full border p-2 rounded" type="password" id="loginform_password" name="email" placeholder="Password" autocomplete="off" value="">
3031            </div>
3032
3033            <div class="w-full relative text-red-700 font-bold hidden" id="loginform_error">
3034            </div>
3035
3036            <div class="w-full relative">
3037                <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">
3038                    Sign In                </a>
3039            </div>
3040
3041        </div>
3042
3043        <div class="w-full flex p-4 pt-0 text-sm italic mt-4">
3044            <div class="flex-none w-1/2">
3045                            </div>
3046            <div class="flex-none w-1/2 text-right">
3047                <a class="" href="javascript:void(0)" onclick="toggleLoginForgot()">forgot password?</a>
3048            </div>
3049        </div>
3050    
3051    <div id="login_forgot" class="w-full p-4 pb-0 text-sm hidden">
3052
3053        <h3 class="w-full  font-semibold">Forgot Password?</h3>
3054        <p class="font-light">Enter your email address and we will send you a link to reset your password.</p>
3055
3056        <div class="flex flex-wrap mt-2">
3057            <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="">
3058        </div>
3059
3060        <div class="w-full relative text-red-700 font-bold hidden" id="loginforgot_error">
3061        </div>
3062
3063        <div class="w-full relative">
3064            <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">
3065                Reset Password
3066            </a>
3067        </div>
3068
3069    </div>
3070
3071    <div class="loading"></div>
3072</div>
3073
3074
3075<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%">
3076    <a href="javascript:toggleForgot()" class="mv_close_button">
3077        <i class="fas fa-times"></i>
3078    </a>
3079
3080    <div class="w-full bg-gray-200 p-4 text-center">
3081        <div class="inline-block border rounded-full bg-gray-600 w-10 h-10 pt-1 border-white shadow-md">
3082            <i class="fas fa-question text-white text-lg"></i>
3083        </div>
3084
3085        <div class="w-full mt-2 font-semibold">
3086            Forgot Password
3087        </div>
3088    </div>
3089
3090    <div id="reset_before" class="w-full p-4 pb-0 text-sm hidden">
3091
3092        <h3 class="w-full  font-semibold">Create New Password for </h3>
3093
3094        <div class="flex flex-wrap mt-2">
3095            <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password" name="password" placeholder="Password" autocomplete="off" value="">
3096        </div>
3097        <div class="flex flex-wrap mt-2">
3098            <input class="flex-none w-full border p-2 rounded" type="password" id="resetform_password2" name="password2" placeholder="Re-Type Password" autocomplete="off" value="">
3099        </div>
3100
3101        <div class="w-full relative">
3102            <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">
3103                Reset Password
3104            </a>
3105        </div>
3106    </div>
3107
3108    <div class="w-full p-4 relative text-red-700 font-bold hidden" id="reset_error"></div>
3109
3110
3111    <div class="loading"></div>
3112</div>
3113
3114<script>
3115    function submitLoginForm() {
3116        var email = $('#loginform_email').val();
3117        var password = $('#loginform_password').val();
3118
3119                $('.loading').show();
3120        $.ajax({
3121                method: "POST",
3122                url: '/login/ajax_login',
3123                data: {
3124                    username: email,
3125                    password: password,
3126                    goto: '/about'
3127                }
3128            })
3129            .done(function(msg) {
3130                var response = JSON.parse(msg);
3131
3132                if (response.goto) {
3133                    window.location = response.goto;
3134                } else {
3135                    $('.loading').hide();
3136                    $('#loginform_error').show().html(response.message);
3137                }
3138            });
3139    }
3140
3141    function toggleLoginForgot() {
3142        if ($('#login_forgot').css('display') == 'none') {
3143            $('#login_forgot').show();
3144            $('#login_before').addClass('opacity-25');
3145        } else {
3146            $('#login_forgot').hide();
3147            $('#login_before').removeClass('opacity-25');
3148        }
3149    }
3150
3151    function submitLoginForgot() {
3152        var email = $('#loginforgot_email').val();
3153
3154        $('.loading').show();
3155        $.ajax({
3156                method: "POST",
3157                url: '/login/ajax_forgot',
3158                data: {
3159                    username: email,
3160                }
3161            })
3162            .done(function(msg) {
3163                var response = JSON.parse(msg);
3164
3165                $('.loading').hide();
3166                if (response.status == 'success') {
3167                    $('#loginforgot_error').removeClass('text-red-700').addClass('text-green-700');
3168                    $('#login_forgot_button').hide();
3169                }
3170                $('#loginforgot_error').show().html(response.message);
3171            });
3172
3173    }
3174
3175    function submitResetForm() {
3176        var password = $('#resetform_password').val();
3177        var password2 = $('#resetform_password2').val();
3178
3179        if (password != password2) {
3180            $('#reset_error').show().html('Passwords Don\'t Match!');
3181            return false;
3182        }
3183        if (password == '') {
3184            $('#reset_error').show().html('Password can\'t be blank!');
3185            return false;
3186        }
3187
3188        $('.loading').show();
3189
3190        $.ajax({
3191                method: "POST",
3192                url: '/login/ajax_do_reset',
3193                data: {
3194                    user: '',
3195                    password: password,
3196                    hash: ''
3197                }
3198            })
3199            .done(function(msg) {
3200                var response = JSON.parse(msg);
3201
3202                $('.loading').hide();
3203
3204                $('#reset_before').hide();
3205                if (response.status == 'success') {
3206                    $('#reset_error').removeClass('text-red-700').addClass('text-green-700');
3207                }
3208                $('#reset_error').show().html(response.message);
3209            });
3210    }
3211
3212    $(".js_clean_email").keyup(function() {
3213        $(this).val(cleanEmail($(this).val()));
3214    });
3215</script>
3215
3216
3217
3218
3219
3220<div id="mv_cover" class="hidden fixed left-0 top-0 w-full h-full bg-black opacity-75 z-10">&nbsp;</div>
3221
3222<script src="/fe/js/app.js?ver=2.43"></script>
vendor: 1 bytes, line 3222
3222
3223<script src="/fe/js/sweetalert2.all.min.js?ver=2.43"></script>
vendor: 1 bytes, line 3223
3223
3224<script>
3225    // global variables
3226    const confetti = document.getElementById('confetti');
3227    const confettiCtx = confetti.getContext('2d');
3228    let container, confettiElements = [];
3229
3230    // helper
3231    rand = (min, max) => Math.random() * (max - min) + min;
3232
3233    // params to play with
3234    const confettiParams = {
3235        // number of confetti per "explosion"
3236        number: 200,
3237        // min and max size for each rectangle
3238        size: {
3239            x: [5, 20],
3240            y: [10, 18]
3241        },
3242        // power of explosion
3243        initSpeed: 50,
3244        // defines how fast particles go down after blast-off
3245        gravity: 0.65,
3246        // how wide is explosion
3247        drag: 0.08,
3248        // how slow particles are falling
3249        terminalVelocity: 20,
3250        // how fast particles are rotating around themselves
3251        flipSpeed: 0.017,
3252    };
3253    const colors = [{
3254            front: '#FFFFFF',
3255            back: '#FFFFFF'
3256        },
3257        {
3258            front: '#0F3D32',
3259            back: '#0F3D32'
3260        },
3261        {
3262            front: '#FFFFFF',
3263            back: '#FFFFFF'
3264        },
3265        {
3266            front: '#0F3D32',
3267            back: '#0F3D32'
3268        },
3269        {
3270            front: '#F51679',
3271            back: '#F51679'
3272        },
3273        {
3274            front: '#FFFFFF',
3275            back: '#FFFFFF'
3276        },
3277    ];
3278
3279    // -----------------------------------------------------------
3280
3281    setupCanvas();
3282    /*
3283    addConfetti({
3284        clientX: container.w * 0.5,
3285        clientY: container.h * 0.5
3286    });
3287    */
3288    updateConfetti();
3289
3290    //window.addEventListener('click', addConfetti);
3291    window.addEventListener('resize', () => {
3292        setupCanvas();
3293        hideConfetti();
3294    });
3295
3296    // -----------------------------------------------------------
3297
3298    // Confetti constructor
3299    function Conf() {
3300        this.randomModifier = rand(-1, 1);
3301        this.colorPair = colors[Math.floor(rand(0, colors.length))];
3302        this.dimensions = {
3303            x: rand(confettiParams.size.x[0], confettiParams.size.x[1]),
3304            y: rand(confettiParams.size.y[0], confettiParams.size.y[1]),
3305        };
3306        this.position = {
3307            x: clickPosition[0],
3308            y: clickPosition[1]
3309        };
3310        this.rotation = rand(0, 2 * Math.PI);
3311        this.scale = {
3312            x: 1,
3313            y: 1
3314        };
3315        this.velocity = {
3316            x: rand(-confettiParams.initSpeed, confettiParams.initSpeed) * 0.4,
3317            y: rand(-confettiParams.initSpeed, confettiParams.initSpeed)
3318        };
3319        this.flipSpeed = rand(0.2, 1.5) * confettiParams.flipSpeed;
3320
3321        if (this.position.y <= container.h) {
3322            this.velocity.y = -Math.abs(this.velocity.y);
3323        }
3324
3325        this.terminalVelocity = rand(1, 1.5) * confettiParams.terminalVelocity;
3326
3327        this.update = function() {
3328            this.velocity.x *= 0.98;
3329            this.position.x += this.velocity.x;
3330
3331            this.velocity.y += (this.randomModifier * confettiParams.drag);
3332            this.velocity.y += confettiParams.gravity;
3333            this.velocity.y = Math.min(this.velocity.y, this.terminalVelocity);
3334            this.position.y += this.velocity.y;
3335
3336            this.scale.y = Math.cos((this.position.y + this.randomModifier) * this.flipSpeed);
3337            this.color = this.scale.y > 0 ? this.colorPair.front : this.colorPair.back;
3338        }
3339    }
3340
3341    function updateConfetti() {
3342        confettiCtx.clearRect(0, 0, container.w, container.h);
3343
3344        confettiElements.forEach((c) => {
3345            c.update();
3346            confettiCtx.translate(c.position.x, c.position.y);
3347            confettiCtx.rotate(c.rotation);
3348            const width = (c.dimensions.x * c.scale.x);
3349            const height = (c.dimensions.y * c.scale.y);
3350            confettiCtx.fillStyle = c.color;
3351            confettiCtx.fillRect(-0.5 * width, -0.5 * height, width, height);
3352            confettiCtx.setTransform(1, 0, 0, 1, 0, 0)
3353        });
3354
3355        confettiElements.forEach((c, idx) => {
3356            if (c.position.y > container.h ||
3357                c.position.x < -0.5 * container.x ||
3358                c.position.x > 1.5 * container.x) {
3359                confettiElements.splice(idx, 1)
3360            }
3361        });
3362        window.requestAnimationFrame(updateConfetti);
3363    }
3364
3365    function setupCanvas() {
3366        container = {
3367            w: window.innerWidth,
3368            h: window.innerHeight
3369        };
3370        confetti.width = container.w;
3371        confetti.height = container.h;
3372
3373        //console.log(container);
3374    }
3375
3376    function addConfetti(e) {
3377        //var centerX = window.innerWidth / 2;
3378        //var centerY = window.innerHeight / 2;
3379
3380        var centerX = window.innerWidth;
3381        var centerY = window.innerHeight;
3382
3383        //clickPosition = [ e.clientX, e.clientY ];
3384        clickPosition = [centerX, centerY];
3385        for (let i = 0; i < confettiParams.number; i++) {
3386            confettiElements.push(new Conf())
3387        }
3388    }
3389
3390    function hideConfetti() {
3391        confettiElements = [];
3392        window.cancelAnimationFrame(updateConfetti)
3393    }
3394</script>
3394
3395
3396
3397</body>
3398
3399</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.