/* pages/home.css — page: home */

/* Hero: message over a full-bleed photograph */
.hero-stage{position:relative;display:flex;align-items:center;min-height:min(86vh,820px);overflow:hidden;padding:clamp(72px,9vw,128px) 0;background:var(--indigo);color:var(--on-indigo-muted)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;transform:scale(1.04);animation:heroSettle 9s ease-out forwards}
@keyframes heroSettle{to{transform:scale(1)}}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,24,40,.88) 0%,rgba(15,24,40,.66) 45%,rgba(15,24,40,.2) 100%)}
.hero-inner{position:relative;z-index:2}
.hero h1{max-width:12ch;color:#fff}
.hero .lede{margin-top:32px;max-width:46ch;color:rgba(242,244,247,.86)}
.hero .actions{margin-top:40px}
.hero-stage .link{color:#fff;border-color:var(--accent-light)}
.hero-stage .link:hover{color:var(--accent-light)}
.credential{display:inline-flex;align-items:center;gap:14px;margin-top:56px;padding-top:24px;border-top:1px solid var(--on-indigo-rule);color:var(--on-indigo-muted);font-size:.92rem;text-decoration:none;transition:color .25s}
.credential strong{color:#fff;font-weight:500}
.credential:hover{color:#fff}
.credential-mark{flex:none;width:30px;height:30px;padding:5px;border:1px solid var(--accent-light);fill:none;stroke:var(--accent-light);stroke-width:1.3}
@media (max-width:760px){.hero-stage{min-height:0}.hero-stage::before{background:linear-gradient(180deg,rgba(15,24,40,.82),rgba(15,24,40,.7))}}

.pillars{display:grid;grid-template-columns:repeat(3,1fr)}
.pillars li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:48px 40px 64px 0}
.pillars li + li{padding-left:40px;border-left:1px solid var(--rule)}
.pillars h2{font-size:1.9rem;font-weight:300}
.pillars p{color:var(--slate);max-width:34ch}
.pillars .link{margin-top:auto;padding-top:12px}
@media (max-width:720px){.pillars{grid-template-columns:1fr}.pillars li,.pillars li + li{padding:28px 0 32px;border-left:0;border-bottom:1px solid var(--rule)}}

/* Services */
.svc-groups{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px clamp(40px,7vw,120px);align-items:start}
.svc-group-title{display:flex;align-items:baseline;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--ink);font-size:1.7rem;font-weight:300}
.svc-group-title span{font-family:var(--sans);font-size:var(--t-small);letter-spacing:.01em;color:var(--muted)}
.svc-list li a{display:flex;gap:20px;align-items:flex-start;padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--slate)}
.svc-list strong{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--serif);font-size:1.4rem;font-weight:400;letter-spacing:-.01em;line-height:1.2;transition:color .25s}
.svc-list a:hover strong{color:var(--accent-dark)}
.svc-list span{font-size:.95rem}
.more{margin-top:40px}
@media (max-width:900px){.svc-groups{grid-template-columns:1fr}}

/* Software band */
.software{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px clamp(40px,7vw,120px);align-items:center}
.software .lede{margin-top:24px}
.module-list{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:40px;border-top:1px solid var(--on-indigo-rule)}
.module-list li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--on-indigo-rule);color:var(--on-indigo);font-family:var(--serif);font-size:1.15rem}
.module-list .ico{width:22px;height:22px;margin:0}
.software .actions{margin-top:40px}
.software figcaption{color:var(--on-indigo-muted)}
@media (max-width:900px){.software{grid-template-columns:1fr}}
@media (max-width:420px){.module-list{grid-template-columns:1fr}}

/* Fabrics */
.fabric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.fabric-grid a{text-decoration:none}
.fabric-grid figcaption{font-family:var(--sans);font-style:normal;font-size:.92rem;color:var(--slate)}
.fabric-grid figcaption strong{display:block;margin-bottom:4px;color:var(--ink);font-family:var(--serif);font-size:1.45rem;font-weight:400}
.fabric-grid a:hover img{transform:scale(1.04)}
@media (max-width:900px){.fabric-grid{grid-template-columns:1fr 1fr}}

/* Lahore */
.lahore .media-frame{aspect-ratio:5/4}
.facts{margin-top:36px;border-top:1px solid var(--rule)}
.facts li{padding:16px 0;border-bottom:1px solid var(--rule)}
.facts strong{color:var(--ink);font-family:var(--serif);font-size:1.15rem;font-weight:400}