/* =========================================================
   CAAFiSOM — shared stylesheet
   Colors extracted directly from the real site's logo files and
   app screenshots: dark navy (#1b2f5e range) + muted green
   (#5fab52 range) — not the brighter green used on the SHS site.
   ========================================================= */

:root{
  --primary:#5AAC4E;
  --primary-light:#7CC26F;
  --primary-dark:#234821;
  --ink:#234821;
  --muted:#555555;
  --paper:#FFFFFF;
  --paper-dim:#F1F1F1;
  --line:#E2E6EC;
  --radius:12px;
  --maxw:1180px;
  --shadow:0 12px 30px -18px rgba(35,72,33,0.3);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Open Sans', Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Open Sans', Arial, sans-serif;
  font-weight:600;
  margin:0 0 14px;
  line-height:1.2;
}
h1{font-weight:700;}
p{margin:0 0 14px;color:var(--muted);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;}

/* ---------------- Top info bar (matches live site) ---------------- */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 24px;flex-wrap:wrap;}
.topbar a{color:var(--primary-dark);font-weight:600;}
.topbar a:hover{text-decoration:underline;}

/* ---------------- Header social icons (integrated into main nav, no separate top bar) ---------------- */
.nav-socials{display:flex;align-items:center;gap:8px;}
.nav-socials a{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--primary);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;transition:background .2s ease, color .2s ease;
}
.nav-socials a svg{width:15px;height:15px;}
.nav-socials a:hover{background:var(--primary);color:#fff;}

/* ---------------- Header / nav ---------------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;transition:box-shadow .25s ease;}
.site-header.is-scrolled{box-shadow:var(--shadow);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:24px;transition:padding .25s ease;}
.site-header.is-scrolled .nav{padding:8px 24px;}
.logo img{height:50px;width:auto;object-fit:contain;transition:height .25s ease;}
.site-header.is-scrolled .logo img{height:40px;}
.nav-links{display:flex;gap:26px;font-size:15px;font-weight:500;}
.nav-links a{position:relative;padding:6px 0;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--primary);transition:width .2s ease;}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{width:100%;}
.nav-links a[aria-current="page"]{color:var(--primary-dark);}
.nav-right{display:flex;align-items:center;gap:12px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:999px;font-weight:600;font-size:14.5px;border:1.5px solid transparent;transition:transform .2s ease, background .2s ease, color .2s ease;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);}
.btn-outline{border-color:var(--primary-dark);color:var(--primary-dark);}
.btn-outline:hover{background:var(--primary-dark);color:#fff;}
.menu-toggle{display:none;background:none;border:none;padding:6px;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

/* App dropdown */
.app-dropdown{position:relative;}
.app-dropdown > button{display:inline-flex;align-items:center;gap:6px;}
.app-dropdown .menu{
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  min-width:200px;padding:8px;z-index:50;
}
.app-dropdown.is-open .menu{display:block;}
.app-dropdown .menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;}
.app-dropdown .menu a:hover{background:var(--paper-dim);}

/* ---------------- Hero / slider ---------------- */
.hero{position:relative;overflow:hidden;background:var(--ink);min-height:440px;}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;display:flex;align-items:center;}
.hero .slide.active{opacity:1;}
.hero .slide::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg, rgba(20,30,24,.74) 0%, rgba(20,30,24,.4) 65%, rgba(20,30,24,.18) 100%);}
.hero .content{position:relative;z-index:2;color:#fff;padding:90px 0;max-width:640px;}
.hero .eyebrow{display:inline-block;color:var(--primary-light);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13.5px;margin-bottom:10px;}
.hero h1{font-size:clamp(28px,4.4vw,46px);color:#fff;}
.hero .dots{position:absolute;bottom:22px;right:0;left:0;z-index:3;display:flex;gap:8px;justify-content:center;}
.hero .dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);padding:0;}
.hero .dots button.active{background:var(--primary-light);}

