/* 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; } }

/* Shared navigation and circuit-inspired brand mark. */
.site-header { gap:18px; padding-inline:clamp(20px,3vw,48px); }
.brand { min-width:210px; gap:12px; }
.brand::before { display:none; }
.brand-symbol { width:48px; height:48px; flex:0 0 48px; }
.brand strong { letter-spacing:-.035em; font-size:19px; }
.brand small { margin-top:5px; letter-spacing:.17em; font-size:10px; text-transform:uppercase; }
.site-header .site-nav { gap:5px; padding:5px; }
.site-header .site-nav a { padding:9px 12px; }
.standalone-hero { padding-top:155px; border-bottom:1px solid #d5e2f4; background:linear-gradient(115deg,#edf4ff,#f1fafb); }
.standalone-hero h1 { max-width:850px; line-height:1.12; }
.standalone-hero .hero-copy { max-width:720px; margin-bottom:0; }
.home-next { background:#edf4ff; }
.home-next > p:not(.eyebrow) { color:var(--muted); }
@media (max-width:1100px) and (min-width:921px) { .site-header { padding-inline:20px; gap:10px; }.brand { min-width:180px; }.brand strong { font-size:16px; }.site-header .site-nav a { padding:9px; font-size:13px; }.header-action { padding-inline:12px; font-size:13px; } }
@media (max-width:640px) { .brand-symbol { width:42px; height:42px; flex-basis:42px; }.standalone-hero { padding-top:125px; }.standalone-hero h1 { font-size:36px; } }
@media (max-width:640px) { .proposal-preview { grid-template-columns:minmax(0,1fr); padding:20px; }.proposal-preview > * { min-width:0; }.proposal-sheet { overflow-wrap:anywhere; }.sheet-header { flex-wrap:wrap; }.sheet-header span:first-child,.sheet-header span:last-child { width:auto; } }

/* Compact, consistently sized catalog cards on the Products page. */
.products-catalog { max-width:1180px; margin:0 auto; padding:140px 32px 72px; }
.catalog-intro { max-width:720px; margin-bottom:42px; }
.catalog-intro h1 { font-size:clamp(2.4rem,4vw,3.5rem); line-height:1.12; margin:0 0 18px; }
.catalog-intro > p:last-child { color:var(--muted); font-size:17px; line-height:1.7; margin:0; max-width:580px; }
.catalog-list-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid #dfe5ec; }
.catalog-list-heading p { margin:0; font-weight:600; }
.catalog-list-heading > span { font-size:12px; color:var(--muted); }
.products-catalog .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.products-catalog .product-card { min-height:235px; padding:26px; background:#fff; border:1px solid #dfe5ec; border-left:4px solid var(--product-accent,#285ba0); justify-content:flex-start; }
.products-catalog .product-card:hover { border-color:var(--product-accent,#285ba0); background:var(--product-tint,#edf4ff); }
.products-catalog .product-kicker { align-self:flex-start; padding:4px 9px; background:var(--product-tint,#edf4ff); border-radius:5px; font-size:10px; margin-bottom:14px; }
.products-catalog .product-card h2 { font-size:23px; line-height:1.2; margin:0 0 10px; }
.products-catalog .product-card p { max-width:410px; margin:0 0 22px; line-height:1.6; }
.products-catalog .card-link { color:var(--product-accent,#285ba0); background:none; padding:0; font-size:13px; font-weight:700; }
.products-catalog .card-link::after { content:none; }
.products-catalog .card-link span { margin-left:6px; }
.products-catalog .product-card[href$="custom-system.html"] { --product-accent:#4a5792; --product-tint:#edf0fa; }
.catalog-help { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:36px; padding:28px; border-radius:10px; background:#edf3fc; }
.catalog-help h2 { font-size:21px; margin:0 0 8px; }
.catalog-help p { color:var(--muted); font-size:14px; margin:0; }
.catalog-help .button { flex-shrink:0; gap:12px; }
@media (max-width:640px) { .products-catalog { padding:118px 22px 48px; }.catalog-intro { margin-bottom:30px; }.products-catalog .product-grid { grid-template-columns:minmax(0,1fr); gap:14px; }.products-catalog .product-card { min-height:220px; padding:22px; }.catalog-help { flex-direction:column; align-items:flex-start; padding:24px; } }

.product-card[href$="payroll-system.html"] { --product-accent:#0c737d; --product-tint:#eaf8fa; --product-border:#c4e5e9; }

/* Keep product introductions focused on the description and proposal action. */
.page-hero .product-hero-inner { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.product-hero-inner > div:first-child { max-width:820px; }
.product-hero-inner .hero-copy { margin-bottom:0; }
.product-proposal-action .button { white-space:normal; text-align:center; }
