/* /css/styles.css  —  CyberAcuView static site
   Palette + type ported from the original CyberAcuView WordPress theme. */

@font-face {
  font-family: 'Gidole';
  src: url('../fonts/Gidole-Regular.woff2') format('woff2'),
       url('../fonts/Gidole-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Hanken Grotesk (OFL) — self-hosted, no external font CDN */
@font-face { font-family:'Hanken Grotesk'; src:url('../fonts/hanken-grotesk-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../fonts/hanken-grotesk-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../fonts/hanken-grotesk-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('../fonts/hanken-grotesk-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* original theme colors */
  --primary:#6B929D;        /* steel blue accent  rgb(107,146,157) */
  --primary-d:#587c86;
  --primary-l:#88a8b1;
  --secondary:#B5D9DF;      /* powder blue        rgb(181,217,223) */
  --dark:#313D39;           /* charcoal-green: text + footer  rgb(49,61,57) */
  --dark-l:#47564f;         /* lighter, for copyright bar */
  --off-white:#F2F7F7;      /* rgb(242,247,247) */
  --ink:#313D39;
  --muted:#6a7a75;
  --line:#e0e8e7;
  --white:#ffffff;

  --maxw:1160px;
  --radius:6px;
  --shadow:0 6px 24px rgba(31,50,45,.09);

  --font-head:'Gidole','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
a { color:var(--primary-d); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3 { font-family:var(--font-head); color:var(--dark); font-weight:400; line-height:1.15; }

/* ---------- buttons ---------- */
.btn {
  display:inline-block; background:var(--primary); color:#fff; padding:11px 24px;
  border-radius:var(--radius); font-weight:500; font-size:.95rem; border:0; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover { background:var(--primary-d); text-decoration:none; color:#fff; }
.btn-contact { background:var(--primary); }
.btn-contact:hover, .btn-contact.active { background:var(--dark); }

/* ---------- header ---------- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--white);
  transition:box-shadow .2s ease, padding .2s ease;
  padding:14px 0;
}
.site-header.scrolled { box-shadow:0 4px 18px rgba(31,50,45,.12); }
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.brand img { height:60px; width:auto; }
.site-nav { display:flex; align-items:center; gap:24px; }
.site-nav ul { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.site-nav ul a {
  position:relative; color:var(--dark); font-weight:500; font-size:.98rem; padding:6px 14px; display:block;
}
/* animated underline on hover (matches theme) */
.site-nav ul a::after {
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}
.site-nav ul a:hover { text-decoration:none; }
.site-nav ul a:hover::after, .site-nav ul a.active::after { transform:scaleX(1); opacity:1; }
.site-nav ul a.active { color:var(--primary-d); }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--dark); margin:5px 0; transition:.2s; }

/* offset for fixed header */
main { padding-top:88px; }

/* ---------- hero ---------- */
.hero {
  background-size:cover; background-position:center;
  color:#fff; height:calc(100vh - 130px); min-height:440px; display:flex; align-items:center; position:relative;
}
.hero-inner { text-align:center; padding:120px 24px; width:100%; }
.hero-tagline {
  max-width:860px; margin:0 auto; color:#fff; font-family:var(--font-head);
  font-size:clamp(1.5rem, 3vw, 2.3rem); font-weight:300; line-height:1.35;
  text-shadow:0 2px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  opacity:0; animation:fadeInSlideUp 1s ease .2s forwards;
}
.hero-scroll {
  position:absolute; left:50%; transform:translateX(-50%); bottom:34px;
  color:#fff; font-size:1rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:fadeInSlideUp 1s ease .5s forwards;
}
.hero-scroll:hover { text-decoration:none; opacity:.85; }
.hero-scroll .chev { display:inline-block; animation:bounce 2s ease infinite; }

/* ---------- sections ---------- */
.section { padding:76px 0; }
.section-title { text-align:center; font-size:2rem; margin:0 0 46px; }
.brandmark { font-family:var(--font-head); font-weight:400; }
.brandmark span { color:var(--primary); }

.page-hero { background:var(--off-white); border-bottom:1px solid var(--line); padding:56px 0; }
.page-hero h1 { font-size:2.3rem; margin:0; }

/* ---------- services grid (home) ---------- */
.services-grid-section { position:relative; overflow:hidden; }
.svc-area { position:relative; }
.svc-band { /* faint off-white band: full-bleed width, vertically centered on the card group (from theme) */
  position:absolute; top:50%; left:50%; width:100vw; height:64%;
  transform:translate(-50%,-50%); background:var(--off-white); z-index:0;
}
.svc-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; position:relative; z-index:1; }
.svc-card {
  position:relative; flex:0 1 calc(33.333% - 16px); background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 26px; color:var(--ink); box-shadow:var(--shadow); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.svc-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(31,50,45,.14); text-decoration:none; }
.svc-accent { position:absolute; top:0; left:0; height:4px; width:100%; background:var(--primary); }
.svc-card h3 { font-size:1.15rem; margin:6px 0 12px; }
.svc-card p { color:var(--muted); margin:0 0 18px; font-size:.96rem; }
.svc-more { color:var(--primary-d); font-weight:500; font-size:.92rem; }

/* ---------- services detail rows ---------- */
.svc-rows { display:flex; flex-direction:column; gap:60px; }
.svc-row { display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.svc-row-right .svc-row-img { order:2; }
.svc-row-img img { border-radius:var(--radius); box-shadow:var(--shadow); width:100%; object-fit:cover; }
.svc-row-text h2 { font-size:1.55rem; margin:0 0 14px; }
.svc-row-text p { color:var(--ink); }

/* ---------- prose ---------- */
.prose { max-width:820px; margin:0 auto; }
.prose h2 { font-size:1.5rem; margin:2em 0 .6em; }
.prose p { margin:0 0 1.1em; }
.prose ol, .prose ul { margin:0 0 1.2em; padding-left:1.3em; }
.prose li { margin:.4em 0; }
.prose .btn { margin-top:8px; }
.content-img img { border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:28px; }
.member-logos { margin-top:34px; }
.member-logos img { border-radius:var(--radius); border:1px solid var(--line); }

/* ---------- press ---------- */
.press-list { border-top:1px solid var(--line); max-width:900px; margin:0 auto; }
.press-item {
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  padding:26px 8px; border-bottom:1px solid var(--line);
}
.press-meta { display:flex; flex-direction:column; gap:5px; }
.press-date { color:var(--primary-d); font-weight:500; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.press-title { color:var(--dark); font-weight:400; font-size:1.12rem; font-family:var(--font-head); line-height:1.3; }
.press-title:hover { color:var(--primary-d); text-decoration:none; }
.press-btn { white-space:nowrap; }
.press-list .reveal.in-view:nth-child(2){ transition-delay:.06s; }
.press-list .reveal.in-view:nth-child(3){ transition-delay:.12s; }
.press-list .reveal.in-view:nth-child(4){ transition-delay:.18s; }
.press-list .reveal.in-view:nth-child(5){ transition-delay:.24s; }
.press-list .reveal.in-view:nth-child(6){ transition-delay:.30s; }
.press-release .prose { max-width:820px; }
.breadcrumb { font-size:.9rem; margin-bottom:1.4em; }
.pr-date { color:var(--primary-d); font-weight:500; letter-spacing:.03em; margin:0 0 .4em; }
.pr-title { font-size:1.85rem; margin:0 0 1em; }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
.contact-note { color:var(--muted); }
.contact-form { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.field { margin-bottom:18px; }
.field label { display:block; font-weight:500; font-size:.92rem; color:var(--dark); margin-bottom:6px; }
.field label span { color:var(--primary); }
.field input, .field textarea {
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius);
  font:inherit; color:var(--ink); background:#fdfefe;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(107,146,157,.18); }
.form-status { font-size:.92rem; margin-bottom:14px; min-height:1.2em; }
.form-status.error { color:#c0392b; }
.form-status.ok { color:#1f8a5b; }
.btn-submit { width:100%; }
.btn-submit[disabled] { opacity:.6; cursor:default; }

/* thank you */
.thankyou { padding:110px 0; }
.ty-check { width:74px; height:74px; border-radius:50%; background:var(--primary); color:#fff; font-size:2rem; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }

/* ---------- footer ---------- */
.site-footer { background:var(--dark); color:#c9d4d1; }
.footer-content { display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 24px 28px; gap:14px; }
.footer-wordmark { font-family:var(--font-head); font-size:1.7rem; font-weight:400; color:#fff; }
.footer-wordmark:hover { text-decoration:none; }
.footer-wordmark span { color:var(--primary-l); }
.footer-tagline { color:#a9b8b3; max-width:520px; font-size:.95rem; margin:0; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; margin-top:6px; }
.footer-nav a { position:relative; color:#c9d4d1; padding-bottom:3px; }
.footer-nav a::after { content:''; position:absolute; left:0; bottom:0; height:2px; width:100%; background:#fff; transform:scaleX(0); transform-origin:center; transition:transform .2s ease; }
.footer-nav a:hover { text-decoration:none; color:#fff; }
.footer-nav a:hover::after { transform:scaleX(1); }
.copyright { background:var(--dark-l); color:#e6edeb; font-size:.82rem; text-align:center; padding:10px 24px; }
.copyright a { color:#e6edeb; text-decoration:underline; }

/* ---------- scroll-reveal ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity:1; transform:none; }
.svc-grid .reveal.in-view:nth-child(2){ transition-delay:.10s; }
.svc-grid .reveal.in-view:nth-child(3){ transition-delay:.20s; }
.svc-grid .reveal.in-view:nth-child(4){ transition-delay:.30s; }
.svc-grid .reveal.in-view:nth-child(5){ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
  .hero-tagline, .hero-scroll { animation:none; opacity:1; }
  .hero-scroll .chev { animation:none; }
}

/* ---------- keyframes (from theme _animations.scss) ---------- */
@keyframes fadeInSlideUp {
  0%   { transform:translateY(15px); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
@keyframes bounce {
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-12px); }
  100% { transform:translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width:860px) {
  .svc-card { flex-basis:100%; }
  .svc-band { display:none; }
  .svc-row, .contact-grid { grid-template-columns:1fr; gap:28px; }
  .svc-row-right .svc-row-img { order:0; }
  .nav-toggle { display:block; }
  .site-nav {
    position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px;
    display:none; box-shadow:var(--shadow);
  }
  .site-nav.open { display:flex; }
  .site-nav ul { flex-direction:column; gap:0; width:100%; }
  .site-nav ul li { width:100%; border-bottom:1px solid var(--line); }
  .site-nav ul a { padding:12px 0; }
  .site-nav ul a::after { display:none; }
  .btn-contact { margin-top:14px; }
  .press-item { grid-template-columns:1fr; gap:6px; }
  .brand img { height:48px; }
  main { padding-top:76px; }
  .hero { height:calc(100vh - 110px); }
}