/* ---------------- Page header (inner pages) ---------------- */
.page-header{background:linear-gradient(120deg,var(--primary-dark),var(--primary));color:#fff;padding:60px 0;}
.page-header h1{color:#fff;font-size:clamp(26px,3.8vw,38px);margin-bottom:8px;}
.breadcrumb{font-size:13.5px;color:rgba(255,255,255,.85);display:flex;gap:8px;}
.breadcrumb span:not(:last-child)::after{content:'/';margin-left:8px;opacity:.7;}

/* ---------------- Sections ---------------- */
section{padding:80px 0;}
section.tight{padding:56px 0;}
.alt-bg{background:var(--paper-dim);}
.eyebrow-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-dark);}
.eyebrow-tag::before{content:'';width:20px;height:2px;background:var(--primary);display:inline-block;}
.section-head{max-width:680px;margin:0 auto 44px;text-align:center;}
.section-head h2{font-size:clamp(24px,3.2vw,34px);margin-top:10px;}
.section-head p{margin-top:12px;}

/* ---------------- Two column ---------------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.two-col img, .two-col video{border-radius:var(--radius);width:100%;}
.two-col.reverse{direction:rtl;}
.two-col.reverse > *{direction:ltr;}

/* ---------------- Tabs (Story/Mission/Vision) ---------------- */
.tabs-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-top:22px;}
.tabs-box .tabs{margin:0 0 16px;}
.tabs{display:flex;gap:6px;margin:26px 0 18px;border-bottom:1px solid var(--line);}
.tab-btn{background:none;border:none;padding:10px 4px;margin-right:22px;font-weight:600;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;}
.tab-btn.active{color:var(--primary-dark);border-color:var(--primary-dark);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------------- Feature trio / stats ---------------- */
.feature-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;}
.feature-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.feature-card .icon{width:44px;height:44px;object-fit:contain;margin-bottom:14px;}
.feature-card h4{font-size:18px;}
.feature-card p{font-size:14.5px;margin-top:6px;}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 20px;}
.stat-card .num{font-size:28px;font-weight:600;color:var(--primary-dark);}
.stat-card .label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}

/* ---------------- Cards / grids ---------------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.card-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.service-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;transition:transform .2s ease, box-shadow .2s ease;}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.service-card .icon{width:46px;height:46px;object-fit:contain;margin-bottom:16px;}
.service-card h3{font-size:17.5px;}
.service-card p{font-size:14px;margin:0;}

.bullet-list{display:grid;gap:12px;}
.bullet-list li{position:relative;padding-left:22px;color:var(--muted);}
.bullet-list li::before{content:'✓';position:absolute;left:0;color:var(--primary-dark);font-weight:700;}

.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:10px;}
.journey::before{content:'';position:absolute;top:26px;left:6%;right:6%;height:2px;background:repeating-linear-gradient(90deg,var(--primary-dark) 0 8px, transparent 8px 16px);}
.journey-step{text-align:center;padding:0 10px;position:relative;}
.journey-step .dot{width:52px;height:52px;border-radius:50%;background:var(--paper);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-weight:600;color:var(--primary-dark);position:relative;z-index:1;}
.journey-step .dot img{width:26px;height:26px;object-fit:contain;}
.journey-step h4{font-size:15px;}

/* ---------------- CTA band ---------------- */
.cta-band{background:linear-gradient(120deg,var(--primary-dark),var(--primary));color:#fff;text-align:center;padding:60px 0;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.9);max-width:56ch;margin:0 auto 24px;}
.cta-band .btn-primary{background:#fff;color:var(--primary-dark);}
.cta-band .btn-primary:hover{background:var(--ink);color:#fff;}

/* ---------------- Logo strip / gallery ---------------- */
.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:center;}
.logo-strip img{filter:grayscale(1);opacity:.75;transition:filter .2s ease, opacity .2s ease;aspect-ratio:3/2;object-fit:contain;background:var(--paper);border-radius:8px;padding:10px;border:1px solid var(--line);}
.logo-strip img:hover{filter:none;opacity:1;}

/* Partners marquee: continuous logo scroll (matches live site) */
.logo-marquee{overflow:hidden;}
.logo-track{display:flex;align-items:center;gap:20px;width:max-content;}
.logo-track img{width:180px;aspect-ratio:3/2;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px;filter:grayscale(1);opacity:.75;transition:filter .2s ease, opacity .2s ease;}
.logo-track img:hover{filter:none;opacity:1;}
.logo-track.is-animated{animation:logo-marquee 60s linear infinite;}
.logo-marquee:hover .logo-track.is-animated{animation-play-state:paused;}
@keyframes logo-marquee{to{transform:translateX(calc(-50% - 10px));}}
@media (prefers-reduced-motion: reduce){
  .logo-track.is-animated{animation:none;}
  .logo-marquee{overflow-x:auto;}
}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.photo-grid img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);}

