/* ============================================================
   Enable IT Services — shared stylesheet for secondary pages
   Matches the design tokens used on index.html
   ============================================================ */
:root{
  --ink:#12151a;
  --ink-2:#1b1f27;
  --fog:#eee9df;
  --paper:#f6f3ec;
  --brass:#c99a44;
  --brass-bright:#e0b768;
  --copper:#a8623a;
  --slate:#8b93a1;
  --slate-dim:#565d6b;
  --line: rgba(238,233,223,0.14);
  --radius: 3px;
  --display: "Space Grotesk", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --max: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--fog);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
::selection{background:var(--brass);color:var(--ink);}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px;}

/* ---------- Nav (shared across all pages) ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(18,21,26,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:var(--max);margin:0 auto;gap:16px;}
.brand{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:0.02em;text-decoration:none;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand .mark{width:9px;height:9px;border-radius:1px;background:var(--brass);box-shadow:0 0 0 3px rgba(201,154,68,0.18);}

/* everything right of the brand: language toggle, mobile hamburger, links */
.nav-right{display:flex;align-items:center;gap:14px;}

nav.links{display:flex;gap:24px;align-items:center;}
nav.links a{font-family:var(--mono);font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;text-decoration:none;color:var(--slate);transition:color .15s ease;white-space:nowrap;}
nav.links a:hover, nav.links a.current{color:var(--brass-bright);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--fog);padding:8px 10px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;cursor:pointer;}
.nav-toggle:hover{border-color:var(--brass);color:var(--brass-bright);}

.dropdown{position:relative;}
.dropdown-menu{
  /* top:100% with NO margin-top -- a margin gap here creates a dead zone
     between the trigger and the menu that isn't part of either element's
     hoverable box, so moving the mouse down through it drops :hover and
     closes the menu before you can reach a link. Zero-gap adjacency +
     extra top padding keeps the same visual breathing room without the
     dead zone. */
  display:none;position:absolute;top:100%;left:0;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  padding:14px 10px 10px;min-width:220px;flex-direction:column;gap:2px;z-index:60;
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.6);
  opacity:0;transform:translateY(-4px);transition:opacity .15s ease, transform .15s ease;
}
.dropdown-menu a{padding:9px 11px;border-radius:4px;transition:background .15s ease,color .15s ease;}
.dropdown-menu a:hover{background:rgba(201,154,68,0.1);color:var(--brass-bright);}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:flex;opacity:1;transform:translateY(0);}

/* ---------- Language toggle (flags) ---------- */
.lang-toggle{
  display:inline-flex;align-items:center;
  background:rgba(238,233,223,0.04);
  border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px;flex-shrink:0;
}
.lang-btn{
  display:flex;align-items:center;gap:7px;
  border:none;background:transparent;color:var(--slate);
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.05em;
  padding:7px 12px 7px 8px;border-radius:999px;cursor:pointer;
  transition:background .2s ease,color .2s ease;
  min-height:32px;
}
.lang-btn:hover{color:var(--fog);}
.lang-btn.active{background:rgba(201,154,68,0.16);color:var(--fog);}
.flag{width:18px;height:13px;border-radius:2px;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,0.35);}
.flag svg{display:block;width:100%;height:100%;}

/* Nav collapses to the hamburger menu well before desktop-mode overflows --
   7 nav items (incl. "Recommendations") + brand + lang-toggle need close to
   the full 1120px container width to fit on one line, so this breakpoint
   covers tablets and small laptops (768px, 1024px) too, not just phones. */
@media (max-width:1024px){
  .nav-right{gap:10px;}
  nav.links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ink-2);padding:10px 28px 18px;gap:2px;border-bottom:1px solid var(--line);display:none;}
  nav.links.open{display:flex;}
  nav.links > a{padding:12px 0;min-height:44px;display:flex;align-items:center;}
  .nav-toggle{display:block;}
  .dropdown{width:100%;}
  .dropdown > a{padding:12px 0;min-height:44px;display:flex;align-items:center;}
  .dropdown-menu{display:flex;position:static;margin:0 0 4px 12px;border:none;padding:0;background:none;box-shadow:none;opacity:1;transform:none;}
  .dropdown-menu a{min-height:40px;display:flex;align-items:center;}
  .lang-code{display:none;}
  .lang-btn{padding:10px;min-width:44px;min-height:44px;justify-content:center;}
  .nav-toggle{min-height:44px;padding:10px 14px;}
}

/* Narrow phones (~360-480px): brand + flags + hamburger can outgrow one row
   -- wrap instead of overflowing horizontally. */
@media (max-width:480px){
  .nav{flex-wrap:wrap;row-gap:10px;}
  .nav-right{margin-left:auto;}
  .brand{font-size:15px;}
}

/* ---------- Page hero ---------- */
.page-hero{padding:64px 0 48px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 85% 10%, rgba(201,154,68,0.08), transparent 45%), var(--ink);}
.crumb{font-family:var(--mono);font-size:12px;color:var(--slate-dim);margin:0 0 16px;}
.crumb a{color:var(--slate);text-decoration:none;transition:color .15s ease;}
.crumb a:hover{color:var(--brass-bright);}
.page-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.5vw,2.7rem);margin:0 0 14px;letter-spacing:-0.01em;}
.page-hero p.lede{font-size:1.02rem;color:var(--slate);max-width:62ch;margin:0;}

