:root{  --bg:#0a0a0a;  --fg:#f7f7f7;  --muted:#cfcfcf;  --line:#2a2a2a;  --pad:20px;  --maxw:1200px;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Neue Haas Grotesk Display Pro", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
body{background:#111;color:var(--fg);line-height:1.5}

/* Subtle depthy background layers */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 80% at 10%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  mix-blend-mode: soft-light;
  opacity: 0.9;
  z-index: 0;
}
/* gentle vignette for focus */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(120% 100% at 50% -10%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.28) 80%);
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference){
  body::before{
    animation: bg-float 18s ease-in-out infinite alternate;
    background-size: 120% 120%, 120% 120%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 50% 0%;
  }
  @keyframes bg-float{
    0%{ background-position: 0% 0%, 100% 100%, 50% 0%; }
    100%{ background-position: 10% 5%, 90% 95%, 50% 0%; }
  }
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(
    to bottom,
    rgba(17,17,17,0.8) 0%,
    rgba(17,17,17,0.7) 50%,
    rgba(17,17,17,0.6) 100%
  );
  -webkit-backdrop-filter: blur(8px);        /* Safari */
  backdrop-filter: blur(8px);                /* other browsers */
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
nav a{color:var(--fg);text-decoration:none;font-weight:600;margin-left:18px;padding:20px 0}
.logoWord{font-weight:800;letter-spacing:-.02em;font-size:22px}
.hero{padding:88px 0 120px}
.logoHuge{font-weight:800;font-size:clamp(40px,10vw,96px);letter-spacing:-.02em}
.lead{max-width:750px;font-size:clamp(18px,2.6vw,26px);color:var(--muted);margin-top:16px}
.ctaRow{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border:1px solid var(--fg);text-decoration:none;color:var(--fg);border-radius:8px}
.pill{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grid{display:grid;gap:20px}
.divider{height:1px;background:var(--line);margin:40px 0}
.box{background:#191919;border:1px dashed #383838;border-radius:12px;min-height:160px;display:flex;align-items:center;justify-content:center;color:#8f8f8f}
.workGrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#161616;transition:transform .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-2px);border-color:#3a3a3a}
.card img{width:100%;height:180px;object-fit:cover;display:block;background:#222}
.card .pad{padding:14px}
.servicesGrid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.service{padding:18px;border:1px solid var(--line);border-radius:14px}
.service h3{margin:0 0 8px 0;font-size:18px}
.about{display:grid;gap:28px;grid-template-columns:1.2fr 1fr}
@media (max-width: 900px){.about{grid-template-columns:1fr}}
.clientsRow{display:flex;flex-wrap:wrap;gap:18px}
.client{padding:10px 14px;border:1px dashed var(--line);border-radius:8px;color:#9a9a9a}
.contactGrid{display:grid;gap:20px;grid-template-columns:1.2fr 1fr}
@media (max-width: 900px){.contactGrid{grid-template-columns:1fr}}
small{color:#8a8a8a}
.fade{opacity:0;transform:translateY(8px);animation:fade .5s ease forwards}
@keyframes fade{to{opacity:1;transform:none}}
form input, form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid var(--line);background:#151515;color:#eee;margin-top:8px}
form button{margin-top:12px}
form button{
  background: transparent;        /* no white fill */
  color: var(--fg);               /* readable text */
  border: 1px solid var(--fg);    /* visible outline */
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
}
form button:hover{ opacity:.9; }
#section { padding:120px 0; }

/* Force larger gap between sections */
section.container + section.container{
  margin-top:60px;
  border-top:1px solid var(--line);
  padding-top:60px;
}
#work { margin-top: 140px; }
@media (max-width: 900px){
  section{ padding:72px 0; }
}
@font-face{
  font-family:"Neue Haas Grotesk Display Pro";
  src: url("./fonts/NHaasGroteskDisplayPro.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}


#clients .clientsBand{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 40px; /* clearer gap under "Selected clients" */
  overflow: hidden;
}
#clients .pill{ margin-bottom:8px; }
  #clients .clientsRow{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  }
  .clientBadge{
    display:flex; align-items:center; justify-content:center;
    background:#f2f2f2;           /* light plate for dark/translucent logos */
    border-radius:10px;
    padding:16px 22px;
    min-height:108px;
  }
  .clientLogo{ height:72px; max-width:260px; object-fit:contain; display:block; }
  @media (max-width:900px){
    .clientLogo{ height:56px; max-width:220px; }
    .clientBadge{ min-height:92px; padding:14px 18px; }
  }


/* Bigger logos */
.clientLogo{ height:72px; max-width:260px; object-fit:contain; display:block; }
.clientBadge{ min-height:108px; padding:16px 22px; }
@media (max-width:900px){
  .clientLogo{ height:56px; max-width:220px; }
  .clientBadge{ min-height:92px; padding:14px 18px; }
}

/* --- TEMP: hide Selected Work on homepage --- */
#work{ display:none !important; }


/* Footer breathing room */
footer{
  padding: 72px 0 120px;   /* space above separator and bottom edge */
  border-top: 1px solid var(--line);
  color: #8a8a8a;
}


/* Selected clients – guaranteed spacing under the title */
#clients .pill{
  display: inline-block;
  margin: 0 0 20px 0 !important; /* make the label breathe */
  line-height: 1.2;
}

/* Add extra gap from the label to the band (works even if margins collapse) */
#clients .pill + .clientsBand{
  margin-top: 32px !important;   /* bump to 32px/40px if you want more */
}

/* Optional: larger gap on desktop only */
@media (min-width: 90px){
  #clients .pill + .clientsBand{
    margin-top: 0px !important;
  }
}

/* Guaranteed spacing: wrapper avoids margin-collapse */
#clients .clientsBlock{
  display:flex;
  flex-direction:column;
  row-gap: 36px;   /* <-- change to 28/44px to taste */
}