/* ---------------- Green band: app download + MoHD (live-site gradient over bg.png) ---------------- */
.green-band{background:linear-gradient(rgba(128,227,97,.914),rgba(128,227,97,.914)), url('assets/images/bg.png') center/cover;}
.green-band .two-col img{border-radius:0;}
.store-badge{width:156px;height:auto;}
.store-badge--apple{width:135px;}
.mohd-row{margin-top:48px;}
.mohd-grid{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:center;max-width:920px;margin:0 auto;}
.mohd-grid img{width:100%;border-radius:0;}
@media (max-width:600px){
  .mohd-grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .mohd-grid img{max-width:160px;}
}

/* ---------------- App download ---------------- */
.store-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.store-btn{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:11px;font-size:14px;}
.store-btn small{display:block;font-size:10.5px;opacity:.7;}
.store-btn strong{font-size:15px;font-weight:600;}

/* ---------------- Forms ---------------- */
form.app-form{display:grid;gap:16px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{font-size:13px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px;}
input, textarea{width:100%;padding:12px 14px;border-radius:9px;border:1.5px solid var(--line);font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--paper);}
input:focus, textarea:focus{border-color:var(--primary);outline:none;}
textarea{resize:vertical;min-height:110px;}
.form-status{font-size:14px;font-weight:600;color:var(--primary-dark);min-height:20px;}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:56px;}
.contact-info-card{display:flex;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.contact-info-card .ico{width:36px;height:36px;border-radius:8px;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;flex:none;color:var(--primary-dark);font-size:16px;}
.contact-info-card h4{font-size:15px;margin-bottom:4px;}
.contact-info-card p{margin:0;font-size:14px;}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px;}
.map-card iframe{width:100%;height:280px;border:0;border-radius:var(--radius);}
.map-card h4{margin-bottom:10px;}
.location-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.location-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13.5px;font-weight:500;}

/* ---------------- Legal pages ---------------- */
.legal{max-width:820px;margin:0 auto;}
.legal h3{margin-top:34px;font-size:19px;}
.legal p, .legal li{color:var(--ink-soft,var(--muted));}
.legal ul{display:grid;gap:8px;margin:12px 0;}
.legal ul li{position:relative;padding-left:18px;}
.legal ul li::before{content:'•';color:var(--primary);position:absolute;left:0;}

