/* ============================================================
   CallTech theme 1.1.0 — header + footer
   Plain CSS, no build step. Load after any reset.
   ============================================================ */
:root {
  --ct-orange:#FF5000;
  --ct-black:#0B0B0C;
  --ct-ink:#0B0B0C;
  --ct-grey:#A3A19D;
  --ct-grey-dk:#6B6B6E;
  --ct-line:#E2E0DC;
  --ct-line-dk:#26262A;
  --ct-max:1240px;
  --ct-gutter:32px;
  --ct-header-h:78px;
  --ct-sans:Archivo, Helvetica, Arial, sans-serif;
  --ct-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; background:#fff; }
body {
  font-family:var(--ct-sans);
  color:var(--ct-ink);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--ct-orange); text-decoration:none; }
a:hover { color:var(--ct-black); }
::selection { background:var(--ct-orange); color:#fff; }

/* ---------- Buttons ---------- */
.ct-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:13px 22px;
  font-family:var(--ct-sans); font-size:14px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; border:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.ct-btn--primary { background:var(--ct-orange); color:#fff; }
.ct-btn--primary:hover { background:var(--ct-black); color:#fff; }
.ct-btn--ghost { background:none; color:#fff; border:1px solid #3A3A3F; }
.ct-btn--ghost:hover { border-color:var(--ct-orange); color:var(--ct-orange); }
.ct-btn--block { display:flex; width:100%; padding:18px; font-size:16px; }

/* ---------- Header ---------- */
.ct-header {
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--ct-line);
}
.ct-header__inner {
  max-width:var(--ct-max); margin:0 auto; padding:0 var(--ct-gutter);
  height:var(--ct-header-h);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.ct-header__logo { display:block; flex-shrink:0; }
.ct-header__logo img { height:30px; width:auto; display:block; }

.ct-nav { display:flex; align-items:center; gap:2px; margin-left:auto; white-space:nowrap; }
.ct-nav__item { position:relative; }
.ct-nav__link {
  display:flex; align-items:center; gap:7px;
  padding:28px 11px;
  font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--ct-ink);
}
.ct-nav__link:hover, .ct-nav__link.is-active { color:var(--ct-orange); }
.ct-nav__caret {
  width:4px; height:4px; display:block;
  border-right:1.5px solid var(--ct-grey); border-bottom:1.5px solid var(--ct-grey);
  transform:rotate(45deg) translateY(-1px);
}
.ct-nav__cta { margin-left:20px; }

/* ---------- Desktop dropdown (CSS hover + keyboard focus) ---------- */
.ct-dropdown {
  position:absolute; top:100%; left:0; min-width:290px;
  background:var(--ct-black); border-top:3px solid var(--ct-orange);
  padding:8px 0 12px; box-shadow:0 24px 48px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transition:opacity .12s;
}
.ct-nav__item:hover > .ct-dropdown,
.ct-nav__item:focus-within > .ct-dropdown { opacity:1; visibility:visible; }
.ct-dropdown__group {
  padding:14px 22px 7px;
  font-family:var(--ct-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#8A8A8E;
}
.ct-dropdown__link {
  display:block; padding:9px 22px;
  font-size:14px; font-weight:500; color:#D8D6D2;
}
.ct-dropdown__link:hover { color:var(--ct-orange); background:#161617; }

/* ---------- Burger ---------- */
.ct-burger {
  display:none; margin-left:auto;
  flex-direction:column; justify-content:center; gap:6px;
  width:48px; height:48px; padding:0 12px;
  background:none; border:none; cursor:pointer;
}
.ct-burger span { display:block; height:2px; width:100%; background:var(--ct-orange); }

/* ---------- Mobile drawer ---------- */
.ct-drawer {
  position:fixed; inset:var(--ct-header-h) 0 0 0; z-index:60;
  background:var(--ct-black); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.ct-drawer[hidden] { display:none; }
.ct-drawer__list { display:flex; flex-direction:column; }
.ct-drawer__item { border-bottom:1px solid #1F1F23; }
.ct-drawer__row {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 28px; min-height:56px;
  background:none; border:none; cursor:pointer; text-align:left;
}
.ct-drawer__label { font-family:var(--ct-sans); font-size:20px; font-weight:700; letter-spacing:-.015em; color:#fff; }
.ct-drawer__sign { font-family:var(--ct-mono); font-size:22px; line-height:1; color:var(--ct-orange); width:24px; text-align:center; }
.ct-drawer__sub { display:flex; flex-direction:column; background:#121214; padding:6px 0 14px; }
.ct-drawer__sub[hidden] { display:none; }
.ct-drawer__group {
  padding:16px 28px 6px;
  font-family:var(--ct-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8A8A8E;
}
.ct-drawer__link {
  display:block; padding:13px 28px; min-height:48px;
  font-size:16px; font-weight:500; color:var(--ct-grey);
}
.ct-drawer__link:hover { color:var(--ct-orange); }
.ct-drawer__foot { padding:28px; display:flex; flex-direction:column; gap:14px; }
.ct-drawer__tagline {
  margin-top:6px; text-align:center;
  font-family:var(--ct-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ct-grey-dk);
}
body.ct-drawer-open { overflow:hidden; }

/* ---------- Footer ---------- */
.ct-footer { background:var(--ct-black); color:var(--ct-grey); }
.ct-footer__top {
  max-width:var(--ct-max); margin:0 auto; padding:64px var(--ct-gutter) 0;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px;
}
.ct-footer__brand img { height:34px; width:auto; display:block; margin-bottom:22px; }
.ct-footer__address { font-size:15px; line-height:1.7; }
.ct-footer__title {
  margin-bottom:18px;
  font-family:var(--ct-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.ct-footer__links { display:flex; flex-direction:column; gap:11px; }
.ct-footer__links a { font-size:14px; color:var(--ct-grey); }
.ct-footer__links a:hover { color:var(--ct-orange); }
.ct-footer__bottom { max-width:var(--ct-max); margin:44px auto 0; padding:0 var(--ct-gutter) 44px; }
.ct-footer__rule {
  border-top:1px solid var(--ct-line-dk); padding-top:24px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-family:var(--ct-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ct-grey-dk);
}

/* ---------- Breakpoint: matches the design's 900px ---------- */
@media (max-width:900px) {
  .ct-nav { display:none; }
  .ct-burger { display:flex; }
  .ct-header__inner { padding:0 20px; }
  .ct-footer__top { grid-template-columns:1fr 1fr; gap:36px; padding:48px 20px 0; }
  .ct-footer__brand { grid-column:1 / -1; }
  .ct-footer__bottom { padding:0 20px 36px; }
}
@media (max-width:520px) {
  .ct-footer__top { grid-template-columns:1fr; }
}
