/* ============ Document Sign — layout.css : header, hero, footer, grids ============ */

/* ---------------- Header / Nav ---------------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);
  font-weight:800;font-size:1.3rem;color:var(--navy);letter-spacing:-.02em}
.brand:hover{color:var(--navy)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__logo{height:34px;width:auto;display:block}
.footer__brand .brand__logo{height:40px}
@media(max-width:480px){.brand__logo{height:30px}}
.nav__links{display:none;align-items:center;gap:2rem}
.nav__links a{font-family:var(--font-body);font-weight:500;font-size:1rem;color:var(--navy)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--indigo)}
.nav__cta{display:none;align-items:center;gap:.9rem}
.nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--navy);margin-inline:auto;transition:.25s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none;border-top:1px solid var(--border);background:#fff;padding:18px var(--gutter) 28px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:13px 4px;font-weight:500;color:var(--navy);border-bottom:1px solid var(--border)}
.mobile-menu a:last-of-type{border-bottom:0}
.mobile-menu .btn{display:flex;justify-content:center;align-items:center;width:100%;margin-top:16px;padding:14px 30px;border-bottom:0}
.mobile-menu .btn--primary,.mobile-menu .btn--primary:hover{color:#fff}
.mobile-menu .btn--dark,.mobile-menu .btn--dark:hover{color:#fff}

@media(min-width:960px){
  .nav__links{display:flex}
  .nav__cta{display:flex}
  .nav__toggle{display:none}
  .mobile-menu{display:none!important}
}

/* ---------------- Hero (split) ---------------- */
.hero{position:relative;background:var(--bg-soft);overflow:hidden}
.hero::after{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;
  background:radial-gradient(closest-side,rgba(85,103,255,.10),transparent 70%);z-index:0}
.hero__grid{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,3.5rem);
  align-items:center;padding-block:clamp(48px,7vw,86px)}
.hero__title{margin-bottom:1.1rem}
.hero__lead{font-size:var(--fs-lead);color:var(--text-soft);max-width:34ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.hero__meta{margin-top:1.4rem;font-size:var(--fs-sm);color:var(--text-soft);display:flex;align-items:center;gap:.5rem}
.hero__meta svg{width:1.1em;height:1.1em;color:var(--green)}
.hero__media{position:relative}
.hero__media img{width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
@media(min-width:900px){.hero__grid{grid-template-columns:1.05fr 1fr}}

/* page hero (inner) */
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--border)}
.page-hero__inner{padding-block:clamp(40px,6vw,72px);max-width:760px}
.page-hero h1{margin-bottom:1rem}
.page-hero p{font-size:var(--fs-lead);color:var(--text-soft)}
.breadcrumb{display:flex;gap:.5rem;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-soft);margin-bottom:1rem}
.breadcrumb a{color:var(--text-soft)}.breadcrumb a:hover{color:var(--indigo)}
.breadcrumb span[aria-current]{color:var(--navy)}

/* ---------------- generic grids ---------------- */
.grid{display:grid;gap:clamp(1rem,2.5vw,1.6rem)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* split feature row (image + text) */
.split{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.split img{width:100%;border-radius:var(--r-xl);box-shadow:var(--shadow)}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--rev .split__media{order:2}}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--navy);color:#c9cce6}
.footer__top{display:grid;gap:2.2rem;padding-block:clamp(48px,7vw,76px)}
.footer__brand .brand{color:#fff}
.footer__brand p{color:#9ea3cc;margin-top:1rem;max-width:34ch;font-size:var(--fs-sm)}
.footer__col h3{color:#fff;font-size:1rem;margin-bottom:1.1rem;font-family:var(--font-body);font-weight:600;letter-spacing:.02em}
.footer__col a{display:block;color:#9ea3cc;padding:.4rem 0;font-size:var(--fs-sm)}
.footer__col a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;
  flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:var(--fs-sm);color:#8990bd}
.footer__bottom p{color:#9ea3cc}
.footer__bottom nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer__bottom a{color:#8990bd}.footer__bottom a:hover{color:#fff}
@media(min-width:720px){.footer__top{grid-template-columns:1.6fr 1fr 1fr 1fr}}