:root{
  /* Monochrome tokens */
  --bg: #F5F4F1;
  --surface: #FFFFFF;
  --ink: #0B0B0C;
  --muted: #4E4F55;
  --hairline: #D8D6D1;

  --dark: #0B0B0C;
  --darkText: #F5F4F1;

  /* Type */
  --sans: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  /* Layout */
  --container: 1240px;
  --radius: 14px;
  --padY: clamp(64px, 6vw, 96px);
  --padX: clamp(20px, 3.5vw, 48px);

  /* Hero */
  --heroPadY: clamp(84px, 8vw, 128px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
}

img{max-width:100%; display:block}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:-999px; top:12px;
  background:var(--surface);
  border:1px solid var(--hairline);
  padding:10px 12px;
  border-radius:10px;
  z-index:1000;
}
.skip-link:focus{left:12px}

.container{
  width:min(var(--container), calc(100% - 2*var(--padX)));
  margin:0 auto;
}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  padding:14px 0;
  transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
  background:transparent;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background: rgba(245,244,241,0.86);
  border-bottom:1px solid var(--hairline);
  backdrop-filter: blur(10px);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:18px;
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo-img{
  height: 28px;      /* 20–24px is ideal */
  width: auto;
  display:block;
}
.hero-logo{
  height: 72px;              /* adjust 40–52px if you want */
  width: auto;
  display: block;
  margin: 10px 0 18px;       /* creates the “lowered” headline */
  opacity: 0.98;
}
/* LIGHT HERO: force hero copy to be readable (dark) */
.hero .hero-copy h1,
.hero .hero-copy .hero-subhead,
.hero .hero-copy .hero-body,
.hero .hero-copy .hero-cred{
  color: rgba(11,11,12,0.70);
}

/* Slight hierarchy */
.hero .hero-copy .hero-body{ color: rgba(11,11,12,0.78); }
.hero .hero-copy .hero-cred{ color: rgba(11,11,12,0.72); }

/* Buttons for light hero */
.hero .hero-copy .cta-secondary{
  color: rgba(11,11,12,0.86);
  border: 1px solid rgba(11,11,12,0.25);
}

.menu-btn{
  display:none;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(11,11,12,0.22);
  background: transparent;
  color: rgba(11,11,12,0.82);
  font-weight:600;
  font-size:14px;
}

/* Dropdown panel */
.mobile-nav{
  display:none;
  position: fixed;
  left: 0;
  right: 0;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 1200;
  background: rgba(245,244,241,0.98);
  border-bottom: 1px solid var(--hairline);
  padding: 10px var(--padX) 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.mobile-nav.open{ display:block; }

.mobile-nav a{
  display:block;
  padding: 12px 4px;
  border-top: 1px solid rgba(11,11,12,0.08);
  color: rgba(11,11,12,0.80);
  text-decoration:none;
}
.mobile-nav a:first-child{ border-top:none; }
.mobile-nav a:active{ background: rgba(11,11,12,0.04); border-radius:10px; }


.nav{
  display:flex;
  gap:18px;
  margin-left:auto;
  font-size:14px;
  color:rgba(11,11,12,0.70);
}
.site-header.scrolled .nav{
  color:rgba(11,11,12,0.70);
}
.nav a{
  padding:8px 6px;
  border-radius:10px;
}
.nav a:hover{
  background: rgba(255,255,255,0.08);
  text-decoration:none;
}
.site-header.scrolled .nav a:hover{
  background: rgba(11,11,12,0.06);
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.2px;
  white-space:nowrap;
}
.cta-primary{
  background: var(--darkText);
  color: var(--ink);
  border:1px solid transparent;
}
.cta-secondary{
  background: transparent;
  color: rgba(245,244,241,0.92);
  border:1px solid rgba(245,244,241,0.35);
}
.site-header.scrolled .cta-primary{
  background: var(--ink);
  color: var(--darkText);
}

/* Hero */
.hero{
  padding: calc(var(--heroPadY) + 54px) 0 var(--heroPadY);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 64px);
  align-items:start;
}
.eyebrow{
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(1,1,1,0.65);
  margin-bottom:14px;
}
.hero h1{
  font-family: var(--serif);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height:1.08;
  margin:0 0 18px;
}
.hero-subhead{
  margin:0 0 12px;
  font-size: clamp(16px, 1.25vw, 20px);
  color: rgba(245,244,241,0.86);
}
.hero-body{
  margin:0 0 12px;
  color: rgba(245,244,241,0.72);
  max-width: 64ch;
  font-size: 16px;
}
.hero-cred{
  margin:0;
  color: rgba(245,244,241,0.72);
  font-size: 14px;
}
.hero-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}
.micro-link{
  display:inline-block;
  margin-top:18px;
  color: rgba(245,244,241,0.72);
  font-size:14px;
}
.micro-link:hover{ color: rgba(245,244,241,0.95); text-decoration:none }

