/* HisabWala site — brand: cream #F6EFE4, ink #12211E, teal #1B6B5A, saffron #E07A2F */
* { box-sizing: border-box; margin: 0; }
:root { --cream:#F6EFE4; --ink:#12211E; --teal:#1B6B5A; --saffron:#E07A2F; --card:#EFE7DA; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--cream);
       color: var(--ink); line-height: 1.65; }
a { color: var(--teal); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

header { background: var(--cream); border-bottom: 2px solid var(--card); position: sticky; top: 0; }
.nav { display: flex; align-items: center; gap: 18px; padding: 14px 0; flex-wrap: wrap; }
.nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem;
              color: var(--teal); text-decoration: none; margin-right: auto; }
.nav .brand img { width: 36px; height: 36px; border-radius: 8px; }
.nav a:not(.brand) { text-decoration: none; color: var(--ink); font-weight: 600; }
.nav a.active, .nav a:not(.brand):hover { color: var(--saffron); }

.hero { text-align: center; padding: 56px 0 36px; }
.hero img.logo { width: 110px; height: 110px; border-radius: 24px; }
.hero h1 { font-size: 2.4rem; color: var(--teal); margin: 14px 0 6px; }
.hero p.tag { font-size: 1.2rem; color: var(--saffron); font-weight: 700; }
.hero p.sub { max-width: 620px; margin: 12px auto 0; }
.badge { display: inline-block; margin-top: 22px; background: var(--ink); color: #fff;
         padding: 12px 26px; border-radius: 12px; text-decoration: none; font-weight: 700; }
.badge span { color: #9CCFBB; font-weight: 400; font-size: .85rem; display: block; }

.phones { display: flex; gap: 18px; justify-content: center; padding: 30px 0; flex-wrap: wrap; }
.phones img { width: 230px; max-width: 44vw; border-radius: 18px; border: 3px solid var(--card);
              box-shadow: 0 10px 26px rgba(18,33,30,.12); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 24px 0 40px; }
.card { background: var(--card); border-radius: 16px; padding: 20px; }
.card h3 { color: var(--teal); margin-bottom: 6px; }
.card .em { font-size: 1.6rem; }

main.page { padding: 40px 0 60px; }
main.page h1 { color: var(--teal); margin-bottom: 8px; }
main.page h2 { color: var(--teal); margin: 28px 0 8px; }
.updated { color: var(--saffron); font-weight: 600; }
ul { padding-left: 22px; }
li { margin: 4px 0; }

footer { border-top: 2px solid var(--card); padding: 22px 0 40px; font-size: .9rem;
         color: #4c5f5a; text-align: center; }
footer a { margin: 0 8px; }