/* ============================================================
   Stone Tower Business Solutions - shared site layer
   Loaded LAST on every page, after the page styles / blog.css.
   Holds: mobile navigation, cookie notice, form validation UI,
   accessibility and contrast fixes, legal page styles.
   ============================================================ */

/* ---------- Skip link (keyboard users) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#046C91;color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Visible focus for keyboard users ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid #045E91;outline-offset:2px;border-radius:4px
}

/* ---------- Image sizing ----------
   Every img carries width/height attributes so the browser reserves the right
   space and the page does not jump while loading. Those attributes also act as
   a presentational height, so any image given a CSS width (the About panel
   tower, the background towers, the blog thumbnails) would be stretched
   vertically unless height stays auto. Modern browsers derive the correct
   height from the attribute ratio, so this keeps the anti-layout-shift benefit
   and the correct proportions at the same time. */
img{height:auto}

/* ---------- Contrast fixes ---------- */
::placeholder{color:#6b7378;opacity:1}
.crumbs,.crumbs a{color:#5a6167}
.step::before{opacity:.4}
.motto .mark{opacity:.28}

/* ---------- Mobile navigation ---------- */
.nav-toggle{
  display:none;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1.5px solid #d5dfe5;border-radius:10px;
  width:46px;height:46px;cursor:pointer;color:#0e0f10;padding:0
}
.nav-toggle:hover{border-color:#046C91;color:#046C91}
.nav-toggle .bars{display:block;width:20px;height:14px;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars i{
  content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s
}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars i{top:6px}
.nav-toggle .bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i{opacity:0}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:860px){
  .nav-inner{position:relative}
  .nav-toggle{display:inline-flex}

  /* Undo the old blanket hide: without JS the links stay visible and usable. */
  .nav-links a:not(.btn){display:block}

  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid #e7ecef;
    box-shadow:0 20px 40px rgba(14,15,16,.10);
    padding:6px 0 16px
  }
  .nav-links a:not(.btn){padding:14px 24px;font-size:1rem;border-top:1px solid #f0f4f6}
  .nav-links .btn{margin:14px 24px 2px;text-align:center}

  /* With JS the panel collapses until the toggle is pressed. */
  html.js .nav-links{display:none}
  html.js .nav-links[data-open="true"]{display:flex}
}

/* ---------- Cookie notice ---------- */
.cookie-notice{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:120;
  background:#fff;border:1px solid #dbe7ec;border-radius:14px;
  box-shadow:0 18px 50px rgba(14,15,16,.18);
  padding:18px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:760px;margin:0 auto;
  font-size:.92rem;color:#5a6167;line-height:1.55
}
.cookie-notice p{margin:0;flex:1 1 320px;color:#5a6167}
.cookie-notice a{font-weight:600}
.cookie-notice button{
  flex:0 0 auto;border:none;cursor:pointer;
  background:#046C91;color:#fff;font-family:'Archivo',system-ui,sans-serif;
  font-weight:600;font-size:.92rem;padding:11px 26px;border-radius:999px
}
.cookie-notice button:hover{background:#045E91}
@media(max-width:520px){
  .cookie-notice{padding:16px}
  .cookie-notice button{width:100%}
}

/* ---------- Form validation ---------- */
.field-error{
  display:none;margin-top:6px;font-size:.82rem;font-weight:600;color:#a4161a
}
.field-error.show{display:block}
.contact input[aria-invalid="true"],.contact textarea[aria-invalid="true"]{
  border-color:#a4161a;background:#fffafa
}
.form-status{
  margin:4px 0 0;font-size:.88rem;font-weight:600;color:#a4161a;text-align:center
}
.form-status:empty{display:none}

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-hero{position:relative;padding:80px 0 44px;overflow:hidden;background:
  radial-gradient(1200px 500px at 85% -10%, rgba(4,108,145,.10), transparent 60%),
  radial-gradient(800px 400px at -10% 110%, rgba(4,94,145,.08), transparent 60%)}
.legal-hero::before{content:"";position:absolute;top:0;right:0;width:190px;height:190px;background:#046C91;clip-path:polygon(100% 0,100% 100%,0 0)}
.legal-hero::after{content:"";position:absolute;top:0;right:0;width:150px;height:150px;background:#0e0f10;clip-path:polygon(100% 0,100% 100%,0 0)}
.legal-hero .wrap{position:relative;z-index:1;max-width:820px}
.legal-hero h1{font-size:clamp(1.9rem,4.2vw,2.6rem);margin-bottom:14px}
.legal-hero .updated{color:#5a6167;font-size:.92rem}

.legal-body{max-width:820px;margin:0 auto;padding:46px 24px 80px;font-size:1.02rem}
.legal-body h2{font-size:1.28rem;margin:44px 0 14px;scroll-margin-top:96px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-size:1.02rem;margin:26px 0 10px}
.legal-body p{margin-bottom:18px;color:#2a2f33}
.legal-body ul{margin:0 0 20px 22px;color:#2a2f33}
.legal-body li{margin-bottom:9px}
.legal-body strong{color:#0e0f10}
.legal-body a{font-weight:600}
.legal-note{background:#f2f6f8;border:1px solid #dbe7ec;border-left:4px solid #046C91;border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 32px}
.legal-note p{margin:0;color:#5a6167;font-size:.96rem}
.legal-toc{background:#f2f6f8;border:1px solid #dbe7ec;border-radius:14px;padding:22px 26px;margin:0 0 36px}
.legal-toc .toc-title{font-family:'Archivo Black',sans-serif;font-size:.95rem;margin-bottom:12px}
.legal-toc ol{margin:0 0 0 20px}
.legal-toc li{margin-bottom:6px;font-size:.95rem}

/* ---------- 404 ---------- */
.notfound{min-height:64vh;display:flex;align-items:center;padding:70px 0}
.notfound .wrap{max-width:720px;text-align:center}
.notfound .code{font-family:'Archivo Black',sans-serif;font-size:clamp(4rem,14vw,7rem);line-height:1;color:#046C91;opacity:.22;margin-bottom:-.5rem}
.notfound h1{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:16px}
.notfound p{color:#5a6167;max-width:34rem;margin:0 auto 28px}
.notfound .nf-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer link row ---------- */
.foot-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-links a{color:#5a6167}
.foot-links a:hover{color:#046C91}