PageSourceSearch

https://cavalcare.org/about

html cavalcare.org collected 2026-10-07 14:19:49 UTC 89,662 bytes, 2,877 lines download raw bytes

1<!doctype html>
2<html lang="en" class="scroll-smooth">
3<head>
4  <meta charset="utf-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
7  <meta name="csrf-token" content="sJSwFrCy1BcBbVJAwXtfqxlWpQ0jZ2t5Of5G8Qne">
8  
9  <title>About CavalCare — Our Story, Mission &amp; Values</title>
10
11  <link rel="preload" as="style" href="https://cavalcare.org/build/assets/app-Cpf7GX3X.css" /><link rel="modulepreload" as="script" href="https://cavalcare.org/build/assets/app-BABH9ZAt.js" /><link rel="stylesheet" href="https://cavalcare.org/build/assets/app-Cpf7GX3X.css" data-navigate-track="reload" />
11<script type="module" src="https://cavalcare.org/build/assets/app-BABH9ZAt.js" data-navigate-track="reload"></script>
11
12  
13  <link rel="preconnect" href="https://fonts.googleapis.com">
14  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15  <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Nunito+Sans:wght@300;400;600;700;800&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
16  
17  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
18
19  
19<script src="https://cdn.tailwindcss.com"></script>
19
20  
21  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
22  
23
24  
24<script>
25    tailwind.config = {
26      theme: {
27        extend: {
28          colors: {
29            primary: '#04A9A7',   // main action color (WhatsApp vibe)
30            secondary: '#FFCDAD', // soft accent
31            dark: '#1A3A2F',      // text / strong contrast
32            light: '#F0FFDB',     // background
33          },
34          fontFamily: {
35            sans: ['Nunito Sans', 'sans-serif'],
36            serif: ['Lora', 'serif'],
37            heading: ['Poppins', 'sans-serif'],
38          },
39        }
40      }
41    }
42  </script>
42
43
44<style>
45/* ═══════════════════════════════════════════════
46   CAVALCARE DESIGN TOKENS
47═══════════════════════════════════════════════ */
48
49:root {
50    --cream:        #F0FFDB;
51    --yellow:       #04A9A7;
52    --ocean:        #1A3A2F;
53    --indigo:       #04A9A7;
54    --peach:        #FFCDAD;
55    --cream-d:      #d4f5b8;
56    --ocean-h:      #0f5c3d;
57    --ocean-soft:   #e6f9f9;
58
59    --text:         #1A3A2F;
60    --muted:        #3d6b57;
61    --white:        #ffffff;
62
63    --r-xs:         6px;
64    --r-sm:         10px;
65    --r-md:         16px;
66    --r-lg:         24px;
67    --r-xl:         36px;
68    --r-2xl:        48px;
69
70    --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
71    --out:          cubic-bezier(0, 0, 0.2, 1);
72    --smooth:       cubic-bezier(0.4, 0, 0.2, 1);
73}
74
75
76/* ═══════════════════════════════════════════════
77   GLOBAL BASE
78═══════════════════════════════════════════════ */
79
80*,
81*::before,
82*::after {
83    box-sizing: border-box;
84    margin: 0;
85    padding: 0;
86}
87
88html {
89    scroll-behavior: smooth;
90    -webkit-text-size-adjust: 100%;
91}
92
93body {
94    font-family: 'Cabin', system-ui, sans-serif;
95    font-size: 16px;
96    line-height: 1.65;
97    color: var(--text);
98    background: #fff;
99
100    -webkit-font-smoothing: antialiased;
101    -moz-osx-font-smoothing: grayscale;
102
103    overflow-x: hidden;
104}
105
106img {
107    display: block;
108    max-width: 100%;
109}
110
111a {
112    color: inherit;
113}
114
115button,
116input,
117textarea,
118select {
119    font: inherit;
120}
121
122button {
123    color: inherit;
124}
125
126:focus-visible {
127    outline: 2px solid var(--yellow);
128    outline-offset: 3px;
129    border-radius: 5px;
130    box-shadow: 0 0 0 4px rgba(4, 169, 167, 0.18);
131}
132
133
134/* ═══════════════════════════════════════════════
135   GLOBAL ANIMATIONS
136═══════════════════════════════════════════════ */
137
138@keyframes fadeUp {
139    from {
140        opacity: 0;
141        transform: translateY(24px);
142    }
143
144    to {
145        opacity: 1;
146        transform: none;
147    }
148}
149
150@keyframes fadeIn {
151    from {
152        opacity: 0;
153    }
154
155    to {
156        opacity: 1;
157    }
158}
159
160@keyframes scaleIn {
161    from {
162        opacity: 0;
163        transform: scale(0.93);
164    }
165
166    to {
167        opacity: 1;
168        transform: scale(1);
169    }
170}
171
172@keyframes floatY {
173    0%,
174    100% {
175        transform: translateY(0);
176    }
177
178    50% {
179        transform: translateY(-8px);
180    }
181}
182
183@keyframes pulse {
184    0%,
185    100% {
186        box-shadow: 0 0 0 0 rgba(26, 58, 47, 0.22);
187    }
188
189    60% {
190        box-shadow: 0 0 0 9px rgba(26, 58, 47, 0);
191    }
192}
193
194@keyframes slideR {
195    from {
196        opacity: 0;
197        transform: translateX(-26px);
198    }
199
200    to {
201        opacity: 1;
202        transform: none;
203    }
204}
205
206@keyframes slideL {
207    from {
208        opacity: 0;
209        transform: translateX(26px);
210    }
211
212    to {
213        opacity: 1;
214        transform: none;
215    }
216}
217
218@keyframes marquee {
219    from {
220        transform: translateX(0);
221    }
222
223    to {
224        transform: translateX(-50%);
225    }
226}
227
228@keyframes ripple {
229    to {
230        transform: scale(2.2);
231        opacity: 0;
232    }
233}
234
235@keyframes spin {
236    to {
237        transform: rotate(360deg);
238    }
239}
240
241@keyframes blink {
242    0%,
243    100% {
244        opacity: 1;
245    }
246
247    50% {
248        opacity: 0.35;
249    }
250}
251
252
253/* ═══════════════════════════════════════════════
254   GLOBAL SCROLL REVEAL
255═══════════════════════════════════════════════ */
256
257.reveal {
258    opacity: 0;
259    transform: translateY(28px);
260    transition:
261        opacity 0.7s var(--out),
262        transform 0.7s var(--out);
263}
264
265.reveal.is-visible {
266    opacity: 1;
267    transform: none;
268}
269
270
271/* ═══════════════════════════════════════════════
272   GLOBAL CONTAINER
273═══════════════════════════════════════════════ */
274
275.wrap {
276    width: 100%;
277    max-width: 1160px;
278    margin: 0 auto;
279    padding: 0 20px;
280}
281
282@media (min-width: 768px) {
283    .wrap {
284        padding-left: 32px;
285        padding-right: 32px;
286    }
287}
288
289
290/* ═══════════════════════════════════════════════
291   GLOBAL TYPOGRAPHY
292═══════════════════════════════════════════════ */
293
294.sec-eyebrow {
295    display: block;
296    margin-bottom: 14px;
297}
298
299.sec-title {
300    font-family: 'Nanum Myeongjo', serif;
301    font-size: clamp(1.9rem, 6vw, 3.2rem);
302    font-weight: 400;
303    line-height: 1.1;
304    letter-spacing: -0.03em;
305    color: var(--ocean);
306}
307
308.sec-sub {
309    max-width: 480px;
310    margin-top: 12px;
311
312    font-size: 1rem;
313    line-height: 1.75;
314    color: var(--muted);
315}
316
317
318/* ═══════════════════════════════════════════════
319   GLOBAL PILLS
320═══════════════════════════════════════════════ */
321
322.pill {
323    display: inline-flex;
324    align-items: center;
325    gap: 6px;
326
327    padding: 5px 13px;
328
329    border-radius: 100px;
330
331    font-size: 0.7rem;
332    font-weight: 600;
333    letter-spacing: 0.07em;
334    text-transform: uppercase;
335
336    position: relative;
337    overflow: hidden;
338}
339
340.pill-dot {
341    width: 5px;
342    height: 5px;
343    flex-shrink: 0;
344
345    border-radius: 50%;
346    background: currentColor;
347}
348
349.pill-ocean {
350    background: rgba(26, 58, 47, 0.1);
351    color: var(--ocean);
352}
353
354.pill-yellow {
355    background: var(--yellow);
356    color: var(--ocean);
357}
358
359.pill-indigo {
360    background: rgba(4, 169, 167, 0.13);
361    color: var(--indigo);
362}
363
364.pill-peach {
365    background: rgba(255, 205, 173, 0.35);
366    color: #7a4016;
367}
368
369.pill-white {
370    background: rgba(255, 255, 255, 0.15);
371    color: #fff;
372}
373
374.pill::after {
375    content: '';
376
377    position: absolute;
378    inset: 0;
379
380    background: linear-gradient(
381        90deg,
382        transparent,
383        rgba(255, 255, 255, 0.3) 50%,
384        transparent
385    );
386
387    background-size: 300px 100%;
388    animation: shimmerPill 3.5s ease-in-out infinite;
389
390    pointer-events: none;
391    border-radius: inherit;
392}
393
394@keyframes shimmerPill {
395    0% {
396        background-position: -300px 0;
397    }
398
399    100% {
400        background-position: 300px 0;
401    }
402}
403
404
405/* ═══════════════════════════════════════════════
406   GLOBAL BUTTONS
407═══════════════════════════════════════════════ */
408
409.btn {
410    display: inline-flex;
411    align-items: center;
412    gap: 9px;
413
414    position: relative;
415    overflow: hidden;
416
417    border: none;
418
419    font-family: 'Cabin', sans-serif;
420    font-size: 0.93rem;
421    font-weight: 600;
422
423    text-decoration: none;
424
425    cursor: pointer;
426
427    -webkit-tap-highlight-color: transparent;
428
429    transition:
430        transform 0.22s var(--spring),
431        box-shadow 0.22s,
432        background 0.18s,
433        color 0.18s,
434        border-color 0.18s;
435}
436
437.btn:active {
438    transform: scale(0.96) !important;
439}
440
441.btn-primary {
442    padding: 14px 26px;
443
444    background: var(--ocean);
445    color: #fff;
446
447    border-radius: var(--r-sm);
448
449    box-shadow: 0 4px 16px rgba(26, 58, 47, 0.22);
450}
451
452.btn-primary:hover {
453    color: #fff;
454    transform: translateY(-3px);
455
456    box-shadow: 0 8px 28px rgba(26, 58, 47, 0.32);
457}
458
459.btn-outline {
460    padding: 13px 26px;
461
462    background: transparent;
463    color: var(--ocean);
464
465    border: 1.5px solid rgba(26, 58, 47, 0.24);
466    border-radius: var(--r-sm);
467}
468
469.btn-outline:hover {
470    background: var(--ocean);
471    color: #fff;
472    border-color: var(--ocean);
473
474    transform: translateY(-2px);
475}
476
477.btn-yellow {
478    padding: 14px 26px;
479
480    background: var(--yellow);
481    color: var(--ocean);
482
483    border-radius: var(--r-sm);
484
485    box-shadow: 0 4px 16px rgba(4, 169, 167, 0.22);
486}
487
488.btn-yellow:hover {
489    background: var(--cream-d);
490
491    transform: translateY(-3px);
492
493    box-shadow: 0 8px 28px rgba(4, 169, 167, 0.35);
494}
495
496.btn-ghost {
497    padding: 14px 26px;
498
499    display: inline-flex;
500    align-items: center;
501    gap: 9px;
502
503    background: rgba(255, 255, 255, 0.1);
504    color: #fff;
505
506    border: 1.5px solid rgba(255, 255, 255, 0.22);
507    border-radius: var(--r-sm);
508
509    font-size: 0.93rem;
510    font-weight: 600;
511    text-decoration: none;
512
513    transition:
514        background 0.2s,
515        transform 0.22s var(--spring);
516}
517
518.btn-ghost:hover {
519    background: rgba(255, 255, 255, 0.18);
520    color: #fff;
521    transform: translateY(-2px);
522}
523
524.btn i,
525.btn-ghost i,
526.btn-yellow i,
527.btn-outline i {
528    display: inline-block;
529
530    transition: transform 0.22s var(--spring);
531}
532
533.btn:hover i,
534.btn-ghost:hover i,
535.btn-yellow:hover i {
536    transform: translateX(4px);
537}
538
539.btn-outline:hover i {
540    transform: scale(1.2);
541}
542
543
544/* ═══════════════════════════════════════════════
545   GLOBAL NAVIGATION
546═══════════════════════════════════════════════ */
547
548.nav-wrap {
549    position: fixed;
550
551    top: 0;
552    left: 0;
553    right: 0;
554
555    z-index: 200;
556
557    padding-left: max(20px, env(safe-area-inset-left));
558    padding-right: max(20px, env(safe-area-inset-right));
559
560    transition:
561        background 0.38s var(--smooth),
562        box-shadow 0.38s var(--smooth);
563}
564
565@media (min-width: 768px) {
566    .nav-wrap {
567        padding-left: 32px;
568        padding-right: 32px;
569    }
570}
571
572.nav-wrap.scrolled {
573    background: rgba(240, 255, 219, 0.92);
574
575    backdrop-filter: blur(24px);
576    -webkit-backdrop-filter: blur(24px);
577
578    box-shadow: 0 1px 0 rgba(26, 58, 47, 0.08);
579}
580
581.nav-inner {
582    width: 100%;
583    max-width: 1160px;
584
585    height: 64px;
586
587    margin: 0 auto;
588
589    display: flex;
590    align-items: center;
591    justify-content: space-between;
592}
593
594.nav-logo {
595    display: flex;
596    align-items: center;
597
598    text-decoration: none;
599}
600
601.nav-logo-img {
602    width: auto;
603    height: 96px;
604
605    display: block;
606    object-fit: contain;
607}
608
609.nav-logo:hover {
610    opacity: 0.72;
611}
612
613
614/* Desktop navigation */
615
616.nav-links {
617    display: none;
618
619    align-items: center;
620    gap: 30px;
621
622    list-style: none;
623}
624
625@media (min-width: 768px) {
626    .nav-links {
627        display: flex;
628    }
629}
630
631.nav-links a {
632    position: relative;
633
634    padding: 4px 0;
635
636    font-size: 0.85rem;
637    font-weight: 500;
638
639    color: var(--muted);
640
641    text-decoration: none;
642
643    transition: color 0.2s;
644}
645
646.nav-links a::after {
647    content: '';
648
649    position: absolute;
650
651    left: 0;
652    right: 0;
653    bottom: -2px;
654
655    height: 1.5px;
656
657    background: var(--ocean);
658
659    transform: scaleX(0);
660    transform-origin: left;
661
662    transition: transform 0.28s var(--spring);
663}
664
665.nav-links a:hover {
666    color: var(--ocean);
667}
668
669.nav-links a:hover::after {
670    transform: scaleX(1);
671}
672
673.nav-cta {
674    padding: 9px 20px !important;
675
676    background: var(--ocean) !important;
677    color: #fff !important;
678
679    border-radius: var(--r-sm) !important;
680}
681
682.nav-cta::after {
683    display: none !important;
684}
685
686.nav-cta:hover {
687    background: var(--ocean-h) !important;
688    color: #fff !important;
689
690    transform: translateY(-1px) !important;
691}
692
693
694/* ═══════════════════════════════════════════════
695   MOBILE NAVIGATION
696═══════════════════════════════════════════════ */
697
698.nav-mob {
699    display: flex;
700
701    flex-direction: column;
702    gap: 5px;
703
704    min-width: 44px;
705    min-height: 44px;
706
707    align-items: center;
708    justify-content: center;
709
710    padding: 8px;
711
712    background: none;
713    border: none;
714
715    color: var(--ocean);
716
717    cursor: pointer;
718
719    -webkit-tap-highlight-color: transparent;
720}
721
722@media (min-width: 768px) {
723    .nav-mob {
724        display: none;
725    }
726}
727
728.nav-mob span {
729    display: block;
730
731    width: 22px;
732    height: 2px;
733
734    background: currentColor;
735
736    border-radius: 2px;
737
738    transition: all 0.28s var(--smooth);
739}
740
741.nav-mob.active span:nth-child(1) {
742    transform: translateY(7px) rotate(45deg);
743}
744
745.nav-mob.active span:nth-child(2) {
746    opacity: 0;
747    transform: scaleX(0);
748}
749
750.nav-mob.active span:nth-child(3) {
751    transform: translateY(-7px) rotate(-45deg);
752}
753
754
755/* Mobile drawer */
756
757.nav-drawer {
758    display: none;
759
760    position: absolute;
761
762    top: 64px;
763    left: 0;
764    right: 0;
765
766    flex-direction: column;
767    gap: 4px;
768
769    padding: 20px 24px 28px;
770
771    background: rgba(240, 255, 219, 0.97);
772
773    backdrop-filter: blur(24px);
774    -webkit-backdrop-filter: blur(24px);
775
776    border-top: 1px solid rgba(26, 58, 47, 0.07);
777
778    box-shadow: 0 12px 40px rgba(26, 58, 47, 0.1);
779
780    transform: translateY(-8px);
781    opacity: 0;
782
783    transition:
784        opacity 0.25s var(--out),
785        transform 0.25s var(--out);
786}
787
788.nav-drawer.open {
789    display: flex;
790
791    opacity: 1;
792    transform: none;
793}
794
795.nav-drawer a {
796    display: flex;
797    align-items: center;
798    justify-content: space-between;
799
800    min-height: 48px;
801
802    padding: 12px 0;
803
804    border-bottom: 1px solid rgba(26, 58, 47, 0.07);
805
806    color: var(--ocean);
807
808    font-size: 1rem;
809    font-weight: 500;
810
811    text-decoration: none;
812}
813
814.nav-drawer a:last-child {
815    border-bottom: none;
816}
817
818.nav-drawer a:hover {
819    opacity: 0.65;
820}
821
822.nav-drawer-cta {
823    margin-top: 12px;
824
825    display: block !important;
826
827    padding: 14px 20px !important;
828
829    background: var(--ocean);
830    color: #fff !important;
831
832    border-radius: var(--r-sm);
833
834    text-align: center;
835    font-weight: 600;
836}
837
838
839/* ═══════════════════════════════════════════════
840   ACCESSIBILITY / MOBILE POLISH
841═══════════════════════════════════════════════ */
842
843@media (max-width: 767px) {
844
845    html {
846        font-size: 15px;
847    }
848
849    .wrap {
850        padding-left: 18px;
851        padding-right: 18px;
852    }
853
854    .sec-title {
855        font-size: clamp(1.7rem, 7.2vw, 2.5rem);
856        letter-spacing: -0.025em;
857    }
858
859    .sec-sub {
860        font-size: 0.95rem;
861        margin-top: 10px;
862    }
863
864    .nav-inner {
865        height: 60px;
866    }
867
868    .nav-logo-img {
869        height: 52px;
870    }
871
872    .nav-drawer {
873        top: 60px;
874
875        padding: 16px 18px 24px;
876    }
877
878    .nav-drawer a {
879        font-size: 0.95rem;
880        padding: 14px 0;
881    }
882
883    .nav-wrap.scrolled {
884        box-shadow: 0 2px 16px rgba(26, 58, 47, 0.12);
885    }
886
887    .btn,
888    .btn-ghost,
889    .btn-yellow,
890    .btn-outline {
891        min-height: 48px;
892    }
893}
894
895
896.site-footer{
897  background: var(--cream); /* 🔥 match your sections */
898  border-top: 1px solid rgba(6,58,71,.08);
899  padding: clamp(56px, 6vw, 80px) 0 clamp(20px, 3vw, 32px);
900  position: relative;
901}
902
903.site-footer .container{
904  max-width: 1200px; 
905  margin: 0 auto;
906  padding: 0 24px;
907}
908
909.site-footer::before{
910  content:'';
911  position:absolute;
912  top:24px;
913  left:0;
914  right:0;
915  height:24px;
916  background: linear-gradient(
917    to bottom,
918    transparent,
919    var(--cream)
920  );
921}
922
923/* Grid */
924.footer-grid{
925  display:grid;
926  grid-template-columns: repeat(4,1fr);
927  gap: clamp(20px, 2.5vw, 32px);
928  margin-bottom: 36px;
929}
930
931/* Brand */
932.footer-brand p{
933  font-size: 0.9rem;
934  color: rgba(6,58,71,0.65);
935  line-height: 1.7;
936  margin-top: 12px;
937}
938
939/* Logo */
940.footer-logo{
941  display:flex;
942  align-items:center;
943  gap:10px;
944  font-weight:800;
945  color: var(--navy);
946}
947
948.footer-logo img{
949  height: 36px;
950}
951
952/* Headings */
953.footer-grid h4{
954  font-family: 'Fraunces', serif; /* 🔥 match headings */
955  font-size: 1.05rem;
956  margin-bottom: 12px;
957  color: var(--ink);
958}
959
960/* Links */
961.footer-grid ul{
962  list-style:none;
963  padding:0;
964  margin:0;
965}
966
967.footer-grid li{
968  margin-bottom:10px;
969}
970
971.footer-grid a{
972  font-size: 0.9rem;
973  color: rgba(6,58,71,0.65);
974}
975
976.footer-grid a:hover{
977  color: var(--ink);
978}
979
980/* Socials */
981.footer-socials{
982  display:flex;
983  gap:10px;
984  margin-top:16px;
985}
986
987.footer-socials a{
988  width:36px;
989  height:36px;
990  display:flex;
991  align-items:center;
992  justify-content:center;
993  border-radius:50%;
994  background:#fff;
995  border:1px solid rgba(6,58,71,.08);
996  color: var(--ink);
997  transition: all .25s ease;
998}
999
1000.footer-socials a:hover{
1001  background: var(--ocean);
1002  color:#fff;
1003  transform: translateY(-3px);
1004}
1005
1006/* Contact */
1007.footer-contact li{
1008  display:flex;
1009  gap:10px;
1010  align-items:flex-start;
1011}
1012
1013.footer-contact i{
1014  color: var(--gold);
1015  margin-top: 3px;
1016}
1017
1018.footer-contact span{
1019  display:block;
1020  font-size: 0.8rem;
1021  color: rgba(6,58,71,0.65);
1022}
1023
1024/* Bottom */
1025.footer-bottom{
1026  border-top: 1px solid rgba(0,0,0,0.06);
1027  padding-top: 20px;
1028  text-align:center;
1029  font-size: 0.85rem;
1030  color: rgba(6,58,71,0.65);
1031}
1032
1033/* Responsive */
1034@media (max-width: 900px){
1035  .footer-grid{
1036    grid-template-columns: 1fr 1fr;
1037  }
1038}
1039
1040@media (max-width: 600px){
1041  .footer-grid{
1042    grid-template-columns: 1fr;
1043  }
1044}
1045
1046/* ═══════════════════════════════════════════════
1047   REDUCED MOTION
1048═══════════════════════════════════════════════ */
1049
1050@media (prefers-reduced-motion: reduce) {
1051
1052    *,
1053    *::before,
1054    *::after {
1055        animation-duration: 0.01ms !important;
1056        animation-iteration-count: 1 !important;
1057        transition-duration: 0.01ms !important;
1058        scroll-behavior: auto !important;
1059    }
1060}
1061
1062
1063/* ═══════════════════════════════════════════════
1064   LAZY IMAGE LOADING
1065═══════════════════════════════════════════════ */
1066
1067img[loading="lazy"] {
1068    background:
1069        linear-gradient(
1070            90deg,
1071            rgba(240, 255, 219, 0.5) 25%,
1072            rgba(255, 255, 255, 0.3) 50%,
1073            rgba(240, 255, 219, 0.5) 75%
1074        );
1075
1076    background-size: 400px 100%;
1077
1078    animation: shimmerPill 1.8s ease-in-out infinite;
1079}
1080
1081img[loading="lazy"].img-loaded {
1082    animation: none;
1083    background: none;
1084}
1085</style>
1086
1087  <meta name="description" content="Learn how CavalCare was founded to give Nigerian families access to professional, licensed in-home nursing care. Our mission: healing at home, with intention.">
1088<meta name="keywords" content="CavalCare about, in-home nursing Nigeria story, home healthcare Nigeria mission, CavalCare values, Nigerian healthcare startup">
1089<meta name="robots" content="index, follow">
1090<link rel="canonical" href="https://cavalcare.org/about">
1091
1092<meta property="og:type"        content="website">
1093<meta property="og:url"         content="https://cavalcare.org/about">
1094<meta property="og:title"       content="About CavalCare — Our Story, Mission & Values">
1095<meta property="og:description" content="CavalCare was founded because too many Nigerian families were navigating post-hospital care alone. We provide verified healthcare professionals so healing happens at home, with intention.">
1096<meta property="og:image"       content="https://cavalcare.org/images/og-about.jpg">
1097<meta property="og:site_name"   content="CavalCare">
1098
1099<meta name="twitter:card"        content="summary_large_image">
1100<meta name="twitter:title"       content="About CavalCare — Our Story, Mission & Values">
1101<meta name="twitter:description" content="Founded to ensure no Nigerian family navigates post-hospital care alone. Licensed healthcare professionals, real-time reports, 24/7 support.">
1102<meta name="twitter:image"       content="https://cavalcare.org/images/og-about.jpg">
1103
1104<script type="application/ld+json">
1105{
1106  "@context": "https://schema.org",
1107  "@type": "AboutPage",
1108  "url": "https://cavalcare.org/about",
1109  "name": "About CavalCare",
1110  "description": "CavalCare was founded to ensure Nigerian families have access to professional licensed nursing care at home after hospital discharge.",
1111  "publisher": {
1112    "@type": "Organization",
1113    "name": "CavalCare",
1114    "url": "https://cavalcare.org",
1115    "logo": "https://cavalcare.org/images/logo.png"
1116  }
1117}
1118</script>
1118
1119
1120<link rel="preconnect" href="https://fonts.googleapis.com">
1121<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1122<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
1123<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
1124
1125<style>
1126/* ═══════════════════════════════════════════════
1127   TOKENS — identical to home & services
1128═══════════════════════════════════════════════ */
1129:root {
1130  --cream:      #F0FFDB;
1131  --yellow:     #04A9A7;
1132  --ocean:      #1A3A2F;
1133  --indigo:     #04A9A7;
1134  --peach:      #FFCDAD;
1135  --cream-d:    #d4f5b8;
1136  --ocean-h:    #0f5c3d;
1137  --ocean-soft: #e6f9f9;
1138  --text:       #1A3A2F;
1139  --muted:      #3d6b57;
1140  --white:      #ffffff;
1141  --r-xs:  6px;  --r-sm: 10px; --r-md: 16px;
1142  --r-lg:  24px; --r-xl: 36px; --r-2xl: 48px;
1143  --spring: cubic-bezier(0.34,1.56,0.64,1);
1144  --out:    cubic-bezier(0,0,0.2,1);
1145  --smooth: cubic-bezier(0.4,0,0.2,1);
1146}
1147
1148/* ── RESET & BASE ───────────────────────────────── */
1149*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
1150html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
1151body {
1152  font-family:'Cabin',system-ui,sans-serif;
1153  font-size:16px; line-height:1.65;
1154  color:var(--text); background:#fff;
1155  -webkit-font-smoothing:antialiased;
1156  overflow-x:hidden;
1157}
1158img  { display:block; max-width:100%; }
1159a    { color:inherit; }
1160:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; border-radius:4px;
1161  box-shadow:0 0 0 4px rgba(4,169,167,.15); }
1162
1163/* ── KEYFRAMES ──────────────────────────────────── */
1164@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
1165@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
1166@keyframes drawLine { from{transform:scaleX(0)} to{transform:scaleX(1)} }
1167@keyframes floatY   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
1168@keyframes pulse    { 0%,100%{box-shadow:0 0 0 0 rgba(26,58,47,.22)} 60%{box-shadow:0 0 0 9px rgba(26,58,47,0)} }
1169@keyframes ripple   { to{transform:scale(2.2);opacity:0}
1169 }
1170@keyframes shimmerPill {
1171  0%   { background-position:-300px 0 }
1172  100% { background-position: 300px 0 }
1173}
1174@keyframes slideR { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:none} }
1175@keyframes slideL { from{opacity:0;transform:translateX(22px)}  to{opacity:1;transform:none} }
1176@keyframes countUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
1177
1178/* ── REVEAL ─────────────────────────────────────── */
1179.reveal {
1180  opacity:0; transform:translateY(26px);
1181  transition:opacity .72s var(--out),transform .72s var(--out);
1182}
1183.reveal.is-visible { opacity:1; transform:none; }
1184.reveal-left  { opacity:0; transform:translateX(-24px);
1185  transition:opacity .72s var(--out),transform .72s var(--out); }
1186.reveal-right { opacity:0; transform:translateX(24px);
1187  transition:opacity .72s var(--out),transform .72s var(--out); }
1188.reveal-left.is-visible,.reveal-right.is-visible { opacity:1; transform:none; }
1189.reveal-scale { opacity:0; transform:scale(.94);
1190  transition:opacity .65s var(--out),transform .65s var(--spring); }
1191.reveal-scale.is-visible { opacity:1; transform:none; }
1192
1193/* ── PREFERS REDUCED MOTION ─────────────────────── */
1194@media(prefers-reduced-motion:reduce){
1195  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
1196}
1197
1198/* ── LAYOUT ─────────────────────────────────────── */
1199.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }
1200@media(min-width:768px){ .wrap{ padding:0 32px; } }
1201@media(max-width:767px){ .wrap{ padding:0 18px; } }
1202
1203/* ── PILL ───────────────────────────────────────── */
1204.pill {
1205  display:inline-flex; align-items:center; gap:6px;
1206  font-size:.7rem; font-weight:600;
1207  letter-spacing:.07em; text-transform:uppercase;
1208  padding:5px 13px; border-radius:100px;
1209  position:relative; overflow:hidden;
1210}
1211.pill::after {
1212  content:''; position:absolute; inset:0;
1213  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32) 50%,transparent);
1214  background-size:300px 100%;
1215  animation:shimmerPill 3.5s ease-in-out infinite;
1216  pointer-events:none; border-radius:inherit;
1217}
1218.pill-dot   { width:5px; height:5px; border-radius:50%; background:currentColor; }
1219.pill-ocean { background:rgba(26,58,47,.1); color:var(--ocean); }
1220.pill-peach { background:rgba(255,205,173,.35); color:#7a4016; }
1221.pill-white { background:rgba(255,255,255,.15); color:#fff; }
1222.pill-teal  { background:rgba(4,169,167,.13); color:var(--indigo); }
1223
1224/* ── BUTTONS ────────────────────────────────────── */
1225.btn {
1226  display:inline-flex; align-items:center; gap:9px;
1227  font-family:'Cabin',sans-serif;
1228  font-size:.93rem; font-weight:600;
1229  text-decoration:none; border:none; cursor:pointer;
1230  position:relative; overflow:hidden;
1231  transition:transform .22s var(--spring),box-shadow .22s,background .18s,color .18s,border-color .18s;
1232  -webkit-tap-highlight-color:transparent;
1233}
1234.btn:active { transform:scale(.96)!important; }
1235.btn-ripple {
1236  position:absolute; border-radius:50%; pointer-events:none;
1237  background:rgba(255,255,255,.25);
1238  transform:scale(0); animation:ripple .6s ease-out forwards;
1239}
1240.btn-primary {
1241  background:var(--ocean); color:#fff;
1242  padding:14px 26px; border-radius:var(--r-sm);
1243  box-shadow:0 4px 16px rgba(26,58,47,.22);
1244}
1245.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(26,58,47,.32); }
1246.btn i { display:inline-block; transition:transform .22s var(--spring); }
1247.btn:hover i { transform:translateX(4px); }
1248.btn-ghost {
1249  background:rgba(255,255,255,.1); color:#fff;
1250  padding:14px 26px; border-radius:var(--r-sm);
1251  border:1.5px solid rgba(255,255,255,.22);
1252  display:inline-flex; align-items:center; gap:9px;
1253  font-weight:600; font-size:.93rem; text-decoration:none;
1254  transition:background .2s,transform .22s var(--spring);
1255}
1256.btn-ghost:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }
1257
1258/* ── TOUCH STATES ───────────────────────────────── */
1259@media(hover:none){
1260  .btn:active,.btn-ghost:active { transform:scale(.95)!important; filter:brightness(.92); }
1261}
1262
1263/* ═══════════════════════════════════════════════
1264   NAV — identical to home & services
1265═══════════════════════════════════════════════ */
1266.nav-wrap {
1267  position:fixed; top:0; left:0; right:0; z-index:200;
1268  padding:0 20px;
1269  transition:background .38s var(--smooth),box-shadow .38s var(--smooth);
1270}
1271@media(min-width:768px){ .nav-wrap{ padding:0 32px; } }
1272.nav-wrap.scrolled {
1273  background:rgba(240,255,219,.92);
1274  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
1275  box-shadow:0 1px 0 rgba(26,58,47,.08);
1276}
1277.nav-inner {
1278  max-width:1160px; margin:0 auto;
1279  height:64px; display:flex; align-items:center; justify-content:space-between;
1280}
1281@media(max-width:767px){ .nav-inner{ height:60px; } }
1282.nav-logo { display:flex; align-items:center; text-decoration:none; transition:opacity .2s; }
1283.nav-logo:hover { opacity:.72; }
1284.nav-logo-img { height:96px; width:auto; object-fit:contain; display:block; }
1285@media(max-width:767px){ .nav-logo-img{ height:52px; } }
1286.nav-links { display:none; align-items:center; gap:30px; list-style:none; }
1287@media(min-width:768px){ .nav-links{ display:flex; } }
1288.nav-links a {
1289  font-size:.85rem; font-weight:500; color:var(--muted);
1290  text-decoration:none; position:relative; padding:4px 0; transition:color .2s;
1291}
1292.nav-links a::after {
1293  content:''; position:absolute; bottom:-2px; left:0; right:0;
1294  height:1.5px; background:var(--ocean);
1295  transform:scaleX(0); transform-origin:left;
1296  transition:transform .28s var(--spring);
1297}
1298.nav-links a:hover,.nav-links a.active { color:var(--ocean); }
1299.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
1300.nav-cta {
1301  background:var(--ocean)!important; color:#fff!important;
1302  padding:9px 20px!important; border-radius:var(--r-sm)!important;
1303  transition:background .2s,transform .2s var(--spring)!important;
1304}
1305.nav-cta::after { display:none!important; }
1306.nav-cta:hover { background:var(--ocean-h)!important; transform:translateY(-1px)!important; }
1307.nav-mob {
1308  display:flex; flex-direction:column; gap:5px;
1309  background:none; border:none; cursor:pointer; padding:8px;
1310  color:var(--ocean); -webkit-tap-highlight-color:transparent;
1311}
1312@media(min-width:768px){ .nav-mob{ display:none; } }
1313.nav-mob span { display:block; width:22px; height:2px; background:currentColor; border-radius:2px; transition:all .28s var(--smooth); }
1314.nav-mob.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
1315.nav-mob.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
1316.nav-mob.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
1317.nav-drawer {
1318  display:none; flex-direction:column;
1319  position:absolute; top:60px; left:0; right:0;
1320  background:rgba(240,255,219,.97);
1321  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
1322  padding:16px 18px 24px; gap:4px;
1323  box-shadow:0 12px 40px rgba(26,58,47,.1);
1324  border-top:1px solid rgba(26,58,47,.07);
1325  transform:translateY(-8px); opacity:0;
1326  transition:opacity .25s var(--out),transform .25s var(--out);
1327}
1328.nav-drawer.open { display:flex; opacity:1; transform:none; }
1329.nav-drawer a {
1330  font-size:.95rem; font-weight:500; color:var(--ocean);
1331  text-decoration:none; padding:13px 0;
1332  border-bottom:1px solid rgba(26,58,47,.07);
1333  display:flex; align-items:center; justify-content:space-between;
1334  transition:opacity .2s;
1335}
1336.nav-drawer a:last-child { border-bottom:none; }
1337.nav-drawer a:hover { opacity:.65; }
1338.nav-drawer-cta {
1339  margin-top:12px; display:block;
1340  background:var(--ocean); color:#fff!important;
1341  padding:14px 20px; border-radius:var(--r-sm);
1342  text-align:center; font-weight:600; border:none!important;
1343}
1344
1345/* ═══════════════════════════════════════════════
1346   PAGE HERO
1347═══════════════════════════════════════════════ */
1348.about-hero {
1349  padding-top:64px;
1350  background:var(--cream);
1351  position:relative; overflow:hidden;
1352  min-height:80svh;
1353  display:flex; align-items:center;
1354}
1355.ah-glow {
1356  position:absolute; border-radius:50%; pointer-events:none;
1357}
1358.ah-g1 {
1359  width:min(600px,130vw); height:min(600px,130vw);
1360  background:radial-gradient(circle,rgba(4,169,167,.2) 0%,transparent 65%);
1361  top:-20%; right:-15%;
1362}
1363.ah-g2 {
1364  width:min(400px,90vw); height:min(400px,90vw);
1365  background:radial-gradient(circle,rgba(255,205,173,.28) 0%,transparent 65%);
1366  bottom:-10%; left:-8%;
1367}
1368.ah-inner {
1369  padding:72px 0 80px;
1370  width:100%;
1371}
1372@media(max-width:767px){ .ah-inner{ padding:52px 0 56px; } }
1373
1374.ah-grid {
1375  display:grid; grid-template-columns:1fr;
1376  gap:48px; align-items:center;
1377}
1378@media(min-width:900px){ .ah-grid{ grid-template-columns:1fr 1fr; gap:72px; } }
1379
1380/* Hero text */
1381.ah-eyebrow { animation:fadeUp .7s .05s var(--out) both; }
1382.ah-h1 {
1383  font-family:'Nanum Myeongjo',serif;
1384  font-size:clamp(2.2rem,7.5vw,4rem);
1385  font-weight:400; line-height:1.08;
1386  letter-spacing:-.04em; color:var(--ocean);
1387  margin:16px 0 0;
1388  animation:fadeUp .7s .14s var(--out) both;
1389}
1390.ah-h1 em {
1391  font-style:italic; color:var(--indigo);
1392  position:relative;
1393}
1394.ah-h1 em::after {
1395  content:''; position:absolute;
1396  left:0; right:0; bottom:2px;
1397  height:2.5px; background:var(--peach); border-radius:2px;
1398  transform-origin:left;
1399  animation:drawLine .75s 1.1s var(--spring) both;
1400}
1401.ah-lead {
1402  font-size:1.1rem; color:var(--muted);
1403  line-height:1.82; max-width:520px;
1404  margin-top:20px;
1405  animation:fadeUp .7s .22s var(--out) both;
1406}
1407@media(max-width:767px){ .ah-lead{ font-size:1rem; } }
1408
1409/* Hero visual */
1410.ah-visual { animation:fadeIn .9s .3s both; }
1411@media(max-width:899px){ .ah-visual{ display:none; } }
1412.ah-photo-wrap {
1413  position:relative;
1414  border-radius:var(--r-xl); overflow:hidden;
1415  height:440px;
1416}
1417.ah-photo-wrap img {
1418  width:100%; height:100%; object-fit:cover;
1419  transition:transform 6s ease;
1420}
1421.ah-photo-wrap:hover img { transform:scale(1.04); }
1422.ah-photo-overlay {
1423  position:absolute; inset:0;
1424  background:linear-gradient(160deg,transparent 45%,rgba(26,58,47,.4) 100%);
1425}
1426/* Floating quote card */
1427.ah-quote-card {
1428  position:absolute; bottom:24px; left:-28px;
1429  background:rgba(255,255,255,.93);
1430  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
1431  border:1px solid rgba(255,255,255,.72);
1432  border-radius:var(--r-md);
1433  padding:18px 20px;
1434  max-width:240px;
1435  box-shadow:0 10px 36px rgba(26,58,47,.14);
1436  animation:slideR .8s .95s both;
1437  transition:transform .3s var(--spring);
1438}
1439.ah-quote-card:hover { transform:translateY(-4px) scale(1.015); }
1440.ah-quote-text {
1441  font-family:'Nanum Myeongjo',serif;
1442  font-style:italic; font-size:.92rem;
1443  color:var(--ocean); line-height:1.55;
1444}
1445.ah-quote-attr {
1446  font-size:.68rem; font-weight:600;
1447  color:var(--muted); margin-top:10px;
1448  text-transform:uppercase; letter-spacing:.06em;
1449}
1450
1451/* ═══════════════════════════════════════════════
1452   MARQUEE BAND
1453═══════════════════════════════════════════════ */
1454.marquee-sec { background:var(--ocean); padding:16px 0; overflow:hidden; }
1455@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
1456.marquee-track {
1457  display:flex; align-items:center;
1458  width:max-content;
1459  animation:marquee 30s linear infinite;
1460}
1461.marquee-track:hover { animation-play-state:paused; }
1462.marquee-item {
1463  display:flex; align-items:center; gap:9px;
1464  padding:0 32px; white-space:nowrap;
1465  font-size:.8rem; font-weight:500;
1466  color:rgba(255,255,255,.6);
1467  border-right:1px solid rgba(255,255,255,.12);
1468}
1469.marquee-item strong { color:#fff; }
1470.marquee-item i { font-size:14px; color:var(--yellow); transition:transform .2s var(--spring); }
1471.marquee-item:hover i { transform:scale(1.3) rotate(10deg); }
1472@media(max-width:767px){ .marquee-item{ padding:0 22px; font-size:.75rem; } }
1473
1474/* ═══════════════════════════════════════════════
1475   ORIGIN STORY
1476═══════════════════════════════════════════════ */
1477.origin-sec {
1478  padding:96px 0;
1479  background:#fff;
1480  position:relative;
1481}
1482@media(max-width:767px){ .origin-sec{ padding:64px 0; } }
1483
1484.origin-grid {
1485  display:grid; grid-template-columns:1fr;
1486  gap:56px; align-items:start;
1487}
1488@media(min-width:900px){ .origin-grid{ grid-template-columns:5fr 4fr; gap:80px; } }
1489
1490/* Pull quote accent */
1491.origin-body h2 {
1492  font-family:'Nanum Myeongjo',serif;
1493  font-size:clamp(1.75rem,4.5vw,2.6rem);
1494  font-weight:400; line-height:1.12;
1495  letter-spacing:-.03em; color:var(--ocean);
1496  margin-bottom:24px;
1497}
1498.origin-body p {
1499  font-size:1rem; color:var(--muted);
1500  line-height:1.82; margin-bottom:20px;
1501}
1502.origin-body p:last-child { margin-bottom:0; }
1503
1504/* Pull-quote block */
1505.pull-quote {
1506  border-left:3px solid var(--yellow);
1507  padding:18px 22px;
1508  background:var(--cream);
1509  border-radius:0 var(--r-md) var(--r-md) 0;
1510  margin:28px 0;
1511}
1512.pull-quote p {
1513  font-family:'Nanum Myeongjo',serif;
1514  font-style:italic;
1515  font-size:1.05rem; line-height:1.72;
1516  color:var(--ocean); margin:0;
1517}
1518
1519/* Side stats panel */
1520.origin-aside { display:flex; flex-direction:column; gap:16px; }
1521@media(min-width:900px){ .origin-aside{ position:sticky; top:90px; } }
1522
1523.origin-stat-card {
1524  background:var(--cream);
1525  border-radius:var(--r-lg);
1526  padding:28px 24px;
1527  border:1px solid rgba(26,58,47,.07);
1528  transition:transform .28s var(--spring), box-shadow .28s;
1529}
1530.origin-stat-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(26,58,47,.08); }
1531.origin-stat-num {
1532  font-family:'Nanum Myeongjo',serif;
1533  font-size:2.8rem; font-weight:400;
1534  color:var(--ocean); line-height:1; letter-spacing:-.04em;
1535}
1536.origin-stat-lbl {
1537  font-size:.82rem; color:var(--muted);
1538  margin-top:6px; line-height:1.55;
1539}
1540.origin-photo {
1541    border-radius: var(--r-lg);
1542    overflow: hidden;
1543    height: 440px;
1544    transition: box-shadow .28s;
1545}
1546
1547.origin-photo:hover {
1548    box-shadow: 0 12px 36px rgba(26,58,47,.12);
1549}
1550
1551.origin-photo img {
1552    width: 100%;
1553    height: 100%;
1554    object-fit: cover;
1555    transition: transform 5s ease;
1556}
1557
1558.origin-photo:hover img {
1559    transform: scale(1.04);
1560}
1561
1562@media (max-width: 767px) {
1563    .origin-photo {
1564        height: 300px;
1565    }
1566}
1567
1568/* ═══════════════════════════════════════════════
1569   WHAT WE DO
1570═══════════════════════════════════════════════ */
1571.what-sec {
1572  padding:96px 0;
1573  background:var(--ocean);
1574  position:relative; overflow:hidden;
1575}
1576@media(max-width:767px){ .what-sec{ padding:64px 0; } }
1577.what-orb {
1578  position:absolute; border-radius:50%; pointer-events:none;
1579}
1580.wo1 {
1581  width:min(500px,120vw); height:min(500px,120vw);
1582  background:radial-gradient(circle,rgba(4,169,167,.14) 0%,transparent 65%);
1583  top:-20%; right:-15%;
1584}
1585.wo2 {
1586  width:min(350px,80vw); height:min(350px,80vw);
1587  background:radial-gradient(circle,rgba(255,205,173,.1) 0%,transparent 65%);
1588  bottom:-15%; left:-8%;
1589}
1590.what-inner { position:relative; z-index:2; }
1591
1592.what-grid {
1593  display:grid; grid-template-columns:1fr;
1594  gap:52px; align-items:start;
1595  margin-top:56px;
1596}
1597@media(min-width:768px){ .what-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
1598@media(max-width:767px){ .what-grid{ margin-top:36px; } }
1599
1600.what-text p {
1601  font-size:1rem; color:rgba(255,255,255,.72);
1602  line-height:1.82; margin-bottom:18px;
1603}
1604.what-text p:last-child { margin-bottom:0; }
1605.what-text strong { color:#fff; font-weight:600; }
1606
1607.what-distinction {
1608  background:rgba(255,255,255,.07);
1609  border:1px solid rgba(255,255,255,.12);
1610  border-radius:var(--r-lg);
1611  padding:28px 24px;
1612  display:flex; flex-direction:column; gap:14px;
1613}
1614.wd-row {
1615  display:flex; align-items:flex-start; gap:14px;
1616  padding-bottom:14px;
1617  border-bottom:1px solid rgba(255,255,255,.08);
1618}
1619.wd-row:last-child { padding-bottom:0; border-bottom:none; }
1620.wd-icon {
1621  width:40px; height:40px; flex-shrink:0;
1622  border-radius:10px;
1623  display:flex; align-items:center; justify-content:center;
1624  transition:transform .25s var(--spring);
1625}
1626.wd-row:hover .wd-icon { transform:scale(1.1) rotate(6deg); }
1627.wd-icon i { font-size:18px; }
1628.wd-icon.teal { background:rgba(4,169,167,.2); }
1629.wd-icon.teal i { color:#04A9A7; }
1630.wd-icon.peach { background:rgba(255,205,173,.15); }
1631.wd-icon.peach i { color:var(--peach); }
1632.wd-icon.cream { background:rgba(240,255,219,.12); }
1633.wd-icon.cream i { color:var(--cream); }
1634.wd-label {
1635  font-family:'Nanum Myeongjo',serif;
1636  font-size:.95rem; color:#fff;
1637  line-height:1.35; margin-bottom:4px;
1638}
1639.wd-desc { font-size:.83rem; color:rgba(255,255,255,.6); line-height:1.6; }
1640
1641/* ═══════════════════════════════════════════════
1642   CORE VALUES
1643═══════════════════════════════════════════════ */
1644.values-sec {
1645  padding:96px 0;
1646  background:var(--cream);
1647}
1648@media(max-width:767px){ .values-sec{ padding:64px 0; } }
1649
1650.values-intro {
1651  max-width:600px; margin-bottom:60px;
1652}
1653@media(max-width:767px){ .values-intro{ margin-bottom:40px; } }
1654
1655.values-grid {
1656  display:grid; grid-template-columns:1fr;
1657  gap:16px;
1658}
1659@media(min-width:640px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
1660@media(min-width:1024px){ .values-grid{ grid-template-columns:repeat(3,1fr); } }
1661
1662.value-card {
1663  background:#fff;
1664  border-radius:var(--r-xl);
1665  padding:32px 28px;
1666  border:1px solid rgba(26,58,47,.07);
1667  display:flex; flex-direction:column; gap:16px;
1668  transition:transform .3s var(--spring), box-shadow .3s, border-color .28s;
1669  position:relative; overflow:hidden;
1670}
1671.value-card::before {
1672  content:''; position:absolute; inset:0;
1672 opacity:0;
1673  transition:opacity .3s;
1674}
1675.value-card:hover { transform:translateY(-5px); box-shadow:0 20px 56px rgba(26,58,47,.1); border-color:rgba(26,58,47,.14); }
1676.value-card:hover::before { opacity:1; }
1677
1678/* Card accent colours */
1679.vc-teal  { }
1680.vc-teal::before  { background:radial-gradient(circle at 80% 80%,rgba(4,169,167,.07) 0%,transparent 55%); }
1681.vc-peach { }
1682.vc-peach::before { background:radial-gradient(circle at 80% 80%,rgba(255,205,173,.14) 0%,transparent 55%); }
1683.vc-ocean { background:var(--ocean); border-color:var(--ocean); }
1684.vc-ocean::before { background:radial-gradient(circle at 80% 80%,rgba(4,169,167,.12) 0%,transparent 55%); }
1685
1686.value-ico {
1687  width:48px; height:48px; border-radius:14px;
1688  display:flex; align-items:center; justify-content:center;
1689  transition:transform .3s var(--spring), background .22s;
1690}
1691.vc-teal  .value-ico { background:rgba(4,169,167,.12); }
1692.vc-peach .value-ico { background:rgba(255,205,173,.25); }
1693.vc-ocean .value-ico { background:rgba(255,255,255,.12); }
1694.value-ico i { font-size:22px; color:var(--ocean); }
1695.vc-ocean .value-ico i { color:#fff; }
1696.value-card:hover .value-ico { transform:scale(1.12) rotate(-6deg); }
1697.vc-teal:hover  .value-ico { background:var(--ocean); }
1698.vc-teal:hover  .value-ico i { color:#fff; }
1699.vc-peach:hover .value-ico { background:var(--ocean); }
1700.vc-peach:hover .value-ico i { color:#fff; }
1701
1702.value-title {
1703  font-family:'Nanum Myeongjo',serif;
1704  font-size:1.2rem; font-weight:400;
1705  color:var(--ocean); line-height:1.25;
1706}
1707.vc-ocean .value-title { color:var(--yellow); }
1708
1709.value-body {
1710  font-size:.88rem; color:var(--muted); line-height:1.72;
1711}
1712.vc-ocean .value-body { color:rgba(255,255,255,.68); }
1713
1714/* ═══════════════════════════════════════════════
1715   MISSION + VISION
1716═══════════════════════════════════════════════ */
1717.mv-sec {
1718  padding:96px 0;
1719  background:#fff;
1720}
1721@media(max-width:767px){ .mv-sec{ padding:64px 0; } }
1722
1723.mv-grid {
1724  display:grid; grid-template-columns:1fr;
1725  gap:20px;
1726}
1727@media(min-width:768px){ .mv-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
1728
1729.mv-card {
1730  border-radius:var(--r-xl);
1731  padding:44px 36px;
1732  position:relative; overflow:hidden;
1733  transition:transform .3s var(--spring), box-shadow .3s;
1734}
1735.mv-card:hover { transform:translateY(-5px); box-shadow:0 24px 64px rgba(26,58,47,.13); }
1736@media(max-width:767px){ .mv-card{ padding:32px 24px; } }
1737
1738.mv-mission { background:var(--ocean); }
1739.mv-vision  { background:var(--cream); border:1px solid rgba(26,58,47,.08); }
1740
1741/* decorative orbs inside cards */
1742.mv-card-orb {
1743  position:absolute; border-radius:50%; pointer-events:none;
1744}
1745.mv-mission .mv-card-orb {
1746  width:280px; height:280px;
1747  background:radial-gradient(circle,rgba(4,169,167,.18) 0%,transparent 65%);
1748  bottom:-80px; right:-60px;
1749}
1750.mv-vision .mv-card-orb {
1751  width:250px; height:250px;
1752  background:radial-gradient(circle,rgba(26,58,47,.06) 0%,transparent 65%);
1753  bottom:-60px; right:-40px;
1754}
1755.mv-card-inner { position:relative; z-index:2; }
1756
1757.mv-label {
1758  display:inline-flex; align-items:center; gap:7px;
1759  font-size:.68rem; font-weight:700;
1760  letter-spacing:.09em; text-transform:uppercase;
1761  margin-bottom:20px;
1762}
1763.mv-mission .mv-label { color:rgba(255,255,255,.55); }
1764.mv-vision  .mv-label { color:var(--muted); }
1765.mv-label i { font-size:14px; }
1766.mv-mission .mv-label i { color:var(--yellow); }
1767.mv-vision  .mv-label i { color:var(--ocean); }
1768
1769.mv-heading {
1770  font-family:'Nanum Myeongjo',serif;
1771  font-size:clamp(1.5rem,3.5vw,2rem);
1772  font-weight:400; line-height:1.18;
1773  letter-spacing:-.025em;
1774  margin-bottom:16px;
1775}
1776.mv-mission .mv-heading { color:#fff; }
1777.mv-vision  .mv-heading { color:var(--ocean); }
1778
1779.mv-body {
1780  font-size:.95rem; line-height:1.78;
1781}
1782.mv-mission .mv-body { color:rgba(255,255,255,.7); }
1783.mv-vision  .mv-body { color:var(--muted); }
1784
1785/* ═══════════════════════════════════════════════
1786   CTA FOOTER SECTION
1787═══════════════════════════════════════════════ */
1788.about-cta {
1789  padding:96px 0;
1790  background:var(--cream);
1791  position:relative; overflow:hidden;
1792}
1793@media(max-width:767px){ .about-cta{ padding:64px 0; } }
1794.ac-glow {
1795  position:absolute; border-radius:50%; pointer-events:none;
1796}
1797.ac-g1 {
1798  width:min(480px,110vw); height:min(480px,110vw);
1799  background:radial-gradient(circle,rgba(4,169,167,.18) 0%,transparent 65%);
1800  top:-20%; right:-10%;
1801}
1802.ac-inner { text-align:center; position:relative; z-index:2; }
1803.ac-heading {
1804  font-family:'Nanum Myeongjo',serif;
1805  font-size:clamp(2rem,6vw,3.4rem);
1806  font-weight:400; line-height:1.1;
1807  letter-spacing:-.03em; color:var(--ocean);
1808  margin:18px 0 14px;
1809}
1810.ac-heading em { font-style:italic; color:var(--indigo); }
1811.ac-sub {
1812  font-size:1rem; color:var(--muted);
1813  max-width:440px; margin:0 auto 36px; line-height:1.75;
1814}
1815.ac-actions {
1816  display:flex; align-items:center; justify-content:center;
1817  flex-wrap:wrap; gap:12px;
1818}
1819@media(max-width:767px){
1820  .ac-actions { flex-direction:column; align-items:stretch; }
1821  .ac-actions .btn { width:100%; justify-content:center; padding:16px 20px; }
1822}
1823.btn-outline-dark {
1824  background:transparent; color:var(--ocean);
1825  padding:14px 26px; border-radius:var(--r-sm);
1826  border:1.5px solid rgba(26,58,47,.28);
1827  display:inline-flex; align-items:center; gap:9px;
1828  font-weight:600; font-size:.93rem; text-decoration:none;
1829  transition:background .2s,color .2s,border-color .2s,transform .22s var(--spring);
1830}
1831.btn-outline-dark:hover { background:var(--ocean); color:#fff; border-color:var(--ocean); transform:translateY(-2px); }
1832
1833/* ══════════════════════════════════════════════════════════════
1834   MOBILE-FIRST POLISH  ·  Pure additive — no colour changes
1835══════════════════════════════════════════════════════════════ */
1836
1837/* Respect reduced motion */
1838@media (prefers-reduced-motion: reduce) {
1839  *, *::before, *::after {
1840    animation-duration: .01ms !important;
1841    animation-iteration-count: 1 !important;
1842    transition-duration: .01ms !important;
1843  }
1844}
1845
1846/* ── Safe area insets (notch / home bar) ────── */
1847.nav-wrap    { padding-left: max(20px, env(safe-area-inset-left));
1848               padding-right: max(20px, env(safe-area-inset-right)); }
1849.cta-sec,
1850.about-cta,
1851.what-sec    { padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom))); }
1852
1853/* ── Typography scale (fluid) ───────────────── */
1854@media (max-width: 767px) {
1855  html   { font-size: 15px; }
1856  .wrap  { padding: 0 18px; }
1857  .sec-title { font-size: clamp(1.7rem, 7.2vw, 2.5rem); letter-spacing: -.025em; }
1858  .sec-sub   { font-size: .95rem; margin-top: 10px; }
1859}
1860
1861/* ── Nav ────────────────────────────────────── */
1862@media (max-width: 767px) {
1863  .nav-inner      { height: 60px; }
1864  .nav-logo-img   { height: 52px; }
1865  .nav-drawer     { top: 60px; padding: 16px 18px 24px; }
1866  .nav-drawer a   { font-size: .95rem; padding: 14px 0; }
1867  .nav-wrap.scrolled { box-shadow: 0 2px 16px rgba(26,58,47,.12); }
1868}
1869
1870/* ── Hero mobile ────────────────────────────── */
1871@media (max-width: 899px) {
1872  .hero-inner { padding: 44px 0 52px; }
1873  .hero-h1 {
1874    font-size: clamp(2rem, 10.5vw, 3.4rem);
1875    letter-spacing: -.032em;
1876    margin: 12px 0 16px;
1877  }
1878  .hero-p  { font-size: .98rem; max-width: 100%; line-height: 1.75; }
1879  .hero-actions {
1880    margin-top: 24px;
1881    gap: 10px;
1882    flex-direction: column;
1883    align-items: stretch;
1884  }
1885  .hero-actions .btn {
1886    width: 100%;
1887    justify-content: center;
1888    padding: 16px 20px;
1889    font-size: 1rem;
1890    min-height: 52px;      /* comfortable touch target */
1891  }
1892  .hero-stats {
1893    margin-top: 28px;
1894    padding-top: 22px;
1895    gap: 14px;
1896    flex-wrap: nowrap;
1897    justify-content: space-between;
1898  }
1899  .stat-num { font-size: 1.65rem; }
1900  .stat-lbl { font-size: .65rem; }
1901}
1902
1903/* ── Mobile hero snapshot card ──────────────── */
1904.hero-snap {
1905  display: none;
1906  margin-top: 24px;
1907  background: rgba(255,255,255,.9);
1908  backdrop-filter: blur(20px);
1909  -webkit-backdrop-filter: blur(20px);
1910  border: 1px solid rgba(255,255,255,.72);
1911  border-radius: var(--r-lg);
1912  padding: 16px 18px;
1913  box-shadow: 0 8px 28px rgba(26,58,47,.1);
1914}
1915@media (max-width: 899px) { .hero-snap { display: block; } }
1916.hs-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
1917.hs-label { font-size: .62rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
1918.hs-badge { font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: #d1fae5; color: #065f46; }
1919.hs-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
1920.hs-metric  { background: var(--cream); border-radius: 8px; padding: 10px 6px; text-align: center; }
1921.hs-val { font-family: 'Nanum Myeongjo', serif; font-size: 1.1rem; font-weight: 700; color: var(--ocean); line-height: 1; }
1922.hs-lbl { font-size: .57rem; color: var(--muted); margin-top: 3px; }
1923
1924/* ── Pill shimmer ───────────────────────────── */
1925.pill { position: relative; overflow: hidden; }
1926.pill::after {
1927  content: ''; position: absolute; inset: 0;
1928  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3) 50%, transparent);
1929  background-size: 300px 100%;
1930  animation: shimmerPill 3.5s ease-in-out infinite;
1931  pointer-events: none; border-radius: inherit;
1932}
1933@keyframes shimmerPill {
1934  0%   { background-position: -300px 0; }
1935  100% { background-position:  300px 0; }
1936}
1937
1938/* ── Button icon nudge ──────────────────────── */
1939.btn i, .btn-ghost i, .btn-yellow i {
1940  display: inline-block;
1941  transition: transform .22s var(--spring);
1942}
1943.btn:hover i, .btn-ghost:hover i, .btn-yellow:hover i { transform: translateX(4px); }
1944.btn-outline i { display: inline-block; transition: transform .22s var(--spring); }
1945.btn-outline:hover i { transform: scale(1.2); }
1946
1947/* ── Touch feedback ─────────────────────────── */
1948@media (hover: none) {
1949  .btn:active, .btn-ghost:active, .btn-yellow:active {
1950    transform: scale(.95) !important; filter: brightness(.92);
1951  }
1952  .svc-card:active, .trust-card:active, .testi-card:active,
1953  .hiw-card:active, .plan-card:active, .value-card:active,
1954  .mv-card:active  { transform: scale(.98) !important; }
1955  .qn-pill:active  { transform: scale(.96) !important; }
1956  .gallery-item:active { transform: scale(.97) !important; }
1957  .faq-btn:active  { opacity: .8; }
1958  .svc-entry:active { transform: scale(.99) !important; }
1959}
1960
1961/* ── Focus upgrade ──────────────────────────── */
1962:focus-visible {
1963  outline: 2px solid var(--yellow);
1964  outline-offset: 3px;
1965  border-radius: 5px;
1966  box-shadow: 0 0 0 4px rgba(4,169,167,.18);
1967}
1968
1969/* ── Minimum touch target sizes ─────────────── */
1970@media (max-width: 767px) {
1971  .faq-btn   { min-height: 52px; }
1972  .nav-mob   { min-height: 44px; min-width: 44px; }
1973  .btn, .btn-ghost, .btn-yellow,
1974  .btn-outline, .btn-outline-dark { min-height: 48px; }
1975  .plan-cta, .svc-entry-book { min-height: 48px; }
1976  .nav-drawer a { min-height: 48px; }
1977}
1978
1979/* ── Trust cards mobile ─────────────────────── */
1980@media (max-width: 639px) {
1981  .trust-sec  { padding: 44px 0; }
1982  .trust-grid { gap: 10px; }
1983  .trust-card {
1984    padding: 20px 18px;
1985    flex-direction: row;
1986    align-items: flex-start;
1987    gap: 14px;
1988  }
1989  .trust-ico  { flex-shrink: 0; margin-top: 2px; }
1990}
1991/* Tilt on hover */
1992.trust-ico { transition: background .22s var(--spring), transform .3s var(--spring); }
1993.trust-card:hover .trust-ico { transform: scale(1.14) rotate(-7deg); }
1994
1995/* ── Services scroll ────────────────────────── */
1996@media (max-width: 767px) {
1997  .svc-sec    { padding: 60px 0; }
1998  .svc-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
1999  .svc-header .sec-sub { max-width: 100%; }
2000  .svc-scroll {
2001    margin: 0 -18px;
2002    padding-left: 18px; padding-right: 18px; padding-bottom: 20px;
2003  }
2004  .svc-card  { flex: 0 0 74vw; min-width: 220px; max-width: 270px; }
2005  .svc-dots  { margin-top: 14px; }
2006}
2007/* Scroll dot pill */
2008.svc-dot {
2009  border-radius: 4px;
2010  transition: background .25s var(--spring), width .3s var(--spring);
2011}
2012.svc-dot.active { width: 18px; border-radius: 4px; }
2013
2014/* ── How it works ───────────────────────────── */
2015@media (max-width: 767px) {
2016  .hiw-sec     { padding: 60px 0; }
2017  .hiw-header  { margin-bottom: 32px; }
2018  .hiw-card    { padding: 24px 20px; }
2019  .hiw-step-num { font-size: 2.4rem; margin-bottom: 12px; }
2020}
2021.hiw-ico { transition: transform .28s var(--spring); }
2022.hiw-card:hover .hiw-ico { transform: scale(1.14) rotate(8deg); }
2023
2024/* ── Plans ──────────────────────────────────── */
2025@media (max-width: 767px) {
2026  .plans-sec { padding: 60px 0; }
2027  .plans-scroll {
2028    margin: 28px -18px 0;
2029    padding-left: 18px; padding-right: 18px; padding-bottom: 20px;
2030  }
2031  .plan-card { flex: 0 0 76vw; min-width: 230px; max-width: 280px; }
2032}
2033/* Featured breathe pulse */
2034.plan-featured { animation: breathePlan 4.5s ease-in-out infinite; }
2035.plan-featured:hover { animation: none; }
2036@keyframes breathePlan { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
2037
2038/* ── App snapshot ───────────────────────────── */
2039@media (max-width: 767px) {
2040  .snapshot-sec  { padding: 60px 0; }
2041  .snapshot-grid { gap: 32px; }
2042  .mockup-card   { max-width: 100%; padding: 18px; }
2043}
2044/* Mockup float */
2045.mockup-card {
2046  animation: floatY 5s ease-in-out infinite;
2047  transition: box-shadow .3s, transform .3s var(--spring);
2048}
2049.mockup-card:hover { animation: none; transform: translateY(-6px); box-shadow: 0 32px 80px rgba(26,58,47,.18); }
2050.mockup-metric { transition: background .2s, transform .22s var(--spring); cursor: default; }
2051.mockup-metric:hover { background: var(--ocean); transform: scale(1.04); }
2052.mockup-metric:hover .m-val, .mockup-metric:hover .m-lbl { color: #fff !important; }
2053
2054/* ── Checklist items ────────────────────────── */
2055.sc-item { transition: transform .22s var(--spring); }
2056.sc-item:hover { transform: translateX(5px); }
2057.sc-check { transition: background .22s var(--spring), transform .3s var(--spring), box-shadow .22s; }
2058.sc-item:hover .sc-check { transform: scale(1.18) rotate(12deg); box-shadow: 0 3px 10px rgba(26,58,47,.18); }
2059
2060/* ── FAQ ────────────────────────────────────── */
2061@media (max-width: 767px) {
2062  .faq-sec    { padding: 60px 0; }
2063  .faq-header { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
2064  .faq-btn    { padding: 18px 0; font-size: .97rem; }
2065  .faq-answer-body { font-size: .93rem; }
2066}
2067
2068/* ── Testimonial dots ───────────────────────── */
2069.testi-dots {
2070  display: none;
2071  justify-content: center;
2072  gap: 7px;
2073  margin-top: 16px;
2074}
2075@media (max-width: 767px) { .testi-dots { display: flex; } }
2076.testi-dot {
2077  width: 6px; height: 6px; border-radius: 4px;
2078  background: rgba(26,58,47,.2);
2079  transition: background .25s var(--spring), width .3s var(--spring);
2080}
2081.testi-dot.active { width: 18px; background: var(--ocean); }
2082
2083/* ── CTA mobile ─────────────────────────────── */
2084@media (max-width: 767px) {
2085  .cta-sec    { padding: 64px 0 max(64px, calc(48px + env(safe-area-inset-bottom))); }
2086  .cta-h2     { font-size: clamp(1.85rem, 8vw, 3rem); }
2087  .cta-actions {
2088    flex-direction: column; align-items: stretch;
2089  }
2090  .cta-actions .btn, .cta-actions .btn-ghost {
2091    width: 100%; justify-content: center; padding: 16px 20px;
2092  }
2093  .cta-trust  { gap: 14px; flex-direction: column; align-items: center; }
2094}
2095
2096/* ── Scroll snap momentum ───────────────────── */
2097.svc-scroll, .testi-scroll, .plans-scroll {
2098  scroll-padding-left: 18px;
2099  overscroll-behavior-x: contain;
2100  -webkit-overflow-scrolling: touch;
2101}
2102
2103/* ── Marquee mobile ─────────────────────────── */
2104@media (max-width: 767px) {
2105  .marquee-item { padding: 0 22px; font-size: .75rem; }
2106}
2107.marquee-item i { display: inline-block; transition: transform .2s var(--spring); }
2108.marquee-item:hover i { transform: scale(1.3) rotate(10deg); }
2109
2110/* ── Lazy image shimmer ─────────────────────── */
2111img[loading="lazy"] {
2112  background: linear-gradient(90deg,rgba(240,255,219,.5) 25%,rgba(255,255,255,.3) 50%,rgba(240,255,219,.5) 75%);
2113  background-size: 400px 100%;
2114  animation: shimmerPill 1.8s ease-in-out infinite;
2115}
2116img[loading="lazy"].img-loaded { animation: none; background: none; }
2117
2118/* ── Page-hero (services & about) ───────────── */
2119@media (max-width: 767px) {
2120  .page-hero, .about-hero { padding-bottom: 0; }
2121  .ph-inner, .ah-inner    { padding-top: 48px; }
2122  .ph-title, .ah-h1 {
2123    font-size: clamp(2rem, 9.5vw, 3rem); letter-spacing: -.032em;
2124  }
2125  .ph-sub, .ah-lead { font-size: .96rem; max-width: 100%; }
2126  .ph-actions .btn, .ah-actions .btn { width: 100%; justify-content: center; }
2127  .ph-wave svg { height: 36px; }
2128  .ph-inner {
2129    grid-template-columns: 1fr !important;
2130    gap: 18px !important;
2131  }
2132}
2133
2134/* ── Quick-nav (services) ───────────────────── */
2135@media (max-width: 767px) {
2136  .quick-nav {
2137    flex-wrap: nowrap;
2138    overflow-x: auto;
2139    scroll-snap-type: x mandatory;
2140    scrollbar-width: none;
2141    margin: 0 -18px;
2142    padding: 18px 18px 6px;
2143    gap: 8px;
2144  }
2145  .quick-nav::-webkit-scrollbar { display: none; }
2146  .qn-pill {
2147    flex: 0 0 auto; scroll-snap-align: start;
2148    font-size: .74rem; padding: 6px 12px; white-space: nowrap;
2149  }
2150}
2151
2152/* ── Service rows (services page) ───────────── */
2153@media (max-width: 899px) {
2154  .services-list { padding: 52px 0 72px; }
2155  .svc-row       { padding: 40px 0; gap: 26px; }
2156  .svc-row:first-child { padding-top: 0; }
2157  .svc-name      { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
2158  .svc-desc      { font-size: .94rem; }
2159  .svc-more      { font-size: .87rem; padding: 12px 15px; }
2160}
2161@media (max-width: 640px) {
2162  .svc-cards-grid { grid-template-columns: 1fr; }
2163  .svc-entry-img  { height: clamp(160px, 42vw, 220px); }
2164}
2165
2166/* ── Service card tasks hover ───────────────── */
2167.svc-task { transition: background .2s, border-color .2s, transform .25s var(--spring), box-shadow .22s; }
2168.svc-task:hover { transform: translateX(5px); box-shadow: 3px 0 0 0 var(--yellow) inset; }
2169.svc-task-check { transition: background .22s var(--spring), transform .3s var(--spring); }
2170.svc-task:hover .svc-task-check { transform: scale(1.2) rotate(10deg); }
2171
2172/* ── Gallery (services) ─────────────────────── */
2173@media (max-width: 767px) {
2174  .care-gallery  { padding-bottom: 52px; }
2175  .gallery-grid  { gap: 8px; }
2176  .gallery-item  { height: clamp(88px, 20vw, 140px); }
2177  .gallery-item:nth-child(1) { height: clamp(130px, 26vw, 200px); }
2178}
2179.gallery-item { transition: transform .28s var(--spring), box-shadow .28s; }
2180.gallery-item:hover { transform: scale(1.025); box-shadow: 0 10px 32px rgba(26,58,47,.13); }
2181
2182/* ── About page mobile ──────────────────────── */
2183@media (max-width: 767px) {
2184  .origin-sec  { padding: 64px 0; }
2185  .what-sec    { padding: 64px 0; }
2186  .values-sec  { padding: 64px 0; }
2187  .mv-sec      { padding: 64px 0; }
2188  .about-cta   { padding: 64px 0; }
2189  .origin-grid { grid-template-columns: 1fr !important; gap: 36px; }
2190  .what-grid   { grid-template-columns: 1fr !important; gap: 28px; }
2191  .values-grid { grid-template-columns: 1fr; }
2192  .mv-grid     { grid-template-columns: 1fr !important; gap: 16px; }
2193  .mv-card     { padding: 28px 22px; }
2194  .ac-actions  { flex-direction: column; align-items: stretch; }
2195  .ac-actions .btn, .ac-actions .btn-outline-dark { width: 100%; justify-content: center; }
2196}
2197@media (max-width: 639px) {
2198  .ah-h1       { font-size: clamp(2rem, 9vw, 2.8rem); }
2199}
2200.origin-stat-card { transition: transform .28s var(--spring), box-shadow .28s; }
2201.origin-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(26,58,47,.08); }
2202.value-card:hover .value-ico { transform: scale(1.12) rotate(-6deg); }
2203
2204/* ── About CTA mobile ───────────────────────── */
2205@media (max-width: 767px) {
2206  .about-cta .ac-actions { flex-direction: column; align-items: stretch; }
2207}
2208
2209</style>
2210</head>
2211<body class="bg-[#FFF8F2] text-gray-800 font-sans antialiased">
2212
2213  
2214  <nav class="nav-wrap" id="mainNav">
2215  <div class="nav-inner">
2216
2217  <a href="/" class="nav-logo" aria-label="CavalCare home">
2218      <img src="/images/caval-care-logo.png" alt="CavalCare logo" class="nav-logo-img h-10">
2219    </a>
2220
2221    <ul class="nav-links" id="navLinks">
2222      <li><a href="https://cavalcare.org/about">About</a></li>
2223      <li><a href="https://cavalcare.org/services">Services</a></li>
2224      <li><a href="#care-plans">Plans</a></li>
2225      <li><a href="#contact">Contact</a></li>
2226      <li><a href="#care-plans" class="nav-cta">Get Started</a></li>
2227    </ul>
2228
2229    <button class="nav-mob-btn" id="mobBtn" aria-expanded="false">
2230      <span></span>
2231      <span></span>
2232      <span></span>
2233    </button>
2234
2235  </div>
2236</nav>
2237
2238  
2239  <main class="min-h-screen">
2240    
2241
2242<section class="about-hero" aria-label="About CavalCare">
2243  <div class="ah-glow ah-g1" aria-hidden="true"></div>
2244  <div class="ah-glow ah-g2" aria-hidden="true"></div>
2245
2246  <div class="wrap">
2247    <div class="ah-inner">
2248      <div class="ah-grid">
2249
2250        
2251        <div>
2252          <div class="ah-eyebrow">
2253            <span class="pill pill-ocean">
2254              <span class="pill-dot"></span>
2255              Our Story
2256            </span>
2257          </div>
2258
2259          <h1 class="ah-h1">
2260            We started because too many families were going through this
2261            <em>alone</em>
2262          </h1>
2263
2264          <p class="ah-lead">
2265            Someone gets discharged from the hospital. The doctors say "rest at home."
2266            
2267            But at home, there's no healthcare professional. No one monitoring the condition closely as a professional, until there is an emergency...
2268          </p>
2269        </div>
2270
2271        
2272        <div class="ah-visual" aria-hidden="true">
2273          <div class="ah-photo-wrap">
2274            <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=800&h=900&fit=crop"
2275                 alt="Nurse caring for patient at home" loading="eager">
2276            <div class="ah-photo-overlay"></div>
2277          </div>
2278
2279          </div>
2280        </div>
2281
2282      </div>
2283    </div>
2284  </div>
2285</section>
2286
2287
2288
2289<div class="marquee-sec" aria-hidden="true">
2290  <div class="marquee-track">
2291              <div class="marquee-item">
2292        <i class="bi bi-patch-check"></i>
2293        <strong>Licensed Healthcare Professionals</strong>
2294      </div>
2295          <div class="marquee-item">
2296        <i class="bi bi-shield-check"></i>
2297        <strong>Background Verified</strong>
2298      </div>
2299          <div class="marquee-item">
2300        <i class="bi bi-heart"></i>
2301        <strong>Dignity in Every Visit</strong>
2302      </div>
2303          <div class="marquee-item">
2304        <i class="bi bi-bell"></i>
2305        <strong>Real-Time Reports</strong>
2306      </div>
2307          <div class="marquee-item">
2308        <i class="bi bi-clock"></i>
2309        <strong>24 / 7 Coordinators</strong>
2310      </div>
2311          <div class="marquee-item">
2312        <i class="bi bi-house-heart"></i>
2313        <strong>In-Home Professional Care</strong>
2314      </div>
2315          <div class="marquee-item">
2316        <i class="bi bi-people"></i>
2317        <strong>Family-First Approach</strong>
2318      </div>
2319          <div class="marquee-item">
2320        <i class="bi bi-patch-check"></i>
2321        <strong>Licensed Healthcare Professionals</strong>
2322      </div>
2323          <div class="marquee-item">
2324        <i class="bi bi-shield-check"></i>
2325        <strong>Background Verified</strong>
2326      </div>
2327          <div class="marquee-item">
2328        <i class="bi bi-heart"></i>
2329        <strong>Dignity in Every Visit</strong>
2330      </div>
2331          <div class="marquee-item">
2332        <i class="bi bi-bell"></i>
2333        <strong>Real-Time Reports</strong>
2334      </div>
2335          <div class="marquee-item">
2336        <i class="bi bi-clock"></i>
2337        <strong>24 / 7 Coordinators</strong>
2338      </div>
2339          <div class="marquee-item">
2340        <i class="bi bi-house-heart"></i>
2341        <strong>In-Home Professional Care</strong>
2342      </div>
2343          <div class="marquee-item">
2344        <i class="bi bi-people"></i>
2345        <strong>Family-First Approach</strong>
2346      </div>
2347      </div>
2348</div>
2349
2350
2351
2352<section class="origin-sec" aria-labelledby="story-heading">
2353  <div class="wrap">
2354    <div class="origin-grid">
2355
2356      
2357      <div class="origin-body">
2358        
2359        <div class="reveal" style="transition-delay:.08s;">
2360          <h2 id="story-heading">
2361            In Nigeria, when someone leaves the hospital, the expectation is that the family takes over
2362          </h2>
2363        </div>
2364
2365        <div class="reveal" style="transition-delay:.14s;">
2366          <p>
2367            But most families aren't trained healthcare professionals. They're sons and daughters, husbands and wives;
2368            professionals with jobs and children of their own, who love someone deeply and have no idea
2369            how to care for them clinically.
2370          </p>
2371
2372          <div class="pull-quote">
2373            <p>
2374            Meanwhile, the person who just had surgery, or the parent who's getting older, or the mother four weeks postpartum need real medical support. 
2375            </p>
2376          </div>
2377
2378          <p>
2379            We saw this. And we decided to do something about it.
2380          </p>
2381        </div>
2382      </div>
2383
2384      
2385      <div class="origin-aside">
2386          <div class="origin-photo reveal" style="transition-delay:.1s;">
2387              <img src="https://cavalcare.org/images/careplans/elderly-care.png"
2388                  alt="CavalCare nurse with elderly patient"
2389                  loading="lazy">
2390          </div>
2391      </div>
2392
2393    </div>
2394  </div>
2395</section>
2396
2397
2398
2399<section class="what-sec" aria-labelledby="what-heading">
2400  <div class="what-orb wo1" aria-hidden="true"></div>
2401  <div class="what-orb wo2" aria-hidden="true"></div>
2402
2403  <div class="wrap">
2404    <div class="what-inner">
2405
2406      <div class="reveal">
2407        <span class="pill pill-white">
2408          <span class="pill-dot"></span>
2409          What We Do
2410        </span>
2411        <h2 id="what-heading" style="font-family:'Nanum Myeongjo',serif;font-size:clamp(1.9rem,5vw,3rem);font-weight:400;line-height:1.1;letter-spacing:-.03em;color:#fff;margin:14px 0 0;">
2412          We connect Nigerian families with trained, verified nursing professionals for in-home care
2413        </h2>
2414      </div>
2415
2416      <div class="what-grid" style="margin-top:52px;">
2417
2418        <div class="what-text reveal" style="transition-delay:.1s;">
2419          <p>
2420          Whether your loved one needs support after surgery, help through a terminal illness, post-natal recovery care, or consistent elderly support, we will make sure a qualified healthcare professional is there.
2421          </p>
2422          <p>
2423            Not an informal helper. Not a trained caregiver.
2424            <strong>A licensed healthcare professional</strong>, background-checked, matched to your loved one's
2425            specific situation, and accountable to you every step of the way.
2426          </p>
2427        </div>
2428
2429        <div class="what-distinction reveal" style="transition-delay:.18s;">
2430          <div class="wd-row">
2431            <div class="wd-icon teal"><i class="bi bi-patch-check"></i></div>
2432            <div>
2433              <div class="wd-label">Licensed &amp; Verified</div>
2434              <div class="wd-desc">Every healthcare professional carries a valid nursing licence and passes our background verification before being placed with any family.</div>
2435            </div>
2436          </div>
2437          <div class="wd-row">
2438            <div class="wd-icon peach"><i class="bi bi-person-check"></i></div>
2439            <div>
2440              <div class="wd-label">Matched to Your Situation</div>
2441              <div class="wd-desc">We don't send the nearest available healthcare professional. We match based on your loved one's specific clinical needs.</div>
2442            </div>
2443          </div>
2444          <div class="wd-row">
2445            <div class="wd-icon cream"><i class="bi bi-bell"></i></div>
2446            <div>
2447              <div class="wd-label">Accountable to You</div>
2448              <div class="wd-desc">A full post-visit report goes to you after every single visit. You always know what happened, what was done, and what comes next.</div>
2449            </div>
2450          </div>
2451        </div>
2452
2453      </div>
2454    </div>
2455  </div>
2456</section>
2457
2458
2459
2460<section class="values-sec" aria-labelledby="values-heading">
2461  <div class="wrap">
2462
2463    <div class="values-intro reveal">
2464      <span class="pill pill-ocean sec-eyebrow">Our Core Values</span>
2465      <h2 id="values-heading" style="font-family:'Nanum Myeongjo',serif;font-size:clamp(1.9rem,5vw,2.8rem);font-weight:400;line-height:1.1;letter-spacing:-.03em;color:var(--ocean);margin-top:10px;">
2466        The principles we refuse to compromise on
2467      </h2>
2468    </div>
2469
2470    <div class="values-grid">
2471
2472      
2473      <div class="value-card vc-teal reveal" style="transition-delay:.07s;">
2474        <div class="value-ico"><i class="bi bi-hospital"></i></div>
2475        <div class="value-title">Clinical Integrity</div>
2476        <div class="value-body">
2477          We are not replacing doctors or hospitals. Every healthcare professional we place works within the
2478          clinical plan set by your loved one's medical team. We respect medical boundaries.
2479          And we escalate to the hospital when a situation needs immediate attention before
2480          it becomes an emergency.
2481        </div>
2482      </div>
2483
2484      
2485      <div class="value-card vc-peach reveal" style="transition-delay:.14s;">
2486        <div class="value-ico"><i class="bi bi-heart"></i></div>
2487        <div class="value-title">Client First Approach to Care</div>
2488        <div class="value-body">
2489          Many families have experienced loved ones treated as burdens in hospitals.
2490          We ensure that the elderly parent, the disabled child, the post-natal mother,
2491          and the terminal patient are always treated with full human dignity.
2492          This is non-negotiable in every healthcare professional interaction.
2493        </div>
2494      </div>
2495
2496      
2497      <div class="value-card vc-ocean reveal" style="transition-delay:.21s;">
2498        <div class="value-ico"><i class="bi bi-shield-check"></i></div>
2499        <div class="value-title">Security</div>
2500        <div class="value-body">
2501        Every family that books with us is letting a stranger into their home, often to care for someone vulnerable. We don't take that lightly. Background checks, license verification are a crucial part of our recruitment process.
2502        </div>
2503      </div>
2504
2505    </div>
2506  </div>
2507</section>
2508
2509
2510
2511<section class="mv-sec" aria-label="Mission and Vision">
2512  <div class="wrap">
2513
2514    <div class="reveal" style="margin-bottom:48px;">
2515      <span class="pill pill-teal sec-eyebrow">Where We Are Going</span>
2516      <h2 style="font-family:'Nanum Myeongjo',serif;font-size:clamp(1.9rem,5vw,2.8rem);font-weight:400;line-height:1.1;letter-spacing:-.03em;color:var(--ocean);margin-top:10px;">
2517        Our mission &amp; our vision
2518      </h2>
2519    </div>
2520
2521    <div class="mv-grid">
2522
2523      
2524      <div class="mv-card mv-mission reveal" style="transition-delay:.
252408s;">
2525        <div class="mv-card-orb" aria-hidden="true"></div>
2526        <div class="mv-card-inner">
2527          <div class="mv-label">
2528            <i class="bi bi-geo-alt"></i>
2529            Our Mission
2530          </div>
2531          <h3 class="mv-heading">
2532            Bringing professional nursing care into the homes of every Nigerian who needs it
2533          </h3>
2534          <p class="mv-body">
2535          We are bringing professional nursing care in the homes of every Nigerian who needs professional support after hospital discharge, so that healing happens at home, with intention.
2536          </p>
2537        </div>
2538      </div>
2539
2540      
2541      <div class="mv-card mv-vision reveal" style="transition-delay:.16s;">
2542        <div class="mv-card-orb" aria-hidden="true"></div>
2543        <div class="mv-card-inner">
2544          <div class="mv-label">
2545            <i class="bi bi-eye"></i>
2546            Our Vision
2547          </div>
2548          <h3 class="mv-heading">
2549            No one leaves the hospital without a care plan waiting at home
2550          </h3>
2551          <p class="mv-body">
2552           
2553            We see a future where, no one leaves the hospital without a clear, professional, and compassionate care plan waiting for them at home, regardless of location.
2554          </p>
2555        </div>
2556      </div>
2557
2558    </div>
2559  </div>
2560</section>
2561
2562
2563
2564<section class="about-cta" aria-label="Get started with CavalCare">
2565  <div class="ac-glow ac-g1" aria-hidden="true"></div>
2566
2567  <div class="wrap">
2568    <div class="ac-inner reveal">
2569      <span class="pill pill-ocean">
2570        <span class="pill-dot"></span>
2571        Ready When You Are
2572      </span>
2573
2574      <h2 class="ac-heading">
2575        Your loved one deserves proper care<br>
2576        <em>and we have the right healthcare professional for them</em>
2577      </h2>
2578
2579      <p class="ac-sub">
2580        Join the families who trust CavalCare for professional, dignified in-home care across Nigeria.
2581      </p>
2582
2583      <div class="ac-actions">
2584        <a href="https://cavalcare.org#care-plans" class="btn btn-primary">
2585          <i class="bi bi-calendar-check"></i>
2586          Book a Care Plan
2587        </a>
2588        <a href="https://cavalcare.org/services" class="btn-outline-dark">
2589          <i class="bi bi-grid"></i>
2590          View Our Services
2591        </a>
2592      </div>
2593    </div>
2594  </div>
2595</section>
2596
2597  </main>
2598
2599  
2600  <footer class="site-footer">
2601  <div class="container">
2602
2603    <div class="footer-grid">
2604
2605      
2606      <div class="footer-brand">
2607        <div class="footer-logo">
2608          <img src="/images/caval-care-logo.png" alt="CavalCare">
2609        </div>
2610
2611        <p>
2612          Compassionate in-home caregiving for families in Nigeria.
2613        </p>
2614
2615        <div class="footer-socials">
2616          <a href="https://www.facebook.com/usecavalcare"><i class="bi bi-facebook"></i></a>
2617          <a href="https://x.com/usecavalcare"><i class="bi bi-twitter"></i></a>
2618          <a href="https://www.instagram.com/usecavalcare"><i class="bi bi-instagram"></i></a>
2619        </div>
2620      </div>
2621
2622      
2623      <div>
2624        <h4>Services</h4>
2625        <ul>
2626          <li><a href="#">Elderly Care</a></li>
2627          <li><a href="#">Child Disability Care</a></li>
2628          <li><a href="#">Post-Surgery Care</a></li>
2629          <li><a href="#">Terminal Illness Support</a></li>
2630        </ul>
2631      </div>
2632
2633      
2634      <div>
2635        <h4>Quick Links</h4>
2636        <ul>
2637          <li><a href="#">How It Works</a></li>
2638          <li><a href="#">Care Plans</a></li>
2639          <li><a href="#">About Us</a></li>
2640          <li><a href="#">Privacy Policy</a></li>
2641        </ul>
2642      </div>
2643
2644      
2645      <div>
2646        <h4>Contact</h4>
2647        <ul class="footer-contact">
2648          <li>
2649            <i class="bi bi-geo-alt-fill"></i>
2650            <div>
2651              <strong>Lagos, Nigeria</strong>
2652              <span>Headquarters</span>
2653            </div>
2654          </li>
2655          <li>
2656            <i class="bi bi-telephone-fill"></i>
2657            <div>
2658              <a href="https://wa.me/message/4PNWSMS5KTZUB1">+234 706 311 2134</a>
2659              <span>24/7 Support</span>
2660            </div>
2661          </li>
2662          <li>
2663            <i class="bi bi-envelope-fill"></i>
2664            <div>
2665              <a href="mailto:[email protected]">[email protected]</a>
2666            </div>
2667          </li>
2668        </ul>
2669      </div>
2670
2671    </div>
2672
2673    <div class="footer-bottom">
2674      © 2026 CavalCare. All rights reserved.
2675    </div>
2676
2677  </div>
2678</footer>
2679
2680  
2681  <a 
2682  href="https://wa.me/message/4PNWSMS5KTZUB1"
2683  target="_blank"
2684  class="fixed bottom-8 right-8 w-14 h-14 md:w-16 md:h-16 rounded-full bg-primary shadow-2xl flex items-center justify-center text-white text-xl md:text-2xl hover:scale-110 transition-transform z-50 animate-float"
2685>
2686  <i class="bi bi-whatsapp"></i>
2687</a>
2688
2689  
2690  <button id="scrollTop" class="fixed bottom-8 left-8 w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center text-primary opacity-0 invisible transition-all hover:shadow-xl hover:-translate-y-1 z-50">
2691    <i class="bi bi-arrow-up text-xl"></i>
2692  </button>
2693
2694  
2694<script>
2695    // Scroll to top
2696    const scrollBtn = document.getElementById('scrollTop');
2697    window.addEventListener('scroll', () => {
2698      if (window.pageYOffset > 300) {
2699        scrollBtn.classList.remove('opacity-0', 'invisible');
2700      } else {
2701        scrollBtn.classList.add('opacity-0', 'invisible');
2702      }
2703    });
2704    scrollBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
2705
2706    // Smooth scroll
2707    document.querySelectorAll('a[href^="#"]').forEach(a => {
2708      a.addEventListener('click', e => {
2709        const href = a.getAttribute('href');
2710        if (href === '#') return;
2711        e.preventDefault();
2712        const target = document.querySelector(href);
2713        if (target) {
2714          const offset = target.offsetTop - 80;
2715          window.scrollTo({ top: offset, behavior: 'smooth' });
2716        }
2717      });
2718    });
2719
2720    const nav = document.getElementById('mainNav');
2721    const mobBtn = document.getElementById('mobBtn');
2722    const navLinks = document.getElementById('navLinks');
2723
2724    /* scroll effect */
2725    window.addEventListener('scroll', () => {
2726      nav.classList.toggle('scrolled', window.scrollY > 20);
2727    });
2728
2729    /* mobile toggle */
2730    mobBtn.addEventListener('click', () => {
2731      const isOpen = navLinks.classList.toggle('active');
2732      mobBtn.setAttribute('aria-expanded', isOpen);
2733    });
2734  </script>
2734
2735
2736  
2736<script>
2737document.addEventListener('DOMContentLoaded', () => {
2738
2739/* ── NAV SCROLL ───────────────────────────── */
2740const nav = document.getElementById('mainNav');
2741const onScroll = () => nav.classList.toggle('scrolled', scrollY > 16);
2742window.addEventListener('scroll', onScroll, { passive: true });
2743onScroll();
2744
2745
2746/* ── SMOOTH ANCHOR SCROLL ─────────────────── */
2747document.querySelectorAll('a[href^="#"]').forEach(a => {
2748  a.addEventListener('click', e => {
2749    const target = document.querySelector(a.getAttribute('href'));
2750    if (target) {
2751      e.preventDefault();
2752      window.scrollTo({ top: target.getBoundingClientRect().top + scrollY - 76, behavior: 'smooth' });
2753    }
2754  });
2755});
2756
2757/* ── SCROLL REVEAL ────────────────────────── */
2758const io = new IntersectionObserver(entries => {
2759  entries.forEach(e => {
2760    if (e.isIntersecting) { e.target.classList.add('is-visible'); io.unobserve(e.target); }
2761  });
2762}, { threshold: .1, rootMargin: '0px 0px -50px 0px' });
2763document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale')
2764  .forEach(el => io.observe(el));
2765
2766/* ── STAT COUNT-UP ────────────────────────── */
2767const statsIO = new IntersectionObserver(entries => {
2768  entries.forEach(e => {
2769    if (!e.isIntersecting) return;
2770    e.target.querySelectorAll('[data-count]').forEach(el => {
2771      const target = +el.dataset.count;
2772      const suffix = el.dataset.suffix || '';
2773      let start = null;
2774      const duration = 1400;
2775      const step = ts => {
2776        if (!start) start = ts;
2777        const progress = Math.min((ts - start) / duration, 1);
2778        const ease = 1 - Math.pow(1 - progress, 3);
2779        el.textContent = Math.round(ease * target) + suffix;
2780        if (progress < 1) requestAnimationFrame(step);
2781      };
2782      requestAnimationFrame(step);
2783    });
2784    statsIO.unobserve(e.target);
2785  });
2786}, { threshold: .6 });
2787document.querySelector('.origin-aside') && statsIO.observe(document.querySelector('.origin-aside'));
2788
2789/* ── BUTTON RIPPLE ────────────────────────── */
2790const rs = document.createElement('style');
2791rs.textContent = '@keyframes ripple{to{transform:scale(2.2);opacity:0}
2791}';
2792document.head.appendChild(rs);
2793document.querySelectorAll('.btn, .btn-ghost, .btn-outline-dark, .nav-cta').forEach(btn => {
2794  btn.style.position = 'relative'; btn.style.overflow = 'hidden';
2795  btn.addEventListener('pointerdown', e => {
2796    const r = document.createElement('span');
2797    const rect = btn.getBoundingClientRect();
2798    const sz = Math.max(rect.width, rect.height) * 1.4;
2799    r.className = 'btn-ripple';
2800    r.style.cssText = `width:${sz}px;height:${sz}px;left:${e.clientX-rect.left-sz/2}px;top:${e.clientY-rect.top-sz/2}px;`;
2801    btn.appendChild(r);
2802    r.addEventListener('animationend', () => r.remove());
2803  });
2804});
2805
2806/* ── HAPTIC ON TAP ────────────────────────── */
2807if ('vibrate' in navigator) {
2808  document.querySelectorAll('.btn, .btn-outline-dark, .nav-cta').forEach(b =>
2809    b.addEventListener('pointerdown', () => navigator.vibrate(6))
2810  );
2811}
2812
2813/* ── PARALLAX HERO GLOWS ──────────────────── */
2814if (window.matchMedia('(min-width:900px) and (hover:hover)').matches) {
2815  const glows = document.querySelectorAll('.ah-glow');
2816  document.addEventListener('mousemove', e => {
2817    const cx = e.clientX / innerWidth  - .5;
2818    const cy = e.clientY / innerHeight - .5;
2819    glows.forEach((g, i) => {
2820      g.style.transform = `translate(${cx*(i+1)*20}px,${cy*(i+1)*20}px)`;
2821    });
2822  }, { passive: true });
2823}
2824
2825/* ── LAZY IMAGE LOADED ────────────────────── */
2826document.querySelectorAll('img[loading="lazy"]').forEach(img => {
2827  if (img.complete) img.classList.add('img-loaded');
2828  else img.addEventListener('load', () => img.classList.add('img-loaded'));
2829});
2830
2831
2832/* ── Extra reveal directions ─────────────────── */
2833const ioExtra = new IntersectionObserver(entries => {
2834  entries.forEach(e => {
2835    if (e.isIntersecting) { e.target.classList.add('is-visible'); ioExtra.unobserve(e.target); }
2836  });
2837}, { threshold: .08, rootMargin: '0px 0px -40px 0px' });
2838document.querySelectorAll('.reveal-left, .reveal-right, .reveal-scale')
2839  .forEach(el => ioExtra.observe(el));
2840
2841/* ── Lazy image loaded state ─────────────────── */
2842document.querySelectorAll('img[loading="lazy"]').forEach(img => {
2843  if (img.complete) img.classList.add('img-loaded');
2844  else img.addEventListener('load', () => img.classList.add('img-loaded'));
2845});
2846
2847/* ── Haptic on button tap (Android) ─────────── */
2848if ('vibrate' in navigator) {
2849  document.querySelectorAll('.btn, .btn-yellow, .btn-ghost, .nav-cta, .plan-cta, .btn-outline-dark')
2850    .forEach(b => b.addEventListener('pointerdown', () => navigator.vibrate(6)));
2851}
2852
2853/* ── Testimonial / testi scroll dots ─────────── */
2854const testiScroll2 = document.querySelector('.testi-scroll');
2855const testiDots2   = document.querySelectorAll('.testi-dot');
2856if (testiScroll2 && testiDots2.length) {
2857  const syncDots = () => {
2858    const cards = testiScroll2.querySelectorAll('.testi-card');
2859    const cardW = (cards[0]?.offsetWidth ?? 0) + 14;
2860    const idx   = Math.round(testiScroll2.scrollLeft / cardW);
2861    testiDots2.forEach((d, i) => d.classList.toggle('active', i === idx));
2862  };
2863  testiScroll2.addEventListener('scroll', syncDots, { passive: true });
2864  syncDots();
2865}
2866
2867/* ── Services card task stagger ──────────────── */
2868document.querySelectorAll('.svc-expect-list, .svc-tasks').forEach(ul => {
2869  ul.querySelectorAll('li').forEach((li, i) => {
2870    li.style.transitionDelay = (i * 0.045) + 's';
2871  });
2872});
2873
2874});
2875</script>
2875
2876</body>
2877</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.