/* Cognitif Group Limited — site stylesheet */

:root{
  --navy:      #10243F;
  --navy-line: #2C4568;
  --coral:     #D4785F;
  --coral-deep:#A8532F;
  --indigo:    #5B6FE8;
  --indigo-text: #9BA8FF;
  --mint:      #2ECFB0;
  --paper:     #F6F5EE;
  --ink:       #16202B;
  --slate:     #57626D;
  --line:      #DEDBCE;
  --radius:    2px;

  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Arial, Helvetica, sans-serif;

  --maxw: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,0.86), rgba(255,255,255,0.86)),
    url('../img/topo-texture-v3.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--coral-deep); text-decoration: underline; }
a:hover{ text-decoration: none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--coral-deep);
  outline-offset: 3px;
}

.wrap{ max-width: var(--maxw) !important; margin: 0 auto !important; padding: 0 36px !important; box-sizing: border-box !important; }
html, body{ overflow-x: hidden; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--navy);
}
h1{ font-size: clamp(2.3rem, 4.2vw, 3.1rem); line-height: 1.14; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.05rem); line-height: 1.22; }
h3{ font-size: 1.18rem; line-height: 1.35; }
p{ margin: 0 0 1em; }
.lede{ font-size: 1.2rem; color: var(--slate); max-width: 640px; }
.slate{ color: var(--slate); }

.eyebrow{
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 0.8em;
  display:block;
}

/* ---------- Header ---------- */
.site-header{
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height: 74px; }
.brand{ display:flex; align-items:center; gap: 12px; color: var(--navy); }
.brand img{ height: 32px; width:32px; }
.brand-text{ font-family: var(--font-display); font-weight:600; font-size: 1.05rem; color: var(--navy); }
.brand:hover{ text-decoration:none; }