/* ---------------- Footer ---------------- */
footer{background:var(--ink);color:#CFE0D6;padding:64px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 0.9fr 0.9fr 1.1fr;gap:40px;}
footer h5{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-light);margin-bottom:16px;}
.footer-brand img{height:44px;width:auto;object-fit:contain;filter:brightness(0) invert(1);}
.footer-tag{color:rgba(207,224,214,.7);font-size:14px;margin-top:14px;max-width:32ch;}
footer ul{display:flex;flex-direction:column;gap:10px;font-size:14px;}
footer ul a:hover{color:#fff;text-decoration:underline;}
.footer-socials{display:flex;gap:12px;margin-top:16px;}
.footer-socials a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(207,224,214,.3);display:flex;align-items:center;justify-content:center;font-size:12.5px;}
.office-block{margin-bottom:16px;font-size:14px;}
.office-block strong{display:block;color:#fff;font-size:14.5px;margin-bottom:4px;}
.footer-bottom{border-top:1px solid rgba(207,224,214,.15);margin-top:48px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(207,224,214,.6);flex-wrap:wrap;gap:10px;}
.back-to-top{background:var(--primary);color:#fff;border:none;width:38px;height:38px;border-radius:50%;font-size:16px;line-height:1;}
.back-to-top:hover{background:var(--primary-light);}

/* ---------------- Reveal on scroll ---------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero .slide{transition:none;}
}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  .nav-links{display:none;}
  .nav-socials{display:none;}
  .menu-toggle{display:block;}
  .two-col, .contact-grid, .map-grid{grid-template-columns:1fr;}
  .two-col.reverse{direction:ltr;}
  .stats-grid, .card-grid, .card-grid.cols-3, .card-grid.cols-2, .card-grid.cols-5, .logo-strip, .photo-grid, .feature-trio{grid-template-columns:repeat(2,1fr);}
  .journey{grid-template-columns:repeat(2,1fr);row-gap:30px;}
  .journey::before{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .field-row{grid-template-columns:1fr;}
  .stats-grid, .card-grid, .card-grid.cols-3, .card-grid.cols-2, .card-grid.cols-5, .logo-strip, .photo-grid, .feature-trio{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .topbar .wrap{font-size:12px;}
}

/* ---------------- Feature trio (single panel, icon-left layout) — matches real site ---------------- */
.trio-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;
}
.trio-col{padding:26px;border-right:1px solid var(--line);}
.trio-col:last-child{border-right:0;}
.trio-head{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.trio-head .icon-badge{
  width:40px;height:40px;border-radius:50%;background:var(--primary);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.trio-head .icon-badge img{width:20px;height:20px;object-fit:contain;filter:brightness(0) invert(1);}
.trio-head h4{margin:0;font-size:17px;}
.trio-col p{font-size:14.5px;margin:0;}
@media (max-width:760px){
  .trio-panel{grid-template-columns:1fr;}
  .trio-col{border-right:0;border-bottom:1px solid var(--line);}
  .trio-col:last-child{border-bottom:0;}
}

/* ---------------- For Providers: text column + checkmark cards column ---------------- */
.provider-split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
.provider-text h3{font-size:18px;margin-top:20px;margin-bottom:4px;}
.provider-text p{font-size:15px;}
.provider-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.provider-cards .check-card:nth-child(3){grid-column:1 / -1;max-width:calc(50% - 10px);}
.check-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;
}
.check-card .check-icon{color:var(--primary);margin-bottom:10px;display:block;}
.check-card .check-icon svg{width:26px;height:26px;}
.check-card h4{font-size:16px;margin-bottom:6px;}
.check-card p{font-size:13.5px;margin:0;}
@media (max-width:860px){
  .provider-split{grid-template-columns:1fr;}
  .provider-cards{grid-template-columns:1fr;}
  .provider-cards .check-card:nth-child(3){max-width:none;}
}

/* ---------------- Photo stack (Services/About For Providers right column) ---------------- */
.photo-stack{display:flex;flex-direction:column;gap:20px;}
.photo-card{border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--paper);}
.photo-card img{border-radius:8px;width:100%;aspect-ratio:4/3;object-fit:cover;}

/* ---------------- How it works: single stacked column variant (Services page) ---------------- */
.works-list--stacked{max-width:640px;margin:40px auto 0;gap:16px;}
.works-list--stacked .pill-item{padding:22px 20px;}

.works-columns{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;margin-top:40px;}
.works-list{display:flex;flex-direction:column;gap:14px;}
.pill-item{
  display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;font-weight:600;font-size:15px;color:var(--ink);
}
.pill-item .hamburger{color:var(--primary);flex:none;}
.pill-item .hamburger svg{width:18px;height:18px;}
.works-phone{width:220px;}
.works-phone img{border-radius:20px;box-shadow:var(--shadow);}

/* How It Works tabs: clicking an option shows its picture in the centre pane */
button.pill-item{width:100%;}
.works-tab{cursor:pointer;transition:border-color .2s ease, color .2s ease;}
.works-tab:hover{border-color:var(--primary);}
.works-tab.active{border-color:var(--primary);color:var(--primary-dark);box-shadow:0 0 0 1px var(--primary) inset;}
.works-pane{text-align:center;max-width:420px;margin:0 auto;}
.works-pane img{border-radius:16px;box-shadow:var(--shadow);width:100%;margin-bottom:14px;}
.works-pane p{font-size:14.5px;margin:0;}

@media (max-width:860px){
  .works-columns{grid-template-columns:1fr;}
  .works-phone{margin:0 auto;}
}

/* ---------------- Our services: photo carousel ---------------- */
.service-carousel{position:relative;}
.carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-card{flex:0 0 260px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);}
.carousel-card img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.carousel-card h4{padding:14px 16px;font-size:16px;margin:0;}
.carousel-nav{display:flex;gap:10px;justify-content:center;margin-top:20px;}
.carousel-nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--primary-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.carousel-nav button:hover{background:var(--paper-dim);}
.carousel-nav button svg{width:18px;height:18px;}