/* ---------- Section shell ---------- */
main section{padding:64px 0;border-bottom:1px solid var(--line);}
main section:last-of-type{border-bottom:none;}
.section-tag{font-family:var(--mono);font-size:12px;color:var(--brass-bright);letter-spacing:0.08em;text-transform:uppercase;}
h2.h{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:6px 0 30px;}
h3.h3{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0 0 8px;}

/* ---------- Service detail list (used on Solutions / Network / Computer Support) ---------- */
.service-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.service-detail{background:var(--ink);padding:30px 32px;display:grid;grid-template-columns:64px 1fr;gap:22px;transition:background .2s ease;}
.service-detail:hover{background:var(--ink-2);}
@media (max-width:640px){.service-detail{grid-template-columns:1fr;gap:10px;}}
.service-detail .idx{font-family:var(--mono);font-size:12px;color:var(--slate-dim);padding-top:2px;}
.service-detail p{color:var(--slate);margin:0;font-size:0.96rem;}
.service-detail ul{margin:12px 0 0;padding-left:18px;color:var(--slate);font-size:0.92rem;}
.service-detail li{margin-bottom:4px;}

/* ---------- Pricing table ---------- */
.rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
@media (max-width:800px){.rate-grid{grid-template-columns:1fr;}}
.rate-card{background:var(--ink);padding:30px 32px;transition:background .2s ease;}
.rate-card:hover{background:var(--ink-2);}
.rate-card h3{font-family:var(--display);font-size:1.1rem;margin:0 0 4px;}
.rate-card .price{font-family:var(--mono);color:var(--brass-bright);font-size:1.3rem;margin:0 0 16px;}
.rate-card ul{margin:0;padding-left:18px;color:var(--slate);font-size:0.92rem;}
.rate-card li{margin-bottom:6px;}
.rate-note{font-family:var(--mono);font-size:12px;color:var(--slate-dim);line-height:1.9;margin-top:24px;}

/* ---------- Blog list ---------- */
.blog-post{padding:36px 0;border-top:1px solid var(--line);}
.blog-post:first-child{border-top:none;padding-top:0;}
.blog-post .date{font-family:var(--mono);font-size:11.5px;color:var(--slate-dim);letter-spacing:0.05em;text-transform:uppercase;}
.blog-post h2{font-family:var(--display);font-size:1.3rem;font-weight:600;margin:8px 0 14px;}
.blog-post p{color:var(--slate);margin:0 0 12px;font-size:0.96rem;}
.blog-post ul, .blog-post ol{color:var(--slate);font-size:0.92rem;padding-left:20px;}
.blog-post a.src{color:var(--brass-bright);text-decoration:none;font-family:var(--mono);font-size:12px;}

/* ---------- Quick-link grid (Get Help) ---------- */
.quicklink-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media (max-width:800px){.quicklink-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.quicklink-grid{grid-template-columns:1fr;}}
.quicklink-grid a{display:block;font-family:var(--mono);font-size:12px;color:var(--slate);text-decoration:none;padding:10px 12px;border:1px solid var(--line);border-radius:4px;}
.quicklink-grid a:hover{color:var(--brass-bright);border-color:var(--brass);}

.contact-mini{border:1px solid var(--line);border-radius:6px;padding:28px;background:var(--ink-2);max-width:420px;}
.contact-mini a.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--mono);font-size:13px;color:var(--fog);transition:color .15s ease;}
.contact-mini a.row:last-child{border-bottom:none;}
.contact-mini a.row:hover{color:var(--brass-bright);}
.contact-mini span.label{color:var(--slate-dim);font-size:11px;text-transform:uppercase;letter-spacing:0.05em;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink-2);border-radius:6px;padding:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-band h2{font-family:var(--display);font-weight:600;margin:0 0 6px;font-size:1.25rem;}
.cta-band p{margin:0;color:var(--slate);}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:0.03em;padding:13px 22px;border-radius:var(--radius);text-decoration:none;transition:transform .15s ease, background .15s ease, border-color .15s ease;}
.btn-primary{background:var(--brass);color:var(--ink);font-weight:600;}
.btn-primary:hover{background:var(--brass-bright);transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--line);color:var(--fog);}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-bright);}
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Footer (shared, with legacy company info) ---------- */
footer.site-footer{padding:56px 0 30px;border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:28px;}}
.footer-grid .footer-heading{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--slate-dim);margin:0 0 14px;font-weight:600;}
.footer-grid a{display:block;font-size:13px;color:var(--slate);text-decoration:none;margin-bottom:9px;transition:color .15s ease;}
.footer-grid a:hover{color:var(--brass-bright);}
.footer-grid p{font-size:13px;color:var(--slate);margin:0 0 9px;}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--slate-dim);}
.footer-bottom a{color:var(--slate-dim);text-decoration:none;transition:color .15s ease;}
.footer-bottom a:hover{color:var(--brass-bright);}

/* ---------- Page-level entrance polish ---------- */
@media (prefers-reduced-motion:no-preference){
  main{animation:page-in .35s ease both;}
  @keyframes page-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
}