/* ============================================================
   HOME PAGE
   Black-and-white treatment for index.html — paper background,
   hard-shadow cards, and the "constructivist cut" hero.
   Loaded after style.css and only by index.html, so the rest
   of the site is untouched.
   All blacks come from --color-black (#333).
   ============================================================ */

/* --- no green on the home page ------------------------------
   --color-primary drives the hero panel, the testimonial band
   and the form accents, so remapping it here turns all of them
   into the same soft black in one move. --------------------- */
:root{
  --color-primary:var(--color-black);
  --color-primary-dark:var(--color-black);
  --paper:#f4f3ef;
}

/* --- paper background --- */
body,
.hero,
.case-studies,
.publications,
.faq-section,
.contact-section,
.main-footer{background:var(--paper)}

/* the spacer above the footer carries an inline white background */
.contact-section + div{background:var(--paper)!important}

/* cards stay white so they read as objects on the paper */
.project-card,
.ai-step,
.faq-item,
.testimonial-slider,
.publication-card,
.contact-form input,
.contact-form textarea{background:var(--color-white)}

/* the two dark break bands — soft black, never pure #000 */
.ai-process,
.testimonials{background:var(--color-black)}

/* no dot patterns anywhere on the home page */
.dot-pattern,
.dot-pattern-left{display:none}

/* the hero panel runs to the top of the page, so the nav needs an
   opaque band — otherwise the right-hand links sit dark-on-dark */
.main-nav,
.main-nav.scrolled{background:var(--paper)}

/* ============================================================
   HERO — "constructivist cut"
   The photo is sliced on a hard diagonal, a triangle answers it
   from below, a circle sits over the top corner and a hairline
   runs off the left edge.
   ============================================================ */
.hero h1 .highlight{background:var(--color-black);color:var(--color-white);padding:2px 10px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.social-link-vertical:hover{color:var(--color-black)}

.hero-image{position:relative;background:none;padding:0;box-shadow:none}

.hero-image img{
  display:block;position:relative;z-index:2;
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
}

/* triangle counterform */
.hero-shape{
  position:absolute;
  left:-80px;bottom:-30px;
  width:250px;height:250px;
  background:var(--color-black);
  clip-path:polygon(0 100%,100% 100%,0 0);
  z-index:1;
}

/* outlined circle over the top corner */
.hero-image-container::after{
  content:'';
  position:absolute;
  top:-22px;left:-58px;
  right:auto;bottom:auto;
  width:150px;height:150px;
  background:none;
  background-image:none;
  border:2.5px solid var(--color-black);
  border-radius:50%;
  z-index:3;
}

/* hairline running off to the left */
.hero-image::before{
  content:'';
  position:absolute;
  left:-190px;top:34%;
  width:190px;height:2px;
  background:var(--color-black);
  z-index:1;
}

/* ============================================================
   SECTIONS
   ============================================================ */

/* section marker: the thin rule becomes a small square */
.section-line{width:12px;height:12px;background:var(--color-black);
  border:2px solid var(--color-black)}
.ai-process .section-line{background:var(--color-white)!important;border-color:var(--color-white)}

/* case study logos: a clean 3x2 of hard-shadow cards */
.projects-grid{grid-template-columns:repeat(2,1fr);gap:20px}
@media (min-width:768px){.projects-grid{grid-template-columns:repeat(3,1fr);gap:28px}}
.project-logo{display:flex;align-items:center;justify-content:center;flex:1 1 auto;
  max-width:126px;width:100%;min-height:0;margin:0 auto}
.project-card{align-items:stretch;justify-content:flex-start;flex-direction:column;
  height:250px;min-height:250px;padding:28px 22px 12px;border:2.5px solid var(--color-black);
  border-radius:0;aspect-ratio:auto;
  box-shadow:8px 8px 0 var(--color-black);
  transition:transform .18s ease,box-shadow .18s ease}
.project-card:hover{background:var(--color-white);border-color:var(--color-black);
  transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--color-black)}
.project-details{display:flex;flex-direction:column;justify-content:flex-end;
  flex:0 0 72px;min-height:72px;margin-top:0;padding:0}
.project-role{display:block;margin-bottom:14px;color:var(--color-black);
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.4px}
.project-tags{display:flex;flex-wrap:wrap;gap:7px}
.project-tags span{display:inline-block;padding:4px 7px;border:1.5px solid var(--color-black);
  color:var(--color-black);font-family:var(--font-mono);font-size:10px;
  line-height:1.1;letter-spacing:.4px;text-transform:uppercase}
@media (max-width:600px){
  .projects-grid{grid-template-columns:1fr;gap:24px}
  .project-card{height:238px;min-height:238px;padding:24px 20px 9px}
  .project-details{flex-basis:72px;min-height:72px}
}

/* AI process: white cards on the dark band */
.ai-process-flow{gap:12px}
.ai-step-arrow{padding:0 10px;opacity:1;color:var(--color-white)}
.ai-step{background:var(--color-white);border:2.5px solid var(--color-black);border-radius:0;
  box-shadow:8px 8px 0 var(--color-white);padding:24px 22px;
  transition:transform .18s ease,box-shadow .18s ease}
.ai-step:hover{background:var(--color-white);border-color:var(--color-black);
  transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--color-white)}
.ai-step-icon{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:16px;background:var(--color-black);
  border:2.5px solid var(--color-black);box-shadow:5px 5px 0 #c7c7c7;color:var(--color-white)}
.ai-step-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.ai-step-title{color:var(--color-black);margin-bottom:12px}
.ai-step-desc{color:#555;line-height:1.55}
.ai-tool-tag{background:transparent;border:1.5px solid var(--color-black);color:var(--color-black);
  border-radius:0;text-transform:uppercase;font-size:10px}

/* testimonials: white card on the dark band */
.testimonial-slider{background:var(--color-white);border:2.5px solid var(--color-black);
  box-shadow:8px 8px 0 var(--color-white);padding:34px 26px;max-width:760px}
.slider-arrow{color:var(--color-black)}
.slider-arrow:hover{color:var(--color-black);opacity:.5}

/* FAQ */
.faq-item{border:2.5px solid var(--color-black)!important;padding:18px 22px!important;
  box-shadow:6px 6px 0 var(--color-black);margin-bottom:18px}

/* contact form: bordered boxes instead of underlines */
.contact-form input,.contact-form textarea{border:2.5px solid var(--color-black);padding:12px 14px}
.contact-form textarea{min-height:120px;padding-top:14px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--color-black);
  box-shadow:4px 4px 0 var(--color-black)}
.btn-submit{background:var(--color-black);color:var(--color-white);
  border:2.5px solid var(--color-black);border-radius:0;
  box-shadow:6px 6px 0 var(--color-black);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn-submit:hover{background:var(--color-white);color:var(--color-black);
  transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--color-black)}

/* footer */
.main-footer{border-top:2.5px solid var(--color-black)}