/* =====================================================================
   v2 — photo-led layout (client references: Alsons Hardware, Alpha Solar)
   ===================================================================== */
.topbar{background:var(--ink);color:#C9D3DA;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#E9EEF1;text-decoration:none}
.topbar a:hover{color:var(--amber)}
.topbar span{display:inline-flex;align-items:center;gap:7px;margin-right:18px}
.topbar svg{width:14px;height:14px;fill:none;stroke:var(--amber);stroke-width:2}
@media (max-width:700px){ .topbar .hide-sm{display:none} }

/* hero slider */
.hero2{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--ink)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity 1.2s ease, transform 7s ease-out}
.slide.on{opacity:1;transform:scale(1)}
.hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,33,.92) 0%,rgba(13,24,33,.72) 45%,rgba(13,24,33,.25) 100%)}
.hero2 .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;width:100%;padding-top:64px;padding-bottom:88px}
.hero2 .tag{color:#C9D3DA;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero2 .tag::before{content:"";width:28px;height:2px;background:var(--amber)}
.hero2 .h1{color:#fff}
.hero2 .h1 em{font-style:normal;color:var(--amber)}
.hero2 .lede{color:#D5DDE3;margin:24px 0 32px}
.hero2 .btn-ghost{color:#fff;border-color:#fff}
.hero2 .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero2 .ticket{transform:none;background:rgba(246,247,248,.97);color:var(--ink)}
.hero2 .ticket::before,.hero2 .ticket::after{display:none}
.slide-meta{position:absolute;z-index:3;left:0;right:0;bottom:26px}
.slide-meta .wrap{display:flex;align-items:center;gap:18px;padding-top:0;padding-bottom:0;grid-template-columns:none}
.dots{display:flex;gap:8px}
.dots button{width:34px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;padding:0}
.dots button.on{background:var(--amber)}
.slide-cap{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#C9D3DA}
@media (max-width:920px){ .hero2 .wrap{grid-template-columns:1fr} .hero2::after{background:linear-gradient(180deg,rgba(13,24,33,.86),rgba(13,24,33,.78))} }

/* brand logo grid */
.logos{background:#fff;border-bottom:1px solid var(--rule)}
.logos .wrap{padding-top:36px;padding-bottom:40px}
.logos-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.logos-head h2{font-family:var(--f-display);font-stretch:112%;font-size:clamp(20px,2vw,26px);margin:0}
.logo-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}
.logo-tile{height:82px;display:flex;align-items:center;justify-content:center;border:1px solid #E3E7EA;border-radius:8px;background:#fff;padding:14px;transition:box-shadow .2s ease, transform .2s ease}
.logo-tile:hover{box-shadow:0 10px 24px -12px rgba(19,33,44,.35);transform:translateY(-2px)}
.logo-tile img{max-height:42px;max-width:100%;width:auto;object-fit:contain}
@media (max-width:1100px){ .logo-grid{grid-template-columns:repeat(6,1fr)} }
@media (max-width:640px){ .logo-grid{grid-template-columns:repeat(3,1fr)} .logo-tile{height:70px} }

/* about + stats */
.about2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.about2-photo{position:relative}
.about2-photo img{width:100%;height:560px;object-fit:cover;border-radius:10px}
.about2-photo .badge{position:absolute;right:-18px;bottom:28px;background:var(--amber);color:var(--ink);border-radius:8px;padding:18px 22px;font-family:var(--f-display);font-stretch:115%;font-weight:800;line-height:1.05;box-shadow:0 20px 40px -20px rgba(19,33,44,.6)}
.about2-photo .badge b{display:block;font-size:40px}
.about2 .tag{display:block;margin-bottom:14px}
.about2 p{color:var(--graphite)}
.checks{list-style:none;padding:0;margin:22px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.checks li{padding-left:28px;position:relative;font-weight:600}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:4px;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313212C' stroke-width='3.2'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);margin-top:clamp(48px,6vw,80px)}
.stat{padding:24px 18px 4px 0}
.stat b{display:block;font-family:var(--f-display);font-stretch:120%;font-weight:900;font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--ink)}
.stat b i{font-style:normal;color:var(--amber)}
.stat span{color:var(--graphite);font-size:15px}
@media (max-width:900px){ .about2{grid-template-columns:1fr} .about2-photo img{height:380px} .about2-photo .badge{right:12px} .stats{grid-template-columns:1fr 1fr} .checks{grid-template-columns:1fr} }

/* photo category cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(19,33,44,.45)}
.card .ph{position:relative;aspect-ratio:10/7;overflow:hidden;background:#cfd6db}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.06)}
.card .ph .code{position:absolute;left:10px;top:10px;background:rgba(19,33,44,.82);color:#fff;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;padding:4px 8px;border-radius:4px}
.card .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-family:var(--f-display);font-stretch:112%;font-size:20px;line-height:1.15;margin:0}
.card p{margin:0;color:var(--graphite);font-size:14.5px}
.card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;padding-top:10px;border-top:2px solid var(--amber)}
.card .chips span{font-size:12px;color:var(--ink);background:var(--alloy);border-radius:4px;padding:3px 8px}
.card .go{margin-top:auto;padding-top:10px;font-family:var(--f-mono);font-size:12.5px;color:var(--amber-deep);font-weight:600}
.cards .card.wide{grid-column:span 2}
.cards .card.wide .ph{aspect-ratio:20/7}
@media (max-width:1100px){ .cards{grid-template-columns:repeat(3,1fr)} .cards .card.wide{grid-column:span 1} .cards .card.wide .ph{aspect-ratio:10/7} }
@media (max-width:760px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .cards{grid-template-columns:1fr} }

/* industry photo tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;color:#fff;text-decoration:none}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.07)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,24,33,0) 35%,rgba(13,24,33,.9) 100%)}
.tile .tx{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.tile h3{margin:0;font-family:var(--f-display);font-stretch:112%;font-size:19px;line-height:1.15}
.tile p{margin:6px 0 0;font-size:13px;color:#D5DDE3;line-height:1.4}
@media (max-width:1100px){ .tiles{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .tiles{grid-template-columns:1fr 1fr} .tile p{display:none} }

/* photo CTA band */
.cta-photo{position:relative;color:#fff;overflow:hidden;background:var(--ink)}
.cta-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,33,.94),rgba(13,24,33,.55))}
.cta-photo .wrap{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.cta-photo p{color:#D5DDE3;max-width:46ch;margin:14px 0 0}
.cta-photo .btn-ghost{color:#fff;border-color:#fff}
.cta-photo .btn-ghost:hover{background:#fff;color:var(--ink)}

/* floating WhatsApp */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);transition:transform .2s ease}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px;fill:#fff}

/* inner pages */
.cat-photo{width:100%;aspect-ratio:21/7;object-fit:cover;border-radius:10px;margin:6px 0 22px;display:block}
.page-head.photo{position:relative;color:#fff;border-bottom:0;overflow:hidden;background:var(--ink)}
.page-head.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-head.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,33,.93),rgba(13,24,33,.55))}
.page-head.photo .wrap{position:relative;z-index:2}
.page-head.photo .tag,.page-head.photo .lede{color:#D5DDE3}
.about-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:8px}
.about-photos img{width:100%;height:340px;object-fit:cover;border-radius:10px}
@media (max-width:760px){ .about-photos{grid-template-columns:1fr} .about-photos img{height:240px} }

/* client logo (vector rebuild) */
.logo .logo-img{height:52px;width:auto}
@media (max-width:540px){ .logo .logo-img{height:42px} }
.site-foot .logo img{height:58px;width:auto}

/* v3: lines of business */
.svc-cards{grid-template-columns:repeat(4,1fr)}
.svc-cards .card h3{font-size:19px}
@media (max-width:1100px){ .svc-cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .svc-cards{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .svc-cards{grid-template-columns:1fr} }
.cat-top.cat-top-np{display:block}
.cat-top-np .desc{max-width:70ch}

/* v4: phone in the top bar */
.tb-r{display:inline-flex;align-items:center;gap:22px}
.tb-r a{display:inline-flex;align-items:center;gap:6px}
.tb-r svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
@media (max-width:640px){ .tb-r a[href^="tel:"]{display:none} }