/* Shared white and navy visual system for the company website. */
:root { --ink:#152a45; --navy:#152a45; --muted:#536174; --paper:#fff; --teal:#243e60; --teal-dark:#152a45; --teal-bright:#dce5ef; --amber:#536174; --plum:#243e60; --radius:12px; --shadow:0 8px 24px #152a4508; }
body { background:#fff; line-height:1.65; }
h1,h2,h3 { color:inherit; letter-spacing:-.035em; }
h2 { font-size:clamp(1.9rem,3.3vw,2.8rem); line-height:1.18; }
.site-header,.site-header.solid,.site-header.is-scrolled { color:var(--ink); background:#fffffff5; border-bottom:1px solid #e6eaf0; box-shadow:none; }
.brand::before { background:var(--navy); color:#fff; border:0; box-shadow:none; border-radius:9px; }
.site-header .site-nav { background:#edf3fc; border-color:#d5e2f4; }
.site-header .site-nav a { color:#234e89; background:#dfeafa; border:1px solid #ccdcf2; font-weight:600; opacity:1; }
.site-header .site-nav a:hover,.site-header .site-nav a:focus-visible { color:#fff; background:#285ba0; border-color:#285ba0; }
.site-header .site-nav a[aria-current] { color:#fff; background:var(--navy); border-color:var(--navy); box-shadow:0 3px 8px #152a451a; }
.site-header .menu-toggle { color:#234e89; background:#dfeafa; border-color:#ccdcf2; }
.header-action,.button.primary { color:#fff; background:var(--navy); border:1px solid var(--navy); box-shadow:none; }
.button,.header-action { border-radius:7px; font-weight:600; }
.button.primary:hover,.header-action:hover { background:#294564; box-shadow:none; }
.button.secondary,.button.ghost { color:var(--navy); background:#fff; border:1px solid #cbd4df; }
.eyebrow { color:#536174; font-size:11px; letter-spacing:.14em; font-weight:700; }
.section { padding:80px max(24px,calc((100vw - 1180px)/2)); }
.people-hero { max-width:1280px; margin:auto; padding:155px 50px 76px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.people-hero h1 { font-size:clamp(2.8rem,4.5vw,4.4rem); line-height:1.08; margin:20px 0 24px; font-weight:600; }
.people-hero .hero-copy { color:var(--muted); font-size:18px; max-width:470px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-footnote { margin-top:24px; color:var(--muted); font-size:12px; }
.people-photo { margin:0; }
.people-photo img { width:100%; height:450px; object-fit:cover; border-radius:12px; }
.people-photo figcaption { margin-top:14px; color:var(--muted); font-size:12px; }
.product-section { background:#f6f8fa; border-block:1px solid #e6eaf0; }
.section-heading { gap:40px; margin-bottom:42px; }
.section-heading p { max-width:460px; }
.catalog-group + .catalog-group { margin-top:44px; }
.catalog-heading { display:flex; align-items:baseline; gap:20px; margin-bottom:18px; }
.catalog-heading > span { text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:var(--muted); }
.catalog-heading h3 { font-size:19px; font-weight:600; margin:0; }
.product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.product-card,.product-card.featured,.product-card.wide { min-height:250px; padding:28px; grid-column:auto; background:var(--product-tint,#edf4ff); color:var(--navy); border:1px solid var(--product-border,#ccdcf2); border-top:4px solid var(--product-accent,#285ba0); box-shadow:none; border-radius:10px; display:flex; flex-direction:column; }
.product-card::before,.product-card::after { display:none; }
.product-card:hover { transform:translateY(-3px); border-color:var(--product-accent,#285ba0); box-shadow:0 10px 24px #152a4514; }
.product-card h3 { font-size:23px; margin:0 0 12px; }
.product-card p { font-size:14px; margin:0 0 24px; }
.product-kicker { color:var(--product-accent,#285ba0); font-size:10px; margin-bottom:18px; font-weight:800; }
.product-card .card-link { color:#fff; background:var(--product-accent,#285ba0); margin-top:auto; font-size:12px; padding:9px 13px; border-radius:7px; align-self:flex-start; }
.product-card[href$="scaledial.html"] { --product-accent:#285ba0; --product-tint:#edf4ff; --product-border:#ccdcf2; }
.product-card[href$="sms-blasting.html"] { --product-accent:#08766f; --product-tint:#eaf8f5; --product-border:#bde3db; }
.product-card[href$="pabx-system.html"] { --product-accent:#5b49a3; --product-tint:#f2effc; --product-border:#d9d0ef; }
.product-card[href$="pos-system.html"] { --product-accent:#966015; --product-tint:#fff6e7; --product-border:#efdbb7; }
.product-card[href$="hris.html"] { --product-accent:#a13e65; --product-tint:#fceff4; --product-border:#edccda; }
.product-card[href$="booking-system.html"] { --product-accent:#236e96; --product-tint:#ecf7fc; --product-border:#c4e2ef; }
.product-card[href$="tracking-system.html"] { --product-accent:#427333; --product-tint:#f0f7e9; --product-border:#d1e3c3; }
.custom-callout { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px; border:1px solid #dfe5ec; background:#edf0fa; border-left:4px solid #4a5792; border-radius:10px; margin-top:30px; }
.custom-callout h3 { margin:8px 0; font-size:24px; }
.custom-callout p { color:var(--muted); margin:0; }
.custom-callout .button { flex-shrink:0; }
.value-section,.process-section,.faq-section,.contact-section { background:#fff; color:var(--navy); }
.value-grid article { background:#fff; border:1px solid #e0e6ed; box-shadow:none; }
.value-grid span { color:var(--muted); background:#edf1f6; }
.value-grid h3 { font-size:19px; }
.process-section { background:#f6f8fa; }
.timeline::before,.timeline > div::before { background:#243e60; box-shadow:none; }
.timeline span { color:var(--muted); }
.contact-panel { background:#f6f8fa; color:var(--navy); border:1px solid #dfe5ec; box-shadow:none; }
.contact-panel::before,.contact-panel::after { display:none; }
.contact-panel h2,.contact-panel .email-link { color:var(--navy); }
.page-hero { color:var(--navy); background:#f6f8fa; padding:130px max(24px,calc((100vw - 1180px)/2)) 60px; }
.page-hero h1 { font-size:clamp(2.5rem,4.4vw,4rem); }
.page-hero .hero-copy { color:var(--muted); font-size:17px; }
.page-intro { background:#fff; border:1px solid #dfe5ec; padding:20px; box-shadow:none; }
.page-intro p { color:var(--muted); font-size:14px; }
.intro-photo { width:100%; height:180px; object-fit:cover; border-radius:7px; margin-bottom:18px; }
.package-card,.package-card.highlighted,.spec-card,.proposal-preview { color:var(--navy); background:#fff; border:1px solid #dfe5ec; box-shadow:none; }
.package-badge,.package-meter span { background:var(--navy); color:#fff; }
.package-meter { background:#edf1f6; }
.cta-inner { background:var(--navy); }
.site-footer { background:var(--navy); font-size:12px; font-weight:400; }
.faq-list details,.faq-list details[open] { background:#fff; border-color:#dfe5ec; }
.faq-list summary { font-weight:600; }
.faq-list summary::after { color:var(--navy); background:#edf1f6; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #7f94ad; outline-offset:3px; }
@media(max-width:920px) { .people-hero { padding:125px 24px 55px; gap:30px; }.people-photo img { height:370px; }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.site-header .site-nav { visibility:hidden; background:#fff; }.site-header.menu-open .site-nav { visibility:visible; }.page-hero-inner { grid-template-columns:1fr 1fr; gap:24px; } }
@media(max-width:640px) { .people-hero { grid-template-columns:1fr; padding-top:115px; }.people-hero h1 { font-size:42px; }.people-photo img { height:290px; }.section { padding:52px 22px; }.section-heading,.product-grid,.page-hero-inner { grid-template-columns:1fr; }.catalog-heading { display:block; }.catalog-heading h3 { margin-top:6px; }.custom-callout { align-items:start; flex-direction:column; padding:24px; }.product-card { min-height:225px; }.page-hero { padding-top:115px; }.site-footer:has(> span) { grid-template-columns:1fr; }.email-link { overflow-wrap:anywhere; font-size:15px; } }
.process-section .eyebrow,.process-copy p { color:var(--muted); }
.process-section .timeline strong { color:var(--navy); }
.catalog-group:nth-of-type(3) .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:640px) { .catalog-group:nth-of-type(3) .product-grid { grid-template-columns:1fr; } }