/*
Theme Name: H2 Digital Solutions
Theme URI: https://h2digitalsolutions.com
Author: H2 Digital Solutions
Description: Lightweight custom theme for H2 Digital Solutions - digital marketing, IT support, IT solutions and offshore support.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: h2-digital-solutions
*/

:root{--ink:#101a3a;--blue:#2f5bff;--aqua:#20c9c0;--paper:#f5f7fb;--steel:#5a6585;--line:#dde3f0;--white:#fff}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:'Sora','DM Sans',Arial,sans-serif;line-height:1.15;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.7rem}h3{font-size:1.15rem;margin-bottom:.4rem}
a{color:inherit}:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem;flex-wrap:wrap}
.logo img{height:44px;width:auto;display:block}
nav a{text-decoration:none;font-weight:600;margin-left:1.5rem;padding:.3rem 0;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--aqua)}
.btn{display:inline-block;background:var(--blue);color:var(--white);font:inherit;font-weight:600;padding:.8rem 1.6rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#1f45d6}.btn.alt{background:transparent;box-shadow:inset 0 0 0 2px #fff;margin-left:.6rem}.btn.alt:hover{background:rgba(255,255,255,.12)}
.hero{background:var(--ink);color:#fff;padding:4.5rem 0;background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.2px);background-size:26px 26px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.hero p{max-width:34rem;margin:1.2rem 0 1.8rem;color:#c5cdea;font-size:1.12rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.tiles div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:1.1rem}
.tiles div:nth-child(1){border-top:4px solid var(--aqua)}.tiles div:nth-child(2){border-top:4px solid var(--blue)}.tiles div:nth-child(3){border-top:4px solid var(--blue)}.tiles div:nth-child(4){border-top:4px solid var(--aqua)}
.tiles strong{display:block;font-family:'Sora',Arial,sans-serif}.tiles span{font-size:.9rem;color:#c5cdea}
section{padding:4rem 0}.band{background:var(--white);border-block:1px solid var(--line)}
.intro{max-width:44rem;color:var(--steel)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:1.4rem;border-top:4px solid var(--blue)}
.card p{color:var(--steel);font-size:.96rem}.card a{font-weight:600;color:var(--blue);text-decoration:none}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;margin-top:2rem}
.steps li{counter-increment:s;padding-left:3.2rem;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--aqua);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Sora',Arial,sans-serif}
.steps p{color:var(--steel);font-size:.96rem}
.cta{background:var(--blue);color:#fff;text-align:center;padding:3.2rem 0}.cta p{margin-bottom:1.3rem;color:#dfe6ff}.cta .btn{background:#fff;color:var(--ink)}
.page-head{background:var(--ink);color:#fff;padding:3rem 0}.page-head p{color:#c5cdea;max-width:38rem;margin-top:.6rem}
.svc{display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem;padding:2.5rem 0;border-top:1px solid var(--line)}.svc:first-child{border-top:0}
.svc ul{padding-left:1.1rem;color:var(--steel)}.svc li{margin-bottom:.35rem}.svc .lead{color:var(--steel)}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem}.details p{margin-bottom:1rem}.details small{display:block;color:var(--steel)}
form label{display:block;font-weight:600;margin:1rem 0 .3rem}
form input,form select,form textarea{width:100%;padding:.75rem;border:1px solid #9aa5c4;border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
form textarea{min-height:140px;resize:vertical}.hp{position:absolute;left:-9999px}
.msg{padding:1rem;margin-bottom:1rem;background:#e3f4e6;border-left:4px solid #2e7d32;border-radius:4px}.msg.err{background:#fdeaea;border-color:#c62828}
footer{background:var(--ink);color:#aab4d6;padding:2rem 0;font-size:.95rem}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
@media(max-width:780px){.hero .wrap,.contact,.svc{grid-template-columns:1fr;gap:1.2rem}nav a{margin:0 1rem 0 0}.btn.alt{margin:.6rem 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.admin-bar header{top:32px}@media(max-width:782px){body.admin-bar header{top:46px}}
.entry{padding:3rem 0}.entry h1{margin-bottom:1rem}.entry p{margin-bottom:1rem}