/* Hero visual: 2×2 cards from one image (background-position trick) */
.hero-visual{
  margin-top: 8px;
}
.quad-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quad-card{
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4 / 3;
}
.quad-card{
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
}

/* The same image in each card, scaled to 200% so each card shows one quadrant */
.quad-img{
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  max-width: none;     /* important */
  object-fit: cover;
  filter: contrast(1.05);
}

/* Move the big image so each card reveals a different quadrant */
.quad-img.q1{ transform: translate(0%, 0%); }
.quad-img.q2{ transform: translate(-50%, 0%); }
.quad-img.q3{ transform: translate(0%, -50%); }
.quad-img.q4{ transform: translate(-50%, -50%); }

.q1{ background-position: 0% 0% }
.q2{ background-position: 100% 0% }
.q3{ background-position: 0% 100% }
.q4{ background-position: 100% 100% }

.hero-visual-note{
  margin-top:10px;
  font-size:12px;
  color: rgba(245,244,241,0.55);
}

/* Sections */
.section{
  padding: var(--padY) 0;
}
.section-dark{
  background: var(--dark);
  color: var(--darkText);
}
.section-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(18px, 3vw, 56px);
  align-items:start;
}
.section-head{
  position:sticky;
  top: 92px;
}
.index{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(78,79,85,0.9);
}
.section-dark .index{
  color: rgba(245,244,241,0.55);
}
.section-head h2{
  margin:8px 0 0;
  font-weight:600;
  font-size:18px;
}

.stack > * + *{ margin-top: 14px; }
.lead{
  color: var(--muted);
  font-size: 16px;
  max-width: 80ch;
}
.section-dark .lead{
  color: rgba(245,244,241,0.72);
}

/* Cards / editorial */
.card{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow:hidden;
}
.section-dark .card{
  background: transparent;
  border-color: rgba(245,244,241,0.22);
}
.editorial{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
}
.editorial-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: contrast(1.05);
}
.editorial-copy{
  padding: clamp(18px, 2.4vw, 28px);
}
.editorial-copy h3{
  margin:0 0 10px;
  font-family: var(--serif);
  font-weight:500;
  letter-spacing:-0.01em;
  font-size: clamp(20px, 1.6vw, 26px);
}
.editorial-copy p{ margin: 0 0 12px; color: var(--muted); }
.editorial-copy p:last-child{ margin-bottom:0; }

/* Offer cards */
.cards-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cards-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.offer-card{
  border: 1px solid rgba(245,244,241,0.22);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
}
.offer-card.light{
  border-color: var(--hairline);
  background: var(--surface);
}
.offer-title{
  font-family: var(--serif);
  font-weight:500;
  font-size: 18px;
  margin-bottom: 10px;
}
.offer-card ul{
  margin:0;
  padding-left: 18px;
  color: rgba(245,244,241,0.80);
}
.offer-card.light ul{ color: var(--muted); }
.offer-card li{ margin: 8px 0; }

/* Strip divider */
.strip{
  padding: 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background: var(--bg);
}
.strip img{
  width:100%;
  height: clamp(160px, 16vw, 240px);
  object-fit: cover;
  filter: contrast(0.95) brightness(1.05);
  opacity: 0.92;
}

/* Platform two-column */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.col{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
}
.microhead{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: rgba(78,79,85,0.9);
  margin-bottom: 8px;
}
.subhead{
  font-family: var(--serif);
  font-weight:500;
  margin-bottom: 10px;
}
.col ul{ margin:0; padding-left: 18px; color: var(--muted); }
.col li{ margin: 8px 0; }

/* Accordion */
.accordion{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.accordion summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 4px 2px;
}
.accordion summary::-webkit-details-marker{ display:none }
.summary-title{
  font-family: var(--serif);
  font-weight:500;
  font-size: 18px;
}
.summary-icon{
  width: 28px; height: 28px;
  display:grid; place-items:center;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  color: var(--muted);
}
.accordion[open] .summary-icon{ transform: rotate(45deg) }
.teaser{
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.hood-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hood-label{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: rgba(78,79,85,0.9);
  margin-bottom: 8px;
}
.hood-grid p{ margin:0; color: var(--muted); }
.hood-grid ul{ margin:0; padding-left:18px; color: var(--muted); }
.hood-grid li{ margin: 8px 0; }

/* Mini quad anchors */
.mini-quad-wrap{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.mini-quad{
  width: 76px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background-image: url("assets/scheme_technologies.png");
  background-repeat:no-repeat;
  background-size: 200% 200%;
  background-position: 0% 0%;
}
.mini-q2{ background-position: 100% 0% }
.mini-q3{ background-position: 0% 100% }
.mini-q4{ background-position: 100% 100% }

/* Tiles */
.tiles{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.tile{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
}
.tile-title{
  font-family: var(--serif);
  font-weight:500;
  margin-bottom: 10px;
}
.tile p{ margin:0; color: var(--muted); }

/* Applications panels */
.two-panels{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.panel{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
}
.panel ul{ margin:0; padding-left:18px; color: var(--muted); }
.panel li{ margin: 8px 0; }

/* Contact section */
.contact{
  position:relative;
  overflow:hidden;
}
.contact-bg{
  position:absolute;
  inset:0;
  background-image: url("assets/experiment3_bw.png");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: contrast(1.05) brightness(0.85);
  pointer-events:none;
}
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  position:relative;
}

.contact-side{
  display:grid;
  gap: 25px;
  position:sticky;
  top: 92px;
  height: fit-content;
}
@media (max-width: 640px){
  .contact-side{ position:relative; top:auto; }
}
.people{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 14px;
}
.person{
  border: 1px solid rgba(245,244,241,0.22);
  border-radius: 12px;
  padding: 12px;
}
.name{ font-weight:600; }
.role{ color: rgba(245,244,241,0.72); font-size: 13px; margin-top: 4px; }

.inline-bullets{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  display:grid;
  gap: 8px;
  color: rgba(245,244,241,0.80);
}
.inline-bullets li::before{
  content: "•";
  margin-right: 10px;
  color: rgba(245,244,241,0.55);
}

.contact-card{
  background: rgba(11,11,12,0.72);
  border: 1px solid rgba(245,244,241,0.24);
  border-radius: var(--radius);
  padding: 18px;
  position:relative;
  height: fit-content;
}
.contact-card h4{
  margin:0 0 10px;
  font-family: var(--serif);
  font-weight:500;
}
.contact-block{
  border-top: 1px solid rgba(245,244,241,0.20);
  padding-top: 12px;
}
.contact-label{
  font-weight:600;
  margin-bottom: 6px;
}
.contact-value{
  color: rgba(245,244,241,0.82);
  margin: 6px 0;
}
.contact-link{
  color: rgba(245,244,241,0.92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(245,244,241,0.20);
  color: rgba(245,244,241,0.60);
  font-size: 12px;
}

/* Footer */
.footer{
  padding: 24px 0;
  border-top:1px solid var(--hairline);
  background: var(--bg);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  color: var(--muted);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 640px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  .hero-grid{ grid-template-columns: 1fr; }
  .section-grid{ grid-template-columns: 1fr; }
  .section-head{ position:relative; top:auto; }
  .editorial{ grid-template-columns: 1fr; }
  .cards-3{ grid-template-columns: 1fr; }
  .cards-2{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .two-panels{ grid-template-columns: 1fr; }
  .tiles{ grid-template-columns: 1fr; }
  .hood-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-card{ position:relative; top:auto; }
  .people{ grid-template-columns: 1fr; }
}