nav.main-nav{ margin-left: auto; }
@media (max-width: 700px){ nav.main-nav{ margin-left: 0; } }
nav.main-nav ul{ display:flex; gap: 26px; list-style:none; margin:0; padding:0; }
nav.main-nav a{ color: var(--ink); text-decoration: none; opacity: 0.72; font-size: 0.9rem; font-weight: 700; text-align: center; display: block; }
nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{ opacity: 1; color: var(--coral-deep); }
.nav-toggle{ display:none; background:none; border:none; color: var(--navy); cursor:pointer; margin-left:auto; }
@media (max-width: 860px){
  nav.main-nav{ display:none; position:absolute; top:74px; left:0; right:0; background:#FFFFFF; border-bottom:1px solid var(--line); }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; gap:0; padding: 6px 28px 18px; }
  nav.main-nav li{ border-top: 1px solid var(--line); }
  nav.main-nav a{ display:block; padding: 14px 0; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero-logo{
  position: absolute;
  top: 64px;
  right: 36px;
  height: 72px;
  width: 72px;
  z-index: 2;
}
.hero:not(.hero--tight) .hero-logo, .hero--no-eyebrow .hero-logo{ top: 32px; }
@media (max-width: 700px){
  .hero-logo{ position: static !important; height:48px; width:48px; margin: 24px auto 12px; display:block; }
}
.hero-inner{ position:relative; z-index:1; padding: 64px 0 56px; }
.hero--tight .hero-inner{ padding: 46px 0 42px; }
.hero h1{ max-width: 700px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 1.5em; }
.plain-link{ color: var(--navy); font-weight:600; text-decoration:underline; margin-right:24px; }
.plain-link:hover{ color: var(--coral-deep); }
.hero-texture{
  position:absolute; top:0; right:0; height:100%; width:60%;
  background-image: url('../img/topo-texture-v3.jpg');
  background-size: cover; background-position: center;
  opacity: 0.9;
  mask-image: linear-gradient(to left, rgba(0,0,0,0.95), transparent);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.95), transparent);
}
@media (max-width: 700px){
  .hero-texture{
    width:100%; height:68%; top:auto; bottom:0; right:0;
    opacity:0.8;
    mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 11px 20px; border-radius: var(--radius); border: 1px solid var(--navy); text-decoration: none; cursor:pointer; }
.btn-primary{ background: var(--navy); color: #FFFFFF; }
.btn-primary:hover{ background: #1C3454; }
.btn-outline{ background: transparent; color: var(--navy); }
.btn-outline:hover{ background: rgba(16,36,63,0.05); }

/* ---------- Sections ---------- */
section{ padding: 40px 0; }
section.tight{ padding: 24px 0; }
section.flush-top{ padding-top: 0; }
.section-alt{ background: var(--paper); }
hr.rule{ border:none; border-top: 1px solid var(--line); margin: 2em 0; }
.section-head{ max-width: 680px; margin-bottom: 2em; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 860px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }
@media (min-width: 861px) and (max-width: 1000px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }

.pipeline-row{ display:flex; align-items:stretch; gap:16px; }
.pipeline-row .card{ flex:1; min-width:0; }
.pipeline-arrow{ display:flex; align-items:center; flex-shrink:0; }
@media (max-width: 860px){
  .pipeline-row{ flex-direction:column; }
  .pipeline-arrow{ justify-content:center; transform:rotate(90deg); padding:4px 0; }
}

.staff-row{ display:flex; gap:48px; align-items:flex-start; flex-wrap:wrap; }
.staff-block{ display:flex; gap:20px; align-items:flex-start; max-width:420px; }
.internship-block{ flex:1; min-width:260px; max-width:420px; }

.about-row{ display:flex; justify-content:space-evenly; align-items:center; flex-wrap:wrap; width:100%; }
.about-col{ flex:0 1 auto; }
@media (max-width:700px){ .about-row{ flex-direction:column; } }

.two-min-row{ display:flex; gap:36px; align-items:center; }
.two-min-list{ list-style:none; margin:0; padding:0; flex:0 1 29%; min-width:220px; }
.two-min-list li{ font-size:1.02rem; line-height:1.5; color:var(--ink); margin-bottom:1em; padding-left:1.1em; position:relative; }
.two-min-list li::before{ content:""; position:absolute; left:0; top:0.6em; width:8px; height:8px; background:var(--coral-deep); }
.diagram.two-min-figure{ flex:0 1 73%; min-width:280px; margin:0; padding:2px; border-width:0; }
.two-min-figure img{ width:100%; height:auto; display:block; }
@media (max-width:860px){
  .two-min-row{ flex-direction:column; }
  .two-min-list{ order:1; width:100%; }
  .two-min-figure{ order:2; width:100%; flex:1 1 100%; }
}
.card{ background:#FFFFFF; border:1px solid var(--line); padding: 26px 24px; }
.card h3{ margin-bottom:0.4em; font-size:1.05rem; }
.card p{ color: var(--slate); font-size:0.94rem; margin-bottom:0.9em; }
.card p:last-child{ margin-bottom:0; }
.card .tag{ display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--coral-deep); margin-bottom:0.6em; }

/* ---------- Navy panel (problem / solution / IP) ---------- */
.panel-navy{
  background: var(--navy);
  color: #F2F3FA;
  padding: 44px 40px;
  border-radius: var(--radius);
}
.panel-navy h2, .panel-navy h3{ color:#FFFFFF; }
.panel-navy .rule-blue{ border:none; height:2px; background: var(--indigo); margin: 18px 0 28px; width:100%; }
.panel-navy .col-label{ font-size:0.76rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1em; }
.panel-navy .col-label.features{ color: var(--indigo-text); }
.panel-navy .col-label.benefits{ color: var(--mint); }
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px; }
@media (max-width:860px){ .problem-grid{ grid-template-columns:1fr; } }
.problem-item h4{ font-family:var(--font-display); font-size:1.02rem; color:#FFFFFF; margin:0 0 0.5em; }
.problem-item p{ color:rgba(242,243,250,0.75); font-size:0.92rem; margin-bottom:0; }
.solution-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
@media (max-width:860px){ .solution-cols{ grid-template-columns:1fr; } }
.dot-list{ list-style:none; margin:0; padding:0; }
.dot-list li{ position:relative; padding-left:1.4em; margin-bottom:1.1em; font-size:0.93rem; color:rgba(242,243,250,0.88); }
.dot-list li::before{ content:""; position:absolute; left:0; top:0.4em; width:8px; height:8px; border-radius:50%; }
.dot-list.features li::before{ background: var(--indigo); }
.dot-list.benefits li::before{ background: var(--mint); }

/* ---------- Diagram figures ---------- */
figure.diagram{ margin:0; border:1px solid var(--line); padding:20px; background: var(--paper); }
figure.diagram img{ width:100%; height:auto; }
figure.diagram figcaption{ color: var(--slate); font-size:0.86rem; margin-top:12px; }

/* ---------- IP block ---------- */
.ip-block{ margin-top:10px; }
.ip-block dt{ font-weight:700; color:#FFFFFF; font-size:0.85rem; margin-top:1.1em; }
.ip-block dd{ margin:0.2em 0 0; color:rgba(242,243,250,0.82); font-size:0.92rem; }

/* ---------- Simple two-column ---------- */
.cols{ display:grid; grid-template-columns: repeat(2,1fr); gap: 40px; }
@media (max-width:700px){ .cols{ grid-template-columns:1fr; } }

/* ---------- Legal ---------- */
.legal h2{ margin-top:1.7em; font-size:1.25rem; }
.legal h2:first-of-type{ margin-top:0; }
.legal ul{ padding-left:1.2em; }
.legal li{ margin-bottom:0.5em; }
.bib-section{ border:1px solid var(--line); padding:24px 28px; margin:1.8em 0; }
.bib-heading{ color:var(--navy); text-decoration:underline; margin-top:0; }
.notice{ background: var(--paper); border:1px solid var(--line); border-left:3px solid var(--navy); padding:14px 18px; font-size:0.92rem; margin:1.5em 0; }
.meta-line{ color: var(--slate); font-size:0.88rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,0.75); padding: 32px 0 24px; font-size:0.9rem; text-align:center; }
.footer-contact{ margin-bottom:16px; }
.footer-contact a{ color: rgba(255,255,255,0.85); text-decoration:none; margin: 0 6px; }
.footer-contact a:hover{ text-decoration:underline; }
.footer-contact span{ color: rgba(255,255,255,0.4); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding-top:16px; font-size:0.8rem; color:rgba(255,255,255,0.55); }

.center{ text-align:center; }
.mt-0{ margin-top:0; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }