/* ===== OX RESEARCH — LAYOUT + HERO TUNING (v4) ===== */
:root{
  --indigo:#161759; --cyan:#00FDFF; --teal:#00A7A8;
  --ink:#eaf6f7; --muted:#b7d8db; --line:#1a2127; --bg:#0b0f12;

  /* widths */
  --wrap:1640px;           /* main BODY width (unchanged) */
  --wrap-header:2100px;    /* NEW: wider HEADER width */
  --wrap-wide:1760px;      /* optional extra-wide sections */
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  font:17px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,253,255,.10), transparent),
    linear-gradient(#0a0d10,#0b0f12);
}

/* containers */
.container{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.container-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 20px}
.pad-y{padding:80px 0}

/* =================== HEADER =================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--wrap-header);   /* use the wider header container */
  margin:0 auto;
  padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-word{height:50px; width:auto}
.nav-links{display:flex; gap:30px; margin-left:auto}
.nav a{color:#161759; text-decoration:none; font-weight:600}
.nav a:hover{color:var(--teal)}
.nav-toggle{display:none}

/* =================== FULL-BLEED HELPER =================== */
.edge{position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw}

/* =================== HERO =================== */
.hero{
  position:relative; min-height:clamp(520px,70vh,800px);
  border-bottom:1px solid rgba(0,0,0,.1); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.12) 66%, rgba(0,0,0,0) 100%);
}
.hero-content{position:relative; z-index:2; display:flex; align-items:center; min-height:inherit; padding:60px 0}
.hero-content .container{width:100%; display:flex; align-items:center}
/* === HERO LEFT EDGE ALIGNMENT === */
.hero-content .container{
  max-width: var(--wrap-header);   /* match services bar/contact width */
  margin: 0 auto;
  padding: 0 20px;                 /* same side padding as other sections */
}


/* Left-aligned hero copy; slightly smaller than v3 */
.hero-text{ text-align:left; color:#fff; max-width:1280px } /* allow wide single-line text */
.hero-text h1{
  margin:0 0 18px;
  font-weight:800;
  font-size:clamp(44px, 6.2vw, 66px);  /* between v2 and v3 */
  line-height:1.04;
}
.hero-text .sub{
  color:#dbe6ea;
  font-size:clamp(19px, 1.8vw, 24px);  /* between v2 and v3 */
  margin:0 0 34px;                     /* a bit more air above buttons */
  max-width:1200px;
}
@media (min-width:1200px){
  .hero-text h1, .hero-text .sub{ white-space:nowrap }
}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border-radius:14px; text-decoration:none; border:1px solid var(--line); transition:.2s; font-weight:600}
.btn-primary{background:linear-gradient(135deg, var(--cyan), var(--teal)); color:#021316; border:none}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan)}
.cta-row{display:flex; gap:16px; flex-wrap:wrap}

/* =================== HIGHLIGHTED SERVICES BAR =================== */
.service-bar{
  background:#000;                 /* was #fff */
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  line-height:1;
}
.service-bar-inner{
  max-width:var(--wrap-header);
  margin:0 auto;
  padding:20px 20px;               /* keep your “twice as tall” look */
}
.service-list{
  list-style:none;
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:10px 14px;
  font-weight:800;
  font-size:20px;

  /* cyan gradient text */
  background:linear-gradient(90deg, #BFFEFF 0%, #00FDFF 55%, #7DFDFF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.service-list li{ white-space:nowrap }
.service-list li:not(:last-child)::after{
  content:"|";
  margin:0 8px 0 12px;
  color:#00FDFF;
  -webkit-text-fill-color:#00FDFF; /* solid cyan for the divider */
  opacity:.85;
  font-weight:700;
}

/* small screens—tighten slightly */
@media (max-width:760px){
  .service-bar-inner{ padding:16px 16px }
  .service-list{ font-size:17px; gap:8px 12px }
}


/* =================== WHAT WE DO =================== */
.whatwedo{
  background:#fff;
  color:#000;
  border-top:1px solid var(--line);
}

/* Wider than before, still tighter than the header */
.whatwedo-inner{
  max-width:min(1320px, 96vw);
  margin:0 auto;
  padding:64px 20px 76px;
}

.whatwedo-title{
  text-align:center;
  font-size:clamp(30px, 3.6vw, 44px);
  line-height:1.1;
  font-weight:900;
  color:#000;
  letter-spacing:.2px;
  margin:0 0 16px 0;
}

/* New lede under the title — left aligned by request */
.whatwedo-lede{
  max-width: 62ch;
  margin: 0 auto 28px auto;   /* centered block; text itself is left-aligned */
  text-align:left;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height:1.55;
  color:#111;
}

.whatwedo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch; /* equal heights so CTAs align */
}

/* Cards */
.wwd-card{
  position:relative;
  background:#fff;
  border:1px solid #E6E8EB;
  border-radius:16px;
  padding:22px 22px 20px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* top accent strip */
.wwd-accent{
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, #BFFEFF 0%, #00FDFF 60%, #7DFDFF 100%);
}

/* optional spot art (safe to omit if not uploaded) */
.wwd-spot{
  position:absolute; right:-6px; top:-6px;
  width:180px; max-width:40%;
  opacity:.18; pointer-events:none;
}

/* header row: icon + title */
.wwd-head{ display:flex; align-items:center; gap:12px; margin:4px 0 10px; }
.wwd-icon{ width:26px; height:26px; color:#000; flex:0 0 26px; }
.wwd-h3{
  margin:0;
  font-size:clamp(18px, 2vw, 22px);
  font-weight:900;
  color:var(--indigo, #161759);
  letter-spacing:.2px;
}

/* teal subhead */
.wwd-sub{
  margin:0 0 12px 0;
  font-weight:900;
  color:var(--teal, #00A7A8);
}

/* body container to lock vertical rhythm across cards */
.wwd-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  /* ensures consistent alignment of CTA by reserving space for copy+chips */
  min-height: 290px;              /* adjust if your content changes a lot */
}

.wwd-body p{ margin:0; line-height:1.55; color:#000; }

/* capabilities */
.wwd-cap-title{
  margin:6px 0 -2px 0;
  font-weight:900;
  color:var(--teal, #00A7A8);
}

.chip-list{
  --chip-bg:#F6F8FA;
  --chip-bd:#E6E8EB;
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.chip-list li{
  font-size:14px;
  padding:6px 10px;
  border:1px solid var(--chip-bd);
  border-radius:999px;
  background:var(--chip-bg);
  white-space:nowrap;
}

/* CTA pinned to bottom */
.wwd-cta{ margin-top:auto; padding-top:6px; }
.btn-cyan{
  --grad:linear-gradient(90deg, #BFFEFF 0%, #00FDFF 60%, #7DFDFF 100%);
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:var(--grad);
  color:#000; font-weight:900; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,253,255,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cyan:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,253,255,.32) }

/* Hover on card */
.wwd-card:hover{
  border-color:rgba(0,253,255,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  transform:translateY(-2px);
}

/* Responsive */
@media (max-width:1024px){
  .whatwedo-inner{ padding:56px 18px 68px }
  .whatwedo-grid{ grid-template-columns:1fr 1fr; gap:18px }
  .wwd-spot{ width:150px }
  .wwd-body{ min-height: 320px; } /* give extra space when cards wrap */
}
@media (max-width:640px){
  .whatwedo-inner{ padding:44px 16px 56px }
  .whatwedo-grid{ grid-template-columns:1fr; gap:14px }
  .wwd-spot{ display:none }
  .wwd-body{ min-height: 0; } /* let content flow naturally on small